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
@ -447,11 +447,11 @@ export default function AdminPage() {
|
||||
<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" />}
|
||||
<span className={item.ok ? 'text-accent' : 'text-amber-400'}>{item.text}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
@ -473,8 +473,8 @@ export default function AdminPage() {
|
||||
{auctionScraping ? <Loader2 className="w-4 h-4 animate-spin" /> : <Gavel className="w-4 h-4" />}
|
||||
{auctionScraping ? 'Scraping...' : 'Scrape Auctions'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{schedulerStatus && (
|
||||
<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">
|
||||
<span className="text-foreground truncate">{job.name}</span>
|
||||
<span className="text-foreground-subtle text-xs">{job.trigger}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Auctions Tab */}
|
||||
{activeTab === 'auctions' && (
|
||||
{/* Auctions Tab */}
|
||||
{activeTab === 'auctions' && (
|
||||
<div className="space-y-6">
|
||||
{/* Auction Stats */}
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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-3xl font-display text-accent">4</p>
|
||||
@ -521,33 +521,33 @@ export default function AdminPage() {
|
||||
? 'Recently'
|
||||
: 'Unknown'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<h3 className="text-lg font-medium text-foreground mb-4">Auction Management</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
onClick={handleTriggerAuctionScrape}
|
||||
disabled={auctionScraping}
|
||||
<button
|
||||
onClick={handleTriggerAuctionScrape}
|
||||
disabled={auctionScraping}
|
||||
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 ? 'Scraping...' : 'Scrape All Platforms'}
|
||||
</button>
|
||||
<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" />
|
||||
Export Auctions
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Platform Status */}
|
||||
<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>
|
||||
<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 className="flex items-center gap-3">
|
||||
<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">
|
||||
<span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
|
||||
<span className="text-xs text-accent">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
@ -580,12 +580,12 @@ export default function AdminPage() {
|
||||
<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="text-xs text-foreground-subtle mt-1">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Alerts Tab */}
|
||||
{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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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-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">
|
||||
<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>
|
||||
@ -640,27 +640,27 @@ export default function AdminPage() {
|
||||
<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-xs text-foreground-subtle mt-1">Have >2x renewal</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<h3 className="text-lg font-medium text-foreground mb-4">TLD Price Management</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
<button
|
||||
onClick={handleTriggerScrape}
|
||||
disabled={scraping}
|
||||
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 ? '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">
|
||||
<Download className="w-4 h-4" />
|
||||
Export Price Data
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
@ -672,7 +672,7 @@ export default function AdminPage() {
|
||||
{[
|
||||
{ feature: 'Renewal Trap Detection', status: '✅', desc: 'Warns when renewal >2x registration' },
|
||||
{ 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: 'Sparkline Charts', status: '✅', desc: 'Visual trend indicators' },
|
||||
{ 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">
|
||||
<span>{item.status}</span>
|
||||
<span className="font-medium text-foreground text-sm">{item.feature}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-foreground-subtle">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data Sources */}
|
||||
@ -697,19 +697,19 @@ export default function AdminPage() {
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-accent/10 flex items-center justify-center">
|
||||
<Globe className="w-4 h-4 text-accent" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="font-medium text-foreground">{registrar}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
|
||||
<span className="text-xs text-accent">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'blog' && (
|
||||
<div className="space-y-6">
|
||||
|
||||
@ -311,7 +311,7 @@ export default function AuctionsPage() {
|
||||
target="_blank"
|
||||
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"
|
||||
>
|
||||
>
|
||||
<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">
|
||||
{auction.domain}
|
||||
@ -410,51 +410,51 @@ export default function AuctionsPage() {
|
||||
)}>{tab.count}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Auctions Table */}
|
||||
<div className="bg-background-secondary/30 border border-border rounded-xl overflow-hidden animate-slide-up">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-background-secondary border-b border-border">
|
||||
<th className="text-left px-4 sm:px-6 py-4">
|
||||
<button
|
||||
<div className="bg-background-secondary/30 border border-border rounded-xl overflow-hidden animate-slide-up">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-background-secondary border-b border-border">
|
||||
<th className="text-left px-4 sm:px-6 py-4">
|
||||
<button
|
||||
onClick={() => handleSort('domain')}
|
||||
className="flex items-center gap-2 text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
|
||||
>
|
||||
Domain
|
||||
className="flex items-center gap-2 text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
|
||||
>
|
||||
Domain
|
||||
<SortIcon field="domain" currentField={sortField} direction={sortDirection} />
|
||||
</button>
|
||||
</th>
|
||||
<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>
|
||||
</th>
|
||||
<th className="text-right px-4 sm:px-6 py-4">
|
||||
<button
|
||||
</button>
|
||||
</th>
|
||||
<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>
|
||||
</th>
|
||||
<th className="text-right px-4 sm:px-6 py-4">
|
||||
<button
|
||||
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
|
||||
<SortIcon field="bid" currentField={sortField} direction={sortDirection} />
|
||||
</button>
|
||||
</th>
|
||||
</button>
|
||||
</th>
|
||||
<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">
|
||||
Deal Score
|
||||
{!isAuthenticated && <Lock className="w-3 h-3" />}
|
||||
</span>
|
||||
</th>
|
||||
<th className="text-right px-4 sm:px-6 py-4 hidden sm:table-cell">
|
||||
<button
|
||||
onClick={() => handleSort('bids')}
|
||||
className="flex items-center gap-2 ml-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
|
||||
>
|
||||
Bids
|
||||
<th className="text-right px-4 sm:px-6 py-4 hidden sm:table-cell">
|
||||
<button
|
||||
onClick={() => handleSort('bids')}
|
||||
className="flex items-center gap-2 ml-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
|
||||
>
|
||||
Bids
|
||||
<SortIcon field="bids" currentField={sortField} direction={sortDirection} />
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-right px-4 sm:px-6 py-4 hidden md:table-cell">
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-right px-4 sm:px-6 py-4 hidden md:table-cell">
|
||||
<button
|
||||
onClick={() => handleSort('ending')}
|
||||
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
|
||||
<SortIcon field="ending" currentField={sortField} direction={sortDirection} />
|
||||
</button>
|
||||
</th>
|
||||
<th className="px-4 sm:px-6 py-4"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
</th>
|
||||
<th className="px-4 sm:px-6 py-4"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{loading ? (
|
||||
// Loading skeleton
|
||||
Array.from({ length: 10 }).map((_, idx) => (
|
||||
@ -484,45 +484,45 @@ export default function AuctionsPage() {
|
||||
<tr>
|
||||
<td colSpan={7} className="px-6 py-12 text-center text-foreground-muted">
|
||||
{searchQuery ? `No auctions found matching "${searchQuery}"` : 'No auctions found'}
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
sortedAuctions.map((auction) => (
|
||||
<tr
|
||||
<tr
|
||||
key={`${auction.domain}-${auction.platform}`}
|
||||
className="hover:bg-background-secondary/50 transition-colors group"
|
||||
>
|
||||
<td className="px-4 sm:px-6 py-4">
|
||||
className="hover:bg-background-secondary/50 transition-colors group"
|
||||
>
|
||||
<td className="px-4 sm:px-6 py-4">
|
||||
<div>
|
||||
<a
|
||||
href={auction.affiliate_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-mono text-body-sm sm:text-body font-medium text-foreground hover:text-accent transition-colors"
|
||||
>
|
||||
{auction.domain}
|
||||
</a>
|
||||
<a
|
||||
href={auction.affiliate_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-mono text-body-sm sm:text-body font-medium text-foreground hover:text-accent transition-colors"
|
||||
>
|
||||
{auction.domain}
|
||||
</a>
|
||||
<div className="flex items-center gap-2 mt-1 lg:hidden">
|
||||
<PlatformBadge platform={auction.platform} />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 hidden lg:table-cell">
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 hidden lg:table-cell">
|
||||
<div className="space-y-1">
|
||||
<PlatformBadge platform={auction.platform} />
|
||||
{auction.age_years && (
|
||||
{auction.age_years && (
|
||||
<span className="text-ui-sm text-foreground-subtle flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" /> {auction.age_years}y
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 text-right">
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 text-right">
|
||||
<div>
|
||||
<span className="text-body-sm font-medium text-foreground">
|
||||
{formatCurrency(auction.current_bid)}
|
||||
</span>
|
||||
{auction.buy_now_price && (
|
||||
{formatCurrency(auction.current_bid)}
|
||||
</span>
|
||||
{auction.buy_now_price && (
|
||||
<p className="text-ui-sm text-accent">Buy: {formatCurrency(auction.buy_now_price)}</p>
|
||||
)}
|
||||
</div>
|
||||
@ -552,40 +552,40 @@ export default function AuctionsPage() {
|
||||
>
|
||||
<Lock className="w-4 h-4 group-hover:scale-110 transition-transform" />
|
||||
</Link>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 text-right hidden sm:table-cell">
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 text-right hidden sm:table-cell">
|
||||
<span className={clsx(
|
||||
"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}
|
||||
{auction.num_bids >= 20 && <Flame className="w-3 h-3" />}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 text-right hidden md:table-cell">
|
||||
{auction.num_bids}
|
||||
{auction.num_bids >= 20 && <Flame className="w-3 h-3" />}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 text-right hidden md:table-cell">
|
||||
<span className={clsx("font-medium", getTimeColor(auction.time_remaining))}>
|
||||
{auction.time_remaining}
|
||||
</span>
|
||||
</td>
|
||||
{auction.time_remaining}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4">
|
||||
<a
|
||||
href={auction.affiliate_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<a
|
||||
href={auction.affiliate_url}
|
||||
target="_blank"
|
||||
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"
|
||||
>
|
||||
Bid
|
||||
>
|
||||
Bid
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
{!loading && (
|
||||
|
||||
@ -658,15 +658,15 @@ export default function AuctionsPage() {
|
||||
)}
|
||||
</button>
|
||||
{/* Bid Button */}
|
||||
<a
|
||||
href={a.affiliate_url}
|
||||
target="_blank"
|
||||
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
|
||||
hover:bg-foreground/90 transition-all opacity-70 group-hover:opacity-100"
|
||||
>
|
||||
Bid <ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
<a
|
||||
href={a.affiliate_url}
|
||||
target="_blank"
|
||||
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
|
||||
hover:bg-foreground/90 transition-all opacity-70 group-hover:opacity-100"
|
||||
>
|
||||
Bid <ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
|
||||
@ -201,9 +201,12 @@ export default function TLDPricingPage() {
|
||||
level === 'medium' && "bg-amber-500/10 text-amber-400",
|
||||
level === 'low' && "bg-accent/10 text-accent"
|
||||
)}>
|
||||
{level === 'high' && '🔴'}
|
||||
{level === 'medium' && '🟡'}
|
||||
{level === 'low' && '🟢'}
|
||||
<span className={clsx(
|
||||
"w-2.5 h-2.5 rounded-full",
|
||||
level === 'high' && "bg-red-400",
|
||||
level === 'medium' && "bg-amber-400",
|
||||
level === 'low' && "bg-accent"
|
||||
)} />
|
||||
<span className="hidden sm:inline ml-1">{reason}</span>
|
||||
</span>
|
||||
)
|
||||
|
||||
@ -31,9 +31,8 @@ import {
|
||||
Filter,
|
||||
Crosshair,
|
||||
Tag,
|
||||
AlertTriangle,
|
||||
Briefcase,
|
||||
DollarSign,
|
||||
Calendar,
|
||||
} from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
@ -329,7 +328,7 @@ export default function HomePage() {
|
||||
</li>
|
||||
<li className="flex items-center gap-3 text-foreground-subtle">
|
||||
<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 className="flex items-center gap-3 text-foreground-subtle">
|
||||
<Check className="w-4 h-4 text-accent flex-shrink-0" />
|
||||
@ -404,140 +403,162 @@ export default function HomePage() {
|
||||
</p>
|
||||
</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 */}
|
||||
<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
|
||||
backdrop-blur-sm">
|
||||
{/* 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="flex items-start gap-4 mb-5">
|
||||
<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">
|
||||
<Tag className="w-5 h-5 text-accent" />
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<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-6 h-6 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-display text-foreground mb-0.5">Marketplace</h3>
|
||||
<p className="text-xs text-accent font-medium">Buy & Sell</p>
|
||||
<h3 className="text-xl font-display text-foreground mb-1">Sell Your Domains</h3>
|
||||
<p className="text-sm text-accent font-medium">Marketplace</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-foreground-muted mb-5 leading-relaxed">
|
||||
Create "For Sale" pages with one click.
|
||||
<span className="text-foreground font-medium"> DNS verification</span> proves ownership.
|
||||
<p className="text-foreground-muted mb-6 leading-relaxed">
|
||||
Create professional "For Sale" landing pages with one click.
|
||||
<span className="text-foreground font-medium"> DNS verification</span> proves ownership.
|
||||
Buyers contact you directly through Pounce.
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm mb-6">
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<Shield className="w-3.5 h-3.5 text-accent" />
|
||||
<ul className="space-y-3 text-sm mb-8">
|
||||
<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" />
|
||||
</div>
|
||||
<span>Verified Owner badge</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<BarChart3 className="w-3.5 h-3.5 text-accent" />
|
||||
<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" />
|
||||
</div>
|
||||
<span>Pounce Score valuation</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<Lock className="w-3.5 h-3.5 text-accent" />
|
||||
<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" />
|
||||
</div>
|
||||
<span>Secure contact form</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link
|
||||
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
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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
|
||||
backdrop-blur-sm">
|
||||
{/* Decorative element */}
|
||||
<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/30 animate-pulse delay-100" />
|
||||
<div className="w-2 h-2 rounded-full bg-accent/20 animate-pulse delay-200" />
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="flex items-start gap-4 mb-5">
|
||||
<div className="w-12 h-12 bg-foreground/10 border border-border rounded-xl flex items-center justify-center">
|
||||
<Target className="w-5 h-5 text-foreground" />
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div className="w-14 h-14 bg-foreground/10 border border-border rounded-2xl flex items-center justify-center">
|
||||
<Target className="w-6 h-6 text-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-display text-foreground mb-0.5">Sniper Alerts</h3>
|
||||
<p className="text-xs text-foreground-muted">Hyper-Personalized</p>
|
||||
<h3 className="text-xl font-display text-foreground mb-1">Sniper Alerts</h3>
|
||||
<p className="text-sm text-foreground-muted">Hyper-Personalized</p>
|
||||
</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.
|
||||
<span className="italic"> "4-letter .com under $500 without numbers"</span> — we've got you.
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm mb-6">
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<Filter className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Custom TLD, length, price</span>
|
||||
<ul className="space-y-3 text-sm mb-8">
|
||||
<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" />
|
||||
</div>
|
||||
<span>Custom TLD, length, price filters</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<Bell className="w-3.5 h-3.5 text-accent" />
|
||||
<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" />
|
||||
</div>
|
||||
<span>Email & SMS alerts</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<Zap className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Real-time matching</span>
|
||||
<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" />
|
||||
</div>
|
||||
<span>Real-time auction matching</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link
|
||||
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
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Portfolio Management */}
|
||||
<div className="group relative p-6 sm:p-8 bg-gradient-to-br from-blue-500/10 via-blue-500/5 to-transparent
|
||||
border border-blue-500/20 rounded-3xl hover:border-blue-500/40 transition-all duration-500
|
||||
backdrop-blur-sm">
|
||||
{/* Corner accent */}
|
||||
<div className="absolute top-0 right-0 w-16 h-16 bg-blue-500/10 rounded-bl-[60px] rounded-tr-3xl" />
|
||||
|
||||
<div className="relative">
|
||||
<div className="flex items-start gap-4 mb-5">
|
||||
<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>
|
||||
<h3 className="text-lg font-display text-foreground mb-0.5">Portfolio</h3>
|
||||
<p className="text-xs text-blue-400 font-medium">Asset Tracking</p>
|
||||
{/* Portfolio Management - Full Width Below */}
|
||||
<div className="mt-6 lg:mt-8">
|
||||
<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]
|
||||
border border-border rounded-3xl hover:border-accent/30 transition-all duration-500">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center gap-8">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-14 h-14 bg-accent/10 border border-accent/20 rounded-2xl flex items-center justify-center">
|
||||
<Briefcase className="w-6 h-6 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-display text-foreground">Portfolio Health</h3>
|
||||
<p className="text-sm text-accent font-medium">Your Domain Insurance</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>
|
||||
<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>
|
||||
@ -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.
|
||||
</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>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<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>
|
||||
<Link
|
||||
|
||||
@ -304,7 +304,11 @@ export default function TldPricingPage() {
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<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="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
||||
<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="text-sm text-foreground-muted">
|
||||
Unlock renewal traps, 1y/3y trends, and risk analysis for {pagination.total}+ TLDs.
|
||||
</p>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/register"
|
||||
</div>
|
||||
<Link
|
||||
href="/register"
|
||||
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"
|
||||
>
|
||||
>
|
||||
Start Free
|
||||
</Link>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -587,12 +591,15 @@ export default function TldPricingPage() {
|
||||
tld.risk_level === 'medium' && "bg-amber-500/10 text-amber-400",
|
||||
tld.risk_level === 'low' && "bg-accent/10 text-accent"
|
||||
)}>
|
||||
{tld.risk_level === 'high' && '🔴'}
|
||||
{tld.risk_level === 'medium' && '🟡'}
|
||||
{tld.risk_level === 'low' && '🟢'}
|
||||
<span className={clsx(
|
||||
"w-2.5 h-2.5 rounded-full",
|
||||
tld.risk_level === 'high' && "bg-red-400",
|
||||
tld.risk_level === 'medium' && "bg-amber-400",
|
||||
tld.risk_level === 'low' && "bg-accent"
|
||||
)} />
|
||||
</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 className="px-4 sm:px-6 py-4">
|
||||
|
||||
@ -206,42 +206,42 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
|
||||
|
||||
<div className="space-y-1.5">
|
||||
{discoverItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className={clsx(
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className={clsx(
|
||||
"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)]"
|
||||
: "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) && (
|
||||
<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">
|
||||
<item.icon className={clsx(
|
||||
<div className="relative">
|
||||
<item.icon className={clsx(
|
||||
"w-5 h-5 transition-all duration-300",
|
||||
isActive(item.href)
|
||||
? "text-accent drop-shadow-[0_0_8px_rgba(16,185,129,0.5)]"
|
||||
: "group-hover:text-foreground"
|
||||
)} />
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<span className={clsx(
|
||||
"text-sm font-medium transition-colors",
|
||||
isActive(item.href) && "text-foreground"
|
||||
)}>
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<span className={clsx(
|
||||
"text-sm font-medium transition-colors",
|
||||
isActive(item.href) && "text-foreground"
|
||||
)}>
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
{!isActive(item.href) && (
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user