269 lines
12 KiB
TypeScript
269 lines
12 KiB
TypeScript
'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 } 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 [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
|
const [scrollProgress, setScrollProgress] = useState(0)
|
|
|
|
// Scroll progress tracking
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const totalScroll = document.documentElement.scrollHeight - window.innerHeight
|
|
const progress = totalScroll > 0 ? (window.scrollY / totalScroll) * 100 : 0
|
|
setScrollProgress(progress)
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll, { passive: true })
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
}, [])
|
|
|
|
const faqs = [
|
|
{
|
|
question: 'What is website monitoring?',
|
|
answer: 'Website monitoring is the process of testing and verifying that end-users can interact with a website or web application as expected. It continuously checks your website for changes, downtime, or performance issues.'
|
|
},
|
|
{
|
|
question: 'How fast are the alerts?',
|
|
answer: 'Our alerts are sent within seconds of detecting a change. You can configure notifications via email, webhook, Slack, or other integrations.'
|
|
},
|
|
{
|
|
question: 'Can I monitor SSL certificates?',
|
|
answer: 'Yes! We automatically monitor SSL certificate expiration and will alert you before your certificate expires.'
|
|
},
|
|
{
|
|
question: 'Do you offer a free trial?',
|
|
answer: 'Yes, we offer a free Starter plan that includes 3 monitors with hourly checks. No credit card required.'
|
|
}
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground font-sans selection:bg-primary/20 selection:text-primary">
|
|
{/* Header */}
|
|
<header className="fixed top-0 z-50 w-full border-b border-border/40 bg-background/80 backdrop-blur-xl supports-[backdrop-filter]:bg-background/60">
|
|
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-6 transition-all duration-200">
|
|
<div className="flex items-center gap-8">
|
|
<Link href="/" className="flex items-center gap-2 group">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary transition-transform group-hover:scale-110 shadow-lg shadow-primary/20">
|
|
<Monitor className="h-5 w-5 text-primary-foreground" />
|
|
</div>
|
|
<span className="text-lg font-bold tracking-tight text-foreground">MonitorTool</span>
|
|
</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="#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">
|
|
<ThemeToggle />
|
|
<Button
|
|
size="sm"
|
|
className="bg-primary hover:bg-primary/90 text-primary-foreground rounded-full px-5 transition-transform hover:scale-105 active:scale-95 shadow-md shadow-primary/20"
|
|
onClick={() => document.getElementById('hero')?.scrollIntoView({ behavior: 'smooth' })}
|
|
>
|
|
Join Waitlist
|
|
</Button>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className="md:hidden p-2 text-muted-foreground hover:text-foreground"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
>
|
|
<Menu className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
<AnimatePresence>
|
|
{mobileMenuOpen && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: "auto", opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
className="md:hidden border-t border-border bg-background px-6 py-4 shadow-lg overflow-hidden"
|
|
>
|
|
<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="#use-cases" onClick={() => setMobileMenuOpen(false)} className="text-sm font-medium text-muted-foreground hover:text-foreground">Use Cases</Link>
|
|
<button
|
|
onClick={() => {
|
|
setMobileMenuOpen(false)
|
|
document.getElementById('hero')?.scrollIntoView({ behavior: 'smooth' })
|
|
}}
|
|
className="text-sm font-medium text-primary font-bold text-left"
|
|
>
|
|
Join Waitlist
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</header >
|
|
|
|
{/* Scroll Progress Indicator */}
|
|
<motion.div
|
|
className="fixed top-16 left-0 right-0 h-1 bg-[hsl(var(--teal))] z-50 origin-left"
|
|
style={{ scaleX: scrollProgress / 100 }}
|
|
initial={{ scaleX: 0 }}
|
|
/>
|
|
|
|
{/* Hero Section */}
|
|
<HeroSection />
|
|
|
|
{/* Live SERP Preview Tool */}
|
|
<LiveSerpPreview />
|
|
|
|
{/* Use Case Showcase */}
|
|
<UseCaseShowcase />
|
|
|
|
{/* How It Works */}
|
|
<HowItWorks />
|
|
|
|
{/* Differentiators */}
|
|
<Differentiators />
|
|
|
|
{/* FAQ Section */}
|
|
< section id="faq" className="border-t border-border/40 py-24 bg-background" >
|
|
<div className="mx-auto max-w-3xl px-6">
|
|
<h2 className="mb-12 text-center text-3xl font-bold sm:text-4xl text-foreground">
|
|
Frequently Asked Questions
|
|
</h2>
|
|
|
|
<div className="space-y-4">
|
|
{faqs.map((faq, index) => (
|
|
<motion.div
|
|
key={index}
|
|
className="rounded-2xl border border-border bg-card overflow-hidden"
|
|
initial={false}
|
|
>
|
|
<button
|
|
onClick={() => setOpenFaq(openFaq === index ? null : index)}
|
|
className="flex w-full items-center justify-between p-6 text-left hover:bg-secondary/30 transition-colors"
|
|
>
|
|
<span className="font-medium text-foreground">{faq.question}</span>
|
|
<ChevronDown
|
|
className={`h-5 w-5 text-muted-foreground transition-transform duration-300 ${openFaq === index ? 'rotate-180' : ''}`}
|
|
/>
|
|
</button>
|
|
<AnimatePresence>
|
|
{openFaq === index && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: "auto", opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
className="border-t border-border px-6 pb-6 pt-4 text-muted-foreground bg-secondary/5"
|
|
>
|
|
{faq.answer}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section >
|
|
|
|
{/* Final CTA */}
|
|
<FinalCTA />
|
|
|
|
{/* Footer */}
|
|
< footer className="border-t border-border bg-background py-12 text-sm" >
|
|
<div className="mx-auto max-w-7xl px-6">
|
|
<div className="grid gap-12 md:grid-cols-4 lg:grid-cols-5">
|
|
<div className="md:col-span-2">
|
|
<div className="mb-6 flex items-center gap-2">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
|
|
<Monitor className="h-5 w-5 text-primary-foreground" />
|
|
</div>
|
|
<span className="text-lg font-bold text-foreground">MonitorTool</span>
|
|
</div>
|
|
<p className="text-muted-foreground max-w-xs mb-6">
|
|
The modern platform for uptime monitoring, change detection, and performance tracking.
|
|
</p>
|
|
<div className="flex gap-4">
|
|
{/* Social icons placeholders */}
|
|
<div className="h-8 w-8 rounded-full bg-secondary hover:bg-border transition-colors cursor-pointer flex items-center justify-center text-muted-foreground hover:text-foreground">
|
|
<Globe className="h-4 w-4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<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="#use-cases" className="hover:text-primary transition-colors">Use Cases</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="mb-4 font-semibold text-foreground">Company</h4>
|
|
<ul className="space-y-3 text-muted-foreground">
|
|
<li><Link href="#" className="hover:text-primary transition-colors">About</Link></li>
|
|
<li><Link href="#" className="hover:text-primary transition-colors">Blog</Link></li>
|
|
<li><Link href="#" className="hover:text-primary transition-colors">Careers</Link></li>
|
|
<li><Link href="#" className="hover:text-primary transition-colors">Contact</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="mb-4 font-semibold text-foreground">Legal</h4>
|
|
<ul className="space-y-3 text-muted-foreground">
|
|
<li><Link href="#" className="hover:text-primary transition-colors">Privacy</Link></li>
|
|
<li><Link href="#" className="hover:text-primary transition-colors">Terms</Link></li>
|
|
<li><Link href="#" className="hover:text-primary transition-colors">Cookie Policy</Link></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-border pt-8 text-sm text-muted-foreground sm:flex-row">
|
|
<p>© 2026 MonitorTool. All rights reserved.</p>
|
|
<div className="flex items-center gap-2">
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
|
|
</span>
|
|
System Operational
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer >
|
|
</div >
|
|
)
|
|
}
|