yvg/pounce
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Settings page matching Intel page pattern exactly
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
Details
CI / Frontend Build (push) Has been cancelled
Details
CI / Backend Lint (push) Has been cancelled
Details
CI / Backend Tests (push) Has been cancelled
Details
CI / Docker Build (push) Has been cancelled
Details
CI / Security Scan (push) Has been cancelled
Details
Deploy / Build & Push Images (push) Has been cancelled
Details
Deploy / Deploy to Server (push) Has been cancelled
Details
Deploy / Notify (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Yves Gugger
2025-12-13 17:12:44 +01:00
parent 89e8e64a45
commit 8996929174
2 changed files with 318 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
frontend/src/app/page.tsx
View File

@ -42,7 +42,7 @@ interface HotAuction {
platform: string platform: string
} }
// High-end Live Market Ticker - Monochrome & Technical (Hidden on mobile for cleaner UX) // High-end Live Market Ticker - Monochrome & Technical
function MarketTicker({ auctions }: { auctions: HotAuction[] }) { function MarketTicker({ auctions }: { auctions: HotAuction[] }) {
const tickerRef = useRef<HTMLDivElement>(null) const tickerRef = useRef<HTMLDivElement>(null)
@ -52,9 +52,9 @@ function MarketTicker({ auctions }: { auctions: HotAuction[] }) {
const items = [...auctions, ...auctions, ...auctions] const items = [...auctions, ...auctions, ...auctions]
return ( return (
<div className="hidden sm:block relative z-20 border-y border-white/[0.08] bg-[#020202] overflow-hidden"> <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 left-0 top-0 bottom-0 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="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-[#020202] to-transparent z-10" />
<div className="py-3"> <div className="py-3">
<div <div
@ -65,17 +65,17 @@ function MarketTicker({ auctions }: { auctions: HotAuction[] }) {
{items.map((auction, i) => ( {items.map((auction, i) => (
<div <div
key={`${auction.domain}-${i}`} key={`${auction.domain}-${i}`}
className="flex items-center gap-4 sm:gap-6 px-4 sm:px-8 border-r border-white/[0.08] group cursor-default transition-colors hover:bg-white/[0.02]" className="flex items-center gap-6 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="flex items-center gap-3">
<div className="w-1.5 h-1.5 rounded-none bg-accent opacity-50 group-hover:opacity-100 transition-opacity" /> <div className="w-1.5 h-1.5 rounded-none bg-accent opacity-50 group-hover:opacity-100 transition-opacity" />
<span className="font-mono text-[11px] sm:text-xs text-white/70 font-medium group-hover:text-white transition-colors tracking-wide"> <span className="font-mono text-xs text-white/70 font-medium group-hover:text-white transition-colors tracking-wide">
{auction.domain} {auction.domain}
</span> </span>
</div> </div>
<div className="flex items-center gap-2 sm:gap-4"> <div className="flex items-center gap-4">
<span className="text-[11px] sm:text-xs text-white font-medium tracking-tight">${auction.current_bid.toLocaleString()}</span> <span className="text-xs text-white font-medium tracking-tight">${auction.current_bid.toLocaleString()}</span>
<span className="text-[9px] sm:text-[10px] text-white/30 font-mono uppercase tracking-wider">{auction.time_remaining}</span> <span className="text-[10px] text-white/30 font-mono uppercase tracking-wider">{auction.time_remaining}</span>
</div> </div>
</div> </div>
))} ))}
@ -133,16 +133,16 @@ export default function HomePage() {
<Header /> <Header />
{/* HERO SECTION: Brutally Catchy & Noble - Mobile First */} {/* HERO SECTION: Brutally Catchy & Noble */}
<section className="relative min-h-[100svh] sm:min-h-[90vh] flex flex-col justify-center pt-24 sm:pt-32 pb-16 sm:pb-24 px-5 sm:px-6 z-10"> <section className="relative min-h-[90vh] flex flex-col justify-center pt-32 pb-24 px-4 sm:px-6 z-10">
<div className="max-w-[1400px] mx-auto w-full"> <div className="max-w-[1400px] mx-auto w-full">
<div className="grid lg:grid-cols-12 gap-10 sm:gap-16 lg:gap-24 items-center"> <div className="grid lg:grid-cols-12 gap-16 lg:gap-24 items-center">
{/* Left: Typography & Brand */} {/* Left: Typography & Brand */}
<div className="lg:col-span-7 relative z-20 text-center lg:text-left"> <div className="lg:col-span-7 relative z-20 text-center lg:text-left">
{/* Brand Seal - Optimized for mobile */} {/* Brand Seal */}
<div className="inline-flex items-center gap-3 sm:gap-4 mb-6 sm:mb-10 animate-fade-in opacity-0" style={{ animationDelay: '0.1s', animationFillMode: 'forwards' }}> <div className="inline-flex items-center gap-4 mb-10 animate-fade-in opacity-0" style={{ animationDelay: '0.1s', animationFillMode: 'forwards' }}>
<div className="relative w-12 h-12 sm:w-16 sm:h-16"> <div className="relative w-16 h-16">
<div className="absolute inset-0 bg-accent/20 blur-xl rounded-full animate-pulse" /> <div className="absolute inset-0 bg-accent/20 blur-xl rounded-full animate-pulse" />
<Image <Image
src="/pounce-puma.png" src="/pounce-puma.png"
@ -152,87 +152,86 @@ export default function HomePage() {
priority priority
/> />
</div> </div>
<div className="h-px w-6 sm:w-12 bg-white/10" /> <div className="h-px w-12 bg-white/10" />
<span className="text-[9px] sm:text-[10px] font-mono uppercase tracking-[0.2em] sm:tracking-[0.3em] text-accent">Est. 2025</span> <span className="text-[10px] font-mono uppercase tracking-[0.3em] text-accent">Est. 2025 // Global Operations</span>
</div> </div>
{/* Headline - Mobile optimized typography */} {/* Headline */}
<h1 className="font-display text-[2.5rem] sm:text-[4rem] md:text-[5rem] lg:text-[6rem] xl:text-[7rem] leading-[0.95] sm:leading-[0.9] tracking-[-0.03em] sm:tracking-[-0.04em] text-white mb-6 sm:mb-8"> <h1 className="font-display text-[3.5rem] sm:text-[5rem] md:text-[6rem] lg:text-[7rem] leading-[0.9] tracking-[-0.04em] text-white mb-8">
<span className="block animate-slide-up opacity-0" style={{ animationDelay: '0.2s', animationFillMode: 'forwards' }}> <span className="block animate-slide-up opacity-0" style={{ animationDelay: '0.2s', animationFillMode: 'forwards' }}>
The market The market
</span> </span>
<span className="block text-white animate-slide-up opacity-0" style={{ animationDelay: '0.4s', animationFillMode: 'forwards' }}> <span className="block text-white animate-slide-up opacity-0" style={{ animationDelay: '0.4s', animationFillMode: 'forwards' }}>
never sleeps. never sleeps.
</span> </span>
<span className="block mt-2 sm:mt-4 lg:mt-6 text-white/40 animate-slide-up opacity-0" style={{ animationDelay: '0.6s', animationFillMode: 'forwards' }}> <span className="block mt-4 lg:mt-6 text-white/40 animate-slide-up opacity-0" style={{ animationDelay: '0.6s', animationFillMode: 'forwards' }}>
You should. You should.
</span> </span>
</h1> </h1>
{/* Subline & Stats */} {/* Subline & Stats */}
<div className="animate-slide-up opacity-0" style={{ animationDelay: '0.8s', animationFillMode: 'forwards' }}> <div className="animate-slide-up opacity-0" style={{ animationDelay: '0.8s', animationFillMode: 'forwards' }}>
<p className="text-base 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 px-2 sm:px-0"> <p className="text-lg lg:text-xl text-white/60 max-w-xl font-light leading-relaxed mb-12 lg:mx-0 mx-auto">
Transforming domains from static addresses into yield-bearing financial assets. Transforming domains from static addresses into yield-bearing financial assets.
<span className="text-white block mt-2 font-medium">Scan. Acquire. Route. Profit.</span> <span className="text-white block mt-1 font-medium">Scan. Acquire. Route. Profit.</span>
</p> </p>
{/* Stats Grid - 2x2 on mobile, 4 cols on desktop */} {/* Stats Grid */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-x-4 sm:gap-x-8 gap-y-5 sm:gap-y-4 pt-6 sm:pt-8 border-t border-white/[0.08]"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-x-8 gap-y-4 pt-8 border-t border-white/[0.08]">
<div className="text-center sm:text-left"> <div>
<div className="text-xl sm:text-2xl font-display text-white mb-0.5 sm:mb-1">886+</div> <div className="text-2xl font-display text-white mb-1">886+</div>
<div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">TLDs Scanned</div> <div className="text-[10px] uppercase tracking-widest text-white/40 font-mono">TLDs Scanned</div>
</div> </div>
<div className="text-center sm:text-left"> <div>
<div className="text-xl sm:text-2xl font-display text-white mb-0.5 sm:mb-1">24/7</div> <div className="text-2xl font-display text-white mb-1">24/7</div>
<div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">Live Recon</div> <div className="text-[10px] uppercase tracking-widest text-white/40 font-mono">Live Recon</div>
</div> </div>
<div className="text-center sm:text-left"> <div>
<div className="text-xl sm:text-2xl font-display text-white mb-0.5 sm:mb-1">10s</div> <div className="text-2xl font-display text-white mb-1">10s</div>
<div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">Latency</div> <div className="text-[10px] uppercase tracking-widest text-white/40 font-mono">Latency</div>
</div> </div>
<div className="text-center sm:text-left"> <div>
<div className="text-xl sm:text-2xl font-display text-white mb-0.5 sm:mb-1">$1B+</div> <div className="text-2xl font-display text-white mb-1">$1B+</div>
<div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">Assets Tracked</div> <div className="text-[10px] uppercase tracking-widest text-white/40 font-mono">Assets Tracked</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* Right: The Artifact (Domain Checker) - Mobile optimized */} {/* Right: The Artifact (Domain Checker) */}
<div className="lg:col-span-5 relative animate-scale-in opacity-0 mt-4 sm:mt-8 lg:mt-0" style={{ animationDelay: '1s', animationFillMode: 'forwards' }}> <div className="lg:col-span-5 relative animate-scale-in opacity-0 mt-8 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="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"> <div className="relative z-10 bg-[#0A0A0A] border border-white/20 p-2 shadow-2xl">
{/* Tech Corners */} {/* 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 -left-px w-4 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 -top-px -right-px w-4 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 -left-px w-4 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="absolute -bottom-px -right-px w-4 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="bg-[#050505] p-8 lg:p-10 border border-white/5 relative overflow-hidden">
<div className="absolute inset-0 bg-white/[0.02]" /> <div className="absolute inset-0 bg-white/[0.02]" />
<div className="relative z-10"> <div className="relative z-10">
<div className="flex items-center justify-between mb-5 sm:mb-8"> <div className="flex items-center justify-between 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-1.5 sm:gap-2"> <span className="text-[10px] font-mono uppercase tracking-[0.2em] text-accent flex items-center gap-2">
<span className="w-1.5 h-1.5 bg-accent animate-pulse" /> <span className="w-1.5 h-1.5 bg-accent animate-pulse" />
Terminal Access Terminal Access
</span> </span>
<div className="flex gap-1 sm:gap-1.5"> <div className="flex gap-1.5">
<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 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> </div>
<div className="bg-[#0A0A0A] border-[0.5px] border-white/10 p-1.5 sm:p-2 shadow-inner"> <div className="bg-[#0A0A0A] border-[0.5px] border-white/10 p-2 shadow-inner">
<DomainChecker /> <DomainChecker />
</div> </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"> <div className="mt-8 pt-8 border-t border-white/[0.05] flex justify-between items-center text-[10px] text-white/30 font-mono">
<span>SECURE CONNECTION</span> <span>SECURE CONNECTION</span>
<span className="hidden xs:inline">V2.0.4 [STABLE]</span> <span>V2.0.4 [STABLE]</span>
<span className="xs:hidden">V2.0.4</span>
</div> </div>
</div> </div>
</div> </div>
@ -247,16 +246,16 @@ export default function HomePage() {
<MarketTicker auctions={hotAuctions} /> <MarketTicker auctions={hotAuctions} />
)} )}
{/* THE PARADIGM SHIFT - Problem / Solution - Mobile optimized */} {/* THE PARADIGM SHIFT - Problem / Solution */}
<section className="relative py-16 sm:py-24 lg:py-32 px-5 sm:px-6 border-b border-white/[0.05]"> <section className="relative py-32 px-4 sm:px-6 border-b border-white/[0.05]">
<div className="max-w-[1200px] mx-auto"> <div className="max-w-[1200px] mx-auto">
<div className="grid lg:grid-cols-2 gap-10 sm:gap-16 lg:gap-24 items-center"> <div className="grid lg:grid-cols-2 gap-16 lg:gap-24 items-center">
<div className="text-center lg:text-left"> <div>
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.15em] sm:tracking-[0.2em] mb-3 sm:mb-4 block">The Broken Model</span> <span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">The Broken Model</span>
<h2 className="font-display text-2xl sm:text-4xl lg:text-5xl text-white leading-tight mb-5 sm:mb-8"> <h2 className="font-display text-4xl sm:text-5xl text-white leading-tight mb-8">
99% of portfolios are <br className="hidden sm:block"/><span className="text-white/30">bleeding cash.</span> 99% of portfolios are <br/><span className="text-white/30">bleeding cash.</span>
</h2> </h2>
<div className="space-y-4 sm:space-y-6 text-white/60 leading-relaxed text-base sm:text-lg font-light"> <div className="space-y-6 text-white/60 leading-relaxed text-lg font-light">
<p> <p>
Investors pay renewal fees for years, hoping for a "Unicorn" sale that never happens. It's gambling, not investing. Investors pay renewal fees for years, hoping for a "Unicorn" sale that never happens. It's gambling, not investing.
</p> </p>
@ -267,29 +266,29 @@ export default function HomePage() {
</div> </div>
<div className="relative"> <div className="relative">
<div className="absolute -inset-4 bg-accent/5 blur-3xl" /> <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"> <div className="relative bg-[#050505] border border-white/10 p-8 lg:p-12">
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.15em] sm:tracking-[0.2em] mb-3 sm:mb-4 block">The Pounce Protocol</span> <span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">The Pounce Protocol</span>
<h3 className="font-display text-2xl sm:text-3xl text-white mb-5 sm:mb-8">Asset Class V2.0</h3> <h3 className="font-display text-3xl text-white mb-8">Asset Class V2.0</h3>
<ul className="space-y-5 sm:space-y-6 font-mono text-sm text-white/80"> <ul className="space-y-6 font-mono text-sm text-white/80">
<li className="flex items-start gap-3 sm:gap-4"> <li className="flex items-start gap-4">
<Radar className="w-5 h-5 text-accent mt-0.5 shrink-0" /> <Radar className="w-5 h-5 text-accent mt-px shrink-0" />
<div> <div>
<span className="text-white font-bold block mb-1">Deep Recon</span> <span className="text-white font-bold block mb-1">Deep Recon</span>
<span className="text-white/50 text-[13px] sm:text-sm">Zone file analysis reveals what's truly valuable. Don't guess. Know.</span> <span className="text-white/50">Zone file analysis reveals what's truly valuable. Don't guess. Know.</span>
</div> </div>
</li> </li>
<li className="flex items-start gap-3 sm:gap-4"> <li className="flex items-start gap-4">
<Zap className="w-5 h-5 text-accent mt-0.5 shrink-0" /> <Zap className="w-5 h-5 text-accent mt-px shrink-0" />
<div> <div>
<span className="text-white font-bold block mb-1">Frictionless Liquidity</span> <span className="text-white font-bold block mb-1">Frictionless Liquidity</span>
<span className="text-white/50 text-[13px] sm:text-sm">Instant settlement. Verified owners. 0% Commission.</span> <span className="text-white/50">Instant settlement. Verified owners. 0% Commission.</span>
</div> </div>
</li> </li>
<li className="flex items-start gap-3 sm:gap-4"> <li className="flex items-start gap-4">
<Coins className="w-5 h-5 text-accent mt-0.5 shrink-0" /> <Coins className="w-5 h-5 text-accent mt-px shrink-0" />
<div> <div>
<span className="text-white font-bold block mb-1">Automated Yield</span> <span className="text-white font-bold block mb-1">Automated Yield</span>
<span className="text-white/50 text-[13px] sm:text-sm">Domains pay for their own renewals via Intent Routing™.</span> <span className="text-white/50">Domains pay for their own renewals via Intent Routing™.</span>
</div> </div>
</li> </li>
</ul> </ul>
@ -299,58 +298,57 @@ export default function HomePage() {
</div> </div>
</section> </section>
{/* CORE ARCHITECTURE - 3 Pillars - Mobile optimized */} {/* CORE ARCHITECTURE - 3 Pillars */}
<section className="relative py-16 sm:py-24 lg:py-40 px-5 sm:px-6 bg-[#020202]"> <section className="relative py-40 px-4 sm:px-6 bg-[#020202]">
<div className="max-w-[1400px] mx-auto"> <div className="max-w-[1400px] mx-auto">
{/* Section Header */} {/* Section Header */}
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-end mb-10 sm:mb-16 lg:mb-24 border-b border-white/[0.08] pb-8 sm:pb-12"> <div className="flex flex-col lg:flex-row justify-between items-end mb-24 border-b border-white/[0.08] pb-12">
<div className="text-center lg:text-left w-full lg:w-auto"> <div>
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.15em] sm:tracking-[0.2em] mb-3 sm:mb-4 block">Core Architecture</span> <span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">Core Architecture</span>
<h2 className="font-display text-3xl sm:text-4xl lg:text-5xl xl:text-6xl text-white leading-none"> <h2 className="font-display text-4xl sm:text-5xl lg:text-6xl text-white leading-none">
The Lifecycle <br /> The Lifecycle <br />
<span className="text-white/30">Engine.</span> <span className="text-white/30">Engine.</span>
</h2> </h2>
</div> </div>
<p className="hidden md:block text-white/50 max-w-md text-sm font-mono mt-8 lg:mt-0 leading-relaxed text-right"> <p className="text-white/50 max-w-md text-sm font-mono mt-8 lg:mt-0 leading-relaxed text-right">
// INTELLIGENCE_LAYER_ACTIVE<br /> // INTELLIGENCE_LAYER_ACTIVE<br />
// MARKET_PROTOCOL_READY<br /> // MARKET_PROTOCOL_READY<br />
// YIELD_GENERATION_STANDBY // YIELD_GENERATION_STANDBY
</p> </p>
</div> </div>
{/* Mobile: Stacked cards with gaps. Desktop: Grid with borders */} <div className="grid grid-cols-1 lg:grid-cols-3 gap-px bg-white/[0.08] border border-white/[0.08]">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-px sm:bg-white/[0.08] sm:border sm:border-white/[0.08]">
{/* 1. INTELLIGENCE */} {/* 1. INTELLIGENCE */}
<div 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] sm:border-0"> <div className="group relative bg-[#030303] p-10 lg:p-14 hover:bg-[#050505] transition-colors duration-500">
<div className="absolute top-0 right-0 p-4 sm:p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500"> <div className="absolute top-0 right-0 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" /> <ArrowUpRight className="w-6 h-6 text-white/20" />
</div> </div>
<div className="h-full flex flex-col justify-between"> <div className="h-full flex flex-col justify-between">
<div> <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.5 sm:px-3 py-1 bg-accent/5 rounded-none"> <div className="mb-8 font-mono text-xs text-accent uppercase tracking-widest border border-accent/20 inline-block px-3 py-1 bg-accent/5 rounded-none">
Module 01 Module 01
</div> </div>
<h3 className="text-2xl sm:text-3xl text-white font-display mb-4 sm:mb-6">Intelligence</h3> <h3 className="text-3xl text-white font-display mb-6">Intelligence</h3>
<p className="text-white/50 leading-relaxed text-base sm:text-lg font-light mb-8 sm:mb-12"> <p className="text-white/50 leading-relaxed text-lg font-light mb-12">
"Identify Targets." We scan 886+ TLDs in real-time to uncover hidden opportunities before the market reacts. "Identify Targets." We scan 886+ TLDs in real-time to uncover hidden opportunities before the market reacts.
</p> </p>
</div> </div>
<div className="space-y-4 sm:space-y-6 pt-6 sm:pt-12 border-t border-white/[0.05]"> <div className="space-y-6 pt-12 border-t border-white/[0.05]">
<div className="flex items-start gap-3 sm:gap-4"> <div className="flex items-start gap-4">
<Scan className="w-5 h-5 text-accent mt-0.5" /> <Scan className="w-5 h-5 text-accent mt-1" />
<div> <div>
<div className="text-white font-medium mb-0.5 sm:mb-1 text-sm sm:text-base">Global Scan</div> <div className="text-white font-medium mb-1">Global Scan</div>
<div className="text-white/30 text-xs sm:text-sm">Zone file analysis & expiration monitoring.</div> <div className="text-white/30 text-sm">Zone file analysis & expiration monitoring.</div>
</div> </div>
</div> </div>
<div className="flex items-start gap-3 sm:gap-4"> <div className="flex items-start gap-4">
<Target className="w-5 h-5 text-accent mt-0.5" /> <Target className="w-5 h-5 text-accent mt-1" />
<div> <div>
<div className="text-white font-medium mb-0.5 sm:mb-1 text-sm sm:text-base">Valuation AI</div> <div className="text-white font-medium mb-1">Valuation AI</div>
<div className="text-white/30 text-xs sm:text-sm">Instant fair-market value estimation.</div> <div className="text-white/30 text-sm">Instant fair-market value estimation.</div>
</div> </div>
</div> </div>
</div> </div>
@ -358,35 +356,35 @@ export default function HomePage() {
</div> </div>
{/* 2. MARKET */} {/* 2. MARKET */}
<div 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] sm:border-0"> <div className="group relative bg-[#030303] p-10 lg:p-14 hover:bg-[#050505] transition-colors duration-500">
<div className="absolute top-0 right-0 p-4 sm:p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500"> <div className="absolute top-0 right-0 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" /> <ArrowUpRight className="w-6 h-6 text-white/20" />
</div> </div>
<div className="h-full flex flex-col justify-between"> <div className="h-full flex flex-col justify-between">
<div> <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.5 sm:px-3 py-1 bg-accent/5 rounded-none"> <div className="mb-8 font-mono text-xs text-accent uppercase tracking-widest border border-accent/20 inline-block px-3 py-1 bg-accent/5 rounded-none">
Module 02 Module 02
</div> </div>
<h3 className="text-2xl sm:text-3xl text-white font-display mb-4 sm:mb-6">Market</h3> <h3 className="text-3xl text-white font-display mb-6">Market</h3>
<p className="text-white/50 leading-relaxed text-base sm:text-lg font-light mb-8 sm:mb-12"> <p className="text-white/50 leading-relaxed text-lg font-light mb-12">
"Secure the Asset." Direct access to liquidity. A verified exchange where assets move instantly, securely, and with 0% commission fees. "Secure the Asset." Direct access to liquidity. A verified exchange where assets move instantly, securely, and with 0% commission fees.
</p> </p>
</div> </div>
<div className="space-y-4 sm:space-y-6 pt-6 sm:pt-12 border-t border-white/[0.05]"> <div className="space-y-6 pt-12 border-t border-white/[0.05]">
<div className="flex items-start gap-3 sm:gap-4"> <div className="flex items-start gap-4">
<ShieldCheck className="w-5 h-5 text-accent mt-0.5" /> <ShieldCheck className="w-5 h-5 text-accent mt-1" />
<div> <div>
<div className="text-white font-medium mb-0.5 sm:mb-1 text-sm sm:text-base">Verified Owners</div> <div className="text-white font-medium mb-1">Verified Owners</div>
<div className="text-white/30 text-xs sm:text-sm">Mandatory DNS verification. No fakes.</div> <div className="text-white/30 text-sm">Mandatory DNS verification. No fakes.</div>
</div> </div>
</div> </div>
<div className="flex items-start gap-3 sm:gap-4"> <div className="flex items-start gap-4">
<Gavel className="w-5 h-5 text-accent mt-0.5" /> <Gavel className="w-5 h-5 text-accent mt-1" />
<div> <div>
<div className="text-white font-medium mb-0.5 sm:mb-1 text-sm sm:text-base">Direct Execution</div> <div className="text-white font-medium mb-1">Direct Execution</div>
<div className="text-white/30 text-xs sm:text-sm">P2P transfers without middlemen.</div> <div className="text-white/30 text-sm">P2P transfers without middlemen.</div>
</div> </div>
</div> </div>
</div> </div>
@ -394,35 +392,35 @@ export default function HomePage() {
</div> </div>
{/* 3. YIELD */} {/* 3. YIELD */}
<div 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] sm:border-0"> <div className="group relative bg-[#030303] p-10 lg:p-14 hover:bg-[#050505] transition-colors duration-500">
<div className="absolute top-0 right-0 p-4 sm:p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500"> <div className="absolute top-0 right-0 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" /> <ArrowUpRight className="w-6 h-6 text-white/20" />
</div> </div>
<div className="h-full flex flex-col justify-between"> <div className="h-full flex flex-col justify-between">
<div> <div>
<div className="mb-5 sm:mb-8 font-mono text-[10px] sm:text-xs text-accent uppercase tracking-widest border border-accent/20 bg-accent/5 inline-block px-2.5 sm:px-3 py-1 rounded-none"> <div className="mb-8 font-mono text-xs text-accent uppercase tracking-widest border border-accent/20 bg-accent/5 inline-block px-3 py-1 rounded-none">
Module 03 Module 03
</div> </div>
<h3 className="text-2xl sm:text-3xl text-white font-display mb-4 sm:mb-6">Yield</h3> <h3 className="text-3xl text-white font-display mb-6">Yield</h3>
<p className="text-white/50 leading-relaxed text-base sm:text-lg font-light mb-8 sm:mb-12"> <p className="text-white/50 leading-relaxed text-lg font-light mb-12">
"Deploy the Asset." Our "Intent Routing" engine transforms idle domains into active revenue generators via automated traffic monetization. "Deploy the Asset." Our "Intent Routing" engine transforms idle domains into active revenue generators via automated traffic monetization.
</p> </p>
</div> </div>
<div className="space-y-4 sm:space-y-6 pt-6 sm:pt-12 border-t border-white/[0.05]"> <div className="space-y-6 pt-12 border-t border-white/[0.05]">
<div className="flex items-start gap-3 sm:gap-4"> <div className="flex items-start gap-4">
<Layers className="w-5 h-5 text-accent mt-0.5" /> <Layers className="w-5 h-5 text-accent mt-1" />
<div> <div>
<div className="text-white font-medium mb-0.5 sm:mb-1 text-sm sm:text-base">Intent Routing</div> <div className="text-white font-medium mb-1">Intent Routing</div>
<div className="text-white/30 text-xs sm:text-sm">Traffic directed to high-value partners.</div> <div className="text-white/30 text-sm">Traffic directed to high-value partners.</div>
</div> </div>
</div> </div>
<div className="flex items-start gap-3 sm:gap-4"> <div className="flex items-start gap-4">
<Coins className="w-5 h-5 text-accent mt-0.5" /> <Coins className="w-5 h-5 text-accent mt-1" />
<div> <div>
<div className="text-white font-medium mb-0.5 sm:mb-1 text-sm sm:text-base">Passive Income</div> <div className="text-white font-medium mb-1">Passive Income</div>
<div className="text-white/30 text-xs sm:text-sm">Monthly payouts from your portfolio.</div> <div className="text-white/30 text-sm">Monthly payouts from your portfolio.</div>
</div> </div>
</div> </div>
</div> </div>
@ -433,47 +431,45 @@ export default function HomePage() {
</div> </div>
</section> </section>
{/* DEEP DIVE: YIELD - Mobile optimized */} {/* DEEP DIVE: YIELD */}
<section className="relative py-16 sm:py-24 lg:py-32 px-5 sm:px-6 border-b border-white/[0.05] bg-[#050505] overflow-hidden"> <section className="relative 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="absolute inset-0 bg-accent/[0.02]" />
<div className="max-w-[1200px] mx-auto relative z-10"> <div className="max-w-[1200px] mx-auto relative z-10">
<div className="mb-10 sm:mb-16 lg:mb-20 text-center"> <div className="mb-20 text-center">
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.15em] sm:tracking-[0.2em] mb-3 sm:mb-4 block">The Endgame</span> <span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">The Endgame</span>
<h2 className="font-display text-2xl sm:text-4xl lg:text-5xl text-white mb-4 sm:mb-6">Intent Routing™</h2> <h2 className="font-display text-4xl sm:text-5xl text-white mb-6">Intent Routing™</h2>
<p className="text-white/50 max-w-2xl mx-auto text-base sm:text-lg font-light leading-relaxed px-2 sm:px-0"> <p className="text-white/50 max-w-2xl mx-auto text-lg font-light leading-relaxed">
We don't build websites. We build signposts. We don't build websites. We build signposts. <br/>
<span className="hidden sm:inline"><br/></span> Our engine detects user intent (e.g. "kredit.ch" = Loan Search) and routes traffic directly to high-paying partners.
<span className="sm:hidden"> </span>
Our engine detects user intent and routes traffic directly to high-paying partners.
</p> </p>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 lg:gap-8"> <div className="grid md:grid-cols-3 gap-8">
{/* Step 1 */} {/* Step 1 */}
<div className="bg-[#020202] border border-white/10 p-6 sm:p-8 lg:p-10 relative group hover:border-accent/30 transition-colors"> <div className="bg-[#020202] border border-white/10 p-10 relative group hover:border-accent/30 transition-colors">
<div className="w-12 h-12 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"> <div className="w-14 h-14 bg-white/5 flex items-center justify-center mb-8 text-white group-hover:text-accent group-hover:bg-accent/10 transition-all">
<Network className="w-6 h-6 sm:w-7 sm:h-7" /> <Network className="w-7 h-7" />
</div> </div>
<h3 className="text-white font-bold text-lg sm:text-xl mb-2 sm:mb-3">1. Connect</h3> <h3 className="text-white font-bold text-xl mb-3">1. Connect</h3>
<p className="text-white/40 text-xs sm:text-sm font-mono leading-relaxed">Point your nameservers to `ns.pounce.io`. The system takes over instantly.</p> <p className="text-white/40 text-sm font-mono leading-relaxed">Point your nameservers to `ns.pounce.io`. The system takes over instantly.</p>
</div> </div>
{/* Step 2 */} {/* Step 2 */}
<div className="bg-[#020202] border border-white/10 p-6 sm:p-8 lg:p-10 relative group hover:border-accent/30 transition-colors"> <div className="bg-[#020202] border border-white/10 p-10 relative group hover:border-accent/30 transition-colors">
<div className="w-12 h-12 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"> <div className="w-14 h-14 bg-white/5 flex items-center justify-center mb-8 text-white group-hover:text-accent group-hover:bg-accent/10 transition-all">
<Cpu className="w-6 h-6 sm:w-7 sm:h-7" /> <Cpu className="w-7 h-7" />
</div> </div>
<h3 className="text-white font-bold text-lg sm:text-xl mb-2 sm:mb-3">2. Analyze</h3> <h3 className="text-white font-bold text-xl mb-3">2. Analyze</h3>
<p className="text-white/40 text-xs sm:text-sm font-mono leading-relaxed">We scan the semantic intent. `zahnarzt-zh.ch` is identified as "Medical Booking Lead".</p> <p className="text-white/40 text-sm font-mono leading-relaxed">We scan the semantic intent. `zahnarzt-zh.ch` is identified as "Medical Booking Lead".</p>
</div> </div>
{/* Step 3 */} {/* Step 3 */}
<div className="bg-[#020202] border border-white/10 p-6 sm:p-8 lg:p-10 relative group hover:border-accent/30 transition-colors"> <div className="bg-[#020202] border border-white/10 p-10 relative group hover:border-accent/30 transition-colors">
<div className="w-12 h-12 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"> <div className="w-14 h-14 bg-white/5 flex items-center justify-center mb-8 text-white group-hover:text-accent group-hover:bg-accent/10 transition-all">
<Share2 className="w-6 h-6 sm:w-7 sm:h-7" /> <Share2 className="w-7 h-7" />
</div> </div>
<h3 className="text-white font-bold text-lg sm:text-xl mb-2 sm:mb-3">3. Route</h3> <h3 className="text-white font-bold text-xl mb-3">3. Route</h3>
<p className="text-white/40 text-xs sm:text-sm font-mono leading-relaxed">Traffic is routed to vertical partners. You earn per qualified lead.</p> <p className="text-white/40 text-sm font-mono leading-relaxed">Traffic is routed to vertical partners (e.g. Doctolib, Comparis). You earn per qualified lead.</p>
</div> </div>
</div> </div>
</div> </div>

270
frontend/src/app/terminal/settings/page.tsx
View File

@ -230,11 +230,12 @@ export default function SettingsPage() {
{ id: 'security' as const, label: 'Security', icon: Shield }, { id: 'security' as const, label: 'Security', icon: Shield },
] ]
// Mobile Nav - same as Intel page
const mobileNavItems = [ const mobileNavItems = [
{ href: '/terminal/radar', label: 'Radar', icon: Target, active: false }, { href: '/terminal/radar', label: 'Radar', icon: Target, active: false },
{ href: '/terminal/market', label: 'Market', icon: Gavel, active: false }, { href: '/terminal/market', label: 'Market', icon: Gavel, active: false },
{ href: '/terminal/watchlist', label: 'Watch', icon: Eye, active: false }, { href: '/terminal/watchlist', label: 'Watch', icon: Eye, active: false },
{ href: '/terminal/settings', label: 'Settings', icon: Settings, active: true }, { href: '/terminal/intel', label: 'Intel', icon: TrendingUp, active: false },
] ]
const drawerNavSections = [ const drawerNavSections = [
@ -245,25 +246,30 @@ export default function SettingsPage() {
]}, ]},
{ title: 'Manage', items: [ { title: 'Manage', items: [
{ href: '/terminal/watchlist', label: 'Watchlist', icon: Eye }, { href: '/terminal/watchlist', label: 'Watchlist', icon: Eye },
{ href: '/terminal/sniper', label: 'Sniper', icon: Bell }, { href: '/terminal/sniper', label: 'Sniper', icon: Target },
]}, ]},
{ title: 'Monetize', items: [ { title: 'Monetize', items: [
{ href: '/terminal/yield', label: 'Yield', icon: Coins }, { href: '/terminal/yield', label: 'Yield', icon: Coins, isNew: true },
{ href: '/terminal/listing', label: 'For Sale', icon: Tag }, { href: '/terminal/listing', label: 'For Sale', icon: Tag },
]}, ]},
] ]
return ( return (
<div className="min-h-screen bg-[#020202] text-white"> <div className="min-h-screen bg-[#020202]">
{/* Sidebar - Desktop only */} {/* Desktop Sidebar */}
<Sidebar /> <div className="hidden lg:block">
<Sidebar />
</div>
<main className="lg:pl-[240px] pb-20 lg:pb-0"> <main className="lg:pl-[240px]">
{/* ═══════════════════════════════════════════════════════════════════════ */} {/* ═══════════════════════════════════════════════════════════════════════ */}
{/* MOBILE HEADER */} {/* MOBILE HEADER */}
{/* ═══════════════════════════════════════════════════════════════════════ */} {/* ═══════════════════════════════════════════════════════════════════════ */}
<header className="lg:hidden sticky top-0 z-40 bg-[#020202]/95 backdrop-blur-md border-b border-white/[0.08]"> <header
className="lg:hidden sticky top-0 z-40 bg-[#020202]/95 backdrop-blur-md border-b border-white/[0.08]"
style={{ paddingTop: 'env(safe-area-inset-top)' }}
>
<div className="px-4 py-3"> <div className="px-4 py-3">
{/* Top Row */} {/* Top Row */}
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
@ -271,9 +277,9 @@ export default function SettingsPage() {
<div className="w-1.5 h-1.5 bg-accent animate-pulse" /> <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
<span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Settings</span> <span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Settings</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 text-[10px] font-mono text-white/40">
<TierIcon className={clsx("w-4 h-4", tierName === 'Tycoon' ? "text-amber-400" : "text-accent")} /> <TierIcon className={clsx("w-3.5 h-3.5", tierName === 'Tycoon' ? "text-amber-400" : "text-accent")} />
<span className="text-[10px] font-mono text-white/60">{tierName}</span> <span>{tierName}</span>
</div> </div>
</div> </div>
@ -281,17 +287,17 @@ export default function SettingsPage() {
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
<div className="bg-white/[0.02] border border-white/[0.08] p-2"> <div className="bg-white/[0.02] border border-white/[0.08] p-2">
<div className="text-lg font-bold text-white tabular-nums">{subscription?.domains_used || 0}</div> <div className="text-lg font-bold text-white tabular-nums">{subscription?.domains_used || 0}</div>
<div className="text-[9px] font-mono text-white/30 uppercase">Domains</div> <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Domains</div>
</div> </div>
<div className="bg-white/[0.02] border border-white/[0.08] p-2"> <div className="bg-white/[0.02] border border-white/[0.08] p-2">
<div className="text-lg font-bold text-white tabular-nums"> <div className="text-lg font-bold text-white tabular-nums">
{subscription?.check_frequency === 'realtime' ? '10m' : subscription?.check_frequency === 'hourly' ? '1h' : '24h'} {subscription?.check_frequency === 'realtime' ? '10m' : subscription?.check_frequency === 'hourly' ? '1h' : '24h'}
</div> </div>
<div className="text-[9px] font-mono text-white/30 uppercase">Interval</div> <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Interval</div>
</div> </div>
<div className="bg-accent/[0.05] border border-accent/20 p-2"> <div className="bg-accent/[0.05] border border-accent/20 p-2">
<div className="text-lg font-bold text-accent tabular-nums capitalize">{subscription?.status || 'active'}</div> <div className="text-lg font-bold text-accent tabular-nums capitalize">{subscription?.status || 'active'}</div>
<div className="text-[9px] font-mono text-accent/60 uppercase">Status</div> <div className="text-[9px] font-mono text-accent/60 uppercase tracking-wider">Status</div>
</div> </div>
</div> </div>
</div> </div>
@ -355,7 +361,7 @@ export default function SettingsPage() {
{/* ═══════════════════════════════════════════════════════════════════════ */} {/* ═══════════════════════════════════════════════════════════════════════ */}
{/* CONTENT */} {/* CONTENT */}
{/* ═══════════════════════════════════════════════════════════════════════ */} {/* ═══════════════════════════════════════════════════════════════════════ */}
<section className="px-4 lg:px-10"> <section className="px-4 lg:px-10 pb-24 lg:pb-10">
{/* Profile Tab */} {/* Profile Tab */}
{activeTab === 'profile' && ( {activeTab === 'profile' && (
@ -581,96 +587,158 @@ export default function SettingsPage() {
</div> </div>
)} )}
</section> </section>
</main>
{/* ═══════════════════════════════════════════════════════════════════════ */} {/* ═══════════════════════════════════════════════════════════════════════ */}
{/* MOBILE BOTTOM NAV */} {/* MOBILE BOTTOM NAV */}
{/* ═══════════════════════════════════════════════════════════════════════ */} {/* ═══════════════════════════════════════════════════════════════════════ */}
<nav className="lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-[#020202]/95 backdrop-blur-md border-t border-white/[0.06]"> <nav
<div className="flex items-center justify-around h-14"> className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#020202] border-t border-white/[0.08]"
{mobileNavItems.map((item) => ( style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
<Link >
key={item.href} <div className="flex items-stretch h-14">
href={item.href} {mobileNavItems.map((item) => (
className={clsx( <Link
"relative flex flex-col items-center justify-center gap-0.5 flex-1 h-full transition-colors", key={item.href}
item.active ? "text-accent" : "text-white/40" href={item.href}
)} className={clsx(
> "flex-1 flex flex-col items-center justify-center gap-0.5 relative transition-colors",
<item.icon className="w-5 h-5" /> item.active ? "text-accent" : "text-white/40 active:text-white/80"
<span className="text-[9px] font-mono uppercase tracking-wider">{item.label}</span> )}
{item.active && <div className="absolute bottom-0 w-8 h-0.5 bg-accent" />}
</Link>
))}
<button
onClick={() => setMenuOpen(true)}
className="flex flex-col items-center justify-center gap-0.5 flex-1 h-full text-white/40"
>
<Menu className="w-5 h-5" />
<span className="text-[9px] font-mono uppercase tracking-wider">Menu</span>
</button>
</div>
</nav>
{/* ═══════════════════════════════════════════════════════════════════════ */}
{/* NAVIGATION DRAWER */}
{/* ═══════════════════════════════════════════════════════════════════════ */}
{menuOpen && (
<>
<div className="lg:hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-50" onClick={() => setMenuOpen(false)} />
<div className="lg:hidden fixed right-0 top-0 bottom-0 w-72 bg-[#020202] border-l border-white/[0.08] z-50 flex flex-col">
<div className="flex items-center justify-between p-4 border-b border-white/[0.08]">
<div className="flex items-center gap-2">
<Image src="/logo.svg" alt="Pounce" width={20} height={20} />
<span className="text-xs font-mono text-white/40">Terminal v1.0</span>
</div>
<button onClick={() => setMenuOpen(false)} className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/40 hover:text-white">
<X className="w-4 h-4" />
</button>
</div>
<div className="flex-1 overflow-y-auto py-4">
{drawerNavSections.map((section) => (
<div key={section.title} className="mb-4">
<div className="px-4 py-1">
<span className="text-[9px] font-mono text-white/30 uppercase tracking-widest">{section.title}</span>
</div>
{section.items.map((item) => (
<Link
key={item.href}
href={item.href}
onClick={() => setMenuOpen(false)}
className="flex items-center gap-3 px-4 py-2.5 text-white/60 hover:text-white hover:bg-white/[0.03] transition-colors"
>
<item.icon className="w-4 h-4" />
<span className="text-xs font-mono">{item.label}</span>
</Link>
))}
</div>
))}
</div>
<div className="border-t border-white/[0.08] p-4">
<div className="flex items-center gap-3 mb-3">
<div className="w-8 h-8 bg-accent/10 border border-accent/20 flex items-center justify-center">
<TierIcon className="w-4 h-4 text-accent" />
</div>
<div className="flex-1 min-w-0">
<p className="text-xs font-mono text-white truncate">{user?.name || user?.email}</p>
<p className="text-[10px] text-accent">{tierName}</p>
</div>
</div>
<button
onClick={() => { setMenuOpen(false); logout() }}
className="w-full flex items-center justify-center gap-2 py-2 text-xs font-mono text-white/40 border border-white/10 hover:border-red-500/30 hover:text-red-400"
> >
<LogOut className="w-3.5 h-3.5" /> {item.active && (
Sign Out <div className="absolute top-0 left-1/2 -translate-x-1/2 w-10 h-0.5 bg-accent" />
</button> )}
<item.icon className="w-5 h-5" />
<span className="text-[9px] font-mono uppercase tracking-wider">{item.label}</span>
</Link>
))}
<button
onClick={() => setMenuOpen(true)}
className="flex-1 flex flex-col items-center justify-center gap-0.5 text-white/40 active:text-white/80 transition-all"
>
<Menu className="w-5 h-5" />
<span className="text-[9px] font-mono uppercase tracking-wider">Menu</span>
</button>
</div>
</nav>
{/* ═══════════════════════════════════════════════════════════════════════ */}
{/* MOBILE DRAWER */}
{/* ═══════════════════════════════════════════════════════════════════════ */}
{menuOpen && (
<div className="lg:hidden fixed inset-0 z-[100]">
<div
className="absolute inset-0 bg-black/80 animate-in fade-in duration-200"
onClick={() => setMenuOpen(false)}
/>
<div
className="absolute top-0 right-0 bottom-0 w-[80%] max-w-[300px] bg-[#0A0A0A] border-l border-white/[0.08] animate-in slide-in-from-right duration-300 flex flex-col"
style={{ paddingTop: 'env(safe-area-inset-top)', paddingBottom: 'env(safe-area-inset-bottom)' }}
>
<div className="flex items-center justify-between p-4 border-b border-white/[0.08]">
<div className="flex items-center gap-3">
<Image src="/pounce-puma.png" alt="Pounce" width={28} height={28} className="object-contain" />
<div>
<p className="text-sm font-bold text-white">Pounce</p>
<p className="text-[9px] text-white/40 font-mono uppercase tracking-widest">Terminal v1.0</p>
</div>
</div>
<button
onClick={() => setMenuOpen(false)}
className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/60 hover:text-white active:bg-white/5 transition-all"
>
<X className="w-4 h-4" />
</button>
</div>
<div className="flex-1 overflow-y-auto py-4">
{drawerNavSections.map((section) => (
<div key={section.title} className="mb-4">
<div className="flex items-center gap-2 px-4 mb-2">
<div className="w-1 h-3 bg-accent" />
<span className="text-[9px] font-bold text-white/30 uppercase tracking-[0.2em]">{section.title}</span>
</div>
<div>
{section.items.map((item: any) => (
<Link
key={item.href}
href={item.href}
onClick={() => setMenuOpen(false)}
className="flex items-center gap-3 px-4 py-2.5 text-white/60 active:text-white active:bg-white/[0.03] transition-colors border-l-2 border-transparent active:border-accent"
>
<item.icon className="w-4 h-4 text-white/30" />
<span className="text-sm font-medium flex-1">{item.label}</span>
{item.isNew && (
<span className="px-1.5 py-0.5 text-[8px] font-bold bg-accent text-black">NEW</span>
)}
</Link>
))}
</div>
</div>
))}
<div className="pt-3 border-t border-white/[0.08] mx-4">
<Link
href="/terminal/settings"
onClick={() => setMenuOpen(false)}
className="flex items-center gap-3 py-2.5 text-accent transition-colors"
>
<Settings className="w-4 h-4" />
<span className="text-sm font-medium">Settings</span>
</Link>
{user?.is_admin && (
<Link
href="/admin"
onClick={() => setMenuOpen(false)}
className="flex items-center gap-3 py-2.5 text-amber-500/70 active:text-amber-400 transition-colors"
>
<Shield className="w-4 h-4" />
<span className="text-sm font-medium">Admin</span>
</Link>
)}
</div>
</div>
<div className="p-4 bg-white/[0.02] border-t border-white/[0.08]">
<div className="flex items-center gap-3 mb-3">
<div className="w-8 h-8 bg-accent/10 border border-accent/20 flex items-center justify-center">
<TierIcon className="w-4 h-4 text-accent" />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-bold text-white truncate">
{user?.name || user?.email?.split('@')[0] || 'User'}
</p>
<p className="text-[9px] font-mono text-white/40 uppercase tracking-wider">{tierName}</p>
</div>
</div>
{tierName === 'Scout' && (
<Link
href="/pricing"
onClick={() => setMenuOpen(false)}
className="flex items-center justify-center gap-2 w-full py-2.5 bg-accent text-black text-xs font-bold uppercase tracking-wider active:scale-[0.98] transition-all mb-2"
>
<Sparkles className="w-3 h-3" />
Upgrade
</Link>
)}
<button
onClick={() => { logout(); setMenuOpen(false) }}
className="flex items-center justify-center gap-2 w-full py-2 border border-white/10 text-white/40 text-[10px] font-mono uppercase tracking-wider active:bg-white/5 transition-all"
>
<LogOut className="w-3 h-3" />
Sign out
</button>
</div>
</div> </div>
</div> </div>
</> )}
)} </main>
</div> </div>
) )
} }