feat: Update TLD Pricing & Monitoring features

TLD PRICING - Landing Page:
- New headline: 'The real price tag'
- Highlight renewal costs, price trends, and traps
- Feature pills showing Trap Detection and Risk Levels
- Updated CTA button styling

TLD PRICING - Public Page (/tld-pricing):
- New header with 'True Costs' emphasis
- Feature pills: Renewal Trap Detection, Risk Levels, 1y/3y Trends
- Improved login banner with specific value proposition
- Consistent styling with landing page

MONITORING - Landing Page:
- Updated Track section with 4-layer health analysis
- New features: DNS/HTTP/SSL/WHOIS monitoring
- Health status alerts (🟢🟡🟠🔴)
- Parked & pre-drop detection

Status:
- Public:  TLD Pricing page with blur for free users
- Command Center:  Watchlist has full health monitoring
- Admin: Has System tab with health checks
This commit is contained in:
yves.gugger
2025-12-10 14:03:37 +01:00
parent c131cdb856
commit c4a9242747
2 changed files with 57 additions and 31 deletions

View File

@ -316,21 +316,21 @@ export default function HomePage() {
</div>
<h3 className="text-2xl font-display text-foreground mb-4">Track</h3>
<p className="text-foreground-muted mb-6 leading-relaxed">
Your private watchlist. We monitor 24/7 so you don&apos;t have to.
<span className="text-foreground"> Know the second it drops.</span>
Your private watchlist with <span className="text-foreground">4-layer health analysis</span>.
<span className="text-foreground"> Know the second it weakens.</span>
</p>
<ul className="space-y-3 text-sm">
<li className="flex items-center gap-3 text-foreground-subtle">
<Check className="w-4 h-4 text-accent flex-shrink-0" />
<span>Daily status checks</span>
<span>DNS, HTTP, SSL, WHOIS monitoring</span>
</li>
<li className="flex items-center gap-3 text-foreground-subtle">
<Check className="w-4 h-4 text-accent flex-shrink-0" />
<span>Email & SMS alerts</span>
<span>🟢🟡🟠🔴 Health status alerts</span>
</li>
<li className="flex items-center gap-3 text-foreground-subtle">
<Check className="w-4 h-4 text-accent flex-shrink-0" />
<span>Pre-drop warnings</span>
<span>Parked & pre-drop detection</span>
</li>
</ul>
</div>
@ -525,17 +525,21 @@ export default function HomePage() {
<div>
<span className="text-sm font-semibold text-accent uppercase tracking-wider">TLD Pricing</span>
<h2 className="mt-4 font-display text-3xl sm:text-4xl md:text-5xl tracking-[-0.03em] text-foreground">
Market movers.
The <span className="text-accent">real</span> price tag.
</h2>
<p className="mt-3 text-foreground-muted max-w-lg">
Real-time pricing data across 886+ extensions. Know where the value is.
Don't fall for $0.99 promos. We show renewal costs, price trends, and renewal traps across 886+ TLDs.
</p>
<div className="flex items-center gap-4 mt-4 text-sm text-foreground-subtle">
<span className="flex items-center gap-1.5"><span className="text-amber-400"></span> Trap Detection</span>
<span className="flex items-center gap-1.5">🟢🟡🔴 Risk Levels</span>
</div>
</div>
<Link
href="/tld-pricing"
className="group inline-flex items-center gap-2 text-sm font-medium text-accent hover:text-accent-hover transition-colors"
className="group inline-flex items-center gap-2 px-5 py-2.5 bg-foreground/5 border border-border rounded-xl text-sm font-medium text-foreground hover:border-accent hover:text-accent transition-all"
>
Explore all TLDs
Explore TLD Pricing
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
</Link>
</div>

View File

@ -284,38 +284,60 @@ export default function TldPricingPage() {
<main className="relative pt-32 sm:pt-40 pb-20 sm:pb-28 px-4 sm:px-6 flex-1">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="text-center mb-16 sm:mb-20 animate-fade-in">
<span className="text-sm font-semibold text-accent uppercase tracking-wider">Market Intel</span>
<h1 className="mt-4 font-display text-[2.5rem] sm:text-[3.5rem] md:text-[4.5rem] lg:text-[5rem] leading-[0.95] tracking-[-0.03em] text-foreground">
{pagination.total}+ TLDs. Live Prices.
<div className="text-center mb-12 sm:mb-16 animate-fade-in">
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-accent text-sm mb-6">
<TrendingUp className="w-4 h-4" />
<span>Real-time Market Data</span>
</div>
<h1 className="font-display text-[2.5rem] sm:text-[3.5rem] md:text-[4.5rem] leading-[0.95] tracking-[-0.03em] text-foreground">
{pagination.total}+ TLDs.
<span className="block text-accent">True Costs.</span>
</h1>
<p className="mt-5 text-lg sm:text-xl text-foreground-muted max-w-2xl mx-auto">
See what domains cost. Spot trends. Find opportunities.
Don&apos;t fall for promo prices. See renewal costs, spot traps, and track price trends across every extension.
</p>
{/* Feature Pills */}
<div className="flex flex-wrap items-center justify-center gap-3 mt-8">
<div className="flex items-center gap-2 px-4 py-2 bg-foreground/5 rounded-full text-sm">
<span className="text-amber-400"></span>
<span className="text-foreground-muted">Renewal Trap Detection</span>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-foreground/5 rounded-full text-sm">
<span>🟢🟡🔴</span>
<span className="text-foreground-muted">Risk Levels</span>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-foreground/5 rounded-full text-sm">
<TrendingUp className="w-4 h-4 text-orange-400" />
<span className="text-foreground-muted">1y/3y Trends</span>
</div>
</div>
</div>
{/* Login Banner for non-authenticated users */}
{!isAuthenticated && (
<div className="mb-8 p-5 bg-accent-muted border border-accent/20 rounded-xl flex flex-col sm:flex-row items-center justify-between gap-4 animate-fade-in">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-accent/20 rounded-xl flex items-center justify-center">
<Lock className="w-5 h-5 text-accent" />
<div className="mb-8 p-6 bg-gradient-to-r from-accent/10 to-accent/5 border border-accent/20 rounded-2xl animate-fade-in">
<div className="flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<Lock className="w-6 h-6 text-accent" />
</div>
<div>
<p className="text-body-sm font-medium text-foreground">See the full picture</p>
<p className="text-ui-sm text-foreground-muted">
Sign in for detailed pricing, charts, and trends.
<p className="font-medium text-foreground">Stop overpaying. Know the true costs.</p>
<p className="text-sm text-foreground-muted">
Unlock renewal traps, 1y/3y trends, and risk analysis for {pagination.total}+ TLDs.
</p>
</div>
</div>
<Link
href="/register"
className="shrink-0 px-5 py-2.5 bg-accent text-background text-ui font-medium rounded-lg
hover:bg-accent-hover transition-all duration-300"
className="shrink-0 px-6 py-3 bg-accent text-background font-medium rounded-xl
hover:bg-accent-hover transition-all shadow-lg shadow-accent/20"
>
Hunt Free
Start Free
</Link>
</div>
</div>
)}
{/* Trending Section */}