feat: split checkout layout with auto-cycling feature slideshow

components/checkout/FeatureSlideshow.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import Image from 'next/image'
+import { AnimatePresence, motion } from 'framer-motion'
+import { Check } from '@phosphor-icons/react'
+import { PulseMockup } from '@/components/marketing/mockups/pulse-mockup'
+import { PulseFeaturesCarousel } from '@/components/marketing/mockups/pulse-features-carousel'
+import { FunnelMockup } from '@/components/marketing/mockups/funnel-mockup'
+import { EmailReportMockup } from '@/components/marketing/mockups/email-report-mockup'
+
+interface Slide {
+  headline: string
+  description: string
+  features: string[]
+  mockup: React.ReactNode
+}
+
+const slides: Slide[] = [
+  {
+    headline: 'Your traffic, at a glance.',
+    description:
+      'A clean, real-time dashboard that shows pageviews, visitors, bounce rate, and session duration — no learning curve required.',
+    features: [
+      'Real-time visitor count',
+      'Pageview trends over time',
+      'Bounce rate & session duration',
+      'Top pages & referrers',
+    ],
+    mockup: <PulseMockup />,
+  },
+  {
+    headline: 'Everything you need to know about your visitors.',
+    description:
+      'Break down your audience by device, browser, OS, country, and language — all without cookies or fingerprinting.',
+    features: [
+      'Device & browser breakdown',
+      'Country & region stats',
+      'Language preferences',
+      'Screen size distribution',
+    ],
+    mockup: <PulseFeaturesCarousel />,
+  },
+  {
+    headline: 'See where visitors drop off.',
+    description:
+      'Build funnels to track multi-step flows and find exactly where users abandon your conversion paths.',
+    features: [
+      'Multi-step funnel builder',
+      'Drop-off visualization',
+      'Conversion rate tracking',
+      'Custom event support',
+    ],
+    mockup: <FunnelMockup />,
+  },
+  {
+    headline: 'Reports delivered to your inbox.',
+    description:
+      'Schedule weekly or monthly email reports so your team stays informed without logging in.',
+    features: [
+      'Weekly & monthly digests',
+      'Customizable metrics',
+      'Team-wide distribution',
+      'PDF & inline previews',
+    ],
+    mockup: <EmailReportMockup />,
+  },
+]
+
+export default function FeatureSlideshow() {
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  const advance = useCallback(() => {
+    setActiveIndex((prev) => (prev + 1) % slides.length)
+  }, [])
+
+  useEffect(() => {
+    const timer = setInterval(advance, 5000)
+    return () => clearInterval(timer)
+  }, [advance])
+
+  const slide = slides[activeIndex]
+
+  return (
+    <div className="relative h-full w-full">
+      {/* Background image */}
+      <Image
+        src="/pulse-showcase-bg.png"
+        alt=""
+        fill
+        unoptimized
+        className="object-cover"
+        priority
+      />
+
+      {/* Dark overlay */}
+      <div className="absolute inset-0 bg-black/40" />
+
+      {/* Content */}
+      <div className="relative z-10 flex h-full flex-col justify-center px-10 xl:px-14 py-12">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={activeIndex}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.45 }}
+            className="flex flex-col gap-8"
+          >
+            {/* Text */}
+            <div>
+              <h2 className="text-3xl xl:text-4xl font-bold text-white leading-tight">
+                {slide.headline}
+              </h2>
+              <p className="mt-3 text-neutral-400 text-sm xl:text-base leading-relaxed max-w-md">
+                {slide.description}
+              </p>
+
+              <ul className="mt-5 space-y-2.5">
+                {slide.features.map((f) => (
+                  <li key={f} className="flex items-center gap-2.5 text-sm text-neutral-300">
+                    <Check weight="bold" className="h-4 w-4 shrink-0 text-brand-orange" />
+                    {f}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Mockup */}
+            <div className="relative">
+              {/* Orange glow */}
+              <div className="absolute -inset-8 rounded-3xl bg-brand-orange/8 blur-3xl pointer-events-none" />
+
+              <div className="relative rounded-2xl border border-white/[0.08] overflow-hidden">
+                {slide.mockup}
+              </div>
+            </div>
+          </motion.div>
+        </AnimatePresence>
+
+        {/* Dot indicators */}
+        <div className="mt-8 flex items-center gap-2">
+          {slides.map((_, i) => (
+            <button
+              key={i}
+              type="button"
+              onClick={() => setActiveIndex(i)}
+              className={`h-2 rounded-full transition-all duration-300 ${
+                i === activeIndex
+                  ? 'w-6 bg-brand-orange'
+                  : 'w-2 bg-white/25 hover:bg-white/40'
+              }`}
+              aria-label={`Go to slide ${i + 1}`}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}