112 lines
4.4 KiB
TypeScript
112 lines
4.4 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import Image from 'next/image'
|
|
import { Check, X } from '@phosphor-icons/react'
|
|
|
|
const pulseFeatures = [
|
|
{ label: 'No cookies required', has: true },
|
|
{ label: 'GDPR compliant by default', has: true },
|
|
{ label: 'No consent banner needed', has: true },
|
|
{ label: 'Open source client', has: true },
|
|
{ label: 'Script under 2KB', has: true },
|
|
{ label: 'Swiss infrastructure', has: true },
|
|
{ label: 'No cross-site tracking', has: true },
|
|
{ label: 'Free tier available', has: true },
|
|
{ label: 'Real-time dashboard', has: true },
|
|
]
|
|
|
|
const gaFeatures = [
|
|
{ label: 'Requires cookies', has: false },
|
|
{ label: 'GDPR requires configuration', has: false },
|
|
{ label: 'Consent banner required', has: false },
|
|
{ label: 'Closed source', has: false },
|
|
{ label: 'Script over 45KB', has: false },
|
|
{ label: 'US infrastructure', has: false },
|
|
{ label: 'Cross-site tracking', has: false },
|
|
{ label: 'Free tier available', has: true },
|
|
{ label: 'Real-time dashboard', has: true },
|
|
]
|
|
|
|
export default function ComparisonCards() {
|
|
return (
|
|
<section className="py-20 lg:py-32 border-t border-white/[0.04]">
|
|
<div className="container mx-auto px-6">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight mb-4">
|
|
How Pulse compares.
|
|
</h2>
|
|
<p className="text-lg text-neutral-400 max-w-2xl mx-auto">
|
|
Privacy-first analytics doesn't mean less insight. See how Pulse stacks up.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
|
{/* Pulse — highlighted */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: 0.1 }}
|
|
className="rounded-xl border border-brand-orange/20 bg-neutral-900/80 p-8 relative overflow-hidden"
|
|
>
|
|
<div className="absolute top-0 left-0 right-0 h-[3px] bg-brand-orange" />
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Image src="/pulse_icon_no_margins.png" alt="Pulse" width={40} height={40} className="rounded-lg" unoptimized />
|
|
<div>
|
|
<h3 className="text-xl font-bold text-white">Pulse</h3>
|
|
<p className="text-xs text-brand-orange">Privacy-first analytics</p>
|
|
</div>
|
|
</div>
|
|
<ul className="space-y-4">
|
|
{pulseFeatures.map((f) => (
|
|
<li key={f.label} className="flex items-center gap-3">
|
|
<Check weight="bold" className="w-5 h-5 text-brand-orange shrink-0" />
|
|
<span className="text-neutral-300 text-sm">{f.label}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
|
|
{/* Google Analytics — muted */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
className="rounded-xl border border-white/[0.08] bg-neutral-900/80 p-8"
|
|
>
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="w-10 h-10 rounded-lg bg-neutral-800 flex items-center justify-center text-lg">
|
|
📊
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-bold text-white">Google Analytics</h3>
|
|
<p className="text-xs text-neutral-500">Traditional tracking</p>
|
|
</div>
|
|
</div>
|
|
<ul className="space-y-4">
|
|
{gaFeatures.map((f) => (
|
|
<li key={f.label} className="flex items-center gap-3">
|
|
{f.has ? (
|
|
<Check weight="bold" className="w-5 h-5 text-green-500 shrink-0" />
|
|
) : (
|
|
<X weight="bold" className="w-5 h-5 text-red-500 shrink-0" />
|
|
)}
|
|
<span className="text-neutral-400 text-sm">{f.label}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|