fix: Portfolio API calls + Landing Page layout
PORTFOLIO API FIX: - addToPortfolio → addPortfolioDomain - removeFromPortfolio → deletePortfolioDomain - markAsSold → markDomainSold - getValuation → getDomainValuation - refreshPortfolioValuation → refreshDomainValue LANDING PAGE: - Changed 'Beyond Hunting' section to 3-column grid - Portfolio now displayed equally with Sell Domains & Sniper Alerts - Compact card design for all three features - Consistent sizing and spacing
This commit is contained in:
yves.gugger
@ -95,7 +95,7 @@ export default function PortfolioPage() {
|
||||
|
||||
setAddingDomain(true)
|
||||
try {
|
||||
await api.addToPortfolio({
|
||||
await api.addPortfolioDomain({
|
||||
domain: addForm.domain.trim(),
|
||||
purchase_price: addForm.purchase_price ? parseFloat(addForm.purchase_price) : undefined,
|
||||
purchase_date: addForm.purchase_date || undefined,
|
||||
@ -145,10 +145,7 @@ export default function PortfolioPage() {
|
||||
|
||||
setProcessingSale(true)
|
||||
try {
|
||||
await api.markAsSold(selectedDomain.id, {
|
||||
sale_date: sellForm.sale_date,
|
||||
sale_price: parseFloat(sellForm.sale_price),
|
||||
})
|
||||
await api.markDomainSold(selectedDomain.id, sellForm.sale_date, parseFloat(sellForm.sale_price))
|
||||
showToast(`Marked ${selectedDomain.domain} as sold`, 'success')
|
||||
setShowSellModal(false)
|
||||
loadPortfolio()
|
||||
@ -163,7 +160,7 @@ export default function PortfolioPage() {
|
||||
setValuatingDomain(domain.domain)
|
||||
setShowValuationModal(true)
|
||||
try {
|
||||
const result = await api.getValuation(domain.domain)
|
||||
const result = await api.getDomainValuation(domain.domain)
|
||||
setValuation(result)
|
||||
} catch (err: any) {
|
||||
showToast(err.message || 'Failed to get valuation', 'error')
|
||||
@ -176,7 +173,7 @@ export default function PortfolioPage() {
|
||||
const handleRefresh = async (domain: PortfolioDomain) => {
|
||||
setRefreshingId(domain.id)
|
||||
try {
|
||||
await api.refreshPortfolioValuation(domain.id)
|
||||
await api.refreshDomainValue(domain.id)
|
||||
showToast('Valuation refreshed', 'success')
|
||||
loadPortfolio()
|
||||
} catch (err: any) {
|
||||
@ -190,7 +187,7 @@ export default function PortfolioPage() {
|
||||
if (!confirm(`Remove ${domain.domain} from your portfolio?`)) return
|
||||
|
||||
try {
|
||||
await api.removeFromPortfolio(domain.id)
|
||||
await api.deletePortfolioDomain(domain.id)
|
||||
showToast(`Removed ${domain.domain}`, 'success')
|
||||
loadPortfolio()
|
||||
} catch (err: any) {
|
||||
|
||||
@ -403,162 +403,141 @@ 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-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-20 h-20 bg-accent/10 rounded-bl-[80px] 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">Sell Domains</h3>
|
||||
<p className="text-xs text-accent font-medium">Marketplace</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 DNS verification. Buyers contact you directly.
|
||||
</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-xs mb-6">
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<Shield className="w-3.5 h-3.5 text-accent flex-shrink-0" />
|
||||
<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 flex-shrink-0" />
|
||||
<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 flex-shrink-0" />
|
||||
<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-lg hover:bg-accent-hover transition-all"
|
||||
>
|
||||
Browse Marketplace
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
Browse
|
||||
<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-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 className="absolute top-5 right-5 flex gap-1">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-accent/50 animate-pulse" />
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-accent/30 animate-pulse delay-100" />
|
||||
<div className="w-1.5 h-1.5 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">
|
||||
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 className="text-sm text-foreground-muted mb-5 leading-relaxed">
|
||||
Custom filters that notify you when matching domains appear.
|
||||
</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-xs mb-6">
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<Filter className="w-3.5 h-3.5 text-accent flex-shrink-0" />
|
||||
<span>TLD, length, price filters</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 flex-shrink-0" />
|
||||
<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 flex-shrink-0" />
|
||||
<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-lg hover:border-accent hover:text-accent transition-all"
|
||||
>
|
||||
Set Up Alerts
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
Set Up
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
{/* Portfolio Health */}
|
||||
<div className="group relative 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">
|
||||
<div className="absolute top-5 right-5">
|
||||
<div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center">
|
||||
<Shield className="w-3 h-3 text-accent" />
|
||||
</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>
|
||||
|
||||
<div className="relative">
|
||||
<div className="flex items-start gap-4 mb-5">
|
||||
<div className="w-12 h-12 bg-accent/10 border border-accent/20 rounded-xl flex items-center justify-center">
|
||||
<Briefcase className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-display text-foreground mb-0.5">Portfolio</h3>
|
||||
<p className="text-xs text-accent font-medium">Domain Insurance</p>
|
||||
</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">
|
||||
Monitor your domains 24/7. SSL, renewals, uptime & P&L tracking.
|
||||
</p>
|
||||
<ul className="space-y-2 text-xs mb-6">
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<Clock className="w-3.5 h-3.5 text-accent flex-shrink-0" />
|
||||
<span>Expiry reminders</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<Activity className="w-3.5 h-3.5 text-accent flex-shrink-0" />
|
||||
<span>Uptime monitoring</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-foreground-subtle">
|
||||
<TrendingUp className="w-3.5 h-3.5 text-accent flex-shrink-0" />
|
||||
<span>Valuation & P&L</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Link
|
||||
href="/command/portfolio"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 border border-border text-foreground text-sm font-medium rounded-lg hover:border-accent hover:text-accent transition-all"
|
||||
>
|
||||
Manage
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user