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

43
frontend/app/globals.css
View File

@@ -76,24 +76,25 @@
}
/* Dark theme following the warm palette aesthetic */
.dark {
--background: 30 15% 10%;
--foreground: 40 14% 92%;
/* Dark theme override with higher specificity */
html.dark {
--background: 30 15% 4%;
--foreground: 40 14% 96%;
--card: 30 12% 14%;
--card-foreground: 40 14% 92%;
--card: 30 10% 18%;
--card-foreground: 40 14% 96%;
--popover: 30 12% 14%;
--popover-foreground: 40 14% 92%;
--popover: 30 10% 18%;
--popover-foreground: 40 14% 96%;
--primary: 32 35% 55%;
--primary-foreground: 30 15% 10%;
--secondary: 30 12% 20%;
--secondary-foreground: 40 14% 92%;
--secondary: 30 10% 22%;
--secondary-foreground: 40 14% 96%;
--muted: 30 12% 20%;
--muted-foreground: 35 10% 60%;
--muted: 30 10% 22%;
--muted-foreground: 35 10% 65%;
--accent: 32 35% 55%;
--accent-foreground: 30 15% 10%;
@@ -107,9 +108,18 @@
--warning: 38 92% 50%;
--warning-foreground: 0 0% 100%;
--border: 30 12% 24%;
--input: 30 12% 24%;
--border: 30 12% 20%;
--input: 30 12% 20%;
--ring: 32 35% 50%;
/* Dark Mode Section Backgrounds */
--section-bg-1: 30 15% 8%;
--section-bg-2: 30 12% 10%;
--section-bg-3: 30 12% 9%;
--section-bg-4: 35 15% 11%;
--section-bg-5: 25 10% 9%;
--section-bg-6: 177 20% 8%;
--section-bg-7: 349 20% 9%;
}
}
@@ -196,6 +206,13 @@
inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
}
.dark .glass-card {
background: rgba(40, 35, 30, 0.7);
/* Lighter, warmer dark glass */
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}
.glass-card-dark {
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(20px) saturate(180%);

60
frontend/app/page.tsx
View File

@@ -2,8 +2,8 @@
import { useEffect, useState } from 'react'
import Link from 'next/link'
import { isAuthenticated } from '@/lib/auth'
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'
@@ -12,20 +12,11 @@ import { motion, AnimatePresence } from 'framer-motion'
import { Check, ChevronDown, Monitor, Globe, Shield, Clock, Zap, Menu } from 'lucide-react'
export default function Home() {
const [loading, setLoading] = useState(true)
const [isAuth, setIsAuth] = useState(false)
const [openFaq, setOpenFaq] = useState<number | null>(null)
const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'yearly'>('monthly')
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const [scrollProgress, setScrollProgress] = useState(0)
useEffect(() => {
// Check auth status but DO NOT redirect
const auth = isAuthenticated()
setIsAuth(auth)
setLoading(false)
}, [])
// Scroll progress tracking
useEffect(() => {
const handleScroll = () => {
@@ -38,16 +29,6 @@ export default function Home() {
return () => window.removeEventListener('scroll', handleScroll)
}, [])
if (loading) {
return (
<div className="flex min-h-screen items-center justify-center bg-background">
<div className="flex flex-col items-center gap-4">
<div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
</div>
</div>
)
}
const faqs = [
{
question: 'What is website monitoring?',
@@ -85,19 +66,14 @@ export default function Home() {
</nav>
</div>
<div className="flex items-center gap-3">
{isAuth ? (
<Link href="/dashboard">
<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">
Dashboard
</Button>
</Link>
) : (
<Link href="/register">
<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">
Get Started
</Button>
</Link>
)}
<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
@@ -121,11 +97,15 @@ 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>
{!isAuth && (
<>
<Link href="/register" onClick={() => setMobileMenuOpen(false)} className="text-sm font-medium text-primary font-bold">Get Started</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>
)}
@@ -140,7 +120,7 @@ export default function Home() {
/>
{/* Hero Section */}
<HeroSection isAuthenticated={isAuth} />
<HeroSection />
{/* Live Stats Bar */}
<LiveStatsBar />
@@ -365,7 +345,7 @@ export default function Home() {
</section >
{/* Final CTA */}
<FinalCTA isAuthenticated={isAuth} />
<FinalCTA />
{/* Footer */}
< footer className="border-t border-border bg-background py-12 text-sm" >