Yves Gugger
51b7727ed4
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
668 lines
40 KiB
TypeScript
668 lines
40 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState, useRef } 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 {
|
|
ArrowRight,
|
|
ChevronRight,
|
|
Zap,
|
|
Globe,
|
|
Check,
|
|
Search,
|
|
Target,
|
|
Gavel,
|
|
Activity,
|
|
Lock,
|
|
Crosshair,
|
|
Coins,
|
|
Layers,
|
|
ArrowUpRight,
|
|
ShieldCheck,
|
|
Network,
|
|
Share2,
|
|
Key,
|
|
Shield,
|
|
Radar,
|
|
Scan,
|
|
Radio,
|
|
Cpu,
|
|
Clock,
|
|
ExternalLink
|
|
} from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import clsx from 'clsx'
|
|
|
|
interface HotAuction {
|
|
domain: string
|
|
current_bid: number
|
|
time_remaining: string
|
|
platform: string
|
|
}
|
|
|
|
// Compact Ticker for Mobile
|
|
function MarketTicker({ auctions }: { auctions: HotAuction[] }) {
|
|
const tickerRef = useRef<HTMLDivElement>(null)
|
|
|
|
if (auctions.length === 0) return null
|
|
|
|
const items = [...auctions, ...auctions, ...auctions]
|
|
|
|
return (
|
|
<div className="relative z-20 border-y border-white/[0.08] bg-[#020202] overflow-hidden">
|
|
<div className="absolute left-0 top-0 bottom-0 w-16 sm:w-32 bg-gradient-to-r from-[#020202] to-transparent z-10" />
|
|
<div className="absolute right-0 top-0 bottom-0 w-16 sm:w-32 bg-gradient-to-l from-[#020202] to-transparent z-10" />
|
|
|
|
<div className="py-2 sm:py-3">
|
|
<div
|
|
ref={tickerRef}
|
|
className="flex animate-[ticker_60s_linear_infinite] hover:[animation-play-state:paused]"
|
|
style={{ width: 'max-content' }}
|
|
>
|
|
{items.map((auction, i) => (
|
|
<div
|
|
key={`${auction.domain}-${i}`}
|
|
className="flex items-center gap-3 sm:gap-6 px-4 sm:px-8 border-r border-white/[0.08] group cursor-default transition-colors hover:bg-white/[0.02]"
|
|
>
|
|
<div className="flex items-center gap-2 sm:gap-3">
|
|
<div className="w-1 h-1 sm:w-1.5 sm:h-1.5 bg-accent opacity-50 group-hover:opacity-100 transition-opacity" />
|
|
<span className="font-mono text-[10px] sm:text-xs text-white/70 font-medium group-hover:text-white transition-colors tracking-wide">
|
|
{auction.domain}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 sm:gap-4">
|
|
<span className="text-[10px] sm:text-xs text-white font-medium">${auction.current_bid.toLocaleString()}</span>
|
|
<span className="hidden sm:inline text-[10px] text-white/30 font-mono uppercase tracking-wider">{auction.time_remaining}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function HomePage() {
|
|
const { checkAuth, isLoading, isAuthenticated } = useStore()
|
|
const [hotAuctions, setHotAuctions] = useState<HotAuction[]>([])
|
|
const [loadingAuctions, setLoadingAuctions] = useState(true)
|
|
|
|
useEffect(() => {
|
|
checkAuth()
|
|
fetchData()
|
|
}, [checkAuth])
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
const auctions = await api.getHotAuctions(8).catch(() => [])
|
|
setHotAuctions(auctions.slice(0, 8))
|
|
} catch (error) {
|
|
console.error('Mission failed:', error)
|
|
} finally {
|
|
setLoadingAuctions(false)
|
|
}
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-[#020202]">
|
|
<div className="relative">
|
|
<div className="w-10 h-10 sm:w-12 sm:h-12 border-[0.5px] border-white/10 border-t-accent animate-spin rounded-full" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#020202] text-white relative overflow-x-hidden selection:bg-accent/30 selection:text-white">
|
|
{/* Background */}
|
|
<div className="fixed inset-0 pointer-events-none z-0">
|
|
<div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay" />
|
|
<div
|
|
className="absolute inset-0 opacity-[0.02] sm:opacity-[0.03]"
|
|
style={{
|
|
backgroundImage: `linear-gradient(rgba(255,255,255,0.3) 0.5px, transparent 0.5px), linear-gradient(90deg, rgba(255,255,255,0.3) 0.5px, transparent 0.5px)`,
|
|
backgroundSize: '80px 80px',
|
|
}}
|
|
/>
|
|
<div className="absolute top-[-30%] left-1/2 -translate-x-1/2 w-[800px] sm:w-[1200px] h-[600px] sm:h-[800px] bg-accent/[0.02] rounded-full blur-[150px] sm:blur-[200px]" />
|
|
</div>
|
|
|
|
<Header />
|
|
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
{/* HERO SECTION */}
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
<section className="relative min-h-[85vh] sm:min-h-[90vh] flex flex-col justify-center pt-20 sm:pt-32 pb-12 sm:pb-24 px-4 sm:px-6 z-10">
|
|
<div className="max-w-[1400px] mx-auto w-full">
|
|
<div className="grid lg:grid-cols-12 gap-8 lg:gap-24 items-center">
|
|
|
|
{/* Left: Typography & Brand */}
|
|
<div className="lg:col-span-7 relative z-20 text-left">
|
|
{/* Brand Seal - Mobile */}
|
|
<div className="inline-flex items-center gap-3 mb-6 sm:mb-10 animate-fade-in opacity-0" style={{ animationDelay: '0.1s', animationFillMode: 'forwards' }}>
|
|
<div className="relative w-10 h-10 sm:w-16 sm:h-16">
|
|
<div className="absolute inset-0 bg-accent/20 blur-xl rounded-full animate-pulse" />
|
|
<Image
|
|
src="/pounce-puma.png"
|
|
alt="Pounce"
|
|
fill
|
|
className="object-contain drop-shadow-[0_0_20px_rgba(16,185,129,0.2)]"
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className="h-px w-6 sm:w-12 bg-white/10" />
|
|
<span className="text-[8px] sm:text-[10px] font-mono uppercase tracking-[0.2em] sm:tracking-[0.3em] text-accent">Est. 2025</span>
|
|
</div>
|
|
|
|
{/* Headline - Responsive */}
|
|
<h1 className="font-display text-[2.5rem] sm:text-[4rem] md:text-[5rem] lg:text-[6rem] leading-[0.95] tracking-[-0.03em] text-white mb-6 sm:mb-8">
|
|
<span className="block animate-slide-up opacity-0" style={{ animationDelay: '0.2s', animationFillMode: 'forwards' }}>
|
|
The market
|
|
</span>
|
|
<span className="block text-white animate-slide-up opacity-0" style={{ animationDelay: '0.4s', animationFillMode: 'forwards' }}>
|
|
never sleeps.
|
|
</span>
|
|
<span className="block mt-2 sm:mt-4 text-white/40 animate-slide-up opacity-0" style={{ animationDelay: '0.6s', animationFillMode: 'forwards' }}>
|
|
You should.
|
|
</span>
|
|
</h1>
|
|
|
|
{/* Subline */}
|
|
<div className="animate-slide-up opacity-0" style={{ animationDelay: '0.8s', animationFillMode: 'forwards' }}>
|
|
<p className="text-sm sm:text-lg lg:text-xl text-white/60 max-w-xl font-light leading-relaxed mb-8 sm:mb-12 lg:mx-0 mx-auto">
|
|
Domain intelligence for investors — scan live auctions, compare TLD pricing, and monitor portfolios in a clean, spam-filtered terminal.
|
|
<span className="text-white block mt-1 font-medium">Scan. Track. Trade. Verify.</span>
|
|
</p>
|
|
|
|
{/* Stats Grid - Mobile 2x2 */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-x-8 sm:gap-y-4 pt-6 sm:pt-8 border-t border-white/[0.08]">
|
|
{[
|
|
{ value: '886+', label: 'TLDs Scanned' },
|
|
{ value: '24/7', label: 'Live Recon' },
|
|
{ value: '10s', label: 'Latency' },
|
|
{ value: '$1B+', label: 'Assets Tracked' },
|
|
].map((stat, i) => (
|
|
<div key={i} className="text-left">
|
|
<div className="text-xl sm:text-2xl font-display text-white mb-1">{stat.value}</div>
|
|
<div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">{stat.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Domain Checker */}
|
|
<div className="lg:col-span-5 relative animate-scale-in opacity-0 mt-4 lg:mt-0" style={{ animationDelay: '1s', animationFillMode: 'forwards' }}>
|
|
<div className="absolute -inset-1 bg-gradient-to-tr from-accent/20 via-white/10 to-accent/20 blur-2xl opacity-40" />
|
|
|
|
<div className="relative z-10 bg-[#0A0A0A] border border-white/20 p-1.5 sm:p-2 shadow-2xl">
|
|
{/* Tech Corners */}
|
|
<div className="absolute -top-px -left-px w-3 h-3 sm:w-4 sm:h-4 border-t border-l border-white/40" />
|
|
<div className="absolute -top-px -right-px w-3 h-3 sm:w-4 sm:h-4 border-t border-r border-white/40" />
|
|
<div className="absolute -bottom-px -left-px w-3 h-3 sm:w-4 sm:h-4 border-b border-l border-white/40" />
|
|
<div className="absolute -bottom-px -right-px w-3 h-3 sm:w-4 sm:h-4 border-b border-r border-white/40" />
|
|
|
|
<div className="bg-[#050505] p-5 sm:p-8 lg:p-10 border border-white/5 relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-white/[0.02]" />
|
|
|
|
<div className="relative z-10">
|
|
<div className="flex items-center justify-between mb-5 sm:mb-8">
|
|
<span className="text-[9px] sm:text-[10px] font-mono uppercase tracking-[0.15em] sm:tracking-[0.2em] text-accent flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-accent animate-pulse" />
|
|
Terminal Access
|
|
</span>
|
|
<div className="flex gap-1">
|
|
<div className="w-1 h-1 bg-white/20" />
|
|
<div className="w-1 h-1 bg-white/20" />
|
|
<div className="w-1 h-1 bg-white/20" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-[#0A0A0A] border-[0.5px] border-white/10 p-1.5 sm:p-2 shadow-inner">
|
|
<DomainChecker />
|
|
</div>
|
|
|
|
<div className="mt-5 sm:mt-8 pt-5 sm:pt-8 border-t border-white/[0.05] flex justify-between items-center text-[9px] sm:text-[10px] text-white/30 font-mono">
|
|
<span>SECURE CONNECTION</span>
|
|
<span>V2.0.4</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Ticker */}
|
|
{!loadingAuctions && hotAuctions.length > 0 && (
|
|
<MarketTicker auctions={hotAuctions} />
|
|
)}
|
|
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
{/* PARADIGM SHIFT */}
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
<section className="relative py-16 sm:py-32 px-4 sm:px-6 border-b border-white/[0.05]">
|
|
<div className="max-w-[1200px] mx-auto">
|
|
<div className="grid lg:grid-cols-2 gap-10 lg:gap-24 items-center">
|
|
<div>
|
|
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block">The Problem</span>
|
|
<h2 className="font-display text-2xl sm:text-4xl lg:text-5xl text-white leading-tight mb-6 sm:mb-8">
|
|
The market is <br className="hidden sm:block"/><span className="text-white/30">loud & opaque.</span>
|
|
</h2>
|
|
<div className="space-y-4 sm:space-y-6 text-white/60 leading-relaxed text-sm sm:text-lg font-light">
|
|
<p>Auctions are full of junk, pricing is fragmented across registrars, and the best signals are hidden behind spreadsheets.</p>
|
|
<p>You need high-density intel, fast filtering, and operator-grade workflows — not more noise.</p>
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<div className="absolute -inset-4 bg-accent/5 blur-3xl" />
|
|
<div className="relative bg-[#050505] border border-white/10 p-6 sm:p-8 lg:p-12">
|
|
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block">The Pounce Protocol</span>
|
|
<h3 className="font-display text-xl sm:text-3xl text-white mb-6 sm:mb-8">Asset Class V2.0</h3>
|
|
<ul className="space-y-5 sm:space-y-6 font-mono text-xs sm:text-sm text-white/80">
|
|
<li className="flex items-start gap-3 sm:gap-4">
|
|
<Radar className="w-4 h-4 sm:w-5 sm:h-5 text-accent mt-px shrink-0" />
|
|
<div>
|
|
<span className="text-white font-bold block mb-1">Deep Recon</span>
|
|
<span className="text-white/50 text-[11px] sm:text-sm">TLD pricing + trends to spot traps and opportunities.</span>
|
|
</div>
|
|
</li>
|
|
<li className="flex items-start gap-3 sm:gap-4">
|
|
<Zap className="w-4 h-4 sm:w-5 sm:h-5 text-accent mt-px shrink-0" />
|
|
<div>
|
|
<span className="text-white font-bold block mb-1">Verified Market</span>
|
|
<span className="text-white/50 text-[11px] sm:text-sm">Pounce Direct listings with DNS-verified owners.</span>
|
|
</div>
|
|
</li>
|
|
<li className="flex items-start gap-3 sm:gap-4">
|
|
<Coins className="w-4 h-4 sm:w-5 sm:h-5 text-accent mt-px shrink-0" />
|
|
<div>
|
|
<span className="text-white font-bold block mb-1">Portfolio Ops</span>
|
|
<span className="text-white/50 text-[11px] sm:text-sm">Watchlists, monitoring, and clean execution in one terminal.</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
{/* CORE ARCHITECTURE - 3 Pillars */}
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
<section className="relative py-20 sm:py-40 px-4 sm:px-6 bg-[#020202]">
|
|
<div className="max-w-[1400px] mx-auto">
|
|
{/* Section Header */}
|
|
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-end mb-12 sm:mb-24 border-b border-white/[0.08] pb-8 sm:pb-12">
|
|
<div>
|
|
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block">Core Architecture</span>
|
|
<h2 className="font-display text-3xl sm:text-4xl lg:text-6xl text-white leading-none">
|
|
The Lifecycle <br />
|
|
<span className="text-white/30">Engine.</span>
|
|
</h2>
|
|
</div>
|
|
<p className="hidden lg:block text-white/50 max-w-md text-sm font-mono mt-8 lg:mt-0 leading-relaxed text-right">
|
|
// INTELLIGENCE_LAYER_ACTIVE<br />
|
|
// MARKET_PROTOCOL_READY<br />
|
|
// AUTOMATION_LAYER_OPTIONAL
|
|
</p>
|
|
</div>
|
|
|
|
{/* Pillars - Stacked on Mobile */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-px bg-transparent lg:bg-white/[0.08] lg:border lg:border-white/[0.08]">
|
|
{[
|
|
{
|
|
module: '01',
|
|
title: 'Intelligence',
|
|
desc: '"Identify Targets." We scan 886+ TLDs to uncover pricing traps, trends, and opportunities.',
|
|
features: [
|
|
{ icon: Scan, title: 'Global Scan', desc: 'Zone file analysis' },
|
|
{ icon: Target, title: 'Valuation AI', desc: 'Instant fair-market value' },
|
|
],
|
|
},
|
|
{
|
|
module: '02',
|
|
title: 'Market',
|
|
desc: '"Secure the Asset." Direct access to liquidity with verified owners and 0% commission.',
|
|
features: [
|
|
{ icon: ShieldCheck, title: 'Verified Owners', desc: 'Mandatory DNS check' },
|
|
{ icon: Gavel, title: 'Direct Execution', desc: 'P2P transfers' },
|
|
],
|
|
},
|
|
{
|
|
module: '03',
|
|
title: 'Terminal',
|
|
desc: '"Operate the Asset." High density, low noise workflows for tracking, filtering, and execution.',
|
|
features: [
|
|
{ icon: Layers, title: 'Clean Feed', desc: 'Spam-filtered auctions + listings' },
|
|
{ icon: Coins, title: 'Pricing Intel', desc: 'Trends + renewal risk signals' },
|
|
],
|
|
},
|
|
].map((pillar, i) => (
|
|
<div key={i} className="group relative bg-[#030303] p-6 sm:p-10 lg:p-14 hover:bg-[#050505] transition-colors duration-500 border border-white/[0.08] lg:border-0">
|
|
<div className="absolute top-0 right-0 p-4 sm:p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
|
<ArrowUpRight className="w-5 h-5 sm:w-6 sm:h-6 text-white/20" />
|
|
</div>
|
|
|
|
<div className="h-full flex flex-col justify-between">
|
|
<div>
|
|
<div className="mb-5 sm:mb-8 font-mono text-[10px] sm:text-xs text-accent uppercase tracking-widest border border-accent/20 inline-block px-2 sm:px-3 py-1 bg-accent/5">
|
|
Module {pillar.module}
|
|
</div>
|
|
<h3 className="text-2xl sm:text-3xl text-white font-display mb-4 sm:mb-6">{pillar.title}</h3>
|
|
<p className="text-white/50 leading-relaxed text-sm sm:text-lg font-light mb-8 sm:mb-12">
|
|
{pillar.desc}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4 sm:space-y-6 pt-6 sm:pt-12 border-t border-white/[0.05]">
|
|
{pillar.features.map((f, j) => (
|
|
<div key={j} className="flex items-start gap-3 sm:gap-4">
|
|
<f.icon className="w-4 h-4 sm:w-5 sm:h-5 text-accent mt-1" />
|
|
<div>
|
|
<div className="text-white font-medium mb-0.5 sm:mb-1 text-sm sm:text-base">{f.title}</div>
|
|
<div className="text-white/30 text-[11px] sm:text-sm">{f.desc}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
{/* AUTOMATION (OPTIONAL) */}
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
<section className="relative py-16 sm:py-32 px-4 sm:px-6 border-b border-white/[0.05] bg-[#050505] overflow-hidden">
|
|
<div className="absolute inset-0 bg-accent/[0.02]" />
|
|
<div className="max-w-[1200px] mx-auto relative z-10">
|
|
<div className="mb-12 sm:mb-20 text-center">
|
|
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block">Optional Automation</span>
|
|
<h2 className="font-display text-2xl sm:text-4xl lg:text-5xl text-white mb-4 sm:mb-6">Intent Routing™</h2>
|
|
<p className="text-white/50 max-w-2xl mx-auto text-sm sm:text-lg font-light leading-relaxed px-2">
|
|
For operators who want more: connect a domain, detect intent, and route traffic to the best destination. Your core product stays intelligence + market access.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-8">
|
|
{[
|
|
{ icon: Network, step: '1', title: 'Connect', desc: 'Point nameservers to ns.pounce.io (optional)' },
|
|
{ icon: Cpu, step: '2', title: 'Analyze', desc: 'We detect intent and risk signals from real usage' },
|
|
{ icon: Share2, step: '3', title: 'Route', desc: 'Send traffic to the best destination (partner, listing, or page)' },
|
|
].map((item, i) => (
|
|
<div key={i} className="bg-[#020202] border border-white/10 p-6 sm:p-10 relative group hover:border-accent/30 transition-colors">
|
|
<div className="w-10 h-10 sm:w-14 sm:h-14 bg-white/5 flex items-center justify-center mb-5 sm:mb-8 text-white group-hover:text-accent group-hover:bg-accent/10 transition-all">
|
|
<item.icon className="w-5 h-5 sm:w-7 sm:h-7" />
|
|
</div>
|
|
<h3 className="text-white font-bold text-base sm:text-xl mb-2 sm:mb-3">{item.step}. {item.title}</h3>
|
|
<p className="text-white/40 text-xs sm:text-sm font-mono leading-relaxed">{item.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
{/* MARKET DEEP DIVE */}
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
<section className="relative py-16 sm:py-32 px-4 sm:px-6 bg-[#020202]">
|
|
<div className="max-w-[1200px] mx-auto grid lg:grid-cols-2 gap-10 lg:gap-20 items-center">
|
|
{/* Demo Card */}
|
|
<div className="order-2 lg:order-1 relative">
|
|
<div className="border border-white/10 bg-[#050505] p-1.5 sm:p-2 shadow-2xl lg:rotate-1 hover:rotate-0 transition-transform duration-500">
|
|
<div className="bg-[#020202] p-5 sm:p-8">
|
|
<div className="flex items-center gap-3 sm:gap-4 border-b border-white/10 pb-4 sm:pb-6 mb-4 sm:mb-6">
|
|
<div className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-accent animate-pulse" />
|
|
<span className="font-mono text-sm sm:text-base text-white">zurich-immo.ch</span>
|
|
<span className="ml-auto text-accent font-bold text-base sm:text-lg">$950</span>
|
|
</div>
|
|
<div className="space-y-3 sm:space-y-4 font-mono text-[10px] sm:text-xs text-white/50">
|
|
<div className="flex justify-between items-center">
|
|
<span>Source</span>
|
|
<span className="text-white flex items-center gap-2"><div className="w-1 h-1 sm:w-1.5 sm:h-1.5 bg-accent"/> Pounce Direct</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span>Verified</span>
|
|
<span className="text-accent flex items-center gap-1.5 sm:gap-2"><Check className="w-2.5 h-2.5 sm:w-3 sm:h-3" /> DNS Passed</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span>Commission</span>
|
|
<span className="text-white bg-white/10 px-1.5 sm:px-2 py-0.5">0%</span>
|
|
</div>
|
|
</div>
|
|
<div className="mt-5 sm:mt-8 pt-4 sm:pt-6 border-t border-white/10">
|
|
<button className="w-full py-3 sm:py-4 bg-white/5 text-white uppercase font-bold text-[10px] sm:text-xs tracking-[0.2em] hover:bg-white hover:text-black transition-colors flex items-center justify-center gap-2">
|
|
Contact Seller
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="order-1 lg:order-2">
|
|
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block">Exclusive Exchange</span>
|
|
<h2 className="font-display text-2xl sm:text-4xl text-white mb-4 sm:mb-6">The Velvet Rope.</h2>
|
|
<p className="text-white/50 text-sm sm:text-lg leading-relaxed mb-6 sm:mb-10">
|
|
Buying is open to everyone, selling is reserved for verified members.
|
|
</p>
|
|
<ul className="space-y-5 sm:space-y-6">
|
|
{[
|
|
{ icon: Shield, title: 'Zero Noise', desc: 'Gatekeeper tech filters 99% of junk' },
|
|
{ icon: Key, title: 'Verified Owners', desc: 'DNS verification required before listing' },
|
|
{ icon: Zap, title: '0% Commission', desc: 'Keep 100% of the sale price' },
|
|
].map((item, i) => (
|
|
<li key={i} className="flex gap-4 sm:gap-5">
|
|
<item.icon className="w-5 h-5 sm:w-6 sm:h-6 text-accent shrink-0" />
|
|
<div>
|
|
<h4 className="text-white font-bold mb-0.5 sm:mb-1 text-sm sm:text-base">{item.title}</h4>
|
|
<p className="text-white/40 text-xs sm:text-sm leading-relaxed">{item.desc}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
{/* PRICING */}
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
<section className="relative py-16 sm:py-32 px-4 sm:px-6 border-y border-white/[0.08] bg-[#030303]">
|
|
<div className="max-w-[1200px] mx-auto text-center">
|
|
<h2 className="font-display text-2xl sm:text-4xl text-white mb-10 sm:mb-16">Clearance Levels</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-8 text-left">
|
|
{/* Scout */}
|
|
<div className="p-6 sm:p-10 border border-white/10 bg-[#020202] opacity-70 hover:opacity-100 transition-opacity flex flex-col">
|
|
<h3 className="text-lg sm:text-xl font-display text-white mb-1 sm:mb-2">Scout</h3>
|
|
<div className="text-2xl sm:text-4xl font-mono text-white mb-5 sm:mb-8">$0<span className="text-xs sm:text-sm text-white/30">/mo</span></div>
|
|
<ul className="space-y-3 sm:space-y-4 text-xs sm:text-sm text-white/50 font-mono mb-6 sm:mb-10 flex-1">
|
|
<li className="flex gap-2 sm:gap-3"><span>•</span> Recon Overview</li>
|
|
<li className="flex gap-2 sm:gap-3"><span>•</span> Basic Scan</li>
|
|
<li className="flex gap-2 sm:gap-3"><span>•</span> 5 Targets</li>
|
|
</ul>
|
|
<Link href="/register" className="block w-full py-3 sm:py-4 text-center border border-white/20 text-white uppercase text-[10px] sm:text-xs font-bold tracking-widest hover:bg-white hover:text-black transition-colors">
|
|
Join the Hunt
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Trader */}
|
|
<div className="p-6 sm:p-10 border-2 border-accent bg-[#050505] relative md:-translate-y-0 lg:-translate-y-4 flex flex-col shadow-[0_0_50px_-20px_rgba(16,185,129,0.2)]">
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-accent text-black px-3 sm:px-4 py-1 sm:py-1.5 text-[9px] sm:text-[10px] font-bold uppercase tracking-widest">Recommended</div>
|
|
<h3 className="text-lg sm:text-xl font-display text-white mb-1 sm:mb-2 mt-2 sm:mt-0">Trader</h3>
|
|
<div className="text-2xl sm:text-4xl font-mono text-accent mb-5 sm:mb-8">$9<span className="text-xs sm:text-sm text-white/30">/mo</span></div>
|
|
<ul className="space-y-3 sm:space-y-4 text-xs sm:text-sm text-white/80 font-mono mb-6 sm:mb-10 flex-1">
|
|
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-accent shrink-0"/> Clean Feed</li>
|
|
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-accent shrink-0"/> Renewal Intel</li>
|
|
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-accent shrink-0"/> 0% Commission</li>
|
|
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-accent shrink-0"/> 50 Targets</li>
|
|
</ul>
|
|
<Link href="/pricing" className="block w-full py-3 sm:py-4 text-center bg-accent text-black uppercase text-[10px] sm:text-xs font-bold tracking-widest hover:bg-white transition-colors">
|
|
Gear Up
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Tycoon */}
|
|
<div className="p-6 sm:p-10 border border-white/10 bg-[#020202] hover:border-white/30 transition-colors flex flex-col">
|
|
<h3 className="text-lg sm:text-xl font-display text-white mb-1 sm:mb-2">Tycoon</h3>
|
|
<div className="text-2xl sm:text-4xl font-mono text-white mb-5 sm:mb-8">$29<span className="text-xs sm:text-sm text-white/30">/mo</span></div>
|
|
<ul className="space-y-3 sm:space-y-4 text-xs sm:text-sm text-white/50 font-mono mb-6 sm:mb-10 flex-1">
|
|
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-white shrink-0"/> Full Monitor</li>
|
|
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-white shrink-0"/> 10m Alerts</li>
|
|
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-white shrink-0"/> 500 Targets</li>
|
|
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-white shrink-0"/> Featured</li>
|
|
</ul>
|
|
<Link href="/pricing" className="block w-full py-3 sm:py-4 text-center border border-white/20 text-white uppercase text-[10px] sm:text-xs font-bold tracking-widest hover:bg-white hover:text-black transition-colors">
|
|
Go Pro
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
{/* LIVE OPS */}
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
{!isAuthenticated && !loadingAuctions && hotAuctions.length > 0 && (
|
|
<section className="relative py-16 sm:py-32 px-4 sm:px-6 bg-[#050505] border-t border-white/[0.05]">
|
|
<div className="max-w-[1200px] mx-auto">
|
|
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-end mb-8 sm:mb-12 gap-4">
|
|
<div>
|
|
<h2 className="font-display text-2xl sm:text-3xl text-white mb-1 sm:mb-2">Live Ops</h2>
|
|
<p className="text-accent/60 font-mono text-[10px] sm:text-sm">FEED_V2.0 // ENCRYPTED</p>
|
|
</div>
|
|
<Link href="/acquire" className="text-[10px] sm:text-xs font-mono uppercase tracking-widest text-white/40 hover:text-white transition-colors flex items-center gap-2">
|
|
Recon All <ArrowRight className="w-3 h-3" />
|
|
</Link>
|
|
</div>
|
|
|
|
{/* MOBILE: Card Layout */}
|
|
<div className="sm:hidden space-y-2">
|
|
{hotAuctions.slice(0, 4).map((auction, idx) => (
|
|
<div key={idx} className="p-4 bg-[#020202] border border-white/[0.08] group">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-1 h-1 bg-white/20 group-hover:bg-accent transition-colors" />
|
|
<span className="font-mono text-sm text-white/90">{auction.domain}</span>
|
|
</div>
|
|
<span className="text-accent font-bold font-mono">${auction.current_bid.toLocaleString()}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between text-[10px] font-mono text-white/40">
|
|
<span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {auction.time_remaining}</span>
|
|
<span className="uppercase">{auction.platform}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* DESKTOP: Table Layout */}
|
|
<div className="hidden sm:block relative border border-white/[0.08] bg-[#020202]">
|
|
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-accent/20 to-transparent" />
|
|
|
|
{/* Table Header */}
|
|
<div className="grid grid-cols-12 gap-4 px-6 py-4 border-b border-white/[0.05] bg-white/[0.01] text-[10px] font-mono text-white/30 uppercase tracking-widest">
|
|
<div className="col-span-5">Asset Identifier</div>
|
|
<div className="col-span-2 text-right">Valuation</div>
|
|
<div className="col-span-2 text-right">Strike Price</div>
|
|
<div className="col-span-3 text-right">Window Closes</div>
|
|
</div>
|
|
|
|
{/* Table Rows */}
|
|
<div className="font-mono text-sm">
|
|
{hotAuctions.slice(0, 5).map((auction, idx) => (
|
|
<div key={idx} className="grid grid-cols-12 gap-4 px-6 py-5 border-b border-white/[0.03] hover:bg-white/[0.02] transition-colors group cursor-default">
|
|
<div className="col-span-5 text-white/90 group-hover:text-white transition-colors flex items-center gap-3">
|
|
<div className="w-1 h-1 bg-white/20 group-hover:bg-accent transition-colors" />
|
|
{auction.domain}
|
|
</div>
|
|
<div className="col-span-2 text-right text-white/30 line-through decoration-white/10">${(auction.current_bid * 1.5).toFixed(0)}</div>
|
|
<div className="col-span-2 text-right text-accent font-medium">${auction.current_bid.toLocaleString()}</div>
|
|
<div className="col-span-3 text-right text-white/40">{auction.time_remaining}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Gatekeeper */}
|
|
<div className="relative h-32 sm:h-40 overflow-hidden border border-white/[0.08] border-t-0 bg-[#020202]">
|
|
<div className="absolute inset-0 bg-[#020202]/80 backdrop-blur-[2px] z-10 flex items-center justify-center">
|
|
<Link
|
|
href="/register"
|
|
className="group flex items-center gap-3 sm:gap-4 px-6 sm:px-8 py-3 sm:py-4 border border-accent/20 bg-accent/10 hover:bg-accent hover:border-accent hover:text-black text-white transition-all duration-500 backdrop-blur-md"
|
|
>
|
|
<Lock className="w-3 h-3" />
|
|
<span className="text-[10px] sm:text-xs font-bold uppercase tracking-[0.15em] sm:tracking-[0.2em]">Enter HQ</span>
|
|
<ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
<div className="opacity-30 pointer-events-none p-4 sm:p-6 space-y-4 sm:space-y-6 font-mono text-xs sm:text-sm select-none">
|
|
<div className="flex justify-between"><span>premium-crypto.ai</span><span>$12,500</span></div>
|
|
<div className="flex justify-between"><span>defi-bank.io</span><span>$8,200</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
{/* FINAL CTA */}
|
|
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
|
<section className="relative py-24 sm:py-40 px-4 sm:px-6 bg-[#020202] border-t border-white/[0.05] overflow-hidden">
|
|
<div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03]" />
|
|
|
|
<div className="max-w-4xl mx-auto text-center relative z-10">
|
|
<h2 className="font-display text-3xl sm:text-5xl md:text-6xl lg:text-7xl text-white mb-8 sm:mb-12 tracking-tight">
|
|
Stop guessing. <br />
|
|
<span className="text-white/30">Start knowing.</span>
|
|
</h2>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-8">
|
|
<Link
|
|
href={isAuthenticated ? "/terminal/hunt" : "/register"}
|
|
className="w-full sm:w-auto group relative px-8 sm:px-10 py-4 sm:py-5 bg-accent text-black text-xs sm:text-sm font-bold uppercase tracking-[0.15em] sm:tracking-[0.2em] hover:bg-white transition-colors duration-500"
|
|
>
|
|
<span className="relative z-10 flex items-center justify-center gap-3">
|
|
Initialize <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
|
</span>
|
|
</Link>
|
|
|
|
<Link
|
|
href="/pricing"
|
|
className="text-xs sm:text-sm text-white/40 uppercase tracking-[0.15em] sm:tracking-[0.2em] hover:text-white transition-colors"
|
|
>
|
|
View Pricing
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="mt-16 sm:mt-24 pt-6 sm:pt-8 border-t border-white/[0.05] flex flex-wrap justify-center gap-6 sm:gap-12 text-[9px] sm:text-[10px] text-white/20 font-mono uppercase tracking-[0.15em] sm:tracking-[0.2em]">
|
|
<span className="flex items-center gap-2"><ShieldCheck className="w-3 h-3 text-accent" /> Encrypted</span>
|
|
<span className="flex items-center gap-2"><Globe className="w-3 h-3 text-accent" /> Global</span>
|
|
<span className="flex items-center gap-2"><Check className="w-3 h-3 text-accent" /> Verified</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
|
|
<style jsx global>{`
|
|
@keyframes ticker {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|