feat: Add Portfolio to Landing Page & improve Beyond Hunting section
LANDING PAGE: - Changed 'Beyond Hunting' section to 3-column layout - Added new 'Portfolio' card with blue accent theme - Highlights: Purchase/sale tracking, renewal reminders, P&L valuations - Links to /command/portfolio - Made all cards more compact for better layout PORTFOLIO FEATURE STATUS: - Public: No dedicated page (private feature) - Command Center: /command/portfolio ✅ Full functionality - Admin: Portfolio stats in overview ✅ - Pricing Page: Listed in tier comparison ✅ - Sidebar: Linked in 'Manage' section ✅ Features included in Portfolio: - Add domains with purchase info - Track registrar & renewal dates - Mark domains as sold (ROI calc) - Get valuations - Summary with P&L metrics
This commit is contained in:
yves.gugger
@ -31,6 +31,9 @@ import {
|
||||
Filter,
|
||||
Crosshair,
|
||||
Tag,
|
||||
Briefcase,
|
||||
DollarSign,
|
||||
Calendar,
|
||||
} from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
@ -401,110 +404,139 @@ export default function HomePage() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6 lg:gap-8">
|
||||
<div className="grid md:grid-cols-3 gap-6 lg:gap-8">
|
||||
{/* For Sale Marketplace */}
|
||||
<div className="group relative p-8 sm:p-10 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent
|
||||
<div className="group relative p-6 sm:p-8 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-24 h-24 bg-accent/10 rounded-bl-[100px] rounded-tr-3xl" />
|
||||
<div className="absolute top-0 right-0 w-16 h-16 bg-accent/10 rounded-bl-[60px] rounded-tr-3xl" />
|
||||
|
||||
<div className="relative">
|
||||
<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 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>
|
||||
<div>
|
||||
<h3 className="text-xl font-display text-foreground mb-1">Sell Your Domains</h3>
|
||||
<p className="text-sm text-accent font-medium">Marketplace</p>
|
||||
<h3 className="text-lg font-display text-foreground mb-0.5">Marketplace</h3>
|
||||
<p className="text-xs text-accent font-medium">Buy & Sell</p>
|
||||
</div>
|
||||
</div>
|
||||
<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 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>
|
||||
<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>
|
||||
<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" />
|
||||
<span>Verified Owner badge</span>
|
||||
</li>
|
||||
<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>
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<BarChart3 className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Pounce Score valuation</span>
|
||||
</li>
|
||||
<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>
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<Lock className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Secure contact form</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link
|
||||
href="/buy"
|
||||
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"
|
||||
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"
|
||||
>
|
||||
Browse Marketplace
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sniper Alerts */}
|
||||
<div className="group relative p-8 sm:p-10 bg-gradient-to-br from-foreground/[0.03] to-transparent
|
||||
<div className="group relative p-6 sm:p-8 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-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 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>
|
||||
<div>
|
||||
<h3 className="text-xl font-display text-foreground mb-1">Sniper Alerts</h3>
|
||||
<p className="text-sm text-foreground-muted">Hyper-Personalized</p>
|
||||
<h3 className="text-lg font-display text-foreground mb-0.5">Sniper Alerts</h3>
|
||||
<p className="text-xs text-foreground-muted">Hyper-Personalized</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-foreground-muted mb-6 leading-relaxed">
|
||||
<p className="text-sm text-foreground-muted mb-5 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-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>
|
||||
<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>
|
||||
</li>
|
||||
<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>
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<Bell className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Email & SMS alerts</span>
|
||||
</li>
|
||||
<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 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>
|
||||
</ul>
|
||||
<Link
|
||||
href="/command/alerts"
|
||||
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"
|
||||
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"
|
||||
>
|
||||
Set Up Alerts
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user