refactor: Remove emojis + Add Portfolio to Landing Page

EMOJI REMOVAL:
- Replaced 🟢🟡🔴 emojis with CSS circles (bg-accent, bg-amber-400, bg-red-400)
- Updated TLD Pricing pages (public + command)
- Updated Landing Page feature pills
- Updated Admin panel feature checklist

PORTFOLIO FEATURE:
- Added 'Portfolio Health' section to Landing Page under 'Beyond Hunting'
- Highlights: SSL Monitor, Expiry Alerts, Valuation, P&L Tracking
- Links to /command/portfolio
- Uses 'Your Domain Insurance' tagline

Portfolio Status:
- Public Page: N/A (personal feature, no public page needed)
- Command Center:  Fully implemented with Add/Edit/Sell/Valuation
- Admin Panel:  Stats visible in Overview
- Landing Page:  Now advertised in 'Beyond Hunting' section
This commit is contained in:
yves.gugger
2025-12-10 14:51:49 +01:00
parent abda05ac32
commit 7578d78568
7 changed files with 307 additions and 266 deletions

View File

@ -672,7 +672,7 @@ export default function AdminPage() {
{[ {[
{ feature: 'Renewal Trap Detection', status: '✅', desc: 'Warns when renewal >2x registration' }, { feature: 'Renewal Trap Detection', status: '✅', desc: 'Warns when renewal >2x registration' },
{ feature: '1y/3y Trend Tracking', status: '✅', desc: 'Shows price changes over time' }, { feature: '1y/3y Trend Tracking', status: '✅', desc: 'Shows price changes over time' },
{ feature: 'Risk Level Badges', status: '✅', desc: '🟢 Low, 🟡 Medium, 🔴 High' }, { feature: 'Risk Level Badges', status: '✅', desc: 'Low, Medium, High indicators' },
{ feature: 'Category Tabs', status: '✅', desc: 'Tech, Geo, Budget, Premium' }, { feature: 'Category Tabs', status: '✅', desc: 'Tech, Geo, Budget, Premium' },
{ feature: 'Sparkline Charts', status: '✅', desc: 'Visual trend indicators' }, { feature: 'Sparkline Charts', status: '✅', desc: 'Visual trend indicators' },
{ feature: 'Blur for Free Users', status: '✅', desc: 'First 5 rows visible' }, { feature: 'Blur for Free Users', status: '✅', desc: 'First 5 rows visible' },

View File

@ -201,9 +201,12 @@ export default function TLDPricingPage() {
level === 'medium' && "bg-amber-500/10 text-amber-400", level === 'medium' && "bg-amber-500/10 text-amber-400",
level === 'low' && "bg-accent/10 text-accent" level === 'low' && "bg-accent/10 text-accent"
)}> )}>
{level === 'high' && '🔴'} <span className={clsx(
{level === 'medium' && '🟡'} "w-2.5 h-2.5 rounded-full",
{level === 'low' && '🟢'} level === 'high' && "bg-red-400",
level === 'medium' && "bg-amber-400",
level === 'low' && "bg-accent"
)} />
<span className="hidden sm:inline ml-1">{reason}</span> <span className="hidden sm:inline ml-1">{reason}</span>
</span> </span>
) )

View File

