feat: Mobile-optimized landing page + Header drawer + Footer improvements
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:
@ -273,7 +273,7 @@ async def get_yield_domain(
|
||||
@router.post("/activate", response_model=ActivateYieldResponse)
|
||||
async def activate_domain_for_yield(
|
||||
request: ActivateYieldRequest,
|
||||
db: Session = Depends(get_db),
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
"""
|
||||
@ -284,7 +284,10 @@ async def activate_domain_for_yield(
|
||||
domain = request.domain.lower().strip()
|
||||
|
||||
# Check if domain already exists
|
||||
existing = db.query(YieldDomain).filter(YieldDomain.domain == domain).first()
|
||||
existing_result = await db.execute(
|
||||
select(YieldDomain).where(YieldDomain.domain == domain)
|
||||
)
|
||||
existing = existing_result.scalar_one_or_none()
|
||||
if existing:
|
||||
if existing.user_id == current_user.id:
|
||||
raise HTTPException(
|
||||
@ -313,17 +316,20 @@ async def activate_domain_for_yield(
|
||||
|
||||
# Find best matching partner
|
||||
if intent_result.suggested_partners:
|
||||
partner = db.query(AffiliatePartner).filter(
|
||||
AffiliatePartner.slug == intent_result.suggested_partners[0],
|
||||
AffiliatePartner.is_active == True,
|
||||
).first()
|
||||
partner_result = await db.execute(
|
||||
select(AffiliatePartner).where(
|
||||
AffiliatePartner.slug == intent_result.suggested_partners[0],
|
||||
AffiliatePartner.is_active == True,
|
||||
)
|
||||
)
|
||||
partner = partner_result.scalar_one_or_none()
|
||||
if partner:
|
||||
yield_domain.partner_id = partner.id
|
||||
yield_domain.active_route = partner.slug
|
||||
|
||||
db.add(yield_domain)
|
||||
db.commit()
|
||||
db.refresh(yield_domain)
|
||||
await db.commit()
|
||||
await db.refresh(yield_domain)
|
||||
|
||||
# Create DNS instructions
|
||||
dns_instructions = DNSSetupInstructions(
|
||||
@ -362,16 +368,19 @@ async def activate_domain_for_yield(
|
||||
@router.post("/domains/{domain_id}/verify", response_model=DNSVerificationResult)
|
||||
async def verify_domain_dns(
|
||||
domain_id: int,
|
||||
db: Session = Depends(get_db),
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
"""
|
||||
Verify DNS configuration for a yield domain.
|
||||
"""
|
||||
domain = db.query(YieldDomain).filter(
|
||||
YieldDomain.id == domain_id,
|
||||
YieldDomain.user_id == current_user.id,
|
||||
).first()
|
||||
result = await db.execute(
|
||||
select(YieldDomain).where(
|
||||
YieldDomain.id == domain_id,
|
||||
YieldDomain.user_id == current_user.id,
|
||||
)
|
||||
)
|
||||
domain = result.scalar_one_or_none()
|
||||
|
||||
if not domain:
|
||||
raise HTTPException(status_code=404, detail="Yield domain not found")
|
||||
@ -421,7 +430,7 @@ async def verify_domain_dns(
|
||||
domain.dns_verified_at = datetime.utcnow()
|
||||
domain.status = "active"
|
||||
domain.activated_at = datetime.utcnow()
|
||||
db.commit()
|
||||
await db.commit()
|
||||
|
||||
return DNSVerificationResult(
|
||||
domain=domain.domain,
|
||||
@ -438,16 +447,19 @@ async def verify_domain_dns(
|
||||
async def update_yield_domain(
|
||||
domain_id: int,
|
||||
update: YieldDomainUpdate,
|
||||
db: Session = Depends(get_db),
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
"""
|
||||
Update yield domain settings.
|
||||
"""
|
||||
domain = db.query(YieldDomain).filter(
|
||||
YieldDomain.id == domain_id,
|
||||
YieldDomain.user_id == current_user.id,
|
||||
).first()
|
||||
result = await db.execute(
|
||||
select(YieldDomain).where(
|
||||
YieldDomain.id == domain_id,
|
||||
YieldDomain.user_id == current_user.id,
|
||||
)
|
||||
)
|
||||
domain = result.scalar_one_or_none()
|
||||
|
||||
if not domain:
|
||||
raise HTTPException(status_code=404, detail="Yield domain not found")
|
||||
@ -455,10 +467,13 @@ async def update_yield_domain(
|
||||
# Apply updates
|
||||
if update.active_route is not None:
|
||||
# Validate partner exists
|
||||
partner = db.query(AffiliatePartner).filter(
|
||||
AffiliatePartner.slug == update.active_route,
|
||||
AffiliatePartner.is_active == True,
|
||||
).first()
|
||||
partner_result = await db.execute(
|
||||
select(AffiliatePartner).where(
|
||||
AffiliatePartner.slug == update.active_route,
|
||||
AffiliatePartner.is_active == True,
|
||||
)
|
||||
)
|
||||
partner = partner_result.scalar_one_or_none()
|
||||
if not partner:
|
||||
raise HTTPException(status_code=400, detail="Invalid partner route")
|
||||
domain.active_route = update.active_route
|
||||
@ -475,8 +490,8 @@ async def update_yield_domain(
|
||||
domain.status = "active"
|
||||
domain.paused_at = None
|
||||
|
||||
db.commit()
|
||||
db.refresh(domain)
|
||||
await db.commit()
|
||||
await db.refresh(domain)
|
||||
|
||||
return _domain_to_response(domain)
|
||||
|
||||
@ -484,22 +499,25 @@ async def update_yield_domain(
|
||||
@router.delete("/domains/{domain_id}")
|
||||
async def delete_yield_domain(
|
||||
domain_id: int,
|
||||
db: Session = Depends(get_db),
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
"""
|
||||
Remove a domain from yield program.
|
||||
"""
|
||||
domain = db.query(YieldDomain).filter(
|
||||
YieldDomain.id == domain_id,
|
||||
YieldDomain.user_id == current_user.id,
|
||||
).first()
|
||||
result = await db.execute(
|
||||
select(YieldDomain).where(
|
||||
YieldDomain.id == domain_id,
|
||||
YieldDomain.user_id == current_user.id,
|
||||
)
|
||||
)
|
||||
domain = result.scalar_one_or_none()
|
||||
|
||||
if not domain:
|
||||
raise HTTPException(status_code=404, detail="Yield domain not found")
|
||||
|
||||
db.delete(domain)
|
||||
db.commit()
|
||||
await db.delete(domain)
|
||||
await db.commit()
|
||||
|
||||
return {"message": "Yield domain removed"}
|
||||
|
||||
@ -514,29 +532,53 @@ async def list_transactions(
|
||||
status: Optional[str] = Query(None),
|
||||
limit: int = Query(50, le=100),
|
||||
offset: int = Query(0, ge=0),
|
||||
db: Session = Depends(get_db),
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
"""
|
||||
List yield transactions for user's domains.
|
||||
"""
|
||||
# Get user's domain IDs
|
||||
domain_ids = db.query(YieldDomain.id).filter(
|
||||
YieldDomain.user_id == current_user.id
|
||||
).subquery()
|
||||
domain_ids_result = await db.execute(
|
||||
select(YieldDomain.id).where(YieldDomain.user_id == current_user.id)
|
||||
)
|
||||
domain_ids = [row[0] for row in domain_ids_result.all()]
|
||||
|
||||
query = db.query(YieldTransaction).filter(
|
||||
if not domain_ids:
|
||||
return YieldTransactionListResponse(
|
||||
transactions=[],
|
||||
total=0,
|
||||
total_gross=Decimal("0"),
|
||||
total_net=Decimal("0"),
|
||||
)
|
||||
|
||||
query = select(YieldTransaction).where(
|
||||
YieldTransaction.yield_domain_id.in_(domain_ids)
|
||||
)
|
||||
|
||||
if domain_id:
|
||||
query = query.filter(YieldTransaction.yield_domain_id == domain_id)
|
||||
query = query.where(YieldTransaction.yield_domain_id == domain_id)
|
||||
|
||||
if status:
|
||||
query = query.filter(YieldTransaction.status == status)
|
||||
query = query.where(YieldTransaction.status == status)
|
||||
|
||||
total = query.count()
|
||||
transactions = query.order_by(YieldTransaction.created_at.desc()).offset(offset).limit(limit).all()
|
||||
# Get count
|
||||
count_query = select(func.count(YieldTransaction.id)).where(
|
||||
YieldTransaction.yield_domain_id.in_(domain_ids)
|
||||
)
|
||||
if domain_id:
|
||||
count_query = count_query.where(YieldTransaction.yield_domain_id == domain_id)
|
||||
if status:
|
||||
count_query = count_query.where(YieldTransaction.status == status)
|
||||
|
||||
count_result = await db.execute(count_query)
|
||||
total = count_result.scalar() or 0
|
||||
|
||||
# Get transactions
|
||||
result = await db.execute(
|
||||
query.order_by(YieldTransaction.created_at.desc()).offset(offset).limit(limit)
|
||||
)
|
||||
transactions = list(result.scalars().all())
|
||||
|
||||
# Aggregates
|
||||
total_gross = sum(tx.gross_amount for tx in transactions)
|
||||
@ -559,19 +601,28 @@ async def list_payouts(
|
||||
status: Optional[str] = Query(None),
|
||||
limit: int = Query(20, le=50),
|
||||
offset: int = Query(0, ge=0),
|
||||
db: Session = Depends(get_db),
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
"""
|
||||
List user's yield payouts.
|
||||
"""
|
||||
query = db.query(YieldPayout).filter(YieldPayout.user_id == current_user.id)
|
||||
query = select(YieldPayout).where(YieldPayout.user_id == current_user.id)
|
||||
|
||||
if status:
|
||||
query = query.filter(YieldPayout.status == status)
|
||||
query = query.where(YieldPayout.status == status)
|
||||
|
||||
total = query.count()
|
||||
payouts = query.order_by(YieldPayout.created_at.desc()).offset(offset).limit(limit).all()
|
||||
# Get count
|
||||
count_result = await db.execute(
|
||||
select(func.count(YieldPayout.id)).where(YieldPayout.user_id == current_user.id)
|
||||
)
|
||||
total = count_result.scalar() or 0
|
||||
|
||||
# Get payouts
|
||||
result = await db.execute(
|
||||
query.order_by(YieldPayout.created_at.desc()).offset(offset).limit(limit)
|
||||
)
|
||||
payouts = list(result.scalars().all())
|
||||
|
||||
# Aggregates
|
||||
total_paid = sum(p.amount for p in payouts if p.status == "completed")
|
||||
@ -592,14 +643,17 @@ async def list_payouts(
|
||||
@router.get("/partners", response_model=list[AffiliatePartnerResponse])
|
||||
async def list_partners(
|
||||
category: Optional[str] = Query(None, description="Filter by intent category"),
|
||||
db: Session = Depends(get_db),
|
||||
db: AsyncSession = Depends(get_db),
|
||||
):
|
||||
"""
|
||||
List available affiliate partners.
|
||||
"""
|
||||
query = db.query(AffiliatePartner).filter(AffiliatePartner.is_active == True)
|
||||
|
||||
partners = query.order_by(AffiliatePartner.priority.desc()).all()
|
||||
result = await db.execute(
|
||||
select(AffiliatePartner)
|
||||
.where(AffiliatePartner.is_active == True)
|
||||
.order_by(AffiliatePartner.priority.desc())
|
||||
)
|
||||
partners = list(result.scalars().all())
|
||||
|
||||
# Filter by category if specified
|
||||
if category:
|
||||
@ -678,6 +732,4 @@ def _payout_to_response(payout: YieldPayout) -> YieldPayoutResponse:
|
||||
)
|
||||
|
||||
|
||||
# Missing import
|
||||
from sqlalchemy import Integer
|
||||
|
||||
|
||||
@ -30,7 +30,9 @@ import {
|
||||
Radar,
|
||||
Scan,
|
||||
Radio,
|
||||
Cpu
|
||||
Cpu,
|
||||
Clock,
|
||||
ExternalLink
|
||||
} from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
@ -42,21 +44,20 @@ interface HotAuction {
|
||||
platform: string
|
||||
}
|
||||
|
||||
// High-end Live Market Ticker - Monochrome & Technical
|
||||
// Compact Ticker for Mobile
|
||||
function MarketTicker({ auctions }: { auctions: HotAuction[] }) {
|
||||
const tickerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
if (auctions.length === 0) return null
|
||||
|
||||
// Create enough duplicates to fill even large screens
|
||||
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="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 className="py-2 sm:py-3">
|
||||
<div
|
||||
ref={tickerRef}
|
||||
className="flex animate-[ticker_60s_linear_infinite] hover:[animation-play-state:paused]"
|
||||
@ -65,17 +66,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-3 sm:gap-6 px-4 sm:px-8 border-r border-white/[0.08] group cursor-default transition-colors hover:bg-white/[0.02]"
|
||||
>
|
||||
<div className="flex items-center gap-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">
|
||||
<div className="flex items-center gap-2 sm:gap-3">
|
||||
<div className="w-1 h-1 sm:w-1.5 sm:h-1.5 bg-accent opacity-50 group-hover:opacity-100 transition-opacity" />
|
||||
<span className="font-mono text-[10px] sm:text-xs text-white/70 font-medium group-hover:text-white transition-colors tracking-wide">
|
||||
{auction.domain}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-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-[10px] sm:text-xs text-white font-medium">${auction.current_bid.toLocaleString()}</span>
|
||||
<span className="hidden sm:inline text-[10px] text-white/30 font-mono uppercase tracking-wider">{auction.time_remaining}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@ -110,7 +111,7 @@ export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#020202]">
|
||||
<div className="relative">
|
||||
<div className="w-12 h-12 border-[0.5px] border-white/10 border-t-accent animate-spin rounded-full" />
|
||||
<div className="w-10 h-10 sm:w-12 sm:h-12 border-[0.5px] border-white/10 border-t-accent animate-spin rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@ -118,120 +119,117 @@ export default function HomePage() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#020202] text-white relative overflow-x-hidden selection:bg-accent/30 selection:text-white">
|
||||
{/* Cinematic Background - Architectural & Fine */}
|
||||
{/* Background */}
|
||||
<div className="fixed inset-0 pointer-events-none z-0">
|
||||
<div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay" />
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.03]"
|
||||
className="absolute inset-0 opacity-[0.02] sm:opacity-[0.03]"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(rgba(255,255,255,0.3) 0.5px, transparent 0.5px), linear-gradient(90deg, rgba(255,255,255,0.3) 0.5px, transparent 0.5px)`,
|
||||
backgroundSize: '160px 160px',
|
||||
backgroundSize: '80px 80px',
|
||||
}}
|
||||
/>
|
||||
<div className="absolute top-[-30%] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-accent/[0.02] rounded-full blur-[200px]" />
|
||||
<div className="absolute top-[-30%] left-1/2 -translate-x-1/2 w-[800px] sm:w-[1200px] h-[600px] sm:h-[800px] bg-accent/[0.02] rounded-full blur-[150px] sm:blur-[200px]" />
|
||||
</div>
|
||||
|
||||
<Header />
|
||||
|
||||
{/* HERO SECTION: 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 */}
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
<section className="relative min-h-[85vh] sm:min-h-[90vh] flex flex-col justify-center pt-20 sm:pt-32 pb-12 sm:pb-24 px-4 sm:px-6 z-10">
|
||||
<div className="max-w-[1400px] mx-auto w-full">
|
||||
<div className="grid lg:grid-cols-12 gap-16 lg:gap-24 items-center">
|
||||
<div className="grid lg:grid-cols-12 gap-8 lg:gap-24 items-center">
|
||||
|
||||
{/* Left: Typography & Brand */}
|
||||
<div className="lg:col-span-7 relative z-20 text-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 - Mobile */}
|
||||
<div className="inline-flex items-center gap-3 mb-6 sm:mb-10 animate-fade-in opacity-0" style={{ animationDelay: '0.1s', animationFillMode: 'forwards' }}>
|
||||
<div className="relative w-10 h-10 sm:w-16 sm:h-16">
|
||||
<div className="absolute inset-0 bg-accent/20 blur-xl rounded-full animate-pulse" />
|
||||
<Image
|
||||
src="/pounce-puma.png"
|
||||
alt="Pounce Seal"
|
||||
alt="Pounce"
|
||||
fill
|
||||
className="object-contain drop-shadow-[0_0_20px_rgba(16,185,129,0.2)]"
|
||||
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-[8px] 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 - Responsive */}
|
||||
<h1 className="font-display text-[2.5rem] sm:text-[4rem] md:text-[5rem] lg:text-[6rem] leading-[0.95] tracking-[-0.03em] text-white mb-6 sm:mb-8">
|
||||
<span className="block animate-slide-up opacity-0" style={{ animationDelay: '0.2s', animationFillMode: 'forwards' }}>
|
||||
The market
|
||||
</span>
|
||||
<span className="block text-white animate-slide-up opacity-0" style={{ animationDelay: '0.4s', animationFillMode: 'forwards' }}>
|
||||
never sleeps.
|
||||
</span>
|
||||
<span className="block mt-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 text-white/40 animate-slide-up opacity-0" style={{ animationDelay: '0.6s', animationFillMode: 'forwards' }}>
|
||||
You should.
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Subline & Stats */}
|
||||
{/* Subline */}
|
||||
<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-sm sm:text-lg lg:text-xl text-white/60 max-w-xl font-light leading-relaxed mb-8 sm:mb-12 lg:mx-0 mx-auto">
|
||||
Transforming domains from static addresses into yield-bearing financial assets.
|
||||
<span className="text-white block mt-1 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>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
{/* Stats Grid - Mobile 2x2 */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-x-8 sm:gap-y-4 pt-6 sm:pt-8 border-t border-white/[0.08]">
|
||||
{[
|
||||
{ value: '886+', label: 'TLDs Scanned' },
|
||||
{ value: '24/7', label: 'Live Recon' },
|
||||
{ value: '10s', label: 'Latency' },
|
||||
{ value: '$1B+', label: 'Assets Tracked' },
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="text-center sm:text-left">
|
||||
<div className="text-xl sm:text-2xl font-display text-white mb-1">{stat.value}</div>
|
||||
<div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: 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: Domain Checker */}
|
||||
<div className="lg:col-span-5 relative animate-scale-in opacity-0 mt-4 lg:mt-0" style={{ animationDelay: '1s', animationFillMode: 'forwards' }}>
|
||||
<div className="absolute -inset-1 bg-gradient-to-tr from-accent/20 via-white/10 to-accent/20 blur-2xl opacity-40" />
|
||||
|
||||
<div className="relative z-10 bg-[#0A0A0A] border border-white/20 p-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-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">
|
||||
<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>V2.0.4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -241,54 +239,52 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Ticker - Minimalist */}
|
||||
{/* Ticker */}
|
||||
{!loadingAuctions && hotAuctions.length > 0 && (
|
||||
<MarketTicker auctions={hotAuctions} />
|
||||
)}
|
||||
|
||||
{/* THE PARADIGM SHIFT - Problem / Solution */}
|
||||
<section className="relative py-32 px-4 sm:px-6 border-b border-white/[0.05]">
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* PARADIGM SHIFT */}
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
<section className="relative py-16 sm:py-32 px-4 sm:px-6 border-b border-white/[0.05]">
|
||||
<div className="max-w-[1200px] mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 lg:gap-24 items-center">
|
||||
<div className="grid lg:grid-cols-2 gap-10 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>
|
||||
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase 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-6 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">
|
||||
<p>
|
||||
Investors pay renewal fees for years, hoping for a "Unicorn" sale that never happens. It's gambling, not investing.
|
||||
</p>
|
||||
<p>
|
||||
Traditional parking pays pennies. Marketplaces charge 20% fees. The system is designed to drain your capital.
|
||||
</p>
|
||||
<div className="space-y-4 sm:space-y-6 text-white/60 leading-relaxed text-sm sm:text-lg font-light">
|
||||
<p>Investors pay renewal fees for years, hoping for a "Unicorn" sale that never happens.</p>
|
||||
<p>Traditional parking pays pennies. Marketplaces charge 20% fees. The system drains your capital.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-4 bg-accent/5 blur-3xl" />
|
||||
<div className="relative bg-[#050505] border border-white/10 p-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.2em] mb-3 sm:mb-4 block">The Pounce Protocol</span>
|
||||
<h3 className="font-display text-xl sm:text-3xl text-white mb-6 sm:mb-8">Asset Class V2.0</h3>
|
||||
<ul className="space-y-5 sm:space-y-6 font-mono text-xs sm:text-sm text-white/80">
|
||||
<li className="flex items-start gap-3 sm:gap-4">
|
||||
<Radar className="w-4 h-4 sm:w-5 sm:h-5 text-accent mt-px shrink-0" />
|
||||
<div>
|
||||
<span className="text-white font-bold block mb-1">Deep Recon</span>
|
||||
<span className="text-white/50">Zone file analysis reveals what's truly valuable. Don't guess. Know.</span>
|
||||
<span className="text-white/50 text-[11px] sm:text-sm">Zone file analysis reveals what's truly valuable.</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-4 h-4 sm:w-5 sm:h-5 text-accent mt-px shrink-0" />
|
||||
<div>
|
||||
<span className="text-white font-bold block mb-1">Frictionless Liquidity</span>
|
||||
<span className="text-white/50">Instant settlement. Verified owners. 0% Commission.</span>
|
||||
<span className="text-white/50 text-[11px] sm:text-sm">Instant settlement. 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-4 h-4 sm:w-5 sm:h-5 text-accent mt-px shrink-0" />
|
||||
<div>
|
||||
<span className="text-white font-bold block mb-1">Automated Yield</span>
|
||||
<span className="text-white/50">Domains pay for their own renewals via Intent Routing™.</span>
|
||||
<span className="text-white/50 text-[11px] sm:text-sm">Domains pay for their own renewals.</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -298,320 +294,281 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* CORE ARCHITECTURE - 3 Pillars */}
|
||||
<section className="relative py-40 px-4 sm:px-6 bg-[#020202]">
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
<section className="relative py-20 sm:py-40 px-4 sm:px-6 bg-[#020202]">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
{/* Section Header */}
|
||||
<div className="flex flex-col lg:flex-row justify-between items-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-12 sm:mb-24 border-b border-white/[0.08] pb-8 sm: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">
|
||||
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block">Core Architecture</span>
|
||||
<h2 className="font-display text-3xl sm:text-4xl lg:text-6xl text-white leading-none">
|
||||
The Lifecycle <br />
|
||||
<span className="text-white/30">Engine.</span>
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-white/50 max-w-md text-sm font-mono mt-8 lg:mt-0 leading-relaxed text-right">
|
||||
<p className="hidden lg:block text-white/50 max-w-md text-sm font-mono mt-8 lg:mt-0 leading-relaxed text-right">
|
||||
// INTELLIGENCE_LAYER_ACTIVE<br />
|
||||
// MARKET_PROTOCOL_READY<br />
|
||||
// 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]">
|
||||
|
||||
{/* 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>
|
||||
|
||||
<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">
|
||||
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">
|
||||
"Identify Targets." We scan 886+ TLDs in real-time to uncover hidden opportunities before the market reacts.
|
||||
</p>
|
||||
{/* Pillars - Stacked on Mobile */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-px bg-transparent lg:bg-white/[0.08] lg:border lg:border-white/[0.08]">
|
||||
{[
|
||||
{
|
||||
module: '01',
|
||||
title: 'Intelligence',
|
||||
desc: '"Identify Targets." We scan 886+ TLDs in real-time to uncover hidden opportunities.',
|
||||
features: [
|
||||
{ icon: Scan, title: 'Global Scan', desc: 'Zone file analysis' },
|
||||
{ icon: Target, title: 'Valuation AI', desc: 'Instant fair-market value' },
|
||||
],
|
||||
},
|
||||
{
|
||||
module: '02',
|
||||
title: 'Market',
|
||||
desc: '"Secure the Asset." Direct access to liquidity with verified owners and 0% commission.',
|
||||
features: [
|
||||
{ icon: ShieldCheck, title: 'Verified Owners', desc: 'Mandatory DNS check' },
|
||||
{ icon: Gavel, title: 'Direct Execution', desc: 'P2P transfers' },
|
||||
],
|
||||
},
|
||||
{
|
||||
module: '03',
|
||||
title: 'Yield',
|
||||
desc: '"Deploy the Asset." Transform idle domains into automated revenue generators.',
|
||||
features: [
|
||||
{ icon: Layers, title: 'Intent Routing', desc: 'Traffic to partners' },
|
||||
{ icon: Coins, title: 'Passive Income', desc: 'Monthly payouts' },
|
||||
],
|
||||
},
|
||||
].map((pillar, i) => (
|
||||
<div key={i} className="group relative bg-[#030303] p-6 sm:p-10 lg:p-14 hover:bg-[#050505] transition-colors duration-500 border border-white/[0.08] lg:border-0">
|
||||
<div className="absolute top-0 right-0 p-4 sm:p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||||
<ArrowUpRight className="w-5 h-5 sm:w-6 sm:h-6 text-white/20" />
|
||||
</div>
|
||||
|
||||
<div className="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-1">Global Scan</div>
|
||||
<div className="text-white/30 text-sm">Zone file analysis & expiration monitoring.</div>
|
||||
<div className="h-full flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="mb-5 sm:mb-8 font-mono text-[10px] sm:text-xs text-accent uppercase tracking-widest border border-accent/20 inline-block px-2 sm:px-3 py-1 bg-accent/5">
|
||||
Module {pillar.module}
|
||||
</div>
|
||||
<h3 className="text-2xl sm:text-3xl text-white font-display mb-4 sm:mb-6">{pillar.title}</h3>
|
||||
<p className="text-white/50 leading-relaxed text-sm sm:text-lg font-light mb-8 sm:mb-12">
|
||||
{pillar.desc}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<Target className="w-5 h-5 text-accent mt-1" />
|
||||
<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 className="space-y-4 sm:space-y-6 pt-6 sm:pt-12 border-t border-white/[0.05]">
|
||||
{pillar.features.map((f, j) => (
|
||||
<div key={j} className="flex items-start gap-3 sm:gap-4">
|
||||
<f.icon className="w-4 h-4 sm:w-5 sm:h-5 text-accent mt-1" />
|
||||
<div>
|
||||
<div className="text-white font-medium mb-0.5 sm:mb-1 text-sm sm:text-base">{f.title}</div>
|
||||
<div className="text-white/30 text-[11px] sm:text-sm">{f.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
|
||||
<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">
|
||||
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">
|
||||
"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>
|
||||
<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-4">
|
||||
<Gavel className="w-5 h-5 text-accent mt-1" />
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<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">
|
||||
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">
|
||||
"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>
|
||||
<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-4">
|
||||
<Coins className="w-5 h-5 text-accent mt-1" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
))}
|
||||
</div>
|
||||
</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">
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* INTENT ROUTING */}
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
<section className="relative py-16 sm:py-32 px-4 sm:px-6 border-b border-white/[0.05] bg-[#050505] overflow-hidden">
|
||||
<div className="absolute inset-0 bg-accent/[0.02]" />
|
||||
<div className="max-w-[1200px] mx-auto relative z-10">
|
||||
<div className="mb-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-12 sm:mb-20 text-center">
|
||||
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block">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-sm sm:text-lg font-light leading-relaxed px-2">
|
||||
Our engine detects user intent and routes traffic directly to high-paying partners.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 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>
|
||||
<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-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-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-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-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 className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-8">
|
||||
{[
|
||||
{ icon: Network, step: '1', title: 'Connect', desc: 'Point nameservers to ns.pounce.io' },
|
||||
{ icon: Cpu, step: '2', title: 'Analyze', desc: 'We scan the semantic intent of your domain' },
|
||||
{ icon: Share2, step: '3', title: 'Route', desc: 'Traffic is routed to vertical partners' },
|
||||
].map((item, i) => (
|
||||
<div key={i} className="bg-[#020202] border border-white/10 p-6 sm:p-10 relative group hover:border-accent/30 transition-colors">
|
||||
<div className="w-10 h-10 sm:w-14 sm:h-14 bg-white/5 flex items-center justify-center mb-5 sm:mb-8 text-white group-hover:text-accent group-hover:bg-accent/10 transition-all">
|
||||
<item.icon className="w-5 h-5 sm:w-7 sm:h-7" />
|
||||
</div>
|
||||
<h3 className="text-white font-bold text-base sm:text-xl mb-2 sm:mb-3">{item.step}. {item.title}</h3>
|
||||
<p className="text-white/40 text-xs sm:text-sm font-mono leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* DEEP DIVE: MARKET */}
|
||||
<section className="relative py-32 px-4 sm:px-6 bg-[#020202]">
|
||||
<div className="max-w-[1200px] mx-auto grid lg:grid-cols-2 gap-20 items-center">
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* MARKET DEEP DIVE */}
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
<section className="relative py-16 sm:py-32 px-4 sm:px-6 bg-[#020202]">
|
||||
<div className="max-w-[1200px] mx-auto grid lg:grid-cols-2 gap-10 lg:gap-20 items-center">
|
||||
{/* Demo Card */}
|
||||
<div className="order-2 lg:order-1 relative">
|
||||
<div className="border border-white/10 bg-[#050505] p-2 shadow-2xl rotate-1 hover:rotate-0 transition-transform duration-500">
|
||||
<div className="bg-[#020202] p-8">
|
||||
<div className="flex items-center gap-4 border-b border-white/10 pb-6 mb-6">
|
||||
<div className="w-2 h-2 rounded-full bg-accent animate-pulse" />
|
||||
<span className="font-mono text-base text-white">zurich-immo.ch</span>
|
||||
<span className="ml-auto text-accent font-bold text-lg">$950</span>
|
||||
<div className="border border-white/10 bg-[#050505] p-1.5 sm:p-2 shadow-2xl lg:rotate-1 hover:rotate-0 transition-transform duration-500">
|
||||
<div className="bg-[#020202] p-5 sm:p-8">
|
||||
<div className="flex items-center gap-3 sm:gap-4 border-b border-white/10 pb-4 sm:pb-6 mb-4 sm:mb-6">
|
||||
<div className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-accent animate-pulse" />
|
||||
<span className="font-mono text-sm sm:text-base text-white">zurich-immo.ch</span>
|
||||
<span className="ml-auto text-accent font-bold text-base sm:text-lg">$950</span>
|
||||
</div>
|
||||
<div className="space-y-4 font-mono text-xs text-white/50">
|
||||
<div className="space-y-3 sm:space-y-4 font-mono text-[10px] sm:text-xs text-white/50">
|
||||
<div className="flex justify-between items-center">
|
||||
<span>Source</span>
|
||||
<span className="text-white flex items-center gap-2"><div className="w-1.5 h-1.5 bg-accent rounded-full"/> Pounce Direct</span>
|
||||
<span className="text-white flex items-center gap-2"><div className="w-1 h-1 sm:w-1.5 sm:h-1.5 bg-accent"/> Pounce Direct</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span>Seller Verified</span>
|
||||
<span className="text-accent flex items-center gap-2"><Check className="w-3 h-3" /> DNS Check Passed</span>
|
||||
<span>Verified</span>
|
||||
<span className="text-accent flex items-center gap-1.5 sm:gap-2"><Check className="w-2.5 h-2.5 sm:w-3 sm:h-3" /> DNS Passed</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span>Commission</span>
|
||||
<span className="text-white bg-white/10 px-2 py-0.5 rounded-none">0%</span>
|
||||
<span className="text-white bg-white/10 px-1.5 sm:px-2 py-0.5">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 pt-6 border-t border-white/10">
|
||||
<button className="w-full py-4 bg-white/5 text-white uppercase font-bold text-xs tracking-[0.2em] hover:bg-white hover:text-black transition-colors flex items-center justify-center gap-2">
|
||||
<div className="mt-5 sm:mt-8 pt-4 sm:pt-6 border-t border-white/10">
|
||||
<button className="w-full py-3 sm:py-4 bg-white/5 text-white uppercase font-bold text-[10px] sm:text-xs tracking-[0.2em] hover:bg-white hover:text-black transition-colors flex items-center justify-center gap-2">
|
||||
Contact Seller
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="order-1 lg:order-2">
|
||||
<span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">Exclusive Exchange</span>
|
||||
<h2 className="font-display text-4xl text-white mb-6">The Velvet Rope Strategy.</h2>
|
||||
<p className="text-white/50 text-lg leading-relaxed mb-10">
|
||||
We don't run an open flea market. We run an exclusive club.
|
||||
Buying is open to everyone, but selling is reserved for verified members.
|
||||
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block">Exclusive Exchange</span>
|
||||
<h2 className="font-display text-2xl sm:text-4xl text-white mb-4 sm:mb-6">The Velvet Rope.</h2>
|
||||
<p className="text-white/50 text-sm sm:text-lg leading-relaxed mb-6 sm:mb-10">
|
||||
Buying is open to everyone, selling is reserved for verified members.
|
||||
</p>
|
||||
<ul className="space-y-6">
|
||||
<li className="flex gap-5">
|
||||
<Shield className="w-6 h-6 text-accent shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-white font-bold mb-1">Zero Noise</h4>
|
||||
<p className="text-white/40 text-sm leading-relaxed">Gatekeeper technology filters 99% of junk domains automatically.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex gap-5">
|
||||
<Key className="w-6 h-6 text-accent shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-white font-bold mb-1">Verified Owners</h4>
|
||||
<p className="text-white/40 text-sm leading-relaxed">Sellers must verify ownership via DNS before listing. No fakes.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex gap-5">
|
||||
<Zap className="w-6 h-6 text-accent shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-white font-bold mb-1">0% Commission</h4>
|
||||
<p className="text-white/40 text-sm leading-relaxed">Members keep 100% of the sale price. Direct settlement.</p>
|
||||
</div>
|
||||
</li>
|
||||
<ul className="space-y-5 sm:space-y-6">
|
||||
{[
|
||||
{ icon: Shield, title: 'Zero Noise', desc: 'Gatekeeper tech filters 99% of junk' },
|
||||
{ icon: Key, title: 'Verified Owners', desc: 'DNS verification required before listing' },
|
||||
{ icon: Zap, title: '0% Commission', desc: 'Keep 100% of the sale price' },
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex gap-4 sm:gap-5">
|
||||
<item.icon className="w-5 h-5 sm:w-6 sm:h-6 text-accent shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-white font-bold mb-0.5 sm:mb-1 text-sm sm:text-base">{item.title}</h4>
|
||||
<p className="text-white/40 text-xs sm:text-sm leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* PRICING TEASER - "Access Levels" */}
|
||||
<section className="relative py-32 px-4 sm:px-6 border-y border-white/[0.08] bg-[#030303]">
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* PRICING */}
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
<section className="relative py-16 sm:py-32 px-4 sm:px-6 border-y border-white/[0.08] bg-[#030303]">
|
||||
<div className="max-w-[1200px] mx-auto text-center">
|
||||
<h2 className="font-display text-4xl text-white mb-16">Clearance Levels</h2>
|
||||
<h2 className="font-display text-2xl sm:text-4xl text-white mb-10 sm:mb-16">Clearance Levels</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 text-left">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-8 text-left">
|
||||
{/* Scout */}
|
||||
<div className="p-10 border border-white/10 bg-[#020202] opacity-60 hover:opacity-100 transition-opacity flex flex-col">
|
||||
<h3 className="text-xl font-display text-white mb-2">Scout</h3>
|
||||
<div className="text-4xl font-mono text-white mb-8">$0<span className="text-sm text-white/30">/mo</span></div>
|
||||
<ul className="space-y-4 text-sm text-white/50 font-mono mb-10 flex-1">
|
||||
<li className="flex gap-3"><span>•</span> Recon Overview</li>
|
||||
<li className="flex gap-3"><span>•</span> Basic Scan</li>
|
||||
<li className="flex gap-3"><span>•</span> 5 Targets</li>
|
||||
<div className="p-6 sm:p-10 border border-white/10 bg-[#020202] opacity-70 hover:opacity-100 transition-opacity flex flex-col">
|
||||
<h3 className="text-lg sm:text-xl font-display text-white mb-1 sm:mb-2">Scout</h3>
|
||||
<div className="text-2xl sm:text-4xl font-mono text-white mb-5 sm:mb-8">$0<span className="text-xs sm:text-sm text-white/30">/mo</span></div>
|
||||
<ul className="space-y-3 sm:space-y-4 text-xs sm:text-sm text-white/50 font-mono mb-6 sm:mb-10 flex-1">
|
||||
<li className="flex gap-2 sm:gap-3"><span>•</span> Recon Overview</li>
|
||||
<li className="flex gap-2 sm:gap-3"><span>•</span> Basic Scan</li>
|
||||
<li className="flex gap-2 sm:gap-3"><span>•</span> 5 Targets</li>
|
||||
</ul>
|
||||
<Link href="/register" className="block w-full py-4 text-center border border-white/20 text-white uppercase text-xs font-bold tracking-widest hover:bg-white hover:text-black transition-colors">
|
||||
<Link href="/register" className="block w-full py-3 sm:py-4 text-center border border-white/20 text-white uppercase text-[10px] sm:text-xs font-bold tracking-widest hover:bg-white hover:text-black transition-colors">
|
||||
Join the Hunt
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Trader - Highlight */}
|
||||
<div className="p-10 border border-accent bg-[#050505] relative transform md:-translate-y-4 flex flex-col shadow-[0_0_50px_-20px_rgba(16,185,129,0.2)]">
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-accent text-black px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest">Recommended</div>
|
||||
<h3 className="text-xl font-display text-white mb-2">Trader</h3>
|
||||
<div className="text-4xl font-mono text-accent mb-8">$9<span className="text-sm text-white/30">/mo</span></div>
|
||||
<ul className="space-y-4 text-sm text-white/80 font-mono mb-10 flex-1">
|
||||
<li className="flex gap-3"><Check className="w-4 h-4 text-accent"/> Clean Feed (No Noise)</li>
|
||||
<li className="flex gap-3"><Check className="w-4 h-4 text-accent"/> Renewal Intel</li>
|
||||
<li className="flex gap-3"><Check className="w-4 h-4 text-accent"/> Liquidate (0% Fee)</li>
|
||||
<li className="flex gap-3"><Check className="w-4 h-4 text-accent"/> 50 Targets</li>
|
||||
{/* Trader */}
|
||||
<div className="p-6 sm:p-10 border-2 border-accent bg-[#050505] relative md:-translate-y-0 lg:-translate-y-4 flex flex-col shadow-[0_0_50px_-20px_rgba(16,185,129,0.2)]">
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-accent text-black px-3 sm:px-4 py-1 sm:py-1.5 text-[9px] sm:text-[10px] font-bold uppercase tracking-widest">Recommended</div>
|
||||
<h3 className="text-lg sm:text-xl font-display text-white mb-1 sm:mb-2 mt-2 sm:mt-0">Trader</h3>
|
||||
<div className="text-2xl sm:text-4xl font-mono text-accent mb-5 sm:mb-8">$9<span className="text-xs sm:text-sm text-white/30">/mo</span></div>
|
||||
<ul className="space-y-3 sm:space-y-4 text-xs sm:text-sm text-white/80 font-mono mb-6 sm:mb-10 flex-1">
|
||||
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-accent shrink-0"/> Clean Feed</li>
|
||||
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-accent shrink-0"/> Renewal Intel</li>
|
||||
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-accent shrink-0"/> 0% Commission</li>
|
||||
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-accent shrink-0"/> 50 Targets</li>
|
||||
</ul>
|
||||
<Link href="/pricing" className="block w-full py-4 text-center bg-accent text-black uppercase text-xs font-bold tracking-widest hover:bg-white transition-colors">
|
||||
<Link href="/pricing" className="block w-full py-3 sm:py-4 text-center bg-accent text-black uppercase text-[10px] sm:text-xs font-bold tracking-widest hover:bg-white transition-colors">
|
||||
Gear Up
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Tycoon */}
|
||||
<div className="p-10 border border-white/10 bg-[#020202] hover:border-white/30 transition-colors flex flex-col">
|
||||
<h3 className="text-xl font-display text-white mb-2">Tycoon</h3>
|
||||
<div className="text-4xl font-mono text-white mb-8">$29<span className="text-sm text-white/30">/mo</span></div>
|
||||
<ul className="space-y-4 text-sm text-white/50 font-mono mb-10 flex-1">
|
||||
<li className="flex gap-3"><Check className="w-4 h-4 text-white"/> Full Portfolio Monitor</li>
|
||||
<li className="flex gap-3"><Check className="w-4 h-4 text-white"/> First Strike Alerts (10m)</li>
|
||||
<li className="flex gap-3"><Check className="w-4 h-4 text-white"/> 500 Targets</li>
|
||||
<li className="flex gap-3"><Check className="w-4 h-4 text-white"/> Featured Listings</li>
|
||||
<div className="p-6 sm:p-10 border border-white/10 bg-[#020202] hover:border-white/30 transition-colors flex flex-col">
|
||||
<h3 className="text-lg sm:text-xl font-display text-white mb-1 sm:mb-2">Tycoon</h3>
|
||||
<div className="text-2xl sm:text-4xl font-mono text-white mb-5 sm:mb-8">$29<span className="text-xs sm:text-sm text-white/30">/mo</span></div>
|
||||
<ul className="space-y-3 sm:space-y-4 text-xs sm:text-sm text-white/50 font-mono mb-6 sm:mb-10 flex-1">
|
||||
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-white shrink-0"/> Full Monitor</li>
|
||||
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-white shrink-0"/> 10m Alerts</li>
|
||||
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-white shrink-0"/> 500 Targets</li>
|
||||
<li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-white shrink-0"/> Featured</li>
|
||||
</ul>
|
||||
<Link href="/pricing" className="block w-full py-4 text-center border border-white/20 text-white uppercase text-xs font-bold tracking-widest hover:bg-white hover:text-black transition-colors">
|
||||
Go Professional
|
||||
<Link href="/pricing" className="block w-full py-3 sm:py-4 text-center border border-white/20 text-white uppercase text-[10px] sm:text-xs font-bold tracking-widest hover:bg-white hover:text-black transition-colors">
|
||||
Go Pro
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LIVE FEED TEASER - The "Terminal" Look */}
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* LIVE OPS */}
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{!isAuthenticated && !loadingAuctions && hotAuctions.length > 0 && (
|
||||
<section className="relative py-32 px-4 sm:px-6 bg-[#050505] border-t border-white/[0.05]">
|
||||
<section className="relative py-16 sm:py-32 px-4 sm:px-6 bg-[#050505] border-t border-white/[0.05]">
|
||||
<div className="max-w-[1200px] mx-auto">
|
||||
|
||||
<div className="flex justify-between items-end mb-12">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-end mb-8 sm:mb-12 gap-4">
|
||||
<div>
|
||||
<h2 className="font-display text-3xl text-white mb-2">Live Ops</h2>
|
||||
<p className="text-accent/60 font-mono text-sm">FEED_V2.0 // ENCRYPTED</p>
|
||||
<h2 className="font-display text-2xl sm:text-3xl text-white mb-1 sm:mb-2">Live Ops</h2>
|
||||
<p className="text-accent/60 font-mono text-[10px] sm:text-sm">FEED_V2.0 // ENCRYPTED</p>
|
||||
</div>
|
||||
<Link href="/acquire" className="text-xs font-mono uppercase tracking-widest text-white/40 hover:text-white transition-colors flex items-center gap-2">
|
||||
Recon All Markets <ArrowRight className="w-3 h-3" />
|
||||
<Link href="/acquire" className="text-[10px] sm:text-xs font-mono uppercase tracking-widest text-white/40 hover:text-white transition-colors flex items-center gap-2">
|
||||
Recon All <ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="relative border border-white/[0.08] bg-[#020202]">
|
||||
{/* MOBILE: Card Layout */}
|
||||
<div className="sm:hidden space-y-2">
|
||||
{hotAuctions.slice(0, 4).map((auction, idx) => (
|
||||
<div key={idx} className="p-4 bg-[#020202] border border-white/[0.08] group">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-1 h-1 bg-white/20 group-hover:bg-accent transition-colors" />
|
||||
<span className="font-mono text-sm text-white/90">{auction.domain}</span>
|
||||
</div>
|
||||
<span className="text-accent font-bold font-mono">${auction.current_bid.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-[10px] font-mono text-white/40">
|
||||
<span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {auction.time_remaining}</span>
|
||||
<span className="uppercase">{auction.platform}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* DESKTOP: Table Layout */}
|
||||
<div className="hidden sm:block relative border border-white/[0.08] bg-[#020202]">
|
||||
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-accent/20 to-transparent" />
|
||||
|
||||
{/* Table Header */}
|
||||
@ -627,7 +584,7 @@ export default function HomePage() {
|
||||
{hotAuctions.slice(0, 5).map((auction, idx) => (
|
||||
<div key={idx} className="grid grid-cols-12 gap-4 px-6 py-5 border-b border-white/[0.03] hover:bg-white/[0.02] transition-colors group cursor-default">
|
||||
<div className="col-span-5 text-white/90 group-hover:text-white transition-colors flex items-center gap-3">
|
||||
<div className="w-1 h-1 bg-white/20 rounded-full group-hover:bg-accent transition-colors" />
|
||||
<div className="w-1 h-1 bg-white/20 group-hover:bg-accent transition-colors" />
|
||||
{auction.domain}
|
||||
</div>
|
||||
<div className="col-span-2 text-right text-white/30 line-through decoration-white/10">${(auction.current_bid * 1.5).toFixed(0)}</div>
|
||||
@ -635,63 +592,61 @@ export default function HomePage() {
|
||||
<div className="col-span-3 text-right text-white/40">{auction.time_remaining}</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Gatekeeper Overlay */}
|
||||
<div className="relative h-40 overflow-hidden border-t border-white/[0.03]">
|
||||
<div className="absolute inset-0 bg-[#020202]/80 backdrop-blur-[2px] z-10 flex items-center justify-center">
|
||||
<Link
|
||||
href="/register"
|
||||
className="group flex items-center gap-4 px-8 py-4 border border-accent/20 bg-accent/10 hover:bg-accent hover:border-accent hover:text-black text-white transition-all duration-500 backdrop-blur-md"
|
||||
style={{ clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px)' }}
|
||||
>
|
||||
<Lock className="w-3 h-3" />
|
||||
<span className="text-xs font-bold uppercase tracking-[0.2em]">Enter HQ</span>
|
||||
<ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* Blurred Data */}
|
||||
<div className="opacity-30 pointer-events-none p-6 space-y-6 font-mono text-sm select-none">
|
||||
<div className="flex justify-between"><span>premium-crypto.ai</span><span>$12,500</span></div>
|
||||
<div className="flex justify-between"><span>defi-bank.io</span><span>$8,200</span></div>
|
||||
<div className="flex justify-between"><span>cloud-systems.net</span><span>$4,150</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gatekeeper */}
|
||||
<div className="relative h-32 sm:h-40 overflow-hidden border border-white/[0.08] border-t-0 bg-[#020202]">
|
||||
<div className="absolute inset-0 bg-[#020202]/80 backdrop-blur-[2px] z-10 flex items-center justify-center">
|
||||
<Link
|
||||
href="/register"
|
||||
className="group flex items-center gap-3 sm:gap-4 px-6 sm:px-8 py-3 sm:py-4 border border-accent/20 bg-accent/10 hover:bg-accent hover:border-accent hover:text-black text-white transition-all duration-500 backdrop-blur-md"
|
||||
>
|
||||
<Lock className="w-3 h-3" />
|
||||
<span className="text-[10px] sm:text-xs font-bold uppercase tracking-[0.15em] sm:tracking-[0.2em]">Enter HQ</span>
|
||||
<ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="opacity-30 pointer-events-none p-4 sm:p-6 space-y-4 sm:space-y-6 font-mono text-xs sm:text-sm select-none">
|
||||
<div className="flex justify-between"><span>premium-crypto.ai</span><span>$12,500</span></div>
|
||||
<div className="flex justify-between"><span>defi-bank.io</span><span>$8,200</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* FINAL CTA - Minimalist & Authoritative */}
|
||||
<section className="relative py-40 px-4 sm:px-6 bg-[#020202] border-t border-white/[0.05] overflow-hidden">
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* FINAL CTA */}
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
<section className="relative py-24 sm:py-40 px-4 sm:px-6 bg-[#020202] border-t border-white/[0.05] overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03]" />
|
||||
|
||||
<div className="max-w-4xl mx-auto text-center relative z-10">
|
||||
<h2 className="font-display text-5xl sm:text-6xl md:text-7xl text-white mb-12 tracking-tight">
|
||||
<h2 className="font-display text-3xl sm:text-5xl md:text-6xl lg:text-7xl text-white mb-8 sm:mb-12 tracking-tight">
|
||||
Stop guessing. <br />
|
||||
<span className="text-white/30">Start knowing.</span>
|
||||
</h2>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-8">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-8">
|
||||
<Link
|
||||
href={isAuthenticated ? "/terminal/radar" : "/register"}
|
||||
className="group relative px-10 py-5 bg-accent text-black text-sm font-bold uppercase tracking-[0.2em] hover:bg-white hover:text-black transition-colors duration-500 rounded-none"
|
||||
style={{ clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px)' }}
|
||||
className="w-full sm:w-auto group relative px-8 sm:px-10 py-4 sm:py-5 bg-accent text-black text-xs sm:text-sm font-bold uppercase tracking-[0.15em] sm:tracking-[0.2em] hover:bg-white transition-colors duration-500"
|
||||
>
|
||||
<span className="relative z-10 flex items-center gap-3">
|
||||
<span className="relative z-10 flex items-center justify-center gap-3">
|
||||
Initialize <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/pricing"
|
||||
className="text-sm text-white/40 uppercase tracking-[0.2em] hover:text-white transition-colors"
|
||||
className="text-xs sm:text-sm text-white/40 uppercase tracking-[0.15em] sm:tracking-[0.2em] hover:text-white transition-colors"
|
||||
>
|
||||
View Pricing
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-24 pt-8 border-t border-white/[0.05] flex flex-wrap justify-center gap-12 text-[10px] text-white/20 font-mono uppercase tracking-[0.2em]">
|
||||
<div className="mt-16 sm:mt-24 pt-6 sm:pt-8 border-t border-white/[0.05] flex flex-wrap justify-center gap-6 sm:gap-12 text-[9px] sm:text-[10px] text-white/20 font-mono uppercase tracking-[0.15em] sm:tracking-[0.2em]">
|
||||
<span className="flex items-center gap-2"><ShieldCheck className="w-3 h-3 text-accent" /> Encrypted</span>
|
||||
<span className="flex items-center gap-2"><Globe className="w-3 h-3 text-accent" /> Global</span>
|
||||
<span className="flex items-center gap-2"><Check className="w-3 h-3 text-accent" /> Verified</span>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -10,46 +10,41 @@ export function Footer() {
|
||||
|
||||
return (
|
||||
<footer className="relative border-t border-white/10 bg-[#020202] mt-auto overflow-hidden">
|
||||
{/* Background Noise */}
|
||||
<div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay pointer-events-none" />
|
||||
|
||||
<div className="max-w-[1400px] mx-auto px-4 sm:px-6 py-16 sm:py-20 relative z-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-12 lg:gap-8 mb-16">
|
||||
<div className="max-w-[1400px] mx-auto px-4 sm:px-6 py-12 sm:py-20 relative z-10">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 lg:gap-8 mb-10 sm:mb-16">
|
||||
|
||||
{/* Brand Column */}
|
||||
<div className="md:col-span-2 lg:col-span-2">
|
||||
<div className="mb-6">
|
||||
<div className="col-span-2 md:col-span-2 lg:col-span-2">
|
||||
<div className="mb-4 sm:mb-6">
|
||||
<Link href="/" className="inline-block group">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2 sm:gap-3">
|
||||
<Image
|
||||
src="/pounce-puma.png"
|
||||
alt="POUNCE"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-contain opacity-80 group-hover:opacity-100 transition-opacity"
|
||||
width={32}
|
||||
height={32}
|
||||
className="object-contain opacity-80 group-hover:opacity-100 transition-opacity sm:w-10 sm:h-10"
|
||||
/>
|
||||
<span
|
||||
className="text-xl font-black tracking-[0.1em] text-white group-hover:text-accent transition-colors"
|
||||
style={{ fontFamily: 'var(--font-display), sans-serif' }}
|
||||
>
|
||||
<span className="text-lg sm:text-xl font-black tracking-[0.1em] text-white group-hover:text-accent transition-colors font-display">
|
||||
POUNCE
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<p className="text-sm font-mono text-white/50 mb-8 max-w-sm leading-relaxed">
|
||||
Global domain intelligence for serious investors. <br/>
|
||||
Scan. Acquire. Route. Yield.
|
||||
<p className="text-xs sm:text-sm font-mono text-white/50 mb-6 sm:mb-8 max-w-sm leading-relaxed">
|
||||
Global domain intelligence for serious investors. Scan. Acquire. Route. Yield.
|
||||
</p>
|
||||
|
||||
{/* Newsletter Input - Tech Style */}
|
||||
<div className="mb-8 max-w-sm">
|
||||
{/* Newsletter - Hidden on Mobile */}
|
||||
<div className="hidden sm:block mb-8 max-w-sm">
|
||||
<label className="text-[10px] font-mono uppercase tracking-widest text-white/30 mb-2 block">Mission Briefings</label>
|
||||
<div className="flex">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="ENTER_EMAIL"
|
||||
className="w-full bg-[#0A0A0A] border border-white/10 px-4 py-3 text-white font-mono text-xs placeholder:text-white/20 focus:outline-none focus:border-accent transition-all rounded-none"
|
||||
className="w-full bg-[#0A0A0A] border border-white/10 px-4 py-3 text-white font-mono text-xs placeholder:text-white/20 focus:outline-none focus:border-accent transition-all"
|
||||
/>
|
||||
<button className="px-4 bg-white text-black hover:bg-accent transition-colors border-l border-white/10">
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
@ -57,90 +52,84 @@ export function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-3 sm:gap-4">
|
||||
<a
|
||||
href="https://twitter.com/pounce_domains"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-10 h-10 flex items-center justify-center border border-white/5 hover:border-white/20 hover:bg-white/5 transition-all group"
|
||||
className="w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center border border-white/5 hover:border-white/20 hover:bg-white/5 transition-all group"
|
||||
aria-label="Twitter"
|
||||
>
|
||||
<Twitter className="w-4 h-4 text-white/40 group-hover:text-white transition-colors" />
|
||||
<Twitter className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white/40 group-hover:text-white transition-colors" />
|
||||
</a>
|
||||
<a
|
||||
href="https://linkedin.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-10 h-10 flex items-center justify-center border border-white/5 hover:border-white/20 hover:bg-white/5 transition-all group"
|
||||
className="w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center border border-white/5 hover:border-white/20 hover:bg-white/5 transition-all group"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<Linkedin className="w-4 h-4 text-white/40 group-hover:text-white transition-colors" />
|
||||
<Linkedin className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white/40 group-hover:text-white transition-colors" />
|
||||
</a>
|
||||
<a
|
||||
href="mailto:hello@pounce.ch"
|
||||
className="w-10 h-10 flex items-center justify-center border border-white/5 hover:border-white/20 hover:bg-white/5 transition-all group"
|
||||
className="w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center border border-white/5 hover:border-white/20 hover:bg-white/5 transition-all group"
|
||||
aria-label="Email"
|
||||
>
|
||||
<Mail className="w-4 h-4 text-white/40 group-hover:text-white transition-colors" />
|
||||
<Mail className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white/40 group-hover:text-white transition-colors" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Links Columns */}
|
||||
<div className="lg:col-span-1">
|
||||
<h3 className="text-xs font-bold uppercase tracking-[0.2em] text-white mb-6">Protocol</h3>
|
||||
<ul className="space-y-4">
|
||||
<li>
|
||||
<Link href="/acquire" className="text-sm font-mono text-white/40 hover:text-accent transition-colors flex items-center gap-2 group">
|
||||
<span className="w-1 h-1 bg-white/20 group-hover:bg-accent rounded-full transition-colors" /> Acquire
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/discover" className="text-sm font-mono text-white/40 hover:text-accent transition-colors flex items-center gap-2 group">
|
||||
<span className="w-1 h-1 bg-white/20 group-hover:bg-accent rounded-full transition-colors" /> Discover
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/yield" className="text-sm font-mono text-white/40 hover:text-accent transition-colors flex items-center gap-2 group">
|
||||
<span className="w-1 h-1 bg-white/20 group-hover:bg-accent rounded-full transition-colors" /> Yield
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/pricing" className="text-sm font-mono text-white/40 hover:text-accent transition-colors flex items-center gap-2 group">
|
||||
<span className="w-1 h-1 bg-white/20 group-hover:bg-accent rounded-full transition-colors" /> Pricing
|
||||
</Link>
|
||||
</li>
|
||||
{/* Protocol Links */}
|
||||
<div className="col-span-1">
|
||||
<h3 className="text-[10px] sm:text-xs font-bold uppercase tracking-[0.15em] sm:tracking-[0.2em] text-white mb-4 sm:mb-6">Protocol</h3>
|
||||
<ul className="space-y-3 sm:space-y-4">
|
||||
{[
|
||||
{ href: '/acquire', label: 'Acquire' },
|
||||
{ href: '/discover', label: 'Discover' },
|
||||
{ href: '/yield', label: 'Yield' },
|
||||
{ href: '/pricing', label: 'Pricing' },
|
||||
].map((link) => (
|
||||
<li key={link.href}>
|
||||
<Link href={link.href} className="text-xs sm:text-sm font-mono text-white/40 hover:text-accent transition-colors flex items-center gap-1.5 sm:gap-2 group">
|
||||
<span className="w-1 h-1 bg-white/20 group-hover:bg-accent transition-colors" /> {link.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-1">
|
||||
<h3 className="text-xs font-bold uppercase tracking-[0.2em] text-white mb-6">Intel</h3>
|
||||
<ul className="space-y-4">
|
||||
{/* Info Links */}
|
||||
<div className="col-span-1">
|
||||
<h3 className="text-[10px] sm:text-xs font-bold uppercase tracking-[0.15em] sm:tracking-[0.2em] text-white mb-4 sm:mb-6">Intel</h3>
|
||||
<ul className="space-y-3 sm:space-y-4">
|
||||
<li>
|
||||
<Link href="/briefings" className="text-sm font-mono text-white/40 hover:text-white transition-colors">Briefings</Link>
|
||||
<Link href="/briefings" className="text-xs sm:text-sm font-mono text-white/40 hover:text-white transition-colors">Briefings</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/about" className="text-sm font-mono text-white/40 hover:text-white transition-colors">About Us</Link>
|
||||
<Link href="/about" className="text-xs sm:text-sm font-mono text-white/40 hover:text-white transition-colors">About</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact" className="text-sm font-mono text-white/40 hover:text-white transition-colors">Contact HQ</Link>
|
||||
<Link href="/contact" className="text-xs sm:text-sm font-mono text-white/40 hover:text-white transition-colors">Contact</Link>
|
||||
</li>
|
||||
{!isAuthenticated && (
|
||||
<li>
|
||||
<Link href="/login" className="text-sm font-mono text-white/40 hover:text-white transition-colors">Login</Link>
|
||||
<Link href="/login" className="text-xs sm:text-sm font-mono text-white/40 hover:text-white transition-colors">Login</Link>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-1">
|
||||
{/* Legal - Hidden on Small Mobile, Merged into Intel on Mobile */}
|
||||
<div className="hidden lg:block lg:col-span-1">
|
||||
<h3 className="text-xs font-bold uppercase tracking-[0.2em] text-white mb-6">Legal</h3>
|
||||
<ul className="space-y-4">
|
||||
<li>
|
||||
<Link href="/legal/privacy" className="text-sm font-mono text-white/40 hover:text-white transition-colors">Privacy Policy</Link>
|
||||
<Link href="/legal/privacy" className="text-sm font-mono text-white/40 hover:text-white transition-colors">Privacy</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/legal/terms" className="text-sm font-mono text-white/40 hover:text-white transition-colors">Terms of Service</Link>
|
||||
<Link href="/legal/terms" className="text-sm font-mono text-white/40 hover:text-white transition-colors">Terms</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/legal/imprint" className="text-sm font-mono text-white/40 hover:text-white transition-colors">Imprint</Link>
|
||||
@ -149,16 +138,27 @@ export function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Legal Links */}
|
||||
<div className="lg:hidden flex flex-wrap gap-4 mb-8 text-[10px] font-mono text-white/30">
|
||||
<Link href="/legal/privacy" className="hover:text-white transition-colors">Privacy</Link>
|
||||
<span className="text-white/10">|</span>
|
||||
<Link href="/legal/terms" className="hover:text-white transition-colors">Terms</Link>
|
||||
<span className="text-white/10">|</span>
|
||||
<Link href="/legal/imprint" className="hover:text-white transition-colors">Imprint</Link>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="pt-8 border-t border-white/10 flex flex-col sm:flex-row justify-between items-center gap-4 text-[10px] font-mono text-white/20 uppercase tracking-widest">
|
||||
<div className="pt-6 sm:pt-8 border-t border-white/10 flex flex-col sm:flex-row justify-between items-center gap-3 sm:gap-4 text-[9px] sm:text-[10px] font-mono text-white/20 uppercase tracking-widest">
|
||||
<p>© {new Date().getFullYear()} POUNCE AG — ZURICH</p>
|
||||
<div className="flex items-center gap-6">
|
||||
<span>System Status: Online</span>
|
||||
<span>v2.0.4 [Stable]</span>
|
||||
<div className="flex items-center gap-4 sm:gap-6">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 bg-accent animate-pulse" />
|
||||
Online
|
||||
</span>
|
||||
<span>v2.0.4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -11,33 +11,27 @@ import {
|
||||
CreditCard,
|
||||
LayoutDashboard,
|
||||
Coins,
|
||||
ArrowRight,
|
||||
Sparkles,
|
||||
Target,
|
||||
LogOut,
|
||||
User,
|
||||
} from 'lucide-react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import Image from 'next/image'
|
||||
import clsx from 'clsx'
|
||||
|
||||
/**
|
||||
* Public Header Component
|
||||
*
|
||||
* Used for:
|
||||
* - Landing page (/)
|
||||
* - Public pages (pricing, about, contact, blog, etc.)
|
||||
* - Auth pages (login, register)
|
||||
*
|
||||
* For logged-in users in the Command Center, use TerminalLayout instead.
|
||||
*/
|
||||
export function Header() {
|
||||
const pathname = usePathname()
|
||||
const { isAuthenticated, user, logout, subscription } = useStore()
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
|
||||
// Close mobile menu on route change
|
||||
useEffect(() => {
|
||||
setMobileMenuOpen(false)
|
||||
setMenuOpen(false)
|
||||
}, [pathname])
|
||||
|
||||
const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
|
||||
|
||||
// Navigation: Discover | Acquire | Yield | Pricing
|
||||
const publicNavItems = [
|
||||
{ href: '/discover', label: 'Discover', icon: TrendingUp },
|
||||
{ href: '/acquire', label: 'Acquire', icon: Gavel },
|
||||
@ -50,151 +44,212 @@ export function Header() {
|
||||
return pathname.startsWith(href)
|
||||
}
|
||||
|
||||
// Check if we're on a Command Center page (should use Sidebar instead)
|
||||
const isCommandCenterPage = pathname.startsWith('/terminal') || pathname.startsWith('/admin')
|
||||
|
||||
// If logged in and on Command Center page, don't render this header
|
||||
if (isAuthenticated && isCommandCenterPage) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-xl border-b border-border-subtle">
|
||||
<div className="w-full px-4 sm:px-6 lg:px-8 h-16 sm:h-20 flex items-center justify-between">
|
||||
{/* Left side: Logo + Nav Links */}
|
||||
<div className="flex items-center gap-6 sm:gap-8 h-full">
|
||||
<>
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-[#020202]/95 backdrop-blur-md border-b border-white/[0.08]">
|
||||
<div className="w-full px-4 sm:px-6 lg:px-8 h-14 sm:h-16 flex items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center h-full hover:opacity-80 transition-opacity duration-300"
|
||||
>
|
||||
<span
|
||||
className="text-[1.25rem] sm:text-[1.5rem] font-black tracking-[0.1em] text-foreground"
|
||||
style={{ fontFamily: 'var(--font-display), Playfair Display, Georgia, serif' }}
|
||||
>
|
||||
<Link href="/" className="flex items-center gap-3 h-full hover:opacity-80 transition-opacity">
|
||||
<div className="relative w-7 h-7 sm:w-8 sm:h-8">
|
||||
<Image src="/pounce-puma.png" alt="Pounce" fill className="object-contain" />
|
||||
</div>
|
||||
<span className="text-base sm:text-lg font-black tracking-[0.1em] text-white font-display">
|
||||
POUNCE
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Main Nav Links (Desktop) */}
|
||||
<nav className="hidden md:flex items-center h-full gap-1">
|
||||
{/* Desktop Nav */}
|
||||
<nav className="hidden lg:flex items-center h-full gap-1">
|
||||
{publicNavItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={clsx(
|
||||
"flex items-center h-9 px-3 text-[0.8125rem] transition-all duration-200 uppercase tracking-wide",
|
||||
"flex items-center h-9 px-4 text-xs font-mono uppercase tracking-wider transition-all",
|
||||
isActive(item.href)
|
||||
? "text-foreground font-bold border-b-2 border-accent"
|
||||
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||
? "text-white border-b-2 border-accent"
|
||||
: "text-white/50 hover:text-white"
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Right side */}
|
||||
<nav className="hidden sm:flex items-center h-full gap-2">
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
{/* Go to Command Center */}
|
||||
{/* Desktop Auth */}
|
||||
<nav className="hidden sm:flex items-center h-full gap-3">
|
||||
{isAuthenticated ? (
|
||||
<Link
|
||||
href="/terminal/radar"
|
||||
className="flex items-center gap-2 h-9 px-4 text-[0.8125rem] bg-accent text-background
|
||||
font-bold uppercase tracking-wider hover:bg-accent-hover transition-all duration-200 rounded-none clip-path-slant-sm"
|
||||
style={{ clipPath: 'polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px)' }}
|
||||
className="flex items-center gap-2 h-9 px-5 text-xs bg-accent text-black font-bold uppercase tracking-wider hover:bg-white transition-colors"
|
||||
>
|
||||
<LayoutDashboard className="w-4 h-4" />
|
||||
Command Center
|
||||
<Target className="w-4 h-4" />
|
||||
Terminal
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex items-center h-9 px-4 text-[0.8125rem] text-foreground-muted hover:text-foreground
|
||||
hover:bg-foreground/5 transition-all duration-200 uppercase tracking-wide rounded-none"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
href="/register"
|
||||
className="flex items-center h-9 ml-1 px-5 text-[0.8125rem] bg-accent text-background rounded-none
|
||||
font-bold uppercase tracking-wider hover:bg-accent-hover transition-all duration-200 shadow-[0_0_20px_rgba(16,185,129,0.2)]"
|
||||
style={{ clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px)' }}
|
||||
>
|
||||
Start Hunting
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className="sm:hidden p-2 text-foreground-muted hover:text-foreground transition-colors"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
>
|
||||
{mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="sm:hidden border-t border-border bg-background/95 backdrop-blur-xl">
|
||||
<nav className="px-4 py-4 space-y-1">
|
||||
{/* Main Nav */}
|
||||
{publicNavItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={clsx(
|
||||
"flex items-center gap-3 px-4 py-3 text-body-sm rounded-xl transition-all duration-200",
|
||||
isActive(item.href)
|
||||
? "bg-foreground/10 text-foreground font-medium"
|
||||
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||
)}
|
||||
>
|
||||
<item.icon className="w-5 h-5" />
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
<div className="my-3 border-t border-border" />
|
||||
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<Link
|
||||
href="/terminal/radar"
|
||||
className="flex items-center gap-3 px-4 py-3 text-body-sm text-center bg-accent text-background
|
||||
font-bold uppercase tracking-wider hover:bg-accent-hover transition-all duration-200 rounded-none"
|
||||
>
|
||||
<LayoutDashboard className="w-5 h-5" />
|
||||
<span>Command Center</span>
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link
|
||||
href="/login"
|
||||
className="block px-4 py-3 text-body-sm text-foreground-muted
|
||||
hover:text-foreground hover:bg-foreground/5 transition-all duration-200 uppercase tracking-wide rounded-none"
|
||||
className="flex items-center h-9 px-4 text-xs text-white/50 hover:text-white font-mono uppercase tracking-wider transition-colors"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
href="/register"
|
||||
className="block px-4 py-3 text-body-sm text-center bg-accent text-background
|
||||
font-bold uppercase tracking-wider hover:bg-accent-hover transition-all duration-200 shadow-[0_0_20px_rgba(16,185,129,0.2)] rounded-none"
|
||||
className="flex items-center h-9 px-5 text-xs bg-accent text-black font-bold uppercase tracking-wider hover:bg-white transition-colors"
|
||||
>
|
||||
Start Hunting
|
||||
Start Free
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className="sm:hidden w-10 h-10 flex items-center justify-center text-white/60 hover:text-white transition-colors"
|
||||
onClick={() => setMenuOpen(!menuOpen)}
|
||||
>
|
||||
{menuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Mobile Drawer */}
|
||||
{menuOpen && (
|
||||
<div className="sm: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-[85%] max-w-[320px] 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)' }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-white/[0.08]">
|
||||
<div className="flex items-center gap-3">
|
||||
<Image src="/pounce-puma.png" alt="Pounce" width={28} height={28} className="object-contain" />
|
||||
<div>
|
||||
<p className="text-sm font-bold text-white">Pounce</p>
|
||||
<p className="text-[9px] text-white/40 font-mono uppercase tracking-widest">Domain Intelligence</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setMenuOpen(false)}
|
||||
className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/60 hover:text-white transition-all"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex-1 overflow-y-auto py-4">
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center gap-2 px-4 mb-2">
|
||||
<div className="w-1 h-3 bg-accent" />
|
||||
<span className="text-[9px] font-bold text-white/30 uppercase tracking-[0.2em]">Explore</span>
|
||||
</div>
|
||||
{publicNavItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={() => setMenuOpen(false)}
|
||||
className={clsx(
|
||||
"flex items-center gap-3 px-4 py-3 transition-colors border-l-2",
|
||||
isActive(item.href)
|
||||
? "border-accent text-white bg-white/[0.03]"
|
||||
: "border-transparent text-white/60 active:text-white active:bg-white/[0.03]"
|
||||
)}
|
||||
>
|
||||
<item.icon className="w-4 h-4 text-white/30" />
|
||||
<span className="text-sm font-medium">{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{isAuthenticated && (
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center gap-2 px-4 mb-2">
|
||||
<div className="w-1 h-3 bg-accent" />
|
||||
<span className="text-[9px] font-bold text-white/30 uppercase tracking-[0.2em]">Terminal</span>
|
||||
</div>
|
||||
<Link
|
||||
href="/terminal/radar"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
className="flex items-center gap-3 px-4 py-3 text-accent active:bg-white/[0.03] transition-colors border-l-2 border-transparent active:border-accent"
|
||||
>
|
||||
<Target className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">Command Center</span>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 bg-white/[0.02] border-t border-white/[0.08]">
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<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">
|
||||
<User className="w-4 h-4 text-accent" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-bold text-white truncate">
|
||||
{user?.name || user?.email?.split('@')[0] || 'User'}
|
||||
</p>
|
||||
<p className="text-[9px] font-mono text-white/40 uppercase tracking-wider">{tierName}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/terminal/radar"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
className="flex items-center justify-center gap-2 w-full py-3 bg-accent text-black text-xs font-bold uppercase tracking-wider active:scale-[0.98] transition-all mb-2"
|
||||
>
|
||||
<Target className="w-3 h-3" />
|
||||
Open Terminal
|
||||
</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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link
|
||||
href="/register"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
className="flex items-center justify-center gap-2 w-full py-3 bg-accent text-black text-xs font-bold uppercase tracking-wider active:scale-[0.98] transition-all mb-2"
|
||||
>
|
||||
<Sparkles className="w-3 h-3" />
|
||||
Start Free
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/login"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
className="flex items-center justify-center gap-2 w-full py-2 border border-white/10 text-white/50 text-[10px] font-mono uppercase tracking-wider active:bg-white/5 transition-all"
|
||||
>
|
||||
Sign In
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -354,6 +354,33 @@ class ApiClient {
|
||||
return this.request<void>(`/listings/${id}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
async updateListing(id: number, data: { status?: string; title?: string; description?: string; asking_price?: number }) {
|
||||
return this.request<any>(`/listings/${id}`, { method: 'PUT', body: JSON.stringify(data) })
|
||||
}
|
||||
|
||||
async startDnsVerification(id: number) {
|
||||
return this.request<{
|
||||
verification_code: string
|
||||
dns_record_type: string
|
||||
dns_record_name: string
|
||||
dns_record_value: string
|
||||
instructions: string
|
||||
status: string
|
||||
}>(`/listings/${id}/verify-dns`, { method: 'POST' })
|
||||
}
|
||||
|
||||
async checkDnsVerification(id: number) {
|
||||
return this.request<{
|
||||
verified: boolean
|
||||
status: string
|
||||
message: string
|
||||
}>(`/listings/${id}/verify-dns/check`)
|
||||
}
|
||||
|
||||
async getListingInquiries(id: number) {
|
||||
return this.request<any[]>(`/listings/${id}/inquiries`)
|
||||
}
|
||||
|
||||
// Subscription
|
||||
async getSubscription() {
|
||||
return this.request<{
|
||||
|
||||
Reference in New Issue
Block a user