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

feat: Settings page with mobile-first techy design
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:04:45 +01:00
parent 3e067a9792
commit 89e8e64a45
2 changed files with 543 additions and 835 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 // High-end Live Market Ticker - Monochrome & Technical (Hidden on mobile for cleaner UX)
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="relative z-20 border-y border-white/[0.08] bg-[#020202] overflow-hidden"> <div className="hidden sm:block relative z-20 border-y border-white/[0.08] bg-[#020202] overflow-hidden">
<div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-[#020202] to-transparent z-10" /> <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-32 bg-gradient-to-l 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-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-6 px-8 border-r border-white/[0.08] group cursor-default transition-colors hover:bg-white/[0.02]" 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]"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 sm: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-xs text-white/70 font-medium group-hover:text-white transition-colors tracking-wide"> <span className="font-mono text-[11px] sm: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-4"> <div className="flex items-center gap-2 sm:gap-4">
<span className="text-xs text-white font-medium tracking-tight">${auction.current_bid.toLocaleString()}</span> <span className="text-[11px] sm:text-xs text-white font-medium tracking-tight">${auction.current_bid.toLocaleString()}</span>
<span className="text-[10px] text-white/30 font-mono uppercase tracking-wider">{auction.time_remaining}</span> <span className="text-[9px] sm: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 */} {/* HERO SECTION: Brutally Catchy & Noble - Mobile First */}
<section className="relative min-h-[90vh] flex flex-col justify-center pt-32 pb-24 px-4 sm:px-6 z-10"> <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">
<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-16 lg:gap-24 items-center"> <div className="grid lg:grid-cols-12 gap-10 sm: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 */} {/* Brand Seal - Optimized for mobile */}
<div className="inline-flex items-center gap-4 mb-10 animate-fade-in opacity-0" style={{ animationDelay: '0.1s', animationFillMode: 'forwards' }}> <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="relative w-16 h-16"> <div className="relative w-12 h-12 sm:w-16 sm: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,86 +152,87 @@ export default function HomePage() {
priority priority
/> />
</div> </div>
<div className="h-px w-12 bg-white/10" /> <div className="h-px w-6 sm:w-12 bg-white/10" />
<span className="text-[10px] font-mono uppercase tracking-[0.3em] text-accent">Est. 2025 // Global Operations</span> <span className="text-[9px] sm:text-[10px] font-mono uppercase tracking-[0.2em] sm:tracking-[0.3em] text-accent">Est. 2025</span>
</div> </div>
{/* Headline */} {/* Headline - Mobile optimized typography */}
<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"> <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">
<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-4 lg:mt-6 text-white/40 animate-slide-up opacity-0" style={{ animationDelay: '0.6s', animationFillMode: 'forwards' }}> <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' }}>
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-lg lg:text-xl text-white/60 max-w-xl font-light leading-relaxed mb-12 lg:mx-0 mx-auto"> <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">
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-1 font-medium">Scan. Acquire. Route. Profit.</span> <span className="text-white block mt-2 font-medium">Scan. Acquire. Route. Profit.</span>
</p> </p>
{/* Stats Grid */} {/* Stats Grid - 2x2 on mobile, 4 cols on desktop */}
<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="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> <div className="text-center sm:text-left">
<div className="text-2xl font-display text-white mb-1">886+</div> <div className="text-xl sm:text-2xl font-display text-white mb-0.5 sm:mb-1">886+</div>
<div className="text-[10px] uppercase tracking-widest text-white/40 font-mono">TLDs Scanned</div> <div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">TLDs Scanned</div>
</div> </div>
<div> <div className="text-center sm:text-left">
<div className="text-2xl font-display text-white mb-1">24/7</div> <div className="text-xl sm:text-2xl font-display text-white mb-0.5 sm:mb-1">24/7</div>
<div className="text-[10px] uppercase tracking-widest text-white/40 font-mono">Live Recon</div> <div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">Live Recon</div>
</div> </div>
<div> <div className="text-center sm:text-left">
<div className="text-2xl font-display text-white mb-1">10s</div> <div className="text-xl sm:text-2xl font-display text-white mb-0.5 sm:mb-1">10s</div>
<div className="text-[10px] uppercase tracking-widest text-white/40 font-mono">Latency</div> <div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">Latency</div>
</div> </div>
<div> <div className="text-center sm:text-left">
<div className="text-2xl font-display text-white mb-1">$1B+</div> <div className="text-xl sm:text-2xl font-display text-white mb-0.5 sm:mb-1">$1B+</div>
<div className="text-[10px] uppercase tracking-widest text-white/40 font-mono">Assets Tracked</div> <div className="text-[9px] sm: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) */} {/* Right: The Artifact (Domain Checker) - Mobile optimized */}
<div className="lg:col-span-5 relative animate-scale-in opacity-0 mt-8 lg:mt-0" style={{ animationDelay: '1s', animationFillMode: 'forwards' }}> <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="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-2 shadow-2xl"> <div className="relative z-10 bg-[#0A0A0A] border border-white/20 p-1.5 sm:p-2 shadow-2xl">
{/* Tech Corners */} {/* Tech Corners */}
<div className="absolute -top-px -left-px w-4 h-4 border-t border-l border-white/40" /> <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-4 h-4 border-t border-r 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-4 h-4 border-b border-l 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-4 h-4 border-b border-r 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-8 lg:p-10 border border-white/5 relative overflow-hidden"> <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="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-8"> <div className="flex items-center justify-between mb-5 sm:mb-8">
<span className="text-[10px] font-mono uppercase tracking-[0.2em] text-accent flex items-center gap-2"> <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="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.5"> <div className="flex gap-1 sm: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-2 shadow-inner"> <div className="bg-[#0A0A0A] border-[0.5px] border-white/10 p-1.5 sm:p-2 shadow-inner">
<DomainChecker /> <DomainChecker />
</div> </div>
<div className="mt-8 pt-8 border-t border-white/[0.05] flex justify-between items-center text-[10px] text-white/30 font-mono"> <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>SECURE CONNECTION</span>
<span>V2.0.4 [STABLE]</span> <span className="hidden xs:inline">V2.0.4 [STABLE]</span>
<span className="xs:hidden">V2.0.4</span>
</div> </div>
</div> </div>
</div> </div>
@ -246,16 +247,16 @@ export default function HomePage() {
<MarketTicker auctions={hotAuctions} /> <MarketTicker auctions={hotAuctions} />
)} )}
{/* THE PARADIGM SHIFT - Problem / Solution */} {/* THE PARADIGM SHIFT - Problem / Solution - Mobile optimized */}
<section className="relative py-32 px-4 sm:px-6 border-b border-white/[0.05]"> <section className="relative py-16 sm:py-24 lg:py-32 px-5 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-16 lg:gap-24 items-center"> <div className="grid lg:grid-cols-2 gap-10 sm:gap-16 lg:gap-24 items-center">
<div> <div className="text-center lg:text-left">
<span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">The Broken Model</span> <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>
<h2 className="font-display text-4xl sm:text-5xl text-white leading-tight mb-8"> <h2 className="font-display text-2xl sm:text-4xl lg:text-5xl text-white leading-tight mb-5 sm:mb-8">
99% of portfolios are <br/><span className="text-white/30">bleeding cash.</span> 99% of portfolios are <br className="hidden sm:block"/><span className="text-white/30">bleeding cash.</span>
</h2> </h2>
<div className="space-y-6 text-white/60 leading-relaxed text-lg font-light"> <div className="space-y-4 sm:space-y-6 text-white/60 leading-relaxed text-base sm: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>
@ -266,29 +267,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-8 lg:p-12"> <div className="relative bg-[#050505] border border-white/10 p-6 sm:p-8 lg:p-12">
<span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">The Pounce Protocol</span> <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>
<h3 className="font-display text-3xl text-white mb-8">Asset Class V2.0</h3> <h3 className="font-display text-2xl sm:text-3xl text-white mb-5 sm:mb-8">Asset Class V2.0</h3>
<ul className="space-y-6 font-mono text-sm text-white/80"> <ul className="space-y-5 sm:space-y-6 font-mono text-sm text-white/80">
<li className="flex items-start gap-4"> <li className="flex items-start gap-3 sm:gap-4">
<Radar className="w-5 h-5 text-accent mt-px shrink-0" /> <Radar className="w-5 h-5 text-accent mt-0.5 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">Zone file analysis reveals what's truly valuable. Don't guess. Know.</span> <span className="text-white/50 text-[13px] sm:text-sm">Zone file analysis reveals what's truly valuable. Don't guess. Know.</span>
</div> </div>
</li> </li>
<li className="flex items-start gap-4"> <li className="flex items-start gap-3 sm:gap-4">
<Zap className="w-5 h-5 text-accent mt-px shrink-0" /> <Zap className="w-5 h-5 text-accent mt-0.5 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">Instant settlement. Verified owners. 0% Commission.</span> <span className="text-white/50 text-[13px] sm:text-sm">Instant settlement. Verified owners. 0% Commission.</span>
</div> </div>
</li> </li>
<li className="flex items-start gap-4"> <li className="flex items-start gap-3 sm:gap-4">
<Coins className="w-5 h-5 text-accent mt-px shrink-0" /> <Coins className="w-5 h-5 text-accent mt-0.5 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">Domains pay for their own renewals via Intent Routing™.</span> <span className="text-white/50 text-[13px] sm:text-sm">Domains pay for their own renewals via Intent Routing™.</span>
</div> </div>
</li> </li>
</ul> </ul>
@ -298,57 +299,58 @@ export default function HomePage() {
</div> </div>
</section> </section>
{/* CORE ARCHITECTURE - 3 Pillars */} {/* CORE ARCHITECTURE - 3 Pillars - Mobile optimized */}
<section className="relative py-40 px-4 sm:px-6 bg-[#020202]"> <section className="relative py-16 sm:py-24 lg:py-40 px-5 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-end mb-24 border-b border-white/[0.08] pb-12"> <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> <div className="text-center lg:text-left w-full lg:w-auto">
<span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">Core Architecture</span> <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>
<h2 className="font-display text-4xl sm:text-5xl lg:text-6xl text-white leading-none"> <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl xl: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="text-white/50 max-w-md text-sm font-mono mt-8 lg:mt-0 leading-relaxed text-right"> <p className="hidden md:block 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>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-px bg-white/[0.08] border border-white/[0.08]"> {/* Mobile: Stacked cards with gaps. Desktop: Grid with borders */}
<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-10 lg:p-14 hover:bg-[#050505] transition-colors duration-500"> <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="absolute top-0 right-0 p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500"> <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-6 h-6 text-white/20" /> <ArrowUpRight className="w-5 h-5 sm:w-6 sm: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-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"> <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">
Module 01 Module 01
</div> </div>
<h3 className="text-3xl text-white font-display mb-6">Intelligence</h3> <h3 className="text-2xl sm:text-3xl text-white font-display mb-4 sm:mb-6">Intelligence</h3>
<p className="text-white/50 leading-relaxed text-lg font-light mb-12"> <p className="text-white/50 leading-relaxed text-base sm:text-lg font-light mb-8 sm: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-6 pt-12 border-t border-white/[0.05]"> <div className="space-y-4 sm:space-y-6 pt-6 sm:pt-12 border-t border-white/[0.05]">
<div className="flex items-start gap-4"> <div className="flex items-start gap-3 sm:gap-4">
<Scan className="w-5 h-5 text-accent mt-1" /> <Scan className="w-5 h-5 text-accent mt-0.5" />
<div> <div>
<div className="text-white font-medium mb-1">Global Scan</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/30 text-sm">Zone file analysis & expiration monitoring.</div> <div className="text-white/30 text-xs sm:text-sm">Zone file analysis & expiration monitoring.</div>
</div> </div>
</div> </div>
<div className="flex items-start gap-4"> <div className="flex items-start gap-3 sm:gap-4">
<Target className="w-5 h-5 text-accent mt-1" /> <Target className="w-5 h-5 text-accent mt-0.5" />
<div> <div>
<div className="text-white font-medium mb-1">Valuation AI</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/30 text-sm">Instant fair-market value estimation.</div> <div className="text-white/30 text-xs sm:text-sm">Instant fair-market value estimation.</div>
</div> </div>
</div> </div>
</div> </div>
@ -356,35 +358,35 @@ export default function HomePage() {
</div> </div>
{/* 2. MARKET */} {/* 2. MARKET */}
<div className="group relative bg-[#030303] p-10 lg:p-14 hover:bg-[#050505] transition-colors duration-500"> <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="absolute top-0 right-0 p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500"> <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-6 h-6 text-white/20" /> <ArrowUpRight className="w-5 h-5 sm:w-6 sm: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-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"> <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">
Module 02 Module 02
</div> </div>
<h3 className="text-3xl text-white font-display mb-6">Market</h3> <h3 className="text-2xl sm:text-3xl text-white font-display mb-4 sm:mb-6">Market</h3>
<p className="text-white/50 leading-relaxed text-lg font-light mb-12"> <p className="text-white/50 leading-relaxed text-base sm:text-lg font-light mb-8 sm: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-6 pt-12 border-t border-white/[0.05]"> <div className="space-y-4 sm:space-y-6 pt-6 sm:pt-12 border-t border-white/[0.05]">
<div className="flex items-start gap-4"> <div className="flex items-start gap-3 sm:gap-4">
<ShieldCheck className="w-5 h-5 text-accent mt-1" /> <ShieldCheck className="w-5 h-5 text-accent mt-0.5" />
<div> <div>
<div className="text-white font-medium mb-1">Verified Owners</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/30 text-sm">Mandatory DNS verification. No fakes.</div> <div className="text-white/30 text-xs sm:text-sm">Mandatory DNS verification. No fakes.</div>
</div> </div>
</div> </div>
<div className="flex items-start gap-4"> <div className="flex items-start gap-3 sm:gap-4">
<Gavel className="w-5 h-5 text-accent mt-1" /> <Gavel className="w-5 h-5 text-accent mt-0.5" />
<div> <div>
<div className="text-white font-medium mb-1">Direct Execution</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/30 text-sm">P2P transfers without middlemen.</div> <div className="text-white/30 text-xs sm:text-sm">P2P transfers without middlemen.</div>
</div> </div>
</div> </div>
</div> </div>
@ -392,35 +394,35 @@ export default function HomePage() {
</div> </div>
{/* 3. YIELD */} {/* 3. YIELD */}
<div className="group relative bg-[#030303] p-10 lg:p-14 hover:bg-[#050505] transition-colors duration-500"> <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="absolute top-0 right-0 p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500"> <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-6 h-6 text-white/20" /> <ArrowUpRight className="w-5 h-5 sm:w-6 sm: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-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"> <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">
Module 03 Module 03
</div> </div>
<h3 className="text-3xl text-white font-display mb-6">Yield</h3> <h3 className="text-2xl sm:text-3xl text-white font-display mb-4 sm:mb-6">Yield</h3>
<p className="text-white/50 leading-relaxed text-lg font-light mb-12"> <p className="text-white/50 leading-relaxed text-base sm:text-lg font-light mb-8 sm: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-6 pt-12 border-t border-white/[0.05]"> <div className="space-y-4 sm:space-y-6 pt-6 sm:pt-12 border-t border-white/[0.05]">
<div className="flex items-start gap-4"> <div className="flex items-start gap-3 sm:gap-4">
<Layers className="w-5 h-5 text-accent mt-1" /> <Layers className="w-5 h-5 text-accent mt-0.5" />
<div> <div>
<div className="text-white font-medium mb-1">Intent Routing</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/30 text-sm">Traffic directed to high-value partners.</div> <div className="text-white/30 text-xs sm:text-sm">Traffic directed to high-value partners.</div>
</div> </div>
</div> </div>
<div className="flex items-start gap-4"> <div className="flex items-start gap-3 sm:gap-4">
<Coins className="w-5 h-5 text-accent mt-1" /> <Coins className="w-5 h-5 text-accent mt-0.5" />
<div> <div>
<div className="text-white font-medium mb-1">Passive Income</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/30 text-sm">Monthly payouts from your portfolio.</div> <div className="text-white/30 text-xs sm:text-sm">Monthly payouts from your portfolio.</div>
</div> </div>
</div> </div>
</div> </div>
@ -431,45 +433,47 @@ export default function HomePage() {
</div> </div>
</section> </section>
{/* DEEP DIVE: YIELD */} {/* DEEP DIVE: YIELD - Mobile optimized */}
<section className="relative py-32 px-4 sm:px-6 border-b border-white/[0.05] bg-[#050505] overflow-hidden"> <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">
<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-20 text-center"> <div className="mb-10 sm:mb-16 lg:mb-20 text-center">
<span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">The Endgame</span> <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>
<h2 className="font-display text-4xl sm:text-5xl text-white mb-6">Intent Routing™</h2> <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-lg font-light leading-relaxed"> <p className="text-white/50 max-w-2xl mx-auto text-base sm:text-lg font-light leading-relaxed px-2 sm:px-0">
We don't build websites. We build signposts. <br/> We don't build websites. We build signposts.
Our engine detects user intent (e.g. "kredit.ch" = Loan Search) and routes traffic directly to high-paying partners. <span className="hidden sm:inline"><br/></span>
<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 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
{/* Step 1 */} {/* Step 1 */}
<div className="bg-[#020202] border border-white/10 p-10 relative group hover:border-accent/30 transition-colors"> <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="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"> <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">
<Network className="w-7 h-7" /> <Network className="w-6 h-6 sm:w-7 sm:h-7" />
</div> </div>
<h3 className="text-white font-bold text-xl mb-3">1. Connect</h3> <h3 className="text-white font-bold text-lg sm:text-xl mb-2 sm:mb-3">1. Connect</h3>
<p className="text-white/40 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-xs sm: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-10 relative group hover:border-accent/30 transition-colors"> <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="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"> <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">
<Cpu className="w-7 h-7" /> <Cpu className="w-6 h-6 sm:w-7 sm:h-7" />
</div> </div>
<h3 className="text-white font-bold text-xl mb-3">2. Analyze</h3> <h3 className="text-white font-bold text-lg sm:text-xl mb-2 sm:mb-3">2. Analyze</h3>
<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> <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>
</div> </div>
{/* Step 3 */} {/* Step 3 */}
<div className="bg-[#020202] border border-white/10 p-10 relative group hover:border-accent/30 transition-colors"> <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="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"> <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">
<Share2 className="w-7 h-7" /> <Share2 className="w-6 h-6 sm:w-7 sm:h-7" />
</div> </div>
<h3 className="text-white font-bold text-xl mb-3">3. Route</h3> <h3 className="text-white font-bold text-lg sm:text-xl mb-2 sm:mb-3">3. Route</h3>
<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> <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>
</div> </div>
</div> </div>
</div> </div>

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

File diff suppressed because it is too large Load Diff