@ -31,9 +31,8 @@ import {
Filter, Filter,
Crosshair, Crosshair,
Tag, Tag,
AlertTriangle,
Briefcase, Briefcase,
DollarSign,
Calendar,
} from 'lucide-react' } from 'lucide-react'
import Link from 'next/link' import Link from 'next/link'
import clsx from 'clsx' import clsx from 'clsx'
@ -329,7 +328,7 @@ export default function HomePage() {
</li> </li>
<li className="flex items-center gap-3 text-foreground-subtle"> <li className="flex items-center gap-3 text-foreground-subtle">
<Check className="w-4 h-4 text-accent flex-shrink-0" /> <Check className="w-4 h-4 text-accent flex-shrink-0" />
<span>🟢🟡🟠🔴 Health status alerts</span> <span>Real-time health status alerts</span>
</li> </li>
<li className="flex items-center gap-3 text-foreground-subtle"> <li className="flex items-center gap-3 text-foreground-subtle">
<Check className="w-4 h-4 text-accent flex-shrink-0" /> <Check className="w-4 h-4 text-accent flex-shrink-0" />
@ -404,144 +403,166 @@ export default function HomePage() {
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-6 lg:gap-8"> <div className="grid md:grid-cols-2 gap-6 lg:gap-8">
{/* For Sale Marketplace */} {/* For Sale Marketplace */}
<div className="group relative p-6 sm:p-8 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent <div className="group relative p-8 sm:p-10 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent
border border-accent/20 rounded-3xl hover:border-accent/40 transition-all duration-500 border border-accent/20 rounded-3xl hover:border-accent/40 transition-all duration-500
backdrop-blur-sm"> backdrop-blur-sm">
{/* Corner accent */} {/* Corner accent */}
<div className="absolute top-0 right-0 w-16 h-16 bg-accent/10 rounded-bl-[60px] rounded-tr-3xl" /> <div className="absolute top-0 right-0 w-24 h-24 bg-accent/10 rounded-bl-[100px] rounded-tr-3xl" />
<div className="relative"> <div className="relative">
<div className="flex items-start gap-4 mb-5"> <div className="flex items-start gap-4 mb-6">
<div className="w-12 h-12 bg-accent/20 border border-accent/30 rounded-xl flex items-center justify-center shadow-lg shadow-accent/10"> <div className="w-14 h-14 bg-accent/20 border border-accent/30 rounded-2xl flex items-center justify-center shadow-lg shadow-accent/10">
<Tag className="w-5 h-5 text-accent" /> <Tag className="w-6 h-6 text-accent" />
</div> </div>
<div> <div>
<h3 className="text-lg font-display text-foreground mb-0.5">Marketplace</h3> <h3 className="text-xl font-display text-foreground mb-1">Sell Your Domains</h3>
<p className="text-xs text-accent font-medium">Buy & Sell</p> <p className="text-sm text-accent font-medium">Marketplace</p>
</div> </div>
</div> </div>
<p className="text-sm text-foreground-muted mb-5 leading-relaxed"> <p className="text-foreground-muted mb-6 leading-relaxed">
Create "For Sale" pages with one click. Create professional "For Sale" landing pages with one click.
<span className="text-foreground font-medium"> DNS verification</span> proves ownership. <span className="text-foreground font-medium"> DNS verification</span> proves ownership.
Buyers contact you directly through Pounce.
</p> </p>
<ul className="space-y-2 text-sm mb-6"> <ul className="space-y-3 text-sm mb-8">
<li className="flex items-center gap-2 text-foreground-subtle"> <li className="flex items-center gap-3 text-foreground-subtle">
<div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center">
<Shield className="w-3.5 h-3.5 text-accent" /> <Shield className="w-3.5 h-3.5 text-accent" />
</div>
<span>Verified Owner badge</span> <span>Verified Owner badge</span>
</li> </li>
<li className="flex items-center gap-2 text-foreground-subtle"> <li className="flex items-center gap-3 text-foreground-subtle">
<div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center">
<BarChart3 className="w-3.5 h-3.5 text-accent" /> <BarChart3 className="w-3.5 h-3.5 text-accent" />
</div>
<span>Pounce Score valuation</span> <span>Pounce Score valuation</span>
</li> </li>
<li className="flex items-center gap-2 text-foreground-subtle"> <li className="flex items-center gap-3 text-foreground-subtle">
<div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center">
<Lock className="w-3.5 h-3.5 text-accent" /> <Lock className="w-3.5 h-3.5 text-accent" />
</div>
<span>Secure contact form</span> <span>Secure contact form</span>
</li> </li>
</ul> </ul>
<Link <Link
href="/buy" href="/buy"
className="inline-flex items-center gap-2 px-4 py-2 bg-accent text-background text-sm font-medium rounded-xl hover:bg-accent-hover transition-all" className="inline-flex items-center gap-2 px-5 py-2.5 bg-accent text-background font-medium rounded-xl hover:bg-accent-hover transition-all"
> >
Browse Marketplace Browse Marketplace
<ArrowRight className="w-3.5 h-3.5" /> <ArrowRight className="w-4 h-4" />
</Link> </Link>
</div> </div>
</div> </div>
{/* Sniper Alerts */} {/* Sniper Alerts */}
<div className="group relative p-6 sm:p-8 bg-gradient-to-br from-foreground/[0.03] to-transparent <div className="group relative p-8 sm:p-10 bg-gradient-to-br from-foreground/[0.03] to-transparent
border border-border rounded-3xl hover:border-accent/30 transition-all duration-500 border border-border rounded-3xl hover:border-accent/30 transition-all duration-500
backdrop-blur-sm"> backdrop-blur-sm">
{/* Decorative element */} {/* Decorative element */}
<div className="absolute top-6 right-6 flex gap-1"> <div className="absolute top-6 right-6 flex gap-1">
<div className="w-2 h-2 rounded-full bg-accent/50 animate-pulse" /> <div className="w-2 h-2 rounded-full bg-accent/50 animate-pulse" />
<div className="w-2 h-2 rounded-full bg-accent/30 animate-pulse delay-100" /> <div className="w-2 h-2 rounded-full bg-accent/30 animate-pulse delay-100" />
<div className="w-2 h-2 rounded-full bg-accent/20 animate-pulse delay-200" />
</div> </div>
<div className="relative"> <div className="relative">
<div className="flex items-start gap-4 mb-5"> <div className="flex items-start gap-4 mb-6">
<div className="w-12 h-12 bg-foreground/10 border border-border rounded-xl flex items-center justify-center"> <div className="w-14 h-14 bg-foreground/10 border border-border rounded-2xl flex items-center justify-center">
<Target className="w-5 h-5 text-foreground" /> <Target className="w-6 h-6 text-foreground" />
</div> </div>
<div> <div>
<h3 className="text-lg font-display text-foreground mb-0.5">Sniper Alerts</h3> <h3 className="text-xl font-display text-foreground mb-1">Sniper Alerts</h3>
<p className="text-xs text-foreground-muted">Hyper-Personalized</p> <p className="text-sm text-foreground-muted">Hyper-Personalized</p>
</div> </div>
</div> </div>
<p className="text-sm text-foreground-muted mb-5 leading-relaxed"> <p className="text-foreground-muted mb-6 leading-relaxed">
Ultra-specific filters that notify you <span className="text-foreground font-medium">exactly</span> when matching domains appear. Ultra-specific filters that notify you <span className="text-foreground font-medium">exactly</span> when matching domains appear.
<span className="italic"> "4-letter .com under $500 without numbers"</span> we've got you.
</p> </p>
<ul className="space-y-2 text-sm mb-6"> <ul className="space-y-3 text-sm mb-8">
<li className="flex items-center gap-2 text-foreground-subtle"> <li className="flex items-center gap-3 text-foreground-subtle">
<div className="w-6 h-6 rounded-full bg-foreground/5 flex items-center justify-center">
<Filter className="w-3.5 h-3.5 text-accent" /> <Filter className="w-3.5 h-3.5 text-accent" />
<span>Custom TLD, length, price</span> </div>
<span>Custom TLD, length, price filters</span>
</li> </li>
<li className="flex items-center gap-2 text-foreground-subtle"> <li className="flex items-center gap-3 text-foreground-subtle">
<div className="w-6 h-6 rounded-full bg-foreground/5 flex items-center justify-center">
<Bell className="w-3.5 h-3.5 text-accent" /> <Bell className="w-3.5 h-3.5 text-accent" />
</div>
<span>Email & SMS alerts</span> <span>Email & SMS alerts</span>
</li> </li>
<li className="flex items-center gap-2 text-foreground-subtle"> <li className="flex items-center gap-3 text-foreground-subtle">
<div className="w-6 h-6 rounded-full bg-foreground/5 flex items-center justify-center">
<Zap className="w-3.5 h-3.5 text-accent" /> <Zap className="w-3.5 h-3.5 text-accent" />
<span>Real-time matching</span> </div>
<span>Real-time auction matching</span>
</li> </li>
</ul> </ul>
<Link <Link
href="/command/alerts" href="/command/alerts"
className="inline-flex items-center gap-2 px-4 py-2 border border-border text-foreground text-sm font-medium rounded-xl hover:border-accent hover:text-accent transition-all" className="inline-flex items-center gap-2 px-5 py-2.5 border border-border text-foreground font-medium rounded-xl hover:border-accent hover:text-accent transition-all"
> >
Set Up Alerts Set Up Alerts
<ArrowRight className="w-3.5 h-3.5" /> <ArrowRight className="w-4 h-4" />
</Link> </Link>
</div> </div>
</div> </div>
</div>
{/* Portfolio Management */} {/* Portfolio Management - Full Width Below */}
<div className="group relative p-6 sm:p-8 bg-gradient-to-br from-blue-500/10 via-blue-500/5 to-transparent <div className="mt-6 lg:mt-8">
border border-blue-500/20 rounded-3xl hover:border-blue-500/40 transition-all duration-500 <div className="group relative p-8 sm:p-10 bg-gradient-to-r from-foreground/[0.02] via-accent/[0.03] to-foreground/[0.02]
backdrop-blur-sm"> border border-border rounded-3xl hover:border-accent/30 transition-all duration-500">
{/* Corner accent */} <div className="flex flex-col lg:flex-row lg:items-center gap-8">
<div className="absolute top-0 right-0 w-16 h-16 bg-blue-500/10 rounded-bl-[60px] rounded-tr-3xl" /> <div className="flex-1">
<div className="flex items-center gap-4 mb-4">
<div className="relative"> <div className="w-14 h-14 bg-accent/10 border border-accent/20 rounded-2xl flex items-center justify-center">
<div className="flex items-start gap-4 mb-5"> <Briefcase className="w-6 h-6 text-accent" />
<div className="w-12 h-12 bg-blue-500/20 border border-blue-500/30 rounded-xl flex items-center justify-center">
<Briefcase className="w-5 h-5 text-blue-400" />
</div> </div>
<div> <div>
<h3 className="text-lg font-display text-foreground mb-0.5">Portfolio</h3> <h3 className="text-xl font-display text-foreground">Portfolio Health</h3>
<p className="text-xs text-blue-400 font-medium">Asset Tracking</p> <p className="text-sm text-accent font-medium">Your Domain Insurance</p>
</div> </div>
</div> </div>
<p className="text-sm text-foreground-muted mb-5 leading-relaxed"> <p className="text-foreground-muted leading-relaxed max-w-2xl">
Track your domains, costs, and ROI. <span className="text-foreground font-medium">Never miss a renewal</span>. Your domain business, organized. Import your domains and let Pounce monitor them 24/7.
<span className="text-foreground font-medium"> SSL expiry</span>,
<span className="text-foreground font-medium"> renewal reminders</span>,
<span className="text-foreground font-medium"> uptime checks</span>, and
<span className="text-foreground font-medium"> P&L tracking</span> — all in one place.
<span className="italic text-foreground-subtle"> Never miss a renewal again.</span>
</p> </p>
<ul className="space-y-2 text-sm mb-6"> </div>
<li className="flex items-center gap-2 text-foreground-subtle"> <div className="flex flex-col sm:flex-row gap-4 lg:flex-col lg:items-end">
<DollarSign className="w-3.5 h-3.5 text-blue-400" /> <div className="flex items-center gap-6 text-sm text-foreground-subtle">
<span>Purchase & sale tracking</span> <span className="flex items-center gap-2">
</li> <Shield className="w-4 h-4 text-accent" />
<li className="flex items-center gap-2 text-foreground-subtle"> SSL Monitor
<Calendar className="w-3.5 h-3.5 text-blue-400" /> </span>
<span>Renewal reminders</span> <span className="flex items-center gap-2">
</li> <Clock className="w-4 h-4 text-accent" />
<li className="flex items-center gap-2 text-foreground-subtle"> Expiry Alerts
<TrendingUp className="w-3.5 h-3.5 text-blue-400" /> </span>
<span>P&L & valuations</span> <span className="flex items-center gap-2">
</li> <TrendingUp className="w-4 h-4 text-accent" />
</ul> Valuation
</span>
</div>
<Link <Link
href="/command/portfolio" href="/command/portfolio"
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500/10 text-blue-400 text-sm font-medium rounded-xl border border-blue-500/20 hover:bg-blue-500/20 transition-all" className="inline-flex items-center gap-2 px-5 py-2.5 bg-accent text-background font-medium rounded-xl hover:bg-accent-hover transition-all"
> >
Manage Portfolio Manage Portfolio
<ArrowRight className="w-3.5 h-3.5" /> <ArrowRight className="w-4 h-4" />
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
{/* Transition to TLDs */} {/* Transition to TLDs */}
@ -563,8 +584,18 @@ export default function HomePage() {
Don't fall for $0.99 promos. We show renewal costs, price trends, and renewal traps across 886+ TLDs. Don't fall for $0.99 promos. We show renewal costs, price trends, and renewal traps across 886+ TLDs.
</p> </p>
<div className="flex items-center gap-4 mt-4 text-sm text-foreground-subtle"> <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">
<span className="flex items-center gap-1.5">🟢🟡🔴 Risk Levels</span> <AlertTriangle className="w-4 h-4 text-amber-400" />
Trap Detection
</span>
<span className="flex items-center gap-1.5">
<span className="flex gap-0.5">
<span className="w-2 h-2 rounded-full bg-accent" />
<span className="w-2 h-2 rounded-full bg-amber-400" />
<span className="w-2 h-2 rounded-full bg-red-400" />
</span>
Risk Levels
</span>
</div> </div>
</div> </div>
<Link <Link

View File

@ -304,7 +304,11 @@ export default function TldPricingPage() {
<span className="text-foreground-muted">Renewal Trap Detection</span> <span className="text-foreground-muted">Renewal Trap Detection</span>
</div> </div>
<div className="flex items-center gap-2 px-4 py-2 bg-foreground/5 rounded-full text-sm"> <div className="flex items-center gap-2 px-4 py-2 bg-foreground/5 rounded-full text-sm">
<span>🟢🟡🔴</span> <div className="flex items-center gap-1">
<span className="w-2 h-2 rounded-full bg-accent" />
<span className="w-2 h-2 rounded-full bg-amber-400" />
<span className="w-2 h-2 rounded-full bg-red-400" />
</div>
<span className="text-foreground-muted">Risk Levels</span> <span className="text-foreground-muted">Risk Levels</span>
</div> </div>
<div className="flex items-center gap-2 px-4 py-2 bg-foreground/5 rounded-full text-sm"> <div className="flex items-center gap-2 px-4 py-2 bg-foreground/5 rounded-full text-sm">
@ -587,12 +591,15 @@ export default function TldPricingPage() {
tld.risk_level === 'medium' && "bg-amber-500/10 text-amber-400", tld.risk_level === 'medium' && "bg-amber-500/10 text-amber-400",
tld.risk_level === 'low' && "bg-accent/10 text-accent" tld.risk_level === 'low' && "bg-accent/10 text-accent"
)}> )}>
{tld.risk_level === 'high' && '🔴'} <span className={clsx(
{tld.risk_level === 'medium' && '🟡'} "w-2.5 h-2.5 rounded-full",
{tld.risk_level === 'low' && '🟢'} tld.risk_level === 'high' && "bg-red-400",
tld.risk_level === 'medium' && "bg-amber-400",
tld.risk_level === 'low' && "bg-accent"
)} />
</span> </span>
) : ( ) : (
<span className="text-foreground-subtle blur-[3px]">🟢</span> <span className="w-2.5 h-2.5 rounded-full bg-foreground-subtle blur-[3px]" />
)} )}
</td> </td>
<td className="px-4 sm:px-6 py-4"> <td className="px-4 sm:px-6 py-4">