yvg/pounce
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: Remove emojis + Add Portfolio to Landing Page

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

96
frontend/src/app/admin/page.tsx
View File

@ -447,11 +447,11 @@ export default function AdminPage() {
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
{item.ok ? <CheckCircle className="w-4 h-4 text-accent" /> : <XCircle className="w-4 h-4 text-amber-400" />} {item.ok ? <CheckCircle className="w-4 h-4 text-accent" /> : <XCircle className="w-4 h-4 text-amber-400" />}
<span className={item.ok ? 'text-accent' : 'text-amber-400'}>{item.text}</span> <span className={item.ok ? 'text-accent' : 'text-amber-400'}>{item.text}</span>
</span> </span>
</div> </div>
))} ))}
</div> </div>
</div> </div>
<div className="grid lg:grid-cols-2 gap-6"> <div className="grid lg:grid-cols-2 gap-6">
<div className="p-6 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl"> <div className="p-6 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl">
@ -473,8 +473,8 @@ export default function AdminPage() {
{auctionScraping ? <Loader2 className="w-4 h-4 animate-spin" /> : <Gavel className="w-4 h-4" />} {auctionScraping ? <Loader2 className="w-4 h-4 animate-spin" /> : <Gavel className="w-4 h-4" />}
{auctionScraping ? 'Scraping...' : 'Scrape Auctions'} {auctionScraping ? 'Scraping...' : 'Scrape Auctions'}
</button> </button>
</div> </div>
</div> </div>
{schedulerStatus && ( {schedulerStatus && (
<div className="p-6 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl"> <div className="p-6 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl">
@ -484,24 +484,24 @@ export default function AdminPage() {
<div key={job.id} className="flex items-center justify-between text-sm"> <div key={job.id} className="flex items-center justify-between text-sm">
<span className="text-foreground truncate">{job.name}</span> <span className="text-foreground truncate">{job.name}</span>
<span className="text-foreground-subtle text-xs">{job.trigger}</span> <span className="text-foreground-subtle text-xs">{job.trigger}</span>
</div> </div>
))} ))}
</div> </div>
</div> </div>
)} )}
</div> </div>
</div> </div>
)} )}
{/* Auctions Tab */} {/* Auctions Tab */}
{activeTab === 'auctions' && ( {activeTab === 'auctions' && (
<div className="space-y-6"> <div className="space-y-6">
{/* Auction Stats */} {/* Auction Stats */}
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div className="p-5 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl"> <div className="p-5 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl">
<p className="text-sm text-foreground-muted mb-1">Total Auctions</p> <p className="text-sm text-foreground-muted mb-1">Total Auctions</p>
<p className="text-3xl font-display text-foreground">{stats?.auctions.toLocaleString() || 0}</p> <p className="text-3xl font-display text-foreground">{stats?.auctions.toLocaleString() || 0}</p>
</div> </div>
<div className="p-5 bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20 rounded-2xl"> <div className="p-5 bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20 rounded-2xl">
<p className="text-sm text-foreground-muted mb-1">Platforms</p> <p className="text-sm text-foreground-muted mb-1">Platforms</p>
<p className="text-3xl font-display text-accent">4</p> <p className="text-3xl font-display text-accent">4</p>
@ -521,33 +521,33 @@ export default function AdminPage() {
? 'Recently' ? 'Recently'
: 'Unknown'} : 'Unknown'}
</p> </p>
</div> </div>
</div> </div>
{/* Auction Scraping Actions */} {/* Auction Scraping Actions */}
<div className="p-6 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl"> <div className="p-6 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl">
<h3 className="text-lg font-medium text-foreground mb-4">Auction Management</h3> <h3 className="text-lg font-medium text-foreground mb-4">Auction Management</h3>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
<button <button
onClick={handleTriggerAuctionScrape} onClick={handleTriggerAuctionScrape}
disabled={auctionScraping} disabled={auctionScraping}
className="flex items-center gap-2 px-5 py-3 bg-foreground text-background rounded-xl font-medium disabled:opacity-50" className="flex items-center gap-2 px-5 py-3 bg-foreground text-background rounded-xl font-medium disabled:opacity-50"
> >
{auctionScraping ? <Loader2 className="w-4 h-4 animate-spin" /> : <Gavel className="w-4 h-4" />} {auctionScraping ? <Loader2 className="w-4 h-4 animate-spin" /> : <Gavel className="w-4 h-4" />}
{auctionScraping ? 'Scraping...' : 'Scrape All Platforms'} {auctionScraping ? 'Scraping...' : 'Scrape All Platforms'}
</button> </button>
<button className="flex items-center gap-2 px-5 py-3 bg-foreground/10 border border-border/30 rounded-xl font-medium"> <button className="flex items-center gap-2 px-5 py-3 bg-foreground/10 border border-border/30 rounded-xl font-medium">
<Download className="w-4 h-4" /> <Download className="w-4 h-4" />
Export Auctions Export Auctions
</button> </button>
</div>
</div> </div>
</div>
{/* Platform Status */} {/* Platform Status */}
<div className="p-6 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl"> <div className="p-6 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl">
<h3 className="text-lg font-medium text-foreground mb-4">Platform Status</h3> <h3 className="text-lg font-medium text-foreground mb-4">Platform Status</h3>
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
{['GoDaddy', 'Sedo', 'NameJet', 'DropCatch'].map((platform) => ( {['GoDaddy', 'Sedo', 'NameJet', 'DropCatch'].map((platform) => (
<div key={platform} className="flex items-center justify-between p-4 bg-background/50 rounded-xl border border-border/20"> <div key={platform} className="flex items-center justify-between p-4 bg-background/50 rounded-xl border border-border/20">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-accent/10 flex items-center justify-center"> <div className="w-8 h-8 rounded-lg bg-accent/10 flex items-center justify-center">
@ -558,11 +558,11 @@ export default function AdminPage() {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-accent animate-pulse" /> <span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
<span className="text-xs text-accent">Active</span> <span className="text-xs text-accent">Active</span>
</div> </div>
</div> </div>
))} ))}
</div>
</div> </div>
</div>
{/* Vanity Filter Info */} {/* Vanity Filter Info */}
<div className="p-6 bg-gradient-to-br from-amber-500/10 to-amber-500/5 border border-amber-500/20 rounded-2xl"> <div className="p-6 bg-gradient-to-br from-amber-500/10 to-amber-500/5 border border-amber-500/20 rounded-2xl">
@ -580,12 +580,12 @@ export default function AdminPage() {
<div key={item.rule} className="p-3 bg-background/50 rounded-lg"> <div key={item.rule} className="p-3 bg-background/50 rounded-lg">
<p className="font-medium text-foreground text-sm">{item.rule}</p> <p className="font-medium text-foreground text-sm">{item.rule}</p>
<p className="text-xs text-foreground-subtle mt-1">{item.desc}</p> <p className="text-xs text-foreground-subtle mt-1">{item.desc}</p>
</div>
))}
</div> </div>
))} </div>
</div> </div>
</div> )}
</div>
)}
{/* Alerts Tab */} {/* Alerts Tab */}
{activeTab === 'alerts' && ( {activeTab === 'alerts' && (
@ -627,11 +627,11 @@ export default function AdminPage() {
<div className="p-5 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl"> <div className="p-5 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl">
<p className="text-sm text-foreground-muted mb-1">Unique TLDs</p> <p className="text-sm text-foreground-muted mb-1">Unique TLDs</p>
<p className="text-3xl font-display text-foreground">{stats?.tld_data?.unique_tlds?.toLocaleString() || 0}</p> <p className="text-3xl font-display text-foreground">{stats?.tld_data?.unique_tlds?.toLocaleString() || 0}</p>
</div> </div>
<div className="p-5 bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20 rounded-2xl"> <div className="p-5 bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20 rounded-2xl">
<p className="text-sm text-foreground-muted mb-1">Price Records</p> <p className="text-sm text-foreground-muted mb-1">Price Records</p>
<p className="text-3xl font-display text-accent">{stats?.tld_data?.price_records?.toLocaleString() || 0}</p> <p className="text-3xl font-display text-accent">{stats?.tld_data?.price_records?.toLocaleString() || 0}</p>
</div> </div>
<div className="p-5 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl"> <div className="p-5 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl">
<p className="text-sm text-foreground-muted mb-1">Active Price Alerts</p> <p className="text-sm text-foreground-muted mb-1">Active Price Alerts</p>
<p className="text-3xl font-display text-foreground">{stats?.price_alerts || 0}</p> <p className="text-3xl font-display text-foreground">{stats?.price_alerts || 0}</p>
@ -640,27 +640,27 @@ export default function AdminPage() {
<p className="text-sm text-foreground-muted mb-1">Renewal Traps</p> <p className="text-sm text-foreground-muted mb-1">Renewal Traps</p>
<p className="text-3xl font-display text-amber-400">~40%</p> <p className="text-3xl font-display text-amber-400">~40%</p>
<p className="text-xs text-foreground-subtle mt-1">Have &gt;2x renewal</p> <p className="text-xs text-foreground-subtle mt-1">Have &gt;2x renewal</p>
</div>
</div> </div>
</div>
{/* TLD Scraping Actions */} {/* TLD Scraping Actions */}
<div className="p-6 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl"> <div className="p-6 bg-gradient-to-br from-background-secondary/50 to-background-secondary/20 border border-border/30 rounded-2xl">
<h3 className="text-lg font-medium text-foreground mb-4">TLD Price Management</h3> <h3 className="text-lg font-medium text-foreground mb-4">TLD Price Management</h3>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
<button <button
onClick={handleTriggerScrape} onClick={handleTriggerScrape}
disabled={scraping} disabled={scraping}
className="flex items-center gap-2 px-5 py-3 bg-foreground text-background rounded-xl font-medium disabled:opacity-50" className="flex items-center gap-2 px-5 py-3 bg-foreground text-background rounded-xl font-medium disabled:opacity-50"
> >
{scraping ? <Loader2 className="w-4 h-4 animate-spin" /> : <Globe className="w-4 h-4" />} {scraping ? <Loader2 className="w-4 h-4 animate-spin" /> : <Globe className="w-4 h-4" />}
{scraping ? 'Scraping...' : 'Scrape All Registrars'} {scraping ? 'Scraping...' : 'Scrape All Registrars'}
</button> </button>
<button className="flex items-center gap-2 px-5 py-3 bg-foreground/10 border border-border/30 rounded-xl font-medium"> <button className="flex items-center gap-2 px-5 py-3 bg-foreground/10 border border-border/30 rounded-xl font-medium">
<Download className="w-4 h-4" /> <Download className="w-4 h-4" />
Export Price Data Export Price Data
</button> </button>
</div> </div>
</div> </div>
{/* New Features from analysis_4.md */} {/* New Features from analysis_4.md */}
<div className="p-6 bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20 rounded-2xl"> <div className="p-6 bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20 rounded-2xl">
@ -672,7 +672,7 @@ export default function AdminPage() {
{[ {[
{ feature: 'Renewal Trap Detection', status: '✅', desc: 'Warns when renewal &gt;2x registration' }, { feature: 'Renewal Trap Detection', status: '✅', desc: 'Warns when renewal &gt;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' },
@ -681,11 +681,11 @@ export default function AdminPage() {
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<span>{item.status}</span> <span>{item.status}</span>
<span className="font-medium text-foreground text-sm">{item.feature}</span> <span className="font-medium text-foreground text-sm">{item.feature}</span>
</div> </div>
<p className="text-xs text-foreground-subtle">{item.desc}</p> <p className="text-xs text-foreground-subtle">{item.desc}</p>
</div> </div>
))} ))}
</div> </div>
</div> </div>
{/* Data Sources */} {/* Data Sources */}
@ -697,19 +697,19 @@ export default function AdminPage() {
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-accent/10 flex items-center justify-center"> <div className="w-8 h-8 rounded-lg bg-accent/10 flex items-center justify-center">
<Globe className="w-4 h-4 text-accent" /> <Globe className="w-4 h-4 text-accent" />
</div> </div>
<span className="font-medium text-foreground">{registrar}</span> <span className="font-medium text-foreground">{registrar}</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-accent animate-pulse" /> <span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
<span className="text-xs text-accent">Active</span> <span className="text-xs text-accent">Active</span>
</div>
</div>
))}
</div>
</div>
</div> </div>
)} </div>
))}
</div>
</div>
</div>
)}
{activeTab === 'blog' && ( {activeTab === 'blog' && (
<div className="space-y-6"> <div className="space-y-6">

178
frontend/src/app/auctions/page.tsx
View File

@ -311,7 +311,7 @@ export default function AuctionsPage() {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="p-4 sm:p-5 bg-background-secondary/50 border border-border rounded-xl hover:border-border-hover hover:bg-background-secondary transition-all duration-300 text-left group" className="p-4 sm:p-5 bg-background-secondary/50 border border-border rounded-xl hover:border-border-hover hover:bg-background-secondary transition-all duration-300 text-left group"
> >
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span className="font-mono text-body-lg sm:text-heading-sm text-foreground group-hover:text-accent transition-colors"> <span className="font-mono text-body-lg sm:text-heading-sm text-foreground group-hover:text-accent transition-colors">
{auction.domain} {auction.domain}
@ -410,51 +410,51 @@ export default function AuctionsPage() {
)}>{tab.count}</span> )}>{tab.count}</span>
</button> </button>
))} ))}
</div> </div>
{/* Auctions Table */} {/* Auctions Table */}
<div className="bg-background-secondary/30 border border-border rounded-xl overflow-hidden animate-slide-up"> <div className="bg-background-secondary/30 border border-border rounded-xl overflow-hidden animate-slide-up">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full"> <table className="w-full">
<thead> <thead>
<tr className="bg-background-secondary border-b border-border"> <tr className="bg-background-secondary border-b border-border">
<th className="text-left px-4 sm:px-6 py-4"> <th className="text-left px-4 sm:px-6 py-4">
<button <button
onClick={() => handleSort('domain')} onClick={() => handleSort('domain')}
className="flex items-center gap-2 text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors" className="flex items-center gap-2 text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
> >
Domain Domain
<SortIcon field="domain" currentField={sortField} direction={sortDirection} /> <SortIcon field="domain" currentField={sortField} direction={sortDirection} />
</button> </button>
</th> </th>
<th className="text-left px-4 sm:px-6 py-4 hidden lg:table-cell"> <th className="text-left px-4 sm:px-6 py-4 hidden lg:table-cell">
<span className="text-ui-sm text-foreground-subtle font-medium">Platform</span> <span className="text-ui-sm text-foreground-subtle font-medium">Platform</span>
</th> </th>
<th className="text-right px-4 sm:px-6 py-4"> <th className="text-right px-4 sm:px-6 py-4">
<button <button
onClick={() => handleSort('bid')} onClick={() => handleSort('bid')}
className="flex items-center gap-2 ml-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors" className="flex items-center gap-2 ml-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
> >
Current Bid Current Bid
<SortIcon field="bid" currentField={sortField} direction={sortDirection} /> <SortIcon field="bid" currentField={sortField} direction={sortDirection} />
</button> </button>
</th> </th>
<th className="text-center px-4 sm:px-6 py-4 hidden md:table-cell"> <th className="text-center px-4 sm:px-6 py-4 hidden md:table-cell">
<span className="text-ui-sm text-foreground-subtle font-medium flex items-center justify-center gap-1"> <span className="text-ui-sm text-foreground-subtle font-medium flex items-center justify-center gap-1">
Deal Score Deal Score
{!isAuthenticated && <Lock className="w-3 h-3" />} {!isAuthenticated && <Lock className="w-3 h-3" />}
</span> </span>
</th> </th>
<th className="text-right px-4 sm:px-6 py-4 hidden sm:table-cell"> <th className="text-right px-4 sm:px-6 py-4 hidden sm:table-cell">
<button <button
onClick={() => handleSort('bids')} onClick={() => handleSort('bids')}
className="flex items-center gap-2 ml-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors" className="flex items-center gap-2 ml-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
> >
Bids Bids
<SortIcon field="bids" currentField={sortField} direction={sortDirection} /> <SortIcon field="bids" currentField={sortField} direction={sortDirection} />
</button> </button>
</th> </th>
<th className="text-right px-4 sm:px-6 py-4 hidden md:table-cell"> <th className="text-right px-4 sm:px-6 py-4 hidden md:table-cell">
<button <button
onClick={() => handleSort('ending')} onClick={() => handleSort('ending')}
className="flex items-center gap-2 ml-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors" className="flex items-center gap-2 ml-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
@ -462,11 +462,11 @@ export default function AuctionsPage() {
Time Left Time Left
<SortIcon field="ending" currentField={sortField} direction={sortDirection} /> <SortIcon field="ending" currentField={sortField} direction={sortDirection} />
</button> </button>
</th> </th>
<th className="px-4 sm:px-6 py-4"></th> <th className="px-4 sm:px-6 py-4"></th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-border"> <tbody className="divide-y divide-border">
{loading ? ( {loading ? (
// Loading skeleton // Loading skeleton
Array.from({ length: 10 }).map((_, idx) => ( Array.from({ length: 10 }).map((_, idx) => (
@ -484,45 +484,45 @@ export default function AuctionsPage() {
<tr> <tr>
<td colSpan={7} className="px-6 py-12 text-center text-foreground-muted"> <td colSpan={7} className="px-6 py-12 text-center text-foreground-muted">
{searchQuery ? `No auctions found matching "${searchQuery}"` : 'No auctions found'} {searchQuery ? `No auctions found matching "${searchQuery}"` : 'No auctions found'}
</td> </td>
</tr> </tr>
) : ( ) : (
sortedAuctions.map((auction) => ( sortedAuctions.map((auction) => (
<tr <tr
key={`${auction.domain}-${auction.platform}`} key={`${auction.domain}-${auction.platform}`}
className="hover:bg-background-secondary/50 transition-colors group" className="hover:bg-background-secondary/50 transition-colors group"
> >
<td className="px-4 sm:px-6 py-4"> <td className="px-4 sm:px-6 py-4">
<div> <div>
<a <a
href={auction.affiliate_url} href={auction.affiliate_url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="font-mono text-body-sm sm:text-body font-medium text-foreground hover:text-accent transition-colors" className="font-mono text-body-sm sm:text-body font-medium text-foreground hover:text-accent transition-colors"
> >
{auction.domain} {auction.domain}
</a> </a>
<div className="flex items-center gap-2 mt-1 lg:hidden"> <div className="flex items-center gap-2 mt-1 lg:hidden">
<PlatformBadge platform={auction.platform} /> <PlatformBadge platform={auction.platform} />
</div> </div>
</div> </div>
</td> </td>
<td className="px-4 sm:px-6 py-4 hidden lg:table-cell"> <td className="px-4 sm:px-6 py-4 hidden lg:table-cell">
<div className="space-y-1"> <div className="space-y-1">
<PlatformBadge platform={auction.platform} /> <PlatformBadge platform={auction.platform} />
{auction.age_years && ( {auction.age_years && (
<span className="text-ui-sm text-foreground-subtle flex items-center gap-1"> <span className="text-ui-sm text-foreground-subtle flex items-center gap-1">
<Clock className="w-3 h-3" /> {auction.age_years}y <Clock className="w-3 h-3" /> {auction.age_years}y
</span> </span>
)} )}
</div> </div>
</td> </td>
<td className="px-4 sm:px-6 py-4 text-right"> <td className="px-4 sm:px-6 py-4 text-right">
<div> <div>
<span className="text-body-sm font-medium text-foreground"> <span className="text-body-sm font-medium text-foreground">
{formatCurrency(auction.current_bid)} {formatCurrency(auction.current_bid)}
</span> </span>
{auction.buy_now_price && ( {auction.buy_now_price && (
<p className="text-ui-sm text-accent">Buy: {formatCurrency(auction.buy_now_price)}</p> <p className="text-ui-sm text-accent">Buy: {formatCurrency(auction.buy_now_price)}</p>
)} )}
</div> </div>
@ -552,40 +552,40 @@ export default function AuctionsPage() {
> >
<Lock className="w-4 h-4 group-hover:scale-110 transition-transform" /> <Lock className="w-4 h-4 group-hover:scale-110 transition-transform" />
</Link> </Link>
)} )}
</td> </td>
<td className="px-4 sm:px-6 py-4 text-right hidden sm:table-cell"> <td className="px-4 sm:px-6 py-4 text-right hidden sm:table-cell">
<span className={clsx( <span className={clsx(
"font-medium flex items-center justify-end gap-1", "font-medium flex items-center justify-end gap-1",
auction.num_bids >= 20 ? "text-accent" : auction.num_bids >= 10 ? "text-amber-400" : "text-foreground-muted" auction.num_bids >= 20 ? "text-accent" : auction.num_bids >= 10 ? "text-amber-400" : "text-foreground-muted"
)}> )}>
{auction.num_bids} {auction.num_bids}
{auction.num_bids >= 20 && <Flame className="w-3 h-3" />} {auction.num_bids >= 20 && <Flame className="w-3 h-3" />}
</span> </span>
</td> </td>
<td className="px-4 sm:px-6 py-4 text-right hidden md:table-cell"> <td className="px-4 sm:px-6 py-4 text-right hidden md:table-cell">
<span className={clsx("font-medium", getTimeColor(auction.time_remaining))}> <span className={clsx("font-medium", getTimeColor(auction.time_remaining))}>
{auction.time_remaining} {auction.time_remaining}
</span> </span>
</td> </td>
<td className="px-4 sm:px-6 py-4"> <td className="px-4 sm:px-6 py-4">
<a <a
href={auction.affiliate_url} href={auction.affiliate_url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-1 text-ui-sm text-accent hover:text-accent-hover transition-colors opacity-0 group-hover:opacity-100" className="inline-flex items-center gap-1 text-ui-sm text-accent hover:text-accent-hover transition-colors opacity-0 group-hover:opacity-100"
> >
Bid Bid
<ExternalLink className="w-3 h-3" /> <ExternalLink className="w-3 h-3" />
</a> </a>
</td> </td>
</tr> </tr>
)) ))
)} )}
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div>
{/* Stats */} {/* Stats */}
{!loading && ( {!loading && (

18
frontend/src/app/command/auctions/page.tsx
View File

@ -658,15 +658,15 @@ export default function AuctionsPage() {
)} )}
</button> </button>
{/* Bid Button */} {/* Bid Button */}
<a <a
href={a.affiliate_url} href={a.affiliate_url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 px-4 py-2 bg-foreground text-background text-xs font-medium rounded-lg className="inline-flex items-center gap-1.5 px-4 py-2 bg-foreground text-background text-xs font-medium rounded-lg
hover:bg-foreground/90 transition-all opacity-70 group-hover:opacity-100" hover:bg-foreground/90 transition-all opacity-70 group-hover:opacity-100"
> >
Bid <ExternalLink className="w-3 h-3" /> Bid <ExternalLink className="w-3 h-3" />
</a> </a>
</div> </div>
), ),
}, },

9
frontend/src/app/command/pricing/page.tsx
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>
) )

195
frontend/src/app/page.tsx
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,140 +403,162 @@ 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">
<Shield className="w-3.5 h-3.5 text-accent" /> <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" />
</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">
<BarChart3 className="w-3.5 h-3.5 text-accent" /> <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" />
</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">
<Lock className="w-3.5 h-3.5 text-accent" /> <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" />
</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">
<Filter className="w-3.5 h-3.5 text-accent" /> <div className="w-6 h-6 rounded-full bg-foreground/5 flex items-center justify-center">
<span>Custom TLD, length, price</span> <Filter className="w-3.5 h-3.5 text-accent" />
</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">
<Bell className="w-3.5 h-3.5 text-accent" /> <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" />
</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">
<Zap className="w-3.5 h-3.5 text-accent" /> <div className="w-6 h-6 rounded-full bg-foreground/5 flex items-center justify-center">
<span>Real-time matching</span> <Zap className="w-3.5 h-3.5 text-accent" />
</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"> </div>
<Briefcase className="w-5 h-5 text-blue-400" /> <div>
</div> <h3 className="text-xl font-display text-foreground">Portfolio Health</h3>
<div> <p className="text-sm text-accent font-medium">Your Domain Insurance</p>
<h3 className="text-lg font-display text-foreground mb-0.5">Portfolio</h3> </div>
<p className="text-xs text-blue-400 font-medium">Asset Tracking</p>
</div> </div>
<p className="text-foreground-muted leading-relaxed max-w-2xl">
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>
</div>
<div className="flex flex-col sm:flex-row gap-4 lg:flex-col lg:items-end">
<div className="flex items-center gap-6 text-sm text-foreground-subtle">
<span className="flex items-center gap-2">
<Shield className="w-4 h-4 text-accent" />
SSL Monitor
</span>
<span className="flex items-center gap-2">
<Clock className="w-4 h-4 text-accent" />
Expiry Alerts
</span>
<span className="flex items-center gap-2">
<TrendingUp className="w-4 h-4 text-accent" />
Valuation
</span>
</div>
<Link
href="/command/portfolio"
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
<ArrowRight className="w-4 h-4" />
</Link>
</div> </div>
<p className="text-sm text-foreground-muted mb-5 leading-relaxed">
Track your domains, costs, and ROI. <span className="text-foreground font-medium">Never miss a renewal</span>. Your domain business, organized.
</p>
<ul className="space-y-2 text-sm mb-6">
<li className="flex items-center gap-2 text-foreground-subtle">
<DollarSign className="w-3.5 h-3.5 text-blue-400" />
<span>Purchase & sale tracking</span>
</li>
<li className="flex items-center gap-2 text-foreground-subtle">
<Calendar className="w-3.5 h-3.5 text-blue-400" />
<span>Renewal reminders</span>
</li>
<li className="flex items-center gap-2 text-foreground-subtle">
<TrendingUp className="w-3.5 h-3.5 text-blue-400" />
<span>P&L & valuations</span>
</li>
</ul>
<Link
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"
>
Manage Portfolio
<ArrowRight className="w-3.5 h-3.5" />
</Link>
</div> </div>
</div> </div>
</div> </div>
@ -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

33
frontend/src/app/tld-pricing/page.tsx
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">
@ -321,21 +325,21 @@ export default function TldPricingPage() {
<div className="flex items-center 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"> <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<Lock className="w-6 h-6 text-accent" /> <Lock className="w-6 h-6 text-accent" />
</div> </div>
<div> <div>
<p className="font-medium text-foreground">Stop overpaying. Know the true costs.</p> <p className="font-medium text-foreground">Stop overpaying. Know the true costs.</p>
<p className="text-sm text-foreground-muted"> <p className="text-sm text-foreground-muted">
Unlock renewal traps, 1y/3y trends, and risk analysis for {pagination.total}+ TLDs. Unlock renewal traps, 1y/3y trends, and risk analysis for {pagination.total}+ TLDs.
</p> </p>
</div>
</div> </div>
<Link </div>
href="/register" <Link
href="/register"
className="shrink-0 px-6 py-3 bg-accent text-background font-medium rounded-xl 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" hover:bg-accent-hover transition-all shadow-lg shadow-accent/20"
> >
Start Free Start Free
</Link> </Link>
</div> </div>
</div> </div>
)} )}
@ -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">

