fix: Settings page matching Intel page pattern exactly
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 (Hidden on mobile for cleaner UX)
|
||||
// High-end Live Market Ticker - Monochrome & Technical
|
||||
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="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="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="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-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" />
|
||||
<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}
|
||||
</span>
|
||||
</div>
|
||||
<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 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>
|
||||
</div>
|
||||
))}
|
||||
@ -133,16 +133,16 @@ export default function HomePage() {
|
||||
|
||||
<Header />
|
||||
|
||||
{/* 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">
|
||||
{/* 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">
|
||||
<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 */}
|
||||
<div className="lg:col-span-7 relative z-20 text-center lg:text-left">
|
||||
{/* 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">
|
||||
{/* 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">
|
||||
<div className="absolute inset-0 bg-accent/20 blur-xl rounded-full animate-pulse" />
|
||||
<Image
|
||||
src="/pounce-puma.png"
|
||||
@ -152,87 +152,86 @@ export default function HomePage() {
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<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 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>
|
||||
|
||||
{/* 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">
|
||||
{/* 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">
|
||||
<span className="block animate-slide-up opacity-0" style={{ animationDelay: '0.2s', animationFillMode: 'forwards' }}>
|
||||
The market
|
||||
</span>
|
||||
<span className="block text-white animate-slide-up opacity-0" style={{ animationDelay: '0.4s', animationFillMode: 'forwards' }}>
|
||||
never sleeps.
|
||||
</span>
|
||||
<span className="block mt-2 sm:mt-4 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.
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Subline & Stats */}
|
||||
<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.
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
</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 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>
|
||||
<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 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>
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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' }}>
|
||||
{/* 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' }}>
|
||||
<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 */}
|
||||
<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="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="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="relative z-10">
|
||||
<div className="flex items-center justify-between mb-5 sm:mb-8">
|
||||
<span className="text-[9px] sm:text-[10px] font-mono uppercase tracking-[0.15em] sm:tracking-[0.2em] text-accent flex items-center gap-1.5 sm:gap-2">
|
||||
<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">
|
||||
<span className="w-1.5 h-1.5 bg-accent animate-pulse" />
|
||||
Terminal Access
|
||||
</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>
|
||||
</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 />
|
||||
</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 className="hidden xs:inline">V2.0.4 [STABLE]</span>
|
||||
<span className="xs:hidden">V2.0.4</span>
|
||||
<span>V2.0.4 [STABLE]</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -247,16 +246,16 @@ export default function HomePage() {
|
||||
<MarketTicker auctions={hotAuctions} />
|
||||
)}
|
||||
|
||||
{/* 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]">
|
||||
{/* THE PARADIGM SHIFT - Problem / Solution */}
|
||||
<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="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>
|
||||
<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>
|
||||
</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>
|
||||
Investors pay renewal fees for years, hoping for a "Unicorn" sale that never happens. It's gambling, not investing.
|
||||
</p>
|
||||
@ -267,29 +266,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-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 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>
|
||||
<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>
|
||||
</li>
|
||||
<li className="flex items-start gap-3 sm:gap-4">
|
||||
<Zap className="w-5 h-5 text-accent mt-0.5 shrink-0" />
|
||||
<li className="flex items-start gap-4">
|
||||
<Zap className="w-5 h-5 text-accent mt-px shrink-0" />
|
||||
<div>
|
||||
<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>
|
||||
</li>
|
||||
<li className="flex items-start gap-3 sm:gap-4">
|
||||
<Coins className="w-5 h-5 text-accent mt-0.5 shrink-0" />
|
||||
<li className="flex items-start gap-4">
|
||||
<Coins className="w-5 h-5 text-accent mt-px shrink-0" />
|
||||
<div>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
@ -299,58 +298,57 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CORE ARCHITECTURE - 3 Pillars - Mobile optimized */}
|
||||
<section className="relative py-16 sm:py-24 lg:py-40 px-5 sm:px-6 bg-[#020202]">
|
||||
{/* CORE ARCHITECTURE - 3 Pillars */}
|
||||
<section className="relative py-40 px-4 sm:px-6 bg-[#020202]">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
{/* Section Header */}
|
||||
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-end mb-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">
|
||||
<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">
|
||||
The Lifecycle <br />
|
||||
<span className="text-white/30">Engine.</span>
|
||||
</h2>
|
||||
</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 />
|
||||
// MARKET_PROTOCOL_READY<br />
|
||||
// YIELD_GENERATION_STANDBY
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 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]">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-px bg-white/[0.08] border border-white/[0.08]">
|
||||
|
||||
{/* 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="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 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>
|
||||
|
||||
<div className="h-full flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="mb-5 sm:mb-8 font-mono text-[10px] sm:text-xs text-accent uppercase tracking-widest border border-accent/20 inline-block px-2.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
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
"Identify Targets." We scan 886+ TLDs in real-time to uncover hidden opportunities before the market reacts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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 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>
|
||||
<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 className="text-white font-medium mb-1">Global Scan</div>
|
||||
<div className="text-white/30 text-sm">Zone file analysis & expiration monitoring.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
<Target className="w-5 h-5 text-accent mt-0.5" />
|
||||
<div className="flex items-start gap-4">
|
||||
<Target className="w-5 h-5 text-accent mt-1" />
|
||||
<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 className="text-white font-medium mb-1">Valuation AI</div>
|
||||
<div className="text-white/30 text-sm">Instant fair-market value estimation.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -358,35 +356,35 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
{/* 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="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 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>
|
||||
|
||||
<div className="h-full flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="mb-5 sm:mb-8 font-mono text-[10px] sm:text-xs text-accent uppercase tracking-widest border border-accent/20 inline-block px-2.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
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
"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-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 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>
|
||||
<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 className="text-white font-medium mb-1">Verified Owners</div>
|
||||
<div className="text-white/30 text-sm">Mandatory DNS verification. No fakes.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
<Gavel className="w-5 h-5 text-accent mt-0.5" />
|
||||
<div className="flex items-start gap-4">
|
||||
<Gavel className="w-5 h-5 text-accent mt-1" />
|
||||
<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 className="text-white font-medium mb-1">Direct Execution</div>
|
||||
<div className="text-white/30 text-sm">P2P transfers without middlemen.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -394,35 +392,35 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
{/* 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="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 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>
|
||||
|
||||
<div className="h-full flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="mb-5 sm:mb-8 font-mono text-[10px] sm:text-xs text-accent uppercase tracking-widest border border-accent/20 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
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
"Deploy the Asset." Our "Intent Routing" engine transforms idle domains into active revenue generators via automated traffic monetization.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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 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>
|
||||
<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 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>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
<Coins className="w-5 h-5 text-accent mt-0.5" />
|
||||
<div className="flex items-start gap-4">
|
||||
<Coins className="w-5 h-5 text-accent mt-1" />
|
||||
<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 className="text-white font-medium mb-1">Passive Income</div>
|
||||
<div className="text-white/30 text-sm">Monthly payouts from your portfolio.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -433,47 +431,45 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
{/* DEEP DIVE: YIELD */}
|
||||
<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="max-w-[1200px] mx-auto relative z-10">
|
||||
<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.
|
||||
<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.
|
||||
</p>
|
||||
</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 */}
|
||||
<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 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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* 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="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 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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* 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="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 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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -230,11 +230,12 @@ export default function SettingsPage() {
|
||||
{ id: 'security' as const, label: 'Security', icon: Shield },
|
||||
]
|
||||
|
||||
// Mobile Nav - same as Intel page
|
||||
const mobileNavItems = [
|
||||
{ href: '/terminal/radar', label: 'Radar', icon: Target, active: false },
|
||||
{ href: '/terminal/market', label: 'Market', icon: Gavel, 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 = [
|
||||
@ -245,25 +246,30 @@ export default function SettingsPage() {
|
||||
]},
|
||||
{ title: 'Manage', items: [
|
||||
{ href: '/terminal/watchlist', label: 'Watchlist', icon: Eye },
|
||||
{ href: '/terminal/sniper', label: 'Sniper', icon: Bell },
|
||||
{ href: '/terminal/sniper', label: 'Sniper', icon: Target },
|
||||
]},
|
||||
{ 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 },
|
||||
]},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#020202] text-white">
|
||||
{/* Sidebar - Desktop only */}
|
||||
<div className="min-h-screen bg-[#020202]">
|
||||
{/* Desktop 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 */}
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
<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">
|
||||
{/* Top Row */}
|
||||
<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" />
|
||||
<span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Settings</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<TierIcon className={clsx("w-4 h-4", tierName === 'Tycoon' ? "text-amber-400" : "text-accent")} />
|
||||
<span className="text-[10px] font-mono text-white/60">{tierName}</span>
|
||||
<div className="flex items-center gap-2 text-[10px] font-mono text-white/40">
|
||||
<TierIcon className={clsx("w-3.5 h-3.5", tierName === 'Tycoon' ? "text-amber-400" : "text-accent")} />
|
||||
<span>{tierName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -281,17 +287,17 @@ export default function SettingsPage() {
|
||||
<div className="grid grid-cols-3 gap-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-[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 className="bg-white/[0.02] border border-white/[0.08] p-2">
|
||||
<div className="text-lg font-bold text-white tabular-nums">
|
||||
{subscription?.check_frequency === 'realtime' ? '10m' : subscription?.check_frequency === 'hourly' ? '1h' : '24h'}
|
||||
</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 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-[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>
|
||||
@ -355,7 +361,7 @@ export default function SettingsPage() {
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* CONTENT */}
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
<section className="px-4 lg:px-10">
|
||||
<section className="px-4 lg:px-10 pb-24 lg:pb-10">
|
||||
|
||||
{/* Profile Tab */}
|
||||
{activeTab === 'profile' && (
|
||||
@ -581,30 +587,35 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* 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]">
|
||||
<div className="flex items-center justify-around h-14">
|
||||
<nav
|
||||
className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#020202] border-t border-white/[0.08]"
|
||||
style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
|
||||
>
|
||||
<div className="flex items-stretch h-14">
|
||||
{mobileNavItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={clsx(
|
||||
"relative flex flex-col items-center justify-center gap-0.5 flex-1 h-full transition-colors",
|
||||
item.active ? "text-accent" : "text-white/40"
|
||||
"flex-1 flex flex-col items-center justify-center gap-0.5 relative transition-colors",
|
||||
item.active ? "text-accent" : "text-white/40 active:text-white/80"
|
||||
)}
|
||||
>
|
||||
{item.active && (
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-10 h-0.5 bg-accent" />
|
||||
)}
|
||||
<item.icon className="w-5 h-5" />
|
||||
<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"
|
||||
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>
|
||||
@ -613,18 +624,32 @@ export default function SettingsPage() {
|
||||
</nav>
|
||||
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* NAVIGATION DRAWER */}
|
||||
{/* MOBILE 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="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-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 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>
|
||||
<button onClick={() => setMenuOpen(false)} className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/40 hover:text-white">
|
||||
</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>
|
||||
@ -632,45 +657,88 @@ export default function SettingsPage() {
|
||||
<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 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>
|
||||
{section.items.map((item) => (
|
||||
<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 hover:text-white hover:bg-white/[0.03] transition-colors"
|
||||
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" />
|
||||
<span className="text-xs font-mono">{item.label}</span>
|
||||
<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="border-t border-white/[0.08] p-4">
|
||||
<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-xs font-mono text-white truncate">{user?.name || user?.email}</p>
|
||||
<p className="text-[10px] text-accent">{tierName}</p>
|
||||
<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>
|
||||
<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"
|
||||
|
||||
{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"
|
||||
>
|
||||
<LogOut className="w-3.5 h-3.5" />
|
||||
Sign Out
|
||||
<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>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user