211 lines
8.1 KiB
TypeScript
211 lines
8.1 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { Check } from '@phosphor-icons/react'
|
|
import { PulseMockup } from './mockups/pulse-mockup'
|
|
import { PulseFeaturesCarousel } from './mockups/pulse-features-carousel'
|
|
import { FunnelMockup } from './mockups/funnel-mockup'
|
|
import { EmailReportMockup } from './mockups/email-report-mockup'
|
|
|
|
// Section wrapper component for reuse
|
|
function FeatureSection({
|
|
id,
|
|
heading,
|
|
description,
|
|
features,
|
|
mockup,
|
|
reverse = false,
|
|
showBg = true,
|
|
}: {
|
|
id: string
|
|
heading: string
|
|
description: string
|
|
features: string[]
|
|
mockup: React.ReactNode
|
|
reverse?: boolean
|
|
showBg?: boolean
|
|
}) {
|
|
return (
|
|
<section id={id} className="container mx-auto px-6 scroll-mt-28">
|
|
<div className={`grid lg:grid-cols-2 gap-12 lg:gap-20 items-center`}>
|
|
{/* Text */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5 }}
|
|
className={reverse ? 'lg:order-last' : ''}
|
|
>
|
|
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight mb-6">
|
|
{heading}
|
|
</h2>
|
|
<p className="text-lg text-neutral-400 leading-relaxed mb-6">
|
|
{description}
|
|
</p>
|
|
<ul className="space-y-3 mb-8">
|
|
{features.map((item) => (
|
|
<li key={item} className="flex gap-3 text-neutral-300">
|
|
<Check weight="bold" className="w-5 h-5 text-brand-orange mt-0.5 shrink-0" />
|
|
<span>{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
|
|
{/* Mockup container */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
className={`relative ${reverse ? 'lg:order-first' : ''}`}
|
|
>
|
|
{showBg && <div className="absolute -inset-8 bg-brand-orange/8 rounded-[2.5rem] blur-3xl" />}
|
|
<div className={`relative rounded-3xl overflow-hidden border border-white/[0.08] ${showBg ? '' : 'bg-neutral-900/80'}`}>
|
|
{showBg && (
|
|
<>
|
|
<img src="/pulse-showcase-bg.png" alt="" className="absolute inset-0 w-full h-full object-cover" />
|
|
<div className="absolute inset-0 bg-black/30" />
|
|
</>
|
|
)}
|
|
<div className="relative">
|
|
{mockup}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default function FeatureSections() {
|
|
return (
|
|
<div className="py-20 lg:py-32 space-y-28">
|
|
{/* Section 1: Dashboard — text left, mockup right */}
|
|
<FeatureSection
|
|
id="dashboard"
|
|
heading="Your traffic, at a glance."
|
|
description="Get a clear, real-time overview of your website's performance without the clutter of traditional analytics tools."
|
|
features={[
|
|
'Live visitor count with real-time updates',
|
|
'Hourly, daily, weekly, and monthly trends',
|
|
'Referrer sources and UTM campaign tracking',
|
|
'Country-level geographic breakdown',
|
|
]}
|
|
mockup={
|
|
<div className="p-6 sm:p-10">
|
|
<PulseMockup />
|
|
</div>
|
|
}
|
|
/>
|
|
|
|
{/* Section 2: Visitors — mockup left, text right */}
|
|
<FeatureSection
|
|
id="visitors"
|
|
heading="Everything you need to know about your visitors."
|
|
description="Understand where your traffic comes from, what content resonates, and how visitors interact with your site — all without compromising their privacy."
|
|
features={[
|
|
'Top pages ranked by views and unique visitors',
|
|
'Referrer breakdown with source attribution',
|
|
'Browser, OS, and device analytics',
|
|
'Peak hours heatmap for optimal publishing',
|
|
]}
|
|
reverse
|
|
mockup={
|
|
<div className="p-6 sm:p-10 min-h-[500px] flex items-center">
|
|
<div className="w-full">
|
|
<PulseFeaturesCarousel />
|
|
</div>
|
|
</div>
|
|
}
|
|
/>
|
|
|
|
{/* Section 3: Funnels — text left, mockup right */}
|
|
<FeatureSection
|
|
id="funnels"
|
|
heading="See where visitors drop off."
|
|
description="Build custom conversion funnels to understand your user journey. Identify bottlenecks and optimize your conversion flow."
|
|
features={[
|
|
'Multi-step funnels with conversion rates',
|
|
'Drop-off analysis between each step',
|
|
'Conversion trends over time',
|
|
'Breakdown by device, country, or referrer',
|
|
'Configurable conversion window (up to 90 days)',
|
|
]}
|
|
mockup={
|
|
<div className="p-6 sm:p-10">
|
|
<FunnelMockup />
|
|
</div>
|
|
}
|
|
/>
|
|
|
|
{/* Section 4: Reports — mockup left, text right */}
|
|
<FeatureSection
|
|
id="reports"
|
|
heading="Reports delivered to your inbox."
|
|
description="Get automated summaries of your site's performance without logging into a dashboard. Stay informed effortlessly."
|
|
features={[
|
|
'Daily, weekly, or monthly email summaries',
|
|
'Key metrics with period-over-period comparison',
|
|
'Top pages, referrers, and country breakdown',
|
|
'Webhook delivery for custom integrations',
|
|
'Multiple recipients per report',
|
|
]}
|
|
reverse
|
|
mockup={
|
|
<div className="p-6 sm:p-10">
|
|
<EmailReportMockup />
|
|
</div>
|
|
}
|
|
/>
|
|
|
|
{/* Section 5: Script — text left, code block right (no showcase bg) */}
|
|
<FeatureSection
|
|
id="script"
|
|
showBg={false}
|
|
heading="One script tag. That's it."
|
|
description="No npm packages, no build steps, no configuration files. Add a single line to your HTML and start collecting privacy-respecting analytics instantly."
|
|
features={[
|
|
'Under 2KB gzipped — 20x smaller than Google Analytics',
|
|
'Async loading with defer — never blocks rendering',
|
|
'Works with any framework or static site',
|
|
]}
|
|
mockup={
|
|
<div className="p-0">
|
|
{/* Code block with browser chrome */}
|
|
<div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
|
|
<div className="flex gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-red-500/20" />
|
|
<div className="w-3 h-3 rounded-full bg-yellow-500/20" />
|
|
<div className="w-3 h-3 rounded-full bg-green-500/20" />
|
|
</div>
|
|
<span className="ml-4 text-xs text-neutral-400 font-mono">index.html</span>
|
|
</div>
|
|
<pre className="p-6 overflow-x-auto">
|
|
<code className="font-mono text-sm text-neutral-300">
|
|
<span className="text-neutral-500">{'<!-- Add before </head> -->'}</span>{'\n'}
|
|
<span className="text-blue-400">{'<'}</span>
|
|
<span className="text-blue-400">script</span>{'\n'}
|
|
{' '}<span className="text-sky-300">defer</span>{'\n'}
|
|
{' '}<span className="text-sky-300">data-domain</span>=<span className="text-orange-300">"yoursite.com"</span>{'\n'}
|
|
{' '}<span className="text-sky-300">src</span>=<span className="text-orange-300">"https://pulse.ciphera.net/js/script.js"</span>{'\n'}
|
|
<span className="text-blue-400">{'>'}</span>
|
|
<span className="text-blue-400">{'</'}</span>
|
|
<span className="text-blue-400">script</span>
|
|
<span className="text-blue-400">{'>'}</span>
|
|
</code>
|
|
</pre>
|
|
<div className="flex items-center gap-4 px-6 py-3 border-t border-neutral-800 text-xs text-neutral-500">
|
|
<span>1.6 KB gzipped</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-green-500" />
|
|
Non-blocking, async
|
|
</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|