feat: Settings page with mobile-first techy design
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
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
This commit is contained in:
@ -42,7 +42,7 @@ interface HotAuction {
|
||||
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[] }) {
|
||||
const tickerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
@ -52,9 +52,9 @@ function MarketTicker({ auctions }: { auctions: HotAuction[] }) {
|
||||
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-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="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-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-3">
|
||||
<div
|
||||
@ -65,17 +65,17 @@ function MarketTicker({ auctions }: { auctions: HotAuction[] }) {
|
||||
{items.map((auction, i) => (
|
||||
<div
|
||||
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" />
|
||||
<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}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="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>
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
<span className="text-[11px] sm: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>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@ -133,16 +133,16 @@ export default function HomePage() {
|
||||
|
||||
<Header />
|
||||
|
||||
{/* HERO SECTION: Brutally Catchy & Noble */}
|
||||
<section className="relative min-h-[90vh] flex flex-col justify-center pt-32 pb-24 px-4 sm:px-6 z-10">
|
||||
{/* HERO SECTION: Brutally Catchy & Noble - Mobile First */}
|
||||
<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="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 */}
|
||||
<div className="lg:col-span-7 relative z-20 text-center lg:text-left">
|
||||
{/* Brand Seal */}
|
||||
<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-16 h-16">
|
||||
{/* Brand Seal - Optimized for mobile */}
|
||||
<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-12 h-12 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"
|
||||
@ -152,86 +152,87 @@ export default function HomePage() {
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="h-px w-12 bg-white/10" />
|
||||
<span className="text-[10px] font-mono uppercase tracking-[0.3em] text-accent">Est. 2025 // Global Operations</span>
|
||||
<div className="h-px w-6 sm: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>
|
||||
</div>
|
||||
|
||||
{/* Headline */}
|
||||
<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">
|
||||
{/* Headline - Mobile optimized typography */}
|
||||
<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' }}>
|
||||
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-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.
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Subline & Stats */}
|
||||
<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.
|
||||
<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>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<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>
|
||||
<div className="text-2xl font-display text-white mb-1">886+</div>
|
||||
<div className="text-[10px] uppercase tracking-widest text-white/40 font-mono">TLDs Scanned</div>
|
||||
{/* Stats Grid - 2x2 on mobile, 4 cols on desktop */}
|
||||
<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="text-center sm:text-left">
|
||||
<div className="text-xl sm:text-2xl font-display text-white mb-0.5 sm:mb-1">886+</div>
|
||||
<div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">TLDs Scanned</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-display text-white mb-1">24/7</div>
|
||||
<div className="text-[10px] uppercase tracking-widest text-white/40 font-mono">Live Recon</div>
|
||||
<div className="text-center sm:text-left">
|
||||
<div className="text-xl sm:text-2xl font-display text-white mb-0.5 sm:mb-1">24/7</div>
|
||||
<div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">Live Recon</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-display text-white mb-1">10s</div>
|
||||
<div className="text-[10px] uppercase tracking-widest text-white/40 font-mono">Latency</div>
|
||||
<div className="text-center sm:text-left">
|
||||
<div className="text-xl sm:text-2xl font-display text-white mb-0.5 sm:mb-1">10s</div>
|
||||
<div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">Latency</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-display text-white mb-1">$1B+</div>
|
||||
<div className="text-[10px] uppercase tracking-widest text-white/40 font-mono">Assets Tracked</div>
|
||||
<div className="text-center sm:text-left">
|
||||
<div className="text-xl sm:text-2xl font-display text-white mb-0.5 sm:mb-1">$1B+</div>
|
||||
<div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">Assets Tracked</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: The Artifact (Domain Checker) */}
|
||||
<div className="lg:col-span-5 relative animate-scale-in opacity-0 mt-8 lg:mt-0" style={{ animationDelay: '1s', animationFillMode: 'forwards' }}>
|
||||
{/* Right: The Artifact (Domain Checker) - Mobile optimized */}
|
||||
<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="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 */}
|
||||
<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-4 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 -right-px w-4 h-4 border-b border-r 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-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-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="relative z-10">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<span className="text-[10px] font-mono uppercase tracking-[0.2em] text-accent flex items-center gap-2">
|
||||
<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-1.5 sm:gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-accent animate-pulse" />
|
||||
Terminal Access
|
||||
</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>
|
||||
</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 />
|
||||
</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>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>
|
||||
@ -246,16 +247,16 @@ export default function HomePage() {
|
||||
<MarketTicker auctions={hotAuctions} />
|
||||
)}
|
||||
|
||||
{/* THE PARADIGM SHIFT - Problem / Solution */}
|
||||
<section className="relative py-32 px-4 sm:px-6 border-b border-white/[0.05]">
|
||||
{/* THE PARADIGM SHIFT - Problem / Solution - Mobile optimized */}
|
||||
<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="grid lg:grid-cols-2 gap-16 lg:gap-24 items-center">
|
||||
<div>
|
||||
<span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">The Broken Model</span>
|
||||
<h2 className="font-display text-4xl sm:text-5xl text-white leading-tight mb-8">
|
||||
99% of portfolios are <br/><span className="text-white/30">bleeding cash.</span>
|
||||
<div className="grid lg:grid-cols-2 gap-10 sm:gap-16 lg:gap-24 items-center">
|
||||
<div className="text-center lg:text-left">
|
||||
<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-2xl sm:text-4xl lg:text-5xl text-white leading-tight mb-5 sm:mb-8">
|
||||
99% of portfolios are <br className="hidden sm:block"/><span className="text-white/30">bleeding cash.</span>
|
||||
</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>
|
||||
Investors pay renewal fees for years, hoping for a "Unicorn" sale that never happens. It's gambling, not investing.
|
||||
</p>
|
||||
@ -266,29 +267,29 @@ export default function HomePage() {
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-4 bg-accent/5 blur-3xl" />
|
||||
<div className="relative bg-[#050505] border border-white/10 p-8 lg:p-12">
|
||||
<span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">The Pounce Protocol</span>
|
||||
<h3 className="font-display text-3xl text-white mb-8">Asset Class V2.0</h3>
|
||||
<ul className="space-y-6 font-mono text-sm text-white/80">
|
||||
<li className="flex items-start gap-4">
|
||||
<Radar className="w-5 h-5 text-accent mt-px shrink-0" />
|
||||
<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.15em] sm:tracking-[0.2em] mb-3 sm: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>
|
||||
<ul className="space-y-5 sm:space-y-6 font-mono text-sm text-white/80">
|
||||
<li className="flex items-start gap-3 sm:gap-4">
|
||||
<Radar className="w-5 h-5 text-accent mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<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>
|
||||
</li>
|
||||
<li className="flex items-start gap-4">
|
||||
<Zap className="w-5 h-5 text-accent mt-px shrink-0" />
|
||||
<li className="flex items-start gap-3 sm:gap-4">
|
||||
<Zap className="w-5 h-5 text-accent mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<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>
|
||||
</li>
|
||||
<li className="flex items-start gap-4">
|
||||
<Coins className="w-5 h-5 text-accent mt-px shrink-0" />
|
||||
<li className="flex items-start gap-3 sm:gap-4">
|
||||
<Coins className="w-5 h-5 text-accent mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
@ -298,57 +299,58 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CORE ARCHITECTURE - 3 Pillars */}
|
||||
<section className="relative py-40 px-4 sm:px-6 bg-[#020202]">
|
||||
{/* CORE ARCHITECTURE - 3 Pillars - Mobile optimized */}
|
||||
<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">
|
||||
{/* 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>
|
||||
<span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">Core Architecture</span>
|
||||
<h2 className="font-display text-4xl sm:text-5xl lg:text-6xl text-white leading-none">
|
||||
<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="text-center lg:text-left w-full lg:w-auto">
|
||||
<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-3xl sm:text-4xl lg:text-5xl xl:text-6xl text-white leading-none">
|
||||
The Lifecycle <br />
|
||||
<span className="text-white/30">Engine.</span>
|
||||
</h2>
|
||||
</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 />
|
||||
// MARKET_PROTOCOL_READY<br />
|
||||
// YIELD_GENERATION_STANDBY
|
||||
</p>
|
||||
</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 */}
|
||||
<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-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||||
<ArrowUpRight className="w-6 h-6 text-white/20" />
|
||||
<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-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-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
|
||||
</div>
|
||||
<h3 className="text-3xl text-white font-display mb-6">Intelligence</h3>
|
||||
<p className="text-white/50 leading-relaxed text-lg font-light mb-12">
|
||||
<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-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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 pt-12 border-t border-white/[0.05]">
|
||||
<div className="flex items-start gap-4">
|
||||
<Scan className="w-5 h-5 text-accent mt-1" />
|
||||
<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-3 sm:gap-4">
|
||||
<Scan className="w-5 h-5 text-accent mt-0.5" />
|
||||
<div>
|
||||
<div className="text-white font-medium mb-1">Global Scan</div>
|
||||
<div className="text-white/30 text-sm">Zone file analysis & expiration monitoring.</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-xs sm:text-sm">Zone file analysis & expiration monitoring.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<Target className="w-5 h-5 text-accent mt-1" />
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
<Target className="w-5 h-5 text-accent mt-0.5" />
|
||||
<div>
|
||||
<div className="text-white font-medium mb-1">Valuation AI</div>
|
||||
<div className="text-white/30 text-sm">Instant fair-market value estimation.</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-xs sm:text-sm">Instant fair-market value estimation.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -356,35 +358,35 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
{/* 2. MARKET */}
|
||||
<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-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||||
<ArrowUpRight className="w-6 h-6 text-white/20" />
|
||||
<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-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-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
|
||||
</div>
|
||||
<h3 className="text-3xl text-white font-display mb-6">Market</h3>
|
||||
<p className="text-white/50 leading-relaxed text-lg font-light mb-12">
|
||||
<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-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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 pt-12 border-t border-white/[0.05]">
|
||||
<div className="flex items-start gap-4">
|
||||
<ShieldCheck className="w-5 h-5 text-accent mt-1" />
|
||||
<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-3 sm:gap-4">
|
||||
<ShieldCheck className="w-5 h-5 text-accent mt-0.5" />
|
||||
<div>
|
||||
<div className="text-white font-medium mb-1">Verified Owners</div>
|
||||
<div className="text-white/30 text-sm">Mandatory DNS verification. No fakes.</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-xs sm:text-sm">Mandatory DNS verification. No fakes.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<Gavel className="w-5 h-5 text-accent mt-1" />
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
<Gavel className="w-5 h-5 text-accent mt-0.5" />
|
||||
<div>
|
||||
<div className="text-white font-medium mb-1">Direct Execution</div>
|
||||
<div className="text-white/30 text-sm">P2P transfers without middlemen.</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-xs sm:text-sm">P2P transfers without middlemen.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -392,35 +394,35 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
{/* 3. YIELD */}
|
||||
<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-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||||
<ArrowUpRight className="w-6 h-6 text-white/20" />
|
||||
<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-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-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
|
||||
</div>
|
||||
<h3 className="text-3xl text-white font-display mb-6">Yield</h3>
|
||||
<p className="text-white/50 leading-relaxed text-lg font-light mb-12">
|
||||
<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-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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 pt-12 border-t border-white/[0.05]">
|
||||
<div className="flex items-start gap-4">
|
||||
<Layers className="w-5 h-5 text-accent mt-1" />
|
||||
<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-3 sm:gap-4">
|
||||
<Layers className="w-5 h-5 text-accent mt-0.5" />
|
||||
<div>
|
||||
<div className="text-white font-medium mb-1">Intent Routing</div>
|
||||
<div className="text-white/30 text-sm">Traffic directed to high-value partners.</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-xs sm:text-sm">Traffic directed to high-value partners.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<Coins className="w-5 h-5 text-accent mt-1" />
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
<Coins className="w-5 h-5 text-accent mt-0.5" />
|
||||
<div>
|
||||
<div className="text-white font-medium mb-1">Passive Income</div>
|
||||
<div className="text-white/30 text-sm">Monthly payouts from your portfolio.</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-xs sm:text-sm">Monthly payouts from your portfolio.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -431,45 +433,47 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* DEEP DIVE: YIELD */}
|
||||
<section className="relative py-32 px-4 sm:px-6 border-b border-white/[0.05] bg-[#050505] overflow-hidden">
|
||||
{/* DEEP DIVE: YIELD - Mobile optimized */}
|
||||
<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="max-w-[1200px] mx-auto relative z-10">
|
||||
<div className="mb-20 text-center">
|
||||
<span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">The Endgame</span>
|
||||
<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-lg font-light leading-relaxed">
|
||||
We don't build websites. We build signposts. <br/>
|
||||
Our engine detects user intent (e.g. "kredit.ch" = Loan Search) and routes traffic directly to high-paying partners.
|
||||
<div className="mb-10 sm:mb-16 lg: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>
|
||||
<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-base sm:text-lg font-light leading-relaxed px-2 sm:px-0">
|
||||
We don't build websites. We build signposts.
|
||||
<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>
|
||||
</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 */}
|
||||
<div className="bg-[#020202] border border-white/10 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">
|
||||
<Network className="w-7 h-7" />
|
||||
<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-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-6 h-6 sm:w-7 sm:h-7" />
|
||||
</div>
|
||||
<h3 className="text-white font-bold text-xl 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>
|
||||
<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-xs sm:text-sm font-mono leading-relaxed">Point your nameservers to `ns.pounce.io`. The system takes over instantly.</p>
|
||||
</div>
|
||||
|
||||
{/* Step 2 */}
|
||||
<div className="bg-[#020202] border border-white/10 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">
|
||||
<Cpu className="w-7 h-7" />
|
||||
<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-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-6 h-6 sm:w-7 sm:h-7" />
|
||||
</div>
|
||||
<h3 className="text-white font-bold text-xl 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>
|
||||
<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-xs sm:text-sm font-mono leading-relaxed">We scan the semantic intent. `zahnarzt-zh.ch` is identified as "Medical Booking Lead".</p>
|
||||
</div>
|
||||
|
||||
{/* Step 3 */}
|
||||
<div className="bg-[#020202] border border-white/10 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">
|
||||
<Share2 className="w-7 h-7" />
|
||||
<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-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-6 h-6 sm:w-7 sm:h-7" />
|
||||
</div>
|
||||
<h3 className="text-white font-bold text-xl 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>
|
||||
<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-xs sm:text-sm font-mono leading-relaxed">Traffic is routed to vertical partners. You earn per qualified lead.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user