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

fix: Portfolio API calls + Landing Page layout

Browse Source 
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
2025-12-10 14:59:55 +01:00
parent 7578d78568
commit a6db616d2d
2 changed files with 90 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/app/command/portfolio/page.tsx
View File

@ -95,7 +95,7 @@ export default function PortfolioPage() {
setAddingDomain(true) setAddingDomain(true)
try { try {
await api.addToPortfolio({ await api.addPortfolioDomain({
domain: addForm.domain.trim(), domain: addForm.domain.trim(),
purchase_price: addForm.purchase_price ? parseFloat(addForm.purchase_price) : undefined, purchase_price: addForm.purchase_price ? parseFloat(addForm.purchase_price) : undefined,
purchase_date: addForm.purchase_date || undefined, purchase_date: addForm.purchase_date || undefined,
@ -145,10 +145,7 @@ export default function PortfolioPage() {
setProcessingSale(true) setProcessingSale(true)
try { try {
await api.markAsSold(selectedDomain.id, { await api.markDomainSold(selectedDomain.id, sellForm.sale_date, parseFloat(sellForm.sale_price))
sale_date: sellForm.sale_date,
sale_price: parseFloat(sellForm.sale_price),
})
showToast(`Marked ${selectedDomain.domain} as sold`, 'success') showToast(`Marked ${selectedDomain.domain} as sold`, 'success')
setShowSellModal(false) setShowSellModal(false)
loadPortfolio() loadPortfolio()
@ -163,7 +160,7 @@ export default function PortfolioPage() {
setValuatingDomain(domain.domain) setValuatingDomain(domain.domain)
setShowValuationModal(true) setShowValuationModal(true)
try { try {
const result = await api.getValuation(domain.domain) const result = await api.getDomainValuation(domain.domain)
setValuation(result) setValuation(result)
} catch (err: any) { } catch (err: any) {
showToast(err.message || 'Failed to get valuation', 'error') showToast(err.message || 'Failed to get valuation', 'error')
@ -176,7 +173,7 @@ export default function PortfolioPage() {
const handleRefresh = async (domain: PortfolioDomain) => { const handleRefresh = async (domain: PortfolioDomain) => {
setRefreshingId(domain.id) setRefreshingId(domain.id)
try { try {
await api.refreshPortfolioValuation(domain.id) await api.refreshDomainValue(domain.id)
showToast('Valuation refreshed', 'success') showToast('Valuation refreshed', 'success')
loadPortfolio() loadPortfolio()
} catch (err: any) { } catch (err: any) {
@ -190,7 +187,7 @@ export default function PortfolioPage() {
if (!confirm(`Remove ${domain.domain} from your portfolio?`)) return if (!confirm(`Remove ${domain.domain} from your portfolio?`)) return
try { try {
await api.removeFromPortfolio(domain.id) await api.deletePortfolioDomain(domain.id)
showToast(`Removed ${domain.domain}`, 'success') showToast(`Removed ${domain.domain}`, 'success')
loadPortfolio() loadPortfolio()
} catch (err: any) { } catch (err: any) {

179
frontend/src/app/page.tsx
View File

@ -403,166 +403,145 @@ export default function HomePage() {
</p> </p>
</div> </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 */} {/* 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 border border-accent/20 rounded-3xl hover:border-accent/40 transition-all duration-500
backdrop-blur-sm"> backdrop-blur-sm">
{/* Corner accent */} <div className="absolute top-0 right-0 w-20 h-20 bg-accent/10 rounded-bl-[80px] 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-6"> <div className="flex items-start gap-4 mb-5">
<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"> <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-6 h-6 text-accent" /> <Tag className="w-5 h-5 text-accent" />
</div> </div>
<div> <div>
<h3 className="text-xl font-display text-foreground mb-1">Sell Your Domains</h3> <h3 className="text-lg font-display text-foreground mb-0.5">Sell Domains</h3>
<p className="text-sm text-accent font-medium">Marketplace</p> <p className="text-xs text-accent font-medium">Marketplace</p>
</div> </div>
</div> </div>
<p className="text-foreground-muted mb-6 leading-relaxed"> <p className="text-sm text-foreground-muted mb-5 leading-relaxed">
Create professional "For Sale" landing pages with one click. Create "For Sale" pages with DNS verification. Buyers contact you directly.
<span className="text-foreground font-medium"> DNS verification</span> proves ownership.
Buyers contact you directly through Pounce.
</p> </p>
<ul className="space-y-3 text-sm mb-8"> <ul className="space-y-2 text-xs mb-6">
<li className="flex items-center gap-3 text-foreground-subtle"> <li className="flex items-center gap-2 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 flex-shrink-0" />
<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-3 text-foreground-subtle"> <li className="flex items-center gap-2 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 flex-shrink-0" />
<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-3 text-foreground-subtle"> <li className="flex items-center gap-2 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 flex-shrink-0" />
<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-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 Browse
<ArrowRight className="w-4 h-4" /> <ArrowRight className="w-3.5 h-3.5" />
</Link> </Link>
</div> </div>
</div> </div>
{/* Sniper Alerts */} {/* 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 border border-border rounded-3xl hover:border-accent/30 transition-all duration-500
backdrop-blur-sm"> backdrop-blur-sm">
{/* Decorative element */} <div className="absolute top-5 right-5 flex gap-1">
<div className="absolute top-6 right-6 flex gap-1"> <div className="w-1.5 h-1.5 rounded-full bg-accent/50 animate-pulse" />
<div className="w-2 h-2 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-2 h-2 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 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-6"> <div className="flex items-start gap-4 mb-5">
<div className="w-14 h-14 bg-foreground/10 border border-border rounded-2xl flex items-center justify-center"> <div className="w-12 h-12 bg-foreground/10 border border-border rounded-xl flex items-center justify-center">
<Target className="w-6 h-6 text-foreground" /> <Target className="w-5 h-5 text-foreground" />
</div> </div>
<div> <div>
<h3 className="text-xl font-display text-foreground mb-1">Sniper Alerts</h3> <h3 className="text-lg font-display text-foreground mb-0.5">Sniper Alerts</h3>
<p className="text-sm text-foreground-muted">Hyper-Personalized</p> <p className="text-xs text-foreground-muted">Hyper-Personalized</p>
</div> </div>
</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. Custom filters that notify you 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-3 text-sm mb-8"> <ul className="space-y-2 text-xs mb-6">
<li className="flex items-center gap-3 text-foreground-subtle"> <li className="flex items-center gap-2 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 flex-shrink-0" />
<Filter className="w-3.5 h-3.5 text-accent" /> <span>TLD, length, price filters</span>
</div>
<span>Custom TLD, length, price filters</span>
</li> </li>
<li className="flex items-center gap-3 text-foreground-subtle"> <li className="flex items-center gap-2 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 flex-shrink-0" />
<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-3 text-foreground-subtle"> <li className="flex items-center gap-2 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 flex-shrink-0" />
<Zap className="w-3.5 h-3.5 text-accent" /> <span>Real-time matching</span>
</div>
<span>Real-time auction matching</span>
</li> </li>
</ul> </ul>
<Link <Link
href="/command/alerts" href="/command/alerts"
className="inline-flex items-center gap-2 px-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 Set Up
<ArrowRight className="w-4 h-4" /> <ArrowRight className="w-3.5 h-3.5" />
</Link> </Link>
</div> </div>
</div> </div>
</div>
{/* Portfolio Management - Full Width Below */} {/* Portfolio Health */}
<div className="mt-6 lg:mt-8"> <div className="group relative p-8 bg-gradient-to-br from-foreground/[0.03] to-transparent
<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
border border-border rounded-3xl hover:border-accent/30 transition-all duration-500"> backdrop-blur-sm">
<div className="flex flex-col lg:flex-row lg:items-center gap-8"> <div className="absolute top-5 right-5">
<div className="flex-1"> <div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center">
<div className="flex items-center gap-4 mb-4"> <Shield className="w-3 h-3 text-accent" />
<div className="w-14 h-14 bg-accent/10 border border-accent/20 rounded-2xl flex items-center justify-center"> </div>
<Briefcase className="w-6 h-6 text-accent" /> </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>
<div> <div>
<h3 className="text-xl font-display text-foreground">Portfolio Health</h3> <h3 className="text-lg font-display text-foreground mb-0.5">Portfolio</h3>
<p className="text-sm text-accent font-medium">Your Domain Insurance</p> <p className="text-xs text-accent font-medium">Domain Insurance</p>
</div> </div>
</div> </div>
<p className="text-foreground-muted leading-relaxed max-w-2xl"> <p className="text-sm text-foreground-muted mb-5 leading-relaxed">
Import your domains and let Pounce monitor them 24/7. Monitor your domains 24/7. SSL, renewals, uptime & P&L tracking.
<span className="text-foreground font-medium"> SSL expiry</span>,
<span className="text-foreground font-medium"> renewal reminders</span>,
<span className="text-foreground font-medium"> uptime checks</span>, and
<span className="text-foreground font-medium"> P&L tracking</span> — all in one place.
<span className="italic text-foreground-subtle"> Never miss a renewal again.</span>
</p> </p>
</div> <ul className="space-y-2 text-xs mb-6">
<div className="flex flex-col sm:flex-row gap-4 lg:flex-col lg:items-end"> <li className="flex items-center gap-2 text-foreground-subtle">
<div className="flex items-center gap-6 text-sm text-foreground-subtle"> <Clock className="w-3.5 h-3.5 text-accent flex-shrink-0" />
<span className="flex items-center gap-2"> <span>Expiry reminders</span>
<Shield className="w-4 h-4 text-accent" /> </li>
SSL Monitor <li className="flex items-center gap-2 text-foreground-subtle">
</span> <Activity className="w-3.5 h-3.5 text-accent flex-shrink-0" />
<span className="flex items-center gap-2"> <span>Uptime monitoring</span>
<Clock className="w-4 h-4 text-accent" /> </li>
Expiry Alerts <li className="flex items-center gap-2 text-foreground-subtle">
</span> <TrendingUp className="w-3.5 h-3.5 text-accent flex-shrink-0" />
<span className="flex items-center gap-2"> <span>Valuation & P&L</span>
<TrendingUp className="w-4 h-4 text-accent" /> </li>
Valuation </ul>
</span>
</div>
<Link <Link
href="/command/portfolio" 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" 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 Portfolio Manage
<ArrowRight className="w-4 h-4" /> <ArrowRight className="w-3.5 h-3.5" />
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
{/* Transition to TLDs */} {/* Transition to TLDs */}