44
frontend/src/components/Sidebar.tsx
View File

@ -206,42 +206,42 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
<div className="space-y-1.5"> <div className="space-y-1.5">
{discoverItems.map((item) => ( {discoverItems.map((item) => (
<Link <Link
key={item.href} key={item.href}
href={item.href} href={item.href}
onClick={() => setMobileOpen(false)} onClick={() => setMobileOpen(false)}
className={clsx( className={clsx(
"group relative flex items-center gap-3 px-3 py-3 rounded-xl transition-all duration-300", "group relative flex items-center gap-3 px-3 py-3 rounded-xl transition-all duration-300",
isActive(item.href) isActive(item.href)
? "bg-gradient-to-r from-accent/20 to-accent/5 text-foreground border border-accent/20 shadow-[0_0_20px_-5px_rgba(16,185,129,0.2)]" ? "bg-gradient-to-r from-accent/20 to-accent/5 text-foreground border border-accent/20 shadow-[0_0_20px_-5px_rgba(16,185,129,0.2)]"
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5 border border-transparent" : "text-foreground-muted hover:text-foreground hover:bg-foreground/5 border border-transparent"
)} )}
title={collapsed ? item.label : undefined} title={collapsed ? item.label : undefined}
> >
{isActive(item.href) && ( {isActive(item.href) && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-accent rounded-r-full shadow-[0_0_10px_rgba(16,185,129,0.5)]" /> <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-accent rounded-r-full shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
)} )}
<div className="relative"> <div className="relative">
<item.icon className={clsx( <item.icon className={clsx(
"w-5 h-5 transition-all duration-300", "w-5 h-5 transition-all duration-300",
isActive(item.href) isActive(item.href)
? "text-accent drop-shadow-[0_0_8px_rgba(16,185,129,0.5)]" ? "text-accent drop-shadow-[0_0_8px_rgba(16,185,129,0.5)]"
: "group-hover:text-foreground" : "group-hover:text-foreground"
)} /> )} />
</div> </div>
{!collapsed && ( {!collapsed && (
<span className={clsx( <span className={clsx(
"text-sm font-medium transition-colors", "text-sm font-medium transition-colors",
isActive(item.href) && "text-foreground" isActive(item.href) && "text-foreground"
)}> )}>
{item.label} {item.label}
</span> </span>
)} )}
{!isActive(item.href) && ( {!isActive(item.href) && (
<div className="absolute inset-0 rounded-xl bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" /> <div className="absolute inset-0 rounded-xl bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
)} )}
</Link> </Link>
))} ))}
</div> </div>
</div> </div>