cff0ba0984
Admin Panel: - User Detail Modal with full profile info - Bulk tier upgrade for multiple users - User export to CSV - Price Alerts overview tab - Domain Health Check trigger - Email Test functionality - Scheduler Status with job info and last runs - Activity Log for admin actions - Blog management tab with CRUD Blog System: - BlogPost model with full content management - Public API: list, featured, categories, single post - Admin API: create, update, delete, publish/unpublish - Frontend blog listing page with categories - Frontend blog detail page with styling - View count tracking OAuth: - Google OAuth integration - GitHub OAuth integration - OAuth callback handling - Provider selection on login/register Other improvements: - Domain checker with check_all_domains function - Admin activity logging - Breadcrumbs component - Toast notification component - Various UI/UX improvements
447 lines
19 KiB
TypeScript
447 lines
19 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import Image from 'next/image'
|
|
import { Header } from '@/components/Header'
|
|
import { Footer } from '@/components/Footer'
|
|
import { DomainChecker } from '@/components/DomainChecker'
|
|
import { useStore } from '@/lib/store'
|
|
import { api } from '@/lib/api'
|
|
import {
|
|
Eye,
|
|
Bell,
|
|
Clock,
|
|
Shield,
|
|
ArrowRight,
|
|
TrendingUp,
|
|
TrendingDown,
|
|
Minus,
|
|
ChevronRight,
|
|
Zap,
|
|
BarChart3,
|
|
Globe,
|
|
Check,
|
|
} from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import clsx from 'clsx'
|
|
|
|
interface TrendingTld {
|
|
tld: string
|
|
reason: string
|
|
current_price: number
|
|
price_change: number
|
|
}
|
|
|
|
// Shimmer for loading states
|
|
function Shimmer({ className }: { className?: string }) {
|
|
return (
|
|
<div className={clsx(
|
|
"relative overflow-hidden rounded bg-foreground/5",
|
|
className
|
|
)}>
|
|
<div className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-foreground/5 to-transparent" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Animated counter
|
|
function AnimatedNumber({ value, suffix = '' }: { value: number, suffix?: string }) {
|
|
const [count, setCount] = useState(0)
|
|
|
|
useEffect(() => {
|
|
const duration = 2000
|
|
const steps = 60
|
|
const increment = value / steps
|
|
let current = 0
|
|
|
|
const timer = setInterval(() => {
|
|
current += increment
|
|
if (current >= value) {
|
|
setCount(value)
|
|
clearInterval(timer)
|
|
} else {
|
|
setCount(Math.floor(current))
|
|
}
|
|
}, duration / steps)
|
|
|
|
return () => clearInterval(timer)
|
|
}, [value])
|
|
|
|
return <>{count.toLocaleString()}{suffix}</>
|
|
}
|
|
|
|
export default function HomePage() {
|
|
const { checkAuth, isLoading, isAuthenticated } = useStore()
|
|
const [trendingTlds, setTrendingTlds] = useState<TrendingTld[]>([])
|
|
const [loadingTlds, setLoadingTlds] = useState(true)
|
|
|
|
useEffect(() => {
|
|
checkAuth()
|
|
fetchTldData()
|
|
}, [checkAuth])
|
|
|
|
const fetchTldData = async () => {
|
|
try {
|
|
const trending = await api.getTrendingTlds()
|
|
setTrendingTlds(trending.trending.slice(0, 4))
|
|
} catch (error) {
|
|
console.error('Failed to fetch TLD data:', error)
|
|
} finally {
|
|
setLoadingTlds(false)
|
|
}
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-background">
|
|
<div className="w-6 h-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const getTrendIcon = (priceChange: number) => {
|
|
if (priceChange > 0) return <TrendingUp className="w-3.5 h-3.5" />
|
|
if (priceChange < 0) return <TrendingDown className="w-3.5 h-3.5" />
|
|
return <Minus className="w-3.5 h-3.5" />
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background relative overflow-hidden">
|
|
{/* Background Effects */}
|
|
<div className="fixed inset-0 pointer-events-none">
|
|
{/* Primary glow */}
|
|
<div className="absolute top-[-20%] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-accent/[0.03] rounded-full blur-[120px]" />
|
|
{/* Secondary glow */}
|
|
<div className="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-accent/[0.02] rounded-full blur-[100px]" />
|
|
{/* Grid pattern */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.015]"
|
|
style={{
|
|
backgroundImage: `linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px)`,
|
|
backgroundSize: '64px 64px',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<Header />
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative pt-32 sm:pt-40 md:pt-48 lg:pt-56 pb-20 sm:pb-28 px-4 sm:px-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="text-center max-w-5xl mx-auto">
|
|
{/* Puma Logo */}
|
|
<div className="flex justify-center mb-8 sm:mb-10 animate-fade-in">
|
|
<div className="relative">
|
|
<Image
|
|
src="/pounce-puma.png"
|
|
alt="pounce"
|
|
width={400}
|
|
height={280}
|
|
className="w-40 h-auto sm:w-52 md:w-64 object-contain drop-shadow-[0_0_60px_rgba(16,185,129,0.3)]"
|
|
priority
|
|
/>
|
|
{/* Glow ring */}
|
|
<div className="absolute inset-0 -z-10 bg-accent/20 blur-3xl rounded-full scale-150" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Headline - MASSIVE */}
|
|
<h1 className="animate-slide-up">
|
|
<span className="block font-display text-[3rem] sm:text-[4rem] md:text-[5.5rem] lg:text-[7rem] xl:text-[8rem] leading-[0.9] tracking-[-0.04em] text-foreground">
|
|
Others wait.
|
|
</span>
|
|
<span className="block font-display text-[3rem] sm:text-[4rem] md:text-[5.5rem] lg:text-[7rem] xl:text-[8rem] leading-[0.9] tracking-[-0.04em] text-foreground/40 mt-2">
|
|
You pounce.
|
|
</span>
|
|
</h1>
|
|
|
|
{/* Subheadline */}
|
|
<p className="mt-8 sm:mt-10 md:mt-12 text-lg sm:text-xl md:text-2xl text-foreground-muted max-w-2xl mx-auto animate-slide-up delay-100 leading-relaxed">
|
|
Domain intelligence for the decisive. Track any domain.
|
|
Know the moment it drops. Move before anyone else.
|
|
</p>
|
|
|
|
{/* Domain Checker */}
|
|
<div className="mt-10 sm:mt-14 md:mt-16 animate-slide-up delay-200">
|
|
<DomainChecker />
|
|
</div>
|
|
|
|
{/* Trust Indicators */}
|
|
<div className="mt-12 sm:mt-16 flex flex-wrap items-center justify-center gap-8 sm:gap-12 text-foreground-subtle animate-fade-in delay-300">
|
|
<div className="flex items-center gap-2">
|
|
<Globe className="w-4 h-4 text-accent" />
|
|
<span className="text-sm font-medium"><AnimatedNumber value={886} />+ TLDs tracked</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<BarChart3 className="w-4 h-4 text-accent" />
|
|
<span className="text-sm font-medium">Real-time pricing</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Bell className="w-4 h-4 text-accent" />
|
|
<span className="text-sm font-medium">Instant alerts</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Trending TLDs Section */}
|
|
<section className="relative py-20 sm:py-28 px-4 sm:px-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Section Header */}
|
|
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6 mb-10 sm:mb-14">
|
|
<div>
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 bg-accent/10 border border-accent/20 rounded-full mb-5">
|
|
<TrendingUp className="w-4 h-4 text-accent" />
|
|
<span className="text-sm font-medium text-accent">Market Intel</span>
|
|
</div>
|
|
<h2 className="font-display text-3xl sm:text-4xl md:text-5xl tracking-[-0.03em] text-foreground">
|
|
Trending Now
|
|
</h2>
|
|
</div>
|
|
<Link
|
|
href="/tld-pricing"
|
|
className="group inline-flex items-center gap-2 text-sm font-medium text-accent hover:text-accent-hover transition-colors"
|
|
>
|
|
Explore all TLDs
|
|
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
|
|
{/* TLD Cards */}
|
|
{loadingTlds ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
|
{[...Array(4)].map((_, i) => (
|
|
<div key={i} className="p-6 bg-background-secondary/50 border border-border rounded-2xl">
|
|
<Shimmer className="h-8 w-20 mb-4" />
|
|
<Shimmer className="h-4 w-full mb-2" />
|
|
<Shimmer className="h-4 w-24" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
|
{trendingTlds.map((item, index) => (
|
|
<Link
|
|
key={item.tld}
|
|
href={isAuthenticated ? `/tld-pricing/${item.tld}` : `/login?redirect=/tld-pricing/${item.tld}`}
|
|
className="group relative p-6 bg-background-secondary/50 border border-border rounded-2xl
|
|
hover:border-accent/30 hover:bg-background-secondary transition-all duration-300"
|
|
style={{ animationDelay: `${index * 100}ms` }}
|
|
>
|
|
{/* Hover glow */}
|
|
<div className="absolute inset-0 rounded-2xl bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
|
|
<div className="relative">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<span className="font-mono text-2xl sm:text-3xl font-medium text-foreground">.{item.tld}</span>
|
|
<span className={clsx(
|
|
"flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full",
|
|
(item.price_change ?? 0) > 0
|
|
? "text-orange-400 bg-orange-400/10"
|
|
: (item.price_change ?? 0) < 0
|
|
? "text-accent bg-accent/10"
|
|
: "text-foreground-muted bg-foreground/5"
|
|
)}>
|
|
{getTrendIcon(item.price_change ?? 0)}
|
|
{(item.price_change ?? 0) > 0 ? '+' : ''}{(item.price_change ?? 0).toFixed(1)}%
|
|
</span>
|
|
</div>
|
|
|
|
<p className="text-sm text-foreground-subtle mb-4 line-clamp-2 min-h-[40px]">{item.reason}</p>
|
|
|
|
<div className="flex items-center justify-between">
|
|
{isAuthenticated ? (
|
|
<span className="text-lg font-semibold text-foreground">${(item.current_price ?? 0).toFixed(2)}<span className="text-sm font-normal text-foreground-muted">/yr</span></span>
|
|
) : (
|
|
<Shimmer className="h-6 w-20" />
|
|
)}
|
|
<ChevronRight className="w-5 h-5 text-foreground-subtle group-hover:text-accent group-hover:translate-x-1 transition-all" />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Section */}
|
|
<section className="relative py-20 sm:py-28 px-4 sm:px-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Section Header */}
|
|
<div className="text-center max-w-3xl mx-auto mb-16 sm:mb-20">
|
|
<span className="text-sm font-semibold text-accent uppercase tracking-wider">How It Works</span>
|
|
<h2 className="mt-4 font-display text-3xl sm:text-4xl md:text-5xl lg:text-6xl tracking-[-0.03em] text-foreground">
|
|
Built for hunters.
|
|
</h2>
|
|
<p className="mt-5 text-lg text-foreground-muted">
|
|
The tools that give you the edge. Simple. Powerful. Decisive.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Feature Cards */}
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{[
|
|
{
|
|
icon: Eye,
|
|
title: 'Always Watching',
|
|
description: 'Daily scans across 886+ TLDs. You sleep, we hunt.',
|
|
},
|
|
{
|
|
icon: Bell,
|
|
title: 'Instant Alerts',
|
|
description: 'Domain drops? You know first. Email alerts the moment it happens.',
|
|
},
|
|
{
|
|
icon: Clock,
|
|
title: 'Expiry Intel',
|
|
description: 'See when domains expire. Plan your acquisition strategy.',
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: 'Your Strategy, Private',
|
|
description: 'Your watchlist is yours alone. No one sees what you\'re tracking.',
|
|
},
|
|
].map((feature, i) => (
|
|
<div
|
|
key={feature.title}
|
|
className="group relative p-8 rounded-2xl border border-transparent hover:border-border
|
|
bg-transparent hover:bg-background-secondary/50 transition-all duration-500"
|
|
>
|
|
<div className="w-14 h-14 bg-foreground/5 border border-border rounded-2xl flex items-center justify-center mb-6
|
|
group-hover:border-accent/30 group-hover:bg-accent/5 transition-all duration-500">
|
|
<feature.icon className="w-6 h-6 text-foreground-muted group-hover:text-accent transition-colors duration-500" strokeWidth={1.5} />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-foreground mb-3">{feature.title}</h3>
|
|
<p className="text-sm text-foreground-subtle leading-relaxed">{feature.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Social Proof / Stats Section */}
|
|
<section className="relative py-20 sm:py-28 px-4 sm:px-6">
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="relative p-10 sm:p-14 md:p-20 bg-gradient-to-br from-background-secondary/80 to-background-secondary/40
|
|
border border-border rounded-3xl overflow-hidden">
|
|
{/* Background pattern */}
|
|
<div className="absolute inset-0 opacity-30">
|
|
<div className="absolute top-0 right-0 w-[400px] h-[400px] bg-accent/10 rounded-full blur-[100px]" />
|
|
</div>
|
|
|
|
<div className="relative grid sm:grid-cols-3 gap-10 sm:gap-6 text-center">
|
|
<div>
|
|
<p className="font-display text-5xl sm:text-6xl md:text-7xl text-foreground mb-2">
|
|
<AnimatedNumber value={886} />+
|
|
</p>
|
|
<p className="text-sm text-foreground-muted">TLDs Tracked</p>
|
|
</div>
|
|
<div>
|
|
<p className="font-display text-5xl sm:text-6xl md:text-7xl text-foreground mb-2">
|
|
24<span className="text-accent">/</span>7
|
|
</p>
|
|
<p className="text-sm text-foreground-muted">Monitoring</p>
|
|
</div>
|
|
<div>
|
|
<p className="font-display text-5xl sm:text-6xl md:text-7xl text-foreground mb-2">
|
|
<AnimatedNumber value={10} />s
|
|
</p>
|
|
<p className="text-sm text-foreground-muted">Alert Speed</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Pricing CTA Section */}
|
|
<section className="relative py-20 sm:py-28 px-4 sm:px-6">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<span className="text-sm font-semibold text-accent uppercase tracking-wider">Pricing</span>
|
|
<h2 className="mt-4 font-display text-3xl sm:text-4xl md:text-5xl lg:text-6xl tracking-[-0.03em] text-foreground">
|
|
Pick your weapon.
|
|
</h2>
|
|
<p className="mt-5 text-lg text-foreground-muted max-w-xl mx-auto">
|
|
Start free with 5 domains. Scale to 500+ when you need more firepower.
|
|
</p>
|
|
|
|
{/* Quick Plans */}
|
|
<div className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<div className="flex items-center gap-4 px-6 py-4 bg-background-secondary/50 border border-border rounded-2xl">
|
|
<div className="w-12 h-12 bg-foreground/5 rounded-xl flex items-center justify-center">
|
|
<Zap className="w-5 h-5 text-foreground-muted" />
|
|
</div>
|
|
<div className="text-left">
|
|
<p className="font-semibold text-foreground">Scout</p>
|
|
<p className="text-sm text-foreground-muted">Free forever</p>
|
|
</div>
|
|
</div>
|
|
|
|
<ArrowRight className="w-5 h-5 text-foreground-subtle hidden sm:block" />
|
|
<ChevronRight className="w-5 h-5 text-foreground-subtle rotate-90 sm:hidden" />
|
|
|
|
<div className="flex items-center gap-4 px-6 py-4 bg-accent/5 border border-accent/20 rounded-2xl">
|
|
<div className="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center">
|
|
<TrendingUp className="w-5 h-5 text-accent" />
|
|
</div>
|
|
<div className="text-left">
|
|
<p className="font-semibold text-foreground">Trader</p>
|
|
<p className="text-sm text-accent">$19/month</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<Link
|
|
href="/pricing"
|
|
className="inline-flex items-center gap-2 px-8 py-4 bg-foreground text-background rounded-xl
|
|
font-semibold hover:bg-foreground/90 transition-all duration-300"
|
|
>
|
|
Compare Plans
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Link>
|
|
<Link
|
|
href={isAuthenticated ? "/dashboard" : "/register"}
|
|
className="inline-flex items-center gap-2 px-8 py-4 text-foreground-muted hover:text-foreground transition-colors"
|
|
>
|
|
{isAuthenticated ? "Go to Dashboard" : "Start Free"}
|
|
<ChevronRight className="w-4 h-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Final CTA */}
|
|
<section className="relative py-24 sm:py-32 px-4 sm:px-6">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<h2 className="font-display text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-[-0.03em] text-foreground mb-6">
|
|
Ready to hunt?
|
|
</h2>
|
|
<p className="text-xl text-foreground-muted mb-10 max-w-lg mx-auto">
|
|
Track your first domain in under a minute. No credit card required.
|
|
</p>
|
|
<Link
|
|
href={isAuthenticated ? "/dashboard" : "/register"}
|
|
className="group inline-flex items-center gap-3 px-10 py-5 bg-accent text-background rounded-2xl
|
|
text-lg font-semibold hover:bg-accent-hover transition-all duration-300
|
|
shadow-[0_0_40px_rgba(16,185,129,0.2)] hover:shadow-[0_0_60px_rgba(16,185,129,0.3)]"
|
|
>
|
|
{isAuthenticated ? "Go to Dashboard" : "Get Started Free"}
|
|
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
|
|
{!isAuthenticated && (
|
|
<p className="mt-6 text-sm text-foreground-subtle">
|
|
<Check className="w-4 h-4 inline mr-1 text-accent" />
|
|
Free forever • No credit card • 5 domains included
|
|
</p>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|