diff --git a/app/page.tsx b/app/page.tsx index 343b3cf..469c337 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -13,101 +13,16 @@ import { LoadingOverlay } from '@ciphera-net/ui' import SiteList from '@/components/sites/SiteList' import DeleteSiteModal from '@/components/sites/DeleteSiteModal' import { Button } from '@ciphera-net/ui' -import Image from 'next/image' -import { BarChartIcon, LockIcon, ZapIcon, CheckCircleIcon, XIcon, GlobeIcon } from '@ciphera-net/ui' +import { XIcon, GlobeIcon } from '@ciphera-net/ui' import { Cookie, ShieldCheck, Code, Lightning, ArrowRight, GithubLogo } from '@phosphor-icons/react' +import FeatureSections from '@/components/marketing/FeatureSections' +import ComparisonCards from '@/components/marketing/ComparisonCards' +import CTASection from '@/components/marketing/CTASection' import { toast } from '@ciphera-net/ui' import { getAuthErrorMessage } from '@ciphera-net/ui' import { getSitesLimitForPlan } from '@/lib/plans' import { formatDate } from '@/lib/utils/formatDate' -function DashboardPreview() { - return ( -
- - {/* * Browser chrome */} -
-
-
-
-
-
- - {/* * Screenshot with bottom fade */} -
- Pulse analytics dashboard showing visitor stats, charts, top pages, referrers, locations, and technology breakdown -
-
- -
- ) -} - - -function ComparisonSection() { - return ( -
-
-

Why choose Pulse?

-

The lightweight, privacy-friendly alternative.

-
- -
- - - - - - - - - - {[ - { feature: "Cookie Banner Required", pulse: false, ga: true }, - { feature: "GDPR Compliant", pulse: true, ga: "Complex" }, - { feature: "Script Size", pulse: "< 1 KB", ga: "45 KB+" }, - { feature: "Data Ownership", pulse: "Yours", ga: "Google's" }, - ].map((row) => ( - - - - - - ))} - -
FeaturePulseGoogle Analytics
{row.feature} - {row.pulse === true ? ( - - ) : row.pulse === false ? ( - No - ) : ( - {row.pulse} - )} - - {row.ga === true ? ( - Yes - ) : ( - {row.ga} - )} -
-
-
- ) -} - - type SiteStatsMap = Record export default function HomePage() { @@ -304,53 +219,9 @@ export default function HomePage() {
- {/* Existing content below hero */} -
- - - {/* Glass cards */} -
- {[ - { icon: LockIcon, title: "Privacy First", desc: "We don't track personal data. No IP addresses, no fingerprints, no cookies." }, - { icon: BarChartIcon, title: "Simple Insights", desc: "Get the metrics that matter without the clutter. Page views, visitors, and sources." }, - { icon: ZapIcon, title: "Lightweight", desc: "Our script is less than 1kb. It won't slow down your site or affect your SEO." } - ].map((feature, i) => ( - -
- -
-

{feature.title}

-

- {feature.desc} -

- - ))} -
- - - - {/* Bottom CTA */} - -

Ready to switch?

- -

No credit card required • Cancel anytime

- -
+ + + ) } diff --git a/components/marketing/CTASection.tsx b/components/marketing/CTASection.tsx new file mode 100644 index 0000000..1cc3d3f --- /dev/null +++ b/components/marketing/CTASection.tsx @@ -0,0 +1,47 @@ +'use client' + +import { motion } from 'framer-motion' +import { ArrowRight } from '@phosphor-icons/react' +import { Button } from '@ciphera-net/ui' +import { initiateOAuthFlow } from '@/lib/api/oauth' +import Link from 'next/link' + +export default function CTASection() { + return ( +
+
+ + {/* Atmosphere inside card */} +
+
+
+ +
+

+ Start tracking with privacy. +

+

+ Join thousands of developers who respect their users' privacy while getting the insights they need. +

+
+ + + + +
+
+ +
+
+ ) +} diff --git a/components/marketing/ComparisonCards.tsx b/components/marketing/ComparisonCards.tsx new file mode 100644 index 0000000..e0ef960 --- /dev/null +++ b/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 ( +
+
+ +

+ How Pulse compares. +

+

+ Privacy-first analytics doesn't mean less insight. See how Pulse stacks up. +

+ + +
+ {/* Pulse — highlighted */} + +
+
+ Pulse +
+

Pulse

+

Privacy-first analytics

+
+
+
    + {pulseFeatures.map((f) => ( +
  • + + {f.label} +
    • + ))} +
+ + + {/* Google Analytics — muted */} + +
+
+ 📊 +
+
+

Google Analytics

+

Traditional tracking

+
+
+
    + {gaFeatures.map((f) => ( +
  • + {f.has ? ( + + ) : ( + + )} + {f.label} +
    • + ))} +
+ +
+
+
+ ) +} diff --git a/components/marketing/FeatureSections.tsx b/components/marketing/FeatureSections.tsx new file mode 100644 index 0000000..b90eec0 --- /dev/null +++ b/components/marketing/FeatureSections.tsx @@ -0,0 +1,267 @@ +'use client' + +import { motion } from 'framer-motion' +import Image from 'next/image' +import { Check } from '@phosphor-icons/react' + +// Section wrapper component for reuse +function FeatureSection({ + id, + heading, + description, + features, + mockup, + reverse = false, +}: { + id: string + heading: string + description: string + features: string[] + mockup: React.ReactNode + reverse?: boolean +}) { + return ( +
+
+ {/* Text */} + +

