feat: add feature sections, comparison cards, and CTA components for landing page

components/marketing/ComparisonCards.tsx

@@ -0,0 +1,111 @@
+'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&apos;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>
+  )
+}