tknuth/website-monitor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Your commit message

Browse Source
This commit is contained in:
Timo Knuth
2026-01-19 22:24:25 +01:00
parent 818779ab07
commit 9fa8045c26
15 changed files with 392 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
frontend/components/landing/LandingSections.tsx
View File

@@ -42,9 +42,9 @@ const scaleIn: Variants = {
// ============================================
// 1. HERO SECTION - "Track competitor changes without the noise"
// ============================================
export function HeroSection({ isAuthenticated }: { isAuthenticated: boolean }) {
export function HeroSection() {
return (
<section className="relative overflow-hidden pt-32 pb-24 lg:pt-40 lg:pb-32 bg-[hsl(var(--section-bg-1))]">
<section id="hero" className="relative overflow-hidden pt-32 pb-24 lg:pt-40 lg:pb-32 bg-[hsl(var(--section-bg-1))]">
{/* Background Elements */}
<div className="absolute inset-0 grain-texture" />
<div className="absolute right-0 top-20 -z-10 h-[600px] w-[600px] rounded-full bg-[hsl(var(--primary))] opacity-8 blur-[120px]" />
@@ -109,23 +109,13 @@ export function HeroSection({ isAuthenticated }: { isAuthenticated: boolean }) {
))}
</motion.div>
{/* CTAs */}
{/* Waitlist Form */}
<motion.div
variants={fadeInUp}
custom={4}
className="flex flex-wrap gap-4"
className="w-full max-w-lg"
>
<MagneticButton strength={0.2}>
<Link href={isAuthenticated ? "/dashboard" : "/register"}>
<Button
size="lg"
className="h-14 rounded-full bg-[hsl(var(--primary))] px-8 text-white hover:bg-[hsl(var(--primary))]/90 shadow-2xl shadow-[hsl(var(--primary))]/25 transition-all hover:scale-105 hover:-translate-y-0.5 font-semibold text-base group"
>
{isAuthenticated ? 'Go to Dashboard' : 'Get Started Free'}
<ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
</Button>
</Link>
</MagneticButton>
<WaitlistForm />
</motion.div>
{/* Trust Signals */}
@@ -352,19 +342,19 @@ function NoiseToSignalVisual() {
className="absolute inset-0 flex items-center justify-center p-8"
>
<motion.div
className="w-full p-6 rounded-2xl bg-white border-2 border-[hsl(var(--teal))] shadow-2xl relative overflow-hidden"
className="w-full p-6 rounded-2xl bg-white dark:bg-zinc-950 border-2 border-[hsl(var(--teal))] dark:border-zinc-800 shadow-2xl relative overflow-hidden"
animate={{
boxShadow: [
'0 20px 60px hsl(var(--teal) / 0.2)',
'0 20px 80px hsl(var(--teal) / 0.3)',
'0 20px 60px hsl(var(--teal) / 0.2)'
'0 20px 60px rgba(20, 184, 166, 0.1)',
'0 20px 80px rgba(20, 184, 166, 0.2)',
'0 20px 60px rgba(20, 184, 166, 0.1)'
]
}}
transition={{ duration: 2, repeat: Infinity }}
>
{/* Animated corner accent */}
<motion.div
className="absolute top-0 right-0 w-20 h-20 bg-[hsl(var(--teal))]/10 rounded-bl-full"
className="absolute top-0 right-0 w-20 h-20 bg-[hsl(var(--teal))]/5 rounded-bl-full"
animate={{ scale: [1, 1.1, 1] }}
transition={{ duration: 2, repeat: Infinity }}
/>
@@ -372,20 +362,20 @@ function NoiseToSignalVisual() {
<div className="relative z-10">
<div className="flex items-center justify-between mb-2">
<motion.span
className="text-xs font-bold uppercase tracking-wider text-[hsl(var(--teal))]"
className="text-xs font-bold uppercase tracking-wider text-[hsl(var(--teal))] dark:text-[hsl(var(--teal))]"
animate={{ opacity: [1, 0.7, 1] }}
transition={{ duration: 1.5, repeat: Infinity }}
>
✓ SIGNAL DETECTED
</motion.span>
<div className="flex items-center gap-1.5 text-xs font-medium text-[hsl(var(--teal))]">
<div className="flex items-center gap-1.5 text-xs font-medium text-[hsl(var(--teal))] dark:text-[hsl(var(--teal))]">
<Filter className="h-3 w-3" />
Filtered
</div>
</div>
<p className="text-sm font-semibold text-muted-foreground mb-3">Enterprise Plan</p>
<p className="text-sm font-semibold text-muted-foreground dark:text-zinc-400 mb-3">Enterprise Plan</p>
<div className="flex items-baseline gap-3">
<p className="text-3xl font-bold text-foreground">$99/mo</p>
<p className="text-3xl font-bold text-foreground dark:text-zinc-600/50">$99/mo</p>
<motion.p
initial={{ opacity: 0, x: -10, scale: 0.9 }}
animate={{
@@ -394,12 +384,13 @@ function NoiseToSignalVisual() {
scale: phase >= 2 ? 1 : 0.9
}}
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
className="text-lg text-[hsl(var(--burgundy))] font-bold flex items-center gap-1"
className="text-lg text-[hsl(var(--burgundy))] dark:text-red-500 font-bold flex items-center gap-1"
>
<span>→</span>
<motion.span
animate={{ scale: phase === 2 ? [1, 1.1, 1] : 1 }}
transition={{ duration: 0.5 }}
className="text-3xl"
>
$79/mo
</motion.span>
@@ -411,10 +402,10 @@ function NoiseToSignalVisual() {
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
className="mt-4 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[hsl(var(--burgundy))]/10 border border-[hsl(var(--burgundy))]/30"
className="mt-4 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[hsl(var(--burgundy))]/10 border border-[hsl(var(--burgundy))]/30 dark:bg-red-500/10 dark:border-red-500/20"
>
<Bell className="h-3 w-3 text-[hsl(var(--burgundy))]" />
<span className="text-[10px] font-bold text-[hsl(var(--burgundy))] uppercase tracking-wider">
<Bell className="h-3 w-3 text-[hsl(var(--burgundy))] dark:text-red-500" />
<span className="text-[10px] font-bold text-[hsl(var(--burgundy))] dark:text-red-500 uppercase tracking-wider">
Alert Sent
</span>
</motion.div>
@@ -424,6 +415,7 @@ function NoiseToSignalVisual() {
</motion.div>
)}
{/* Phase Indicator */}
<div className="absolute bottom-4 right-4 flex gap-1.5">
{[0, 1, 2, 3].map(i => (
@@ -438,8 +430,8 @@ function NoiseToSignalVisual() {
/>
))}
</div>
</div>
</motion.div>
</div >
</motion.div >
)
}
@@ -742,14 +734,12 @@ export function SocialProof() {
]
return (
<section className="py-32 bg-gradient-to-b from-foreground to-[hsl(var(--foreground))]/95 relative overflow-hidden text-white">
{/* Background Pattern */}
<div className="absolute inset-0 opacity-5">
<div className="absolute inset-0" style={{
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
backgroundSize: '60px 60px'
}} />
</div>
<section className="py-32 bg-[hsl(var(--section-bg-2))] relative overflow-hidden">
{/* Background Pattern - Subtle dots for light theme */}
<div className="absolute inset-0 opacity-[0.03]" style={{
backgroundImage: `radial-gradient(hsl(var(--foreground)) 1px, transparent 1px)`,
backgroundSize: '24px 24px'
}} />
<div className="mx-auto max-w-7xl px-6 relative z-10">
{/* Section Header */}
@@ -759,13 +749,13 @@ export function SocialProof() {
viewport={{ once: true }}
className="text-center mb-20"
>
<motion.h2 variants={fadeInUp} className="text-4xl lg:text-5xl font-display font-bold mb-6">
<motion.h2 variants={fadeInUp} className="text-4xl lg:text-5xl font-display font-bold text-foreground mb-6">
Built for teams who need results,{' '}
<span className="text-[hsl(var(--primary))]">not demos.</span>
</motion.h2>
</motion.div>
{/* Testimonial Cards - Minimal & Uniform */}
{/* Testimonial Cards - Light Theme */}
<div className="grid md:grid-cols-3 gap-8">
{testimonials.map((testimonial, i) => (
<motion.div
@@ -775,30 +765,28 @@ export function SocialProof() {
whileHover={{ y: -4 }}
viewport={{ once: true }}
transition={{ delay: i * 0.1, duration: 0.5 }}
className="relative group"
className="relative group h-full"
>
{/* Subtle gradient border glow */}
<div className="absolute -inset-0.5 bg-gradient-to-br from-[hsl(var(--primary))] to-[hsl(var(--teal))] rounded-3xl blur opacity-15 group-hover:opacity-25 transition-opacity duration-300" />
{/* Card Container */}
<div className="h-full flex flex-col rounded-3xl bg-white border border-zinc-200 shadow-sm p-8 hover:shadow-xl transition-all duration-300">
{/* Main Card - fixed height for uniformity */}
<div className="relative h-full flex flex-col rounded-3xl bg-white/10 backdrop-blur-sm border border-white/20 p-8 group-hover:bg-white/12 transition-colors duration-300">
{/* Large Quote Mark */}
<div className="text-5xl font-display text-[hsl(var(--primary))]/30 leading-none mb-3">
{/* Quote Mark */}
<div className="text-5xl font-display text-zinc-300 leading-none mb-4">
"
</div>
{/* Quote - flex-grow ensures cards align */}
<p className="font-body text-base leading-relaxed mb-6 text-white/90 font-medium italic flex-grow">
{/* Quote */}
<p className="font-body text-base leading-relaxed mb-8 text-zinc-900 font-medium italic flex-grow">
{testimonial.quote}
</p>
{/* Attribution - always at bottom */}
<div className="flex items-start justify-between mt-auto">
{/* Attribution */}
<div className="flex items-start justify-between mt-auto pt-6 border-t border-zinc-100">
<div>
<p className="font-bold text-white text-sm">{testimonial.author}</p>
<p className="text-xs text-white/70">{testimonial.role} at {testimonial.company}</p>
<p className="font-bold text-zinc-900 text-sm">{testimonial.author}</p>
<p className="text-xs text-zinc-500">{testimonial.role} at {testimonial.company}</p>
</div>
<div className="px-3 py-1 rounded-full bg-[hsl(var(--teal))]/20 border border-[hsl(var(--teal))]/30 text-[10px] font-bold uppercase tracking-wider text-[hsl(var(--teal))]">
<div className="px-3 py-1 rounded-full bg-zinc-100 border border-zinc-200 text-[10px] font-bold uppercase tracking-wider text-zinc-600">
{testimonial.useCase}
</div>
</div>
@@ -824,7 +812,7 @@ export function SocialProof() {
// ============================================
// 6. FINAL CTA - Get Started
// ============================================
export function FinalCTA({ isAuthenticated }: { isAuthenticated: boolean }) {
export function FinalCTA() {
return (
<section className="relative overflow-hidden py-32">
{/* Animated Gradient Mesh Background - More dramatic */}
@@ -869,23 +857,9 @@ export function FinalCTA({ isAuthenticated }: { isAuthenticated: boolean }) {
Join the waitlist and be first to experience monitoring that actually works.
</motion.p>
{/* Waitlist Form - replaces button */}
<motion.div variants={fadeInUp} custom={2} className="pt-4">
{isAuthenticated ? (
<MagneticButton strength={0.15}>
<Link href="/dashboard">
<Button
size="lg"
className="h-16 rounded-full bg-[hsl(var(--burgundy))] px-12 text-white hover:bg-[hsl(var(--burgundy))]/90 shadow-2xl shadow-[hsl(var(--burgundy))]/30 transition-all hover:scale-105 font-bold text-lg group"
>
Go to Dashboard
<ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
</Button>
</Link>
</MagneticButton>
) : (
<WaitlistForm />
)}
{/* Waitlist Form */}
<motion.div variants={fadeInUp} custom={2} className="pt-4 max-w-lg mx-auto">
<WaitlistForm />
</motion.div>
{/* Social Proof Indicator */}