+ {heading} +

+

+ {description} +

+
    + {features.map((item) => ( +
  • + + {item} +
    • + ))} +
+ + + {/* Mockup container */} + +
+
+ {mockup} +
+ +
+
+ ) +} + +export default function FeatureSections() { + return ( +
+ {/* Section 1: Dashboard — text left, mockup right */} + + Pulse analytics dashboard +
+ } + /> + + {/* Section 2: Visitors — mockup left, text right */} + +
+ {/* Mini mockup: top pages bars */} + {[ + { page: '/blog/privacy-guide', pct: 85 }, + { page: '/docs/getting-started', pct: 65 }, + { page: '/pricing', pct: 45 }, + { page: '/about', pct: 30 }, + ].map((item) => ( +
+
+ {item.page} + {item.pct}% +
+
+
+
+
+ ))} +
+
+ } + /> + + {/* Section 3: Funnels — text left, mockup right */} + + {/* Simple funnel visualization */} +
+ {[ + { label: 'Landing Page', value: '2,847', pct: 100, color: 'bg-brand-orange' }, + { label: 'Sign Up Page', value: '1,423', pct: 50, color: 'bg-brand-orange/80' }, + { label: 'Onboarding', value: '856', pct: 30, color: 'bg-brand-orange/60' }, + { label: 'Activated', value: '412', pct: 14.5, color: 'bg-brand-orange/40' }, + ].map((step, i) => ( +
+
+ {step.value} +
+

{step.label}

+ {i < 3 && ( +

↓ {Math.round((1 - [1, 0.5, 0.3, 0.145][i + 1] / [1, 0.5, 0.3, 0.145][i]) * 100)}% drop-off

+ )} +
+ ))} +

Overall conversion: 14.5%

+
+
+ } + /> + + {/* Section 4: Reports — mockup left, text right */} + + {/* Email mockup */} +
+
+
+ P +
+
+

Pulse Daily Report

+

yoursite.com

+
+
+
+ {[ + { label: 'Visitors', value: '1,247', change: '+12%' }, + { label: 'Pageviews', value: '3,891', change: '+8%' }, + { label: 'Bounce Rate', value: '42%', change: '-3%' }, + { label: 'Avg Duration', value: '2m 34s', change: '+15%' }, + ].map((stat) => ( +
+

{stat.label}

+

{stat.value}

+

{stat.change}

+
+ ))} +
+

Delivered every day at 09:00

+
+
+ } + /> + + {/* Section 5: Script — text left, code block right */} + + {/* Code block with browser chrome */} +
+
+
+
+
+
+ index.html +
+ 
+              
+                {''}{'\n'}
+                {'<'}
+                script{'\n'}
+                {'  '}defer{'\n'}
+                {'  '}data-domain="yoursite.com"{'\n'}
+                {'  '}src="https://pulse.ciphera.net/js/script.js"{'\n'}
+                {'>'}
+                {'
+                script
+                {'>'}
+              
+
+
+ 1.6 KB gzipped + + + Non-blocking, async + +
+
+ } + /> +
+ ) +}