This commit is contained in:
Timo Knuth
@@ -1,19 +1,42 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import dynamic from 'next/dynamic'
|
||||
import Link from 'next/link'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ThemeToggle } from '@/components/ui/ThemeToggle'
|
||||
import { HeroSection, UseCaseShowcase, HowItWorks, Differentiators, SocialProof, FinalCTA } from '@/components/landing/LandingSections'
|
||||
import { LiveStatsBar } from '@/components/landing/LiveStatsBar'
|
||||
import { PricingComparison } from '@/components/landing/PricingComparison'
|
||||
import { SectionDivider } from '@/components/landing/MagneticElements'
|
||||
import { HeroSection } from '@/components/landing/LandingSections'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { Check, ChevronDown, Monitor, Globe, Shield, Clock, Zap, Menu } from 'lucide-react'
|
||||
|
||||
// Dynamic imports for performance optimization (lazy loading)
|
||||
const UseCaseShowcase = dynamic(
|
||||
() => import('@/components/landing/LandingSections').then(mod => ({ default: mod.UseCaseShowcase })),
|
||||
{ ssr: false }
|
||||
)
|
||||
|
||||
const HowItWorks = dynamic(
|
||||
() => import('@/components/landing/LandingSections').then(mod => ({ default: mod.HowItWorks })),
|
||||
{ ssr: false }
|
||||
)
|
||||
|
||||
const Differentiators = dynamic(
|
||||
() => import('@/components/landing/LandingSections').then(mod => ({ default: mod.Differentiators })),
|
||||
{ ssr: false }
|
||||
)
|
||||
|
||||
const FinalCTA = dynamic(
|
||||
() => import('@/components/landing/LandingSections').then(mod => ({ default: mod.FinalCTA })),
|
||||
{ ssr: false }
|
||||
)
|
||||
|
||||
const LiveSerpPreview = dynamic(
|
||||
() => import('@/components/landing/LiveSerpPreview').then(mod => ({ default: mod.LiveSerpPreview })),
|
||||
{ ssr: false }
|
||||
)
|
||||
|
||||
export default function Home() {
|
||||
const [openFaq, setOpenFaq] = useState<number | null>(null)
|
||||
const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'yearly'>('monthly')
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
const [scrollProgress, setScrollProgress] = useState(0)
|
||||
|
||||
@@ -62,7 +85,7 @@ export default function Home() {
|
||||
</Link>
|
||||
<nav className="hidden items-center gap-6 md:flex">
|
||||
<Link href="#features" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Features</Link>
|
||||
<Link href="#pricing" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Pricing</Link>
|
||||
<Link href="#use-cases" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Use Cases</Link>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -96,7 +119,7 @@ export default function Home() {
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
<Link href="#features" onClick={() => setMobileMenuOpen(false)} className="text-sm font-medium text-muted-foreground hover:text-foreground">Features</Link>
|
||||
<Link href="#pricing" onClick={() => setMobileMenuOpen(false)} className="text-sm font-medium text-muted-foreground hover:text-foreground">Pricing</Link>
|
||||
<Link href="#use-cases" onClick={() => setMobileMenuOpen(false)} className="text-sm font-medium text-muted-foreground hover:text-foreground">Use Cases</Link>
|
||||
<button
|
||||
onClick={() => {
|
||||
setMobileMenuOpen(false)
|
||||
@@ -122,187 +145,18 @@ export default function Home() {
|
||||
{/* Hero Section */}
|
||||
<HeroSection />
|
||||
|
||||
{/* Live Stats Bar */}
|
||||
<LiveStatsBar />
|
||||
{/* Live SERP Preview Tool */}
|
||||
<LiveSerpPreview />
|
||||
|
||||
{/* Use Case Showcase */}
|
||||
<UseCaseShowcase />
|
||||
|
||||
{/* Section Divider: Use Cases -> How It Works */}
|
||||
<SectionDivider variant="wave" toColor="section-bg-4" />
|
||||
|
||||
{/* How It Works */}
|
||||
<HowItWorks />
|
||||
|
||||
{/* Differentiators */}
|
||||
<Differentiators />
|
||||
|
||||
{/* Section Divider: Differentiators -> Pricing */}
|
||||
<SectionDivider variant="curve" toColor="section-bg-6" />
|
||||
|
||||
{/* Pricing Comparison */}
|
||||
<PricingComparison />
|
||||
|
||||
{/* Social Proof */}
|
||||
<SocialProof />
|
||||
|
||||
{/* Pricing Section */}
|
||||
< section id="pricing" className="border-t border-border/40 bg-[hsl(var(--section-bg-2))] py-24" >
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl text-foreground">
|
||||
Simple pricing, no hidden fees
|
||||
</h2>
|
||||
<p className="mb-8 text-lg text-muted-foreground">
|
||||
Start for free and scale as you grow. Change plans anytime.
|
||||
</p>
|
||||
<div className="inline-flex items-center rounded-full bg-background p-1.5 shadow-sm border border-border">
|
||||
<button
|
||||
onClick={() => setBillingPeriod('monthly')}
|
||||
className={`rounded-full px-6 py-2 text-sm font-medium transition-all duration-200 ${billingPeriod === 'monthly' ? 'bg-foreground text-background shadow' : 'text-muted-foreground hover:bg-secondary/50'
|
||||
}`}
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setBillingPeriod('yearly')}
|
||||
className={`rounded-full px-6 py-2 text-sm font-medium transition-all duration-200 ${billingPeriod === 'yearly' ? 'bg-foreground text-background shadow' : 'text-muted-foreground hover:bg-secondary/50'
|
||||
}`}
|
||||
>
|
||||
Yearly <span className="ml-1 text-[10px] opacity-80">(Save 20%)</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-3 max-w-6xl mx-auto">
|
||||
{/* Starter Plan */}
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="rounded-3xl border border-border bg-card p-8 shadow-sm hover:shadow-xl hover:border-primary/20 transition-all"
|
||||
>
|
||||
<h3 className="mb-2 text-xl font-bold text-foreground">Starter</h3>
|
||||
<p className="text-sm text-muted-foreground mb-6">Perfect for side projects</p>
|
||||
<div className="mb-8">
|
||||
<span className="text-5xl font-bold tracking-tight text-foreground">$0</span>
|
||||
<span className="text-muted-foreground ml-2">/mo</span>
|
||||
</div>
|
||||
<ul className="mb-8 space-y-4">
|
||||
<li className="flex items-center gap-3 text-sm text-foreground">
|
||||
<div className="h-5 w-5 rounded-full bg-secondary flex items-center justify-center text-primary">
|
||||
<Check className="h-3 w-3" />
|
||||
</div>
|
||||
3 monitors
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-sm text-foreground">
|
||||
<div className="h-5 w-5 rounded-full bg-secondary flex items-center justify-center text-primary">
|
||||
<Check className="h-3 w-3" />
|
||||
</div>
|
||||
Hourly checks
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-sm text-foreground">
|
||||
<div className="h-5 w-5 rounded-full bg-secondary flex items-center justify-center text-primary">
|
||||
<Check className="h-3 w-3" />
|
||||
</div>
|
||||
Email alerts
|
||||
</li>
|
||||
</ul>
|
||||
<Button variant="outline" className="w-full rounded-xl h-11 border-border hover:bg-secondary/50 hover:text-foreground">
|
||||
Get Started
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
{/* Pro Plan */}
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="relative rounded-3xl border-2 border-primary bg-card p-8 shadow-2xl shadow-primary/10 z-10 scale-105"
|
||||
>
|
||||
<div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-primary px-4 py-1 text-xs font-bold text-primary-foreground shadow-lg">
|
||||
MOST POPULAR
|
||||
</div>
|
||||
<h3 className="mb-2 text-xl font-bold text-foreground">Pro</h3>
|
||||
<p className="text-sm text-muted-foreground mb-6">For serious businesses</p>
|
||||
<div className="mb-8">
|
||||
<span className="text-5xl font-bold tracking-tight text-foreground">${billingPeriod === 'monthly' ? '29' : '24'}</span>
|
||||
<span className="text-muted-foreground ml-2">/mo</span>
|
||||
</div>
|
||||
<ul className="mb-8 space-y-4">
|
||||
<li className="flex items-center gap-3 text-sm text-foreground">
|
||||
<div className="h-5 w-5 rounded-full bg-primary/20 flex items-center justify-center text-primary">
|
||||
<Check className="h-3 w-3" />
|
||||
</div>
|
||||
50 monitors
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-sm text-foreground">
|
||||
<div className="h-5 w-5 rounded-full bg-primary/20 flex items-center justify-center text-primary">
|
||||
<Check className="h-3 w-3" />
|
||||
</div>
|
||||
1-minute checks
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-sm text-foreground">
|
||||
<div className="h-5 w-5 rounded-full bg-primary/20 flex items-center justify-center text-primary">
|
||||
<Check className="h-3 w-3" />
|
||||
</div>
|
||||
All alert channels (Slack/SMS)
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-sm text-foreground">
|
||||
<div className="h-5 w-5 rounded-full bg-primary/20 flex items-center justify-center text-primary">
|
||||
<Check className="h-3 w-3" />
|
||||
</div>
|
||||
SSL monitoring
|
||||
</li>
|
||||
</ul>
|
||||
<Button className="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-xl h-11 shadow-lg shadow-primary/20 font-semibold">
|
||||
Get Started
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
{/* Enterprise Plan */}
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="rounded-3xl border border-border bg-card p-8 shadow-sm hover:shadow-xl hover:border-border transition-all"
|
||||
>
|
||||
<h3 className="mb-2 text-xl font-bold text-foreground">Enterprise</h3>
|
||||
<p className="text-sm text-muted-foreground mb-6">Custom solutions</p>
|
||||
<div className="mb-8">
|
||||
<span className="text-4xl font-bold tracking-tight text-foreground">Custom</span>
|
||||
</div>
|
||||
<ul className="mb-8 space-y-4">
|
||||
<li className="flex items-center gap-3 text-sm text-foreground">
|
||||
<div className="h-5 w-5 rounded-full bg-secondary flex items-center justify-center text-muted-foreground">
|
||||
<Check className="h-3 w-3" />
|
||||
</div>
|
||||
Unlimited monitors
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-sm text-foreground">
|
||||
<div className="h-5 w-5 rounded-full bg-secondary flex items-center justify-center text-muted-foreground">
|
||||
<Check className="h-3 w-3" />
|
||||
</div>
|
||||
30-second checks
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-sm text-foreground">
|
||||
<div className="h-5 w-5 rounded-full bg-secondary flex items-center justify-center text-muted-foreground">
|
||||
<Check className="h-3 w-3" />
|
||||
</div>
|
||||
SSO & SAML
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-sm text-foreground">
|
||||
<div className="h-5 w-5 rounded-full bg-secondary flex items-center justify-center text-muted-foreground">
|
||||
<Check className="h-3 w-3" />
|
||||
</div>
|
||||
Dedicated support
|
||||
</li>
|
||||
</ul>
|
||||
<Button variant="outline" className="w-full rounded-xl h-11 border-border hover:bg-secondary/50 hover:text-foreground">
|
||||
Contact Sales
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section >
|
||||
|
||||
{/* FAQ Section */}
|
||||
< section id="faq" className="border-t border-border/40 py-24 bg-background" >
|
||||
<div className="mx-auto max-w-3xl px-6">
|
||||
@@ -373,7 +227,7 @@ export default function Home() {
|
||||
<h4 className="mb-4 font-semibold text-foreground">Product</h4>
|
||||
<ul className="space-y-3 text-muted-foreground">
|
||||
<li><Link href="#features" className="hover:text-primary transition-colors">Features</Link></li>
|
||||
<li><Link href="#pricing" className="hover:text-primary transition-colors">Pricing</Link></li>
|
||||
<li><Link href="#use-cases" className="hover:text-primary transition-colors">Use Cases</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user