From 43f89bbb9076e13f5bf58154913093ee5f60f939 Mon Sep 17 00:00:00 2001
From: "yves.gugger" <yves.gugger@gentwo.com>
Date: Wed, 10 Dec 2025 14:24:28 +0100
Subject: [PATCH] feat: Add Portfolio to Landing Page & improve Beyond Hunting
 section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 frontend/src/app/page.tsx | 138 +++++++++++++++++++++++---------------
 1 file changed, 85 insertions(+), 53 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 4531b36..6108322 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -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>