Merge version_2 into main

Merge version_2 into main

src/app/admin/page.tsx

@@ -0,0 +1,311 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { BarChart3, TrendingUp, DollarSign, Eye, Plus, Edit2, Trash2, Search } from "lucide-react";
+
+export default function AdminPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "#how-it-works" },
+    { name: "Top Products", id: "#products" },
+    { name: "Admin", id: "/admin" },
+    { name: "Contact", id: "#contact" },
+  ];
+
+  const [campaigns, setCampaigns] = useState([
+    {
+      id: 1,
+      name: "Wireless Earbuds Campaign",      status: "active",      impressions: 45230,
+      clicks: 1240,
+      conversions: 89,
+      revenue: 4450,
+      ctr: 2.74,
+      conversionRate: 7.18,
+    },
+    {
+      id: 2,
+      name: "Power Bank Q1 Push",      status: "active",      impressions: 32100,
+      clicks: 890,
+      conversions: 52,
+      revenue: 2340,
+      ctr: 2.77,
+      conversionRate: 5.84,
+    },
+    {
+      id: 3,
+      name: "LED Lamp Bundle",      status: "paused",      impressions: 28900,
+      clicks: 720,
+      conversions: 41,
+      revenue: 1845,
+      ctr: 2.49,
+      conversionRate: 5.69,
+    },
+  ]);
+
+  const totalMetrics = {
+    totalImpressions: campaigns.reduce((sum, c) => sum + c.impressions, 0),
+    totalClicks: campaigns.reduce((sum, c) => sum + c.clicks, 0),
+    totalConversions: campaigns.reduce((sum, c) => sum + c.conversions, 0),
+    totalRevenue: campaigns.reduce((sum, c) => sum + c.revenue, 0),
+    overallCTR: 2.67,
+    overallConversionRate: 6.24,
+  };
+
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCampaign, setSelectedCampaign] = useState<typeof campaigns[0] | null>(null);
+
+  const filteredCampaigns = campaigns.filter((campaign) =>
+    campaign.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple brandName="ProductHuntr" navItems={navItems} />
+      </div>
+
+      <div className="min-h-screen bg-background py-20 px-4">
+        <div className="max-w-7xl mx-auto">
+          {/* Header */}
+          <div className="mb-12">
+            <h1 className="text-5xl font-bold text-foreground mb-4">Ad Management Dashboard</h1>
+            <p className="text-lg text-foreground/70">Manage campaigns, track performance, and monitor revenue generation</p>
+          </div>
+
+          {/* KPI Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+            <div className="bg-card border border-accent/20 rounded-lg p-6">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-foreground/70 text-sm font-medium">Total Revenue</h3>
+                <DollarSign className="w-5 h-5 text-primary-cta" />
+              </div>
+              <p className="text-4xl font-bold text-foreground">${totalMetrics.totalRevenue.toLocaleString()}</p>
+              <p className="text-sm text-foreground/50 mt-2">From {campaigns.length} active campaigns</p>
+            </div>
+
+            <div className="bg-card border border-accent/20 rounded-lg p-6">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-foreground/70 text-sm font-medium">Total Conversions</h3>
+                <TrendingUp className="w-5 h-5 text-primary-cta" />
+              </div>
+              <p className="text-4xl font-bold text-foreground">{totalMetrics.totalConversions}</p>
+              <p className="text-sm text-foreground/50 mt-2">Conversion rate: {totalMetrics.overallConversionRate}%</p>
+            </div>
+
+            <div className="bg-card border border-accent/20 rounded-lg p-6">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-foreground/70 text-sm font-medium">Total Impressions</h3>
+                <Eye className="w-5 h-5 text-primary-cta" />
+              </div>
+              <p className="text-4xl font-bold text-foreground">{(totalMetrics.totalImpressions / 1000).toFixed(1)}K</p>
+              <p className="text-sm text-foreground/50 mt-2">CTR: {totalMetrics.overallCTR}%</p>
+            </div>
+
+            <div className="bg-card border border-accent/20 rounded-lg p-6">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-foreground/70 text-sm font-medium">Total Clicks</h3>
+                <BarChart3 className="w-5 h-5 text-primary-cta" />
+              </div>
+              <p className="text-4xl font-bold text-foreground">{totalMetrics.totalClicks.toLocaleString()}</p>
+              <p className="text-sm text-foreground/50 mt-2">From impressions</p>
+            </div>
+          </div>
+
+          {/* Campaign Management */}
+          <div className="bg-card border border-accent/20 rounded-lg p-8">
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8">
+              <h2 className="text-3xl font-bold text-foreground">Campaign Manager</h2>
+              <div className="flex gap-4 w-full md:w-auto">
+                <div className="relative flex-1 md:flex-none md:w-64">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-foreground/40" />
+                  <input
+                    type="text"
+                    placeholder="Search campaigns..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="w-full pl-10 pr-4 py-2 bg-background border border-accent/20 rounded-lg text-foreground placeholder-foreground/40 focus:outline-none focus:border-primary-cta"
+                  />
+                </div>
+                <button className="px-6 py-2 bg-primary-cta text-background rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center gap-2 whitespace-nowrap">
+                  <Plus className="w-4 h-4" />
+                  New Campaign
+                </button>
+              </div>
+            </div>
+
+            {/* Campaign Table */}
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-accent/20">
+                    <th className="text-left py-4 px-4 text-foreground/70 font-semibold">Campaign Name</th>
+                    <th className="text-left py-4 px-4 text-foreground/70 font-semibold">Status</th>
+                    <th className="text-right py-4 px-4 text-foreground/70 font-semibold">Impressions</th>
+                    <th className="text-right py-4 px-4 text-foreground/70 font-semibold">Clicks</th>
+                    <th className="text-right py-4 px-4 text-foreground/70 font-semibold">CTR</th>
+                    <th className="text-right py-4 px-4 text-foreground/70 font-semibold">Conversions</th>
+                    <th className="text-right py-4 px-4 text-foreground/70 font-semibold">Revenue</th>
+                    <th className="text-right py-4 px-4 text-foreground/70 font-semibold">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredCampaigns.map((campaign) => (
+                    <tr key={campaign.id} className="border-b border-accent/10 hover:bg-background/50 transition-colors">
+                      <td className="py-4 px-4 text-foreground font-medium">{campaign.name}</td>
+                      <td className="py-4 px-4">
+                        <span
+                          className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                            campaign.status === "active"
+                              ? "bg-green-500/20 text-green-400"
+                              : "bg-yellow-500/20 text-yellow-400"
+                          }`}
+                        >
+                          {campaign.status.charAt(0).toUpperCase() + campaign.status.slice(1)}
+                        </span>
+                      </td>
+                      <td className="py-4 px-4 text-right text-foreground">{campaign.impressions.toLocaleString()}</td>
+                      <td className="py-4 px-4 text-right text-foreground">{campaign.clicks.toLocaleString()}</td>
+                      <td className="py-4 px-4 text-right text-foreground">{campaign.ctr}%</td>
+                      <td className="py-4 px-4 text-right text-foreground">{campaign.conversions}</td>
+                      <td className="py-4 px-4 text-right font-bold text-primary-cta">${campaign.revenue.toLocaleString()}</td>
+                      <td className="py-4 px-4 text-right">
+                        <div className="flex justify-end gap-2">
+                          <button
+                            onClick={() => setSelectedCampaign(campaign)}
+                            className="p-2 hover:bg-background rounded transition-colors"
+                            title="View Details"
+                          >
+                            <Eye className="w-4 h-4 text-foreground/60" />
+                          </button>
+                          <button className="p-2 hover:bg-background rounded transition-colors" title="Edit">
+                            <Edit2 className="w-4 h-4 text-foreground/60" />
+                          </button>
+                          <button className="p-2 hover:bg-background rounded transition-colors" title="Delete">
+                            <Trash2 className="w-4 h-4 text-foreground/60" />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          {/* Campaign Details Modal */}
+          {selectedCampaign && (
+            <div className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+              <div className="bg-card border border-accent/20 rounded-lg p-8 max-w-2xl w-full">
+                <div className="flex justify-between items-start mb-6">
+                  <div>
+                    <h3 className="text-2xl font-bold text-foreground">{selectedCampaign.name}</h3>
+                    <span
+                      className={`inline-block mt-2 px-3 py-1 rounded-full text-xs font-semibold ${
+                        selectedCampaign.status === "active"
+                          ? "bg-green-500/20 text-green-400"
+                          : "bg-yellow-500/20 text-yellow-400"
+                      }`}
+                    >
+                      {selectedCampaign.status.charAt(0).toUpperCase() + selectedCampaign.status.slice(1)}
+                    </span>
+                  </div>
+                  <button
+                    onClick={() => setSelectedCampaign(null)}
+                    className="text-foreground/60 hover:text-foreground transition-colors text-2xl"
+                  >
+                    ×
+                  </button>
+                </div>
+
+                <div className="grid grid-cols-2 gap-6 mb-8">
+                  <div>
+                    <p className="text-foreground/70 text-sm mb-1">Impressions</p>
+                    <p className="text-3xl font-bold text-foreground">{selectedCampaign.impressions.toLocaleString()}</p>
+                  </div>
+                  <div>
+                    <p className="text-foreground/70 text-sm mb-1">Clicks</p>
+                    <p className="text-3xl font-bold text-foreground">{selectedCampaign.clicks.toLocaleString()}</p>
+                  </div>
+                  <div>
+                    <p className="text-foreground/70 text-sm mb-1">Conversions</p>
+                    <p className="text-3xl font-bold text-foreground">{selectedCampaign.conversions}</p>
+                  </div>
+                  <div>
+                    <p className="text-foreground/70 text-sm mb-1">Revenue</p>
+                    <p className="text-3xl font-bold text-primary-cta">${selectedCampaign.revenue.toLocaleString()}</p>
+                  </div>
+                  <div>
+                    <p className="text-foreground/70 text-sm mb-1">CTR</p>
+                    <p className="text-3xl font-bold text-foreground">{selectedCampaign.ctr}%</p>
+                  </div>
+                  <div>
+                    <p className="text-foreground/70 text-sm mb-1">Conversion Rate</p>
+                    <p className="text-3xl font-bold text-foreground">{selectedCampaign.conversionRate}%</p>
+                  </div>
+                </div>
+
+                <div className="flex gap-4 justify-end">
+                  <button
+                    onClick={() => setSelectedCampaign(null)}
+                    className="px-6 py-2 bg-background border border-accent/20 text-foreground rounded-lg font-medium hover:bg-background/80 transition-colors"
+                  >
+                    Close
+                  </button>
+                  <button className="px-6 py-2 bg-primary-cta text-background rounded-lg font-medium hover:opacity-90 transition-opacity">
+                    Edit Campaign
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "How It Works", href: "#how-it-works" },
+                { label: "Top Products", href: "#products" },
+                { label: "Admin", href: "/admin" },
+                { label: "Dashboard", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "#contact" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Affiliate Disclosure", href: "#" },
+              ],
+            },
+          ]}
+          copyrightText="© 2025 ProductHuntr. All rights reserved. | Affiliate Partnerships: Amazon | Walmart | eBay | Alibaba"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/auth/page.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import { Sparkles } from "lucide-react";
+import Link from "next/link";
+
+export default function AuthPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Top Products", id: "/products" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple brandName="ProductHuntr" navItems={navItems} />
+      </div>
+
+      <div id="auth" data-section="auth" className="min-h-screen py-20">
+        <div className="max-w-6xl mx-auto px-4">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            {/* Left Column: Form */}
+            <div>
+              <div className="mb-8">
+                <h1 className="text-4xl font-bold mb-2">Create Your Account</h1>
+                <p className="text-lg text-gray-600">Start earning passive income with ProductHuntr today</p>
+              </div>
+
+              <form className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium mb-2">Email</label>
+                  <input
+                    type="email"
+                    placeholder="your@email.com"
+                    className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-2">Password</label>
+                  <input
+                    type="password"
+                    placeholder="Create a strong password"
+                    className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-2">Account Type</label>
+                  <select className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <option>Individual Creator</option>
+                    <option>Agency</option>
+                    <option>Brand Partner</option>
+                  </select>
+                </div>
+                <button
+                  type="submit"
+                  className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition"
+                >
+                  Sign Up
+                </button>
+              </form>
+
+              <p className="mt-4 text-center text-sm text-gray-600">
+                Already have an account? <Link href="/login" className="text-blue-600 font-semibold hover:underline">Log in</Link>
+              </p>
+            </div>
+
+            {/* Right Column: Benefits */}
+            <div className="space-y-6">
+              <div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl">
+                <h3 className="text-xl font-bold mb-3">Why Join ProductHuntr?</h3>
+                <ul className="space-y-3">
+                  <li className="flex items-start">
+                    <span className="text-green-500 font-bold mr-3">✓</span>
+                    <span>AI-powered product discovery—no manual research needed</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 font-bold mr-3">✓</span>
+                    <span>Ready-to-post content for Instagram, TikTok, Pinterest, and Facebook</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 font-bold mr-3">✓</span>
+                    <span>Automated affiliate link integration across 5+ platforms</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 font-bold mr-3">✓</span>
+                    <span>Real-time earnings tracking and commission management</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 font-bold mr-3">✓</span>
+                    <span>Start earning immediately—zero investment required</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "How It Works", href: "/how-it-works" },
+                { label: "Top Products", href: "/products" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "Dashboard", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/contact" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Affiliate Disclosure", href: "#" },
+              ],
+            },
+          ]}
+          copyrightText="© 2025 ProductHuntr. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/dashboard/page.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { TrendingUp, Eye, ShoppingCart, DollarSign } from "lucide-react";
+
+export default function DashboardPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Top Products", id: "/products" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple brandName="ProductHuntr" navItems={navItems} />
+      </div>
+
+      <div id="dashboard" data-section="dashboard" className="min-h-screen py-20">
+        <div className="max-w-6xl mx-auto px-4">
+          <h1 className="text-4xl font-bold mb-2">Dashboard</h1>
+          <p className="text-gray-600 mb-8">Welcome back! Here's your performance overview.</p>
+
+          {/* KPI Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            <div className="bg-white rounded-xl p-6 shadow-sm">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-gray-600 text-sm mb-1">Total Earnings</p>
+                  <p className="text-3xl font-bold">$12,450</p>
+                  <p className="text-green-600 text-sm mt-2">+15% this month</p>
+                </div>
+                <div className="bg-green-100 p-3 rounded-lg">
+                  <DollarSign className="text-green-600" size={24} />
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl p-6 shadow-sm">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-gray-600 text-sm mb-1">Total Views</p>
+                  <p className="text-3xl font-bold">45.2K</p>
+                  <p className="text-blue-600 text-sm mt-2">+12% this week</p>
+                </div>
+                <div className="bg-blue-100 p-3 rounded-lg">
+                  <Eye className="text-blue-600" size={24} />
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl p-6 shadow-sm">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-gray-600 text-sm mb-1">Conversions</p>
+                  <p className="text-3xl font-bold">342</p>
+                  <p className="text-purple-600 text-sm mt-2">+8% this week</p>
+                </div>
+                <div className="bg-purple-100 p-3 rounded-lg">
+                  <ShoppingCart className="text-purple-600" size={24} />
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl p-6 shadow-sm">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-gray-600 text-sm mb-1">Avg. Commission</p>
+                  <p className="text-3xl font-bold">$36.38</p>
+                  <p className="text-indigo-600 text-sm mt-2">Per conversion</p>
+                </div>
+                <div className="bg-indigo-100 p-3 rounded-lg">
+                  <TrendingUp className="text-indigo-600" size={24} />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Recent Activity */}
+          <div className="bg-white rounded-xl p-6 shadow-sm">
+            <h2 className="text-2xl font-bold mb-6">Recent Activity</h2>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between py-4 border-b">
+                <div>
+                  <p className="font-medium">Wireless Smart Earbuds Pro shared</p>
+                  <p className="text-sm text-gray-600">2 hours ago</p>
+                </div>
+                <p className="text-green-600 font-semibold">+$45.00</p>
+              </div>
+              <div className="flex items-center justify-between py-4 border-b">
+                <div>
+                  <p className="font-medium">LED Desk Lamp purchase conversion</p>
+                  <p className="text-sm text-gray-600">4 hours ago</p>
+                </div>
+                <p className="text-green-600 font-semibold">+$12.50</p>
+              </div>
+              <div className="flex items-center justify-between py-4 border-b">
+                <div>
+                  <p className="font-medium">Portable Power Bank shared</p>
+                  <p className="text-sm text-gray-600">Yesterday</p>
+                </div>
+                <p className="text-green-600 font-semibold">+$28.00</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "How It Works", href: "/how-it-works" },
+                { label: "Top Products", href: "/products" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "Dashboard", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/contact" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Affiliate Disclosure", href: "#" },
+              ],
+            },
+          ]}
+          copyrightText="© 2025 ProductHuntr. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,75 +1,24 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
-import { Roboto } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-
-const halant = Halant({
-  variable: "--font-halant",
-  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
 
 const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
-
-const roboto = Roboto({
-  variable: "--font-roboto",
-  subsets: ["latin"],
-  weight: ["100", "300", "400", "500", "700", "900"],
+  variable: "--font-inter",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
 });
 
 export const metadata: Metadata = {
-  title: "ProductHuntr - AI Product Hunting Platform for Passive Income",
-  description: "Discover trending products from Amazon, Walmart, Alibaba & eBay with AI. Monetize through affiliate links on Instagram, TikTok, Pinterest & Facebook. Zero investment required.",
-  keywords: "product hunting, affiliate marketing, AI shopping platform, passive income, trending products, e-commerce, social commerce",
-  metadataBase: new URL("https://producthuntr.com"),
-  alternates: {
-    canonical: "https://producthuntr.com",
-  },
-  openGraph: {
-    title: "ProductHuntr - Make Money from Trending Products",
-    description: "AI finds winning products. You earn passive income. Zero investment. Join 10K+ product scouts earning $500-$10K+ monthly.",
-    url: "https://producthuntr.com",
-    siteName: "ProductHuntr",
-    type: "website",
-    images: [
-      {
-        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/a-sleek-ai-product-hunting-dashboard-dis-1772797252298-0e709f90.png",
-        alt: "ProductHuntr AI Dashboard - Trending Products",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "ProductHuntr - Passive Income from Trending Products",
-    description: "AI hunts winning products. You earn commissions. Zero investment. Start today.",
-    images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/a-sleek-ai-product-hunting-dashboard-dis-1772797252298-0e709f90.png"],
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
-};
+  title: "ProductHuntr - AI-Powered Affiliate Marketing Platform",  description:
+    "Discover trending products automatically with AI. Earn passive income through affiliate marketing with zero investment."};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${roboto.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body className={`${inter.variable}`}>{children}
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1437,7 +1386,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
-}
+}

src/app/login/page.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import Link from "next/link";
+
+export default function LoginPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Top Products", id: "/products" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple brandName="ProductHuntr" navItems={navItems} />
+      </div>
+
+      <div id="login" data-section="login" className="min-h-screen py-20">
+        <div className="max-w-md mx-auto">
+          <div className="mb-8">
+            <h1 className="text-4xl font-bold mb-2">Welcome Back</h1>
+            <p className="text-lg text-gray-600">Log in to your ProductHuntr account</p>
+          </div>
+
+          <form className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-2">Email</label>
+              <input
+                type="email"
+                placeholder="your@email.com"
+                className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">Password</label>
+              <input
+                type="password"
+                placeholder="Enter your password"
+                className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+              />
+            </div>
+            <button
+              type="submit"
+              className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition"
+            >
+              Log In
+            </button>
+          </form>
+
+          <p className="mt-4 text-center text-sm text-gray-600">
+            Don't have an account? <Link href="/auth" className="text-blue-600 font-semibold hover:underline">Sign up</Link>
+          </p>
+          <p className="mt-2 text-center text-sm text-gray-600">
+            <Link href="#" className="text-blue-600 font-semibold hover:underline">Forgot password?</Link>
+          </p>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "How It Works", href: "/how-it-works" },
+                { label: "Top Products", href: "/products" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "Dashboard", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/contact" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Affiliate Disclosure", href: "#" },
+              ],
+            },
+          ]}
+          copyrightText="© 2025 ProductHuntr. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -115,13 +115,13 @@ export default function HomePage() {
           tagIcon={TrendingUp}
           products={[
             {
-              id: "1",              name: "Wireless Smart Earbuds Pro",              price: "$59.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/high-quality-product-image-of-trending-c-1772797250769-19781c41.png",              imageAlt: "Trending wireless earbuds with active noise cancellation"
+              id: "1",              name: "Wireless Smart Earbuds Pro",              price: "$59.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/high-quality-product-image-of-trending-c-1772797250769-19781c41.png?_wi=1",              imageAlt: "Trending wireless earbuds with active noise cancellation"
             },
             {
-              id: "2",              name: "Portable Power Bank 20000mAh",              price: "$24.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/lifestyle-product-image-showing-popular--1772797252162-c42c95c9.png",              imageAlt: "High-capacity portable power bank for mobile devices"
+              id: "2",              name: "Portable Power Bank 20000mAh",              price: "$24.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/lifestyle-product-image-showing-popular--1772797252162-c42c95c9.png?_wi=1",              imageAlt: "High-capacity portable power bank for mobile devices"
             },
             {
-              id: "3",              name: "LED Desk Lamp with USB Charging",              price: "$34.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/fashion-or-accessories-product-image-sho-1772797252391-aef17d9d.png",              imageAlt: "Modern LED desk lamp with built-in USB charging port"
+              id: "3",              name: "LED Desk Lamp with USB Charging",              price: "$34.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/fashion-or-accessories-product-image-sho-1772797252391-aef17d9d.png?_wi=1",              imageAlt: "Modern LED desk lamp with built-in USB charging port"
             }
           ]}
           gridVariant="three-columns-all-equal-width"
@@ -275,4 +275,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/products/[id]/page.tsx

@@ -0,0 +1,323 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Heart, Share2, ArrowLeft, Check, Truck, RotateCcw, Shield } from "lucide-react";
+
+interface ProductDetails {
+  id: string;
+  name: string;
+  price: string;
+  originalPrice?: string;
+  rating: number;
+  reviews: string;
+  imageSrc: string;
+  imageAlt: string;
+  category: string;
+  description: string;
+  features: string[];
+  specifications: Record<string, string>;
+  inStock: boolean;
+  affiliateUrl: string;
+}
+
+const productDatabase: Record<string, ProductDetails> = {
+  "1": {
+    id: "1",    name: "Wireless Smart Earbuds Pro",    price: "$59.99",    originalPrice: "$99.99",    rating: 4,
+    reviews: "2.3k",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/high-quality-product-image-of-trending-c-1772797250769-19781c41.png?_wi=5",    imageAlt: "Wireless Smart Earbuds Pro",    category: "Electronics",    description: "Experience premium audio with active noise cancellation, 30-hour battery life, and seamless connectivity. Perfect for daily commutes and workouts.",    features: [
+      "Active Noise Cancellation (ANC)",      "30-hour battery life with charging case",      "IPX4 water resistant",      "Touch controls and voice assistant",      "Premium sound quality with deep bass",      "Fast charging - 5 minutes for 1 hour"],
+    specifications: {
+      "Driver Size": "12mm",      "Frequency Response": "20Hz - 20kHz",      "Battery Life (Single Charge)": "8 hours",      "Total Battery Life": "30 hours with case",      "Connectivity": "Bluetooth 5.2",      "Weight": "3.5g per earbud",      "Color Options": "Black, White, Blue",      "Warranty": "2-year manufacturer warranty"},
+    inStock: true,
+    affiliateUrl: "https://amazon.com/s?k=wireless+earbuds"},
+  "2": {
+    id: "2",    name: "Portable Power Bank 20000mAh",    price: "$24.99",    originalPrice: "$39.99",    rating: 5,
+    reviews: "5.1k",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/lifestyle-product-image-showing-popular--1772797252162-c42c95c9.png?_wi=5",    imageAlt: "Portable Power Bank 20000mAh",    category: "Electronics",    description: "Keep your devices charged on the go with this high-capacity power bank. Dual USB ports support fast charging for two devices simultaneously.",    features: [
+      "20000mAh high capacity",      "Dual USB output ports",      "Fast charging support (18W)",      "LED display shows remaining charge",      "Compact and lightweight design",      "Multiple protection features",      "1-year warranty included"],
+    specifications: {
+      "Capacity": "20000mAh",      "Input": "USB Type-C / Micro USB",      "Output": "2x USB-A (5V/2.1A)",      "Weight": "340g",      "Dimensions": "152 x 72 x 23mm",      "Charging Time": "6 hours full charge",      "Compatibility": "All smartphones and tablets",      "Colors": "Black, White, Gold"},
+    inStock: true,
+    affiliateUrl: "https://amazon.com/s?k=power+bank"},
+  "3": {
+    id: "3",    name: "LED Desk Lamp with USB Charging",    price: "$34.99",    originalPrice: "$54.99",    rating: 4,
+    reviews: "892",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/fashion-or-accessories-product-image-sho-1772797252391-aef17d9d.png?_wi=4",    imageAlt: "LED Desk Lamp with USB Charging",    category: "Home & Office",    description: "Modern LED desk lamp with built-in USB charging port for convenient device charging while you work. Features adjustable brightness and color temperature.",    features: [
+      "3 brightness levels",      "3 color temperature modes (Warm, Natural, Cool)",      "Built-in USB charging port",      "Touch control panel",      "Memory function remembers your settings",      "Energy-efficient LED bulbs",      "Eye-care technology reduces eye strain"],
+    specifications: {
+      "Power": "8W LED",      "Color Temperature": "2700K - 6500K",      "Brightness Levels": "3 modes",      "USB Output": "5V/1A",      "Cable Length": "1.5m",      "Material": "Aluminum + Plastic",      "Dimensions": "15 x 22 x 45cm",      "Weight": "450g"},
+    inStock: true,
+    affiliateUrl: "https://amazon.com/s?k=desk+lamp"},
+};
+
+export default function ProductDetailPage() {
+  const params = useParams();
+  const productId = params.id as string;
+  const product = productDatabase[productId];
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Top Products", id: "/products" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
+  ];
+
+  const [isFavorited, setIsFavorited] = useState(false);
+
+  if (!product) {
+    return (
+      <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="mediumLarge"
+        sizing="mediumSizeLargeTitles"
+        background="circleGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+      >
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple brandName="ProductHuntr" navItems={navItems} />
+        </div>
+        <div className="min-h-screen pt-32 flex items-center justify-center">
+          <div className="text-center">
+            <h1 className="text-4xl font-bold mb-4">Product Not Found</h1>
+            <Link href="/products" className="text-primary-cta hover:underline">
+              Back to Products
+            </Link>
+          </div>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple brandName="ProductHuntr" navItems={navItems} />
+      </div>
+
+      <div className="min-h-screen pt-32 pb-20">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          {/* Back Button */}
+          <Link
+            href="/products"
+            className="inline-flex items-center gap-2 text-foreground/60 hover:text-foreground mb-8 transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5" />
+            Back to Products
+          </Link>
+
+          {/* Product Grid */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-12">
+            {/* Image Section */}
+            <div className="flex items-center">
+              <div className="w-full bg-card rounded-lg overflow-hidden border border-foreground/10">
+                <img
+                  src={product.imageSrc}
+                  alt={product.imageAlt}
+                  className="w-full h-auto object-cover aspect-square"
+                />
+              </div>
+            </div>
+
+            {/* Details Section */}
+            <div>
+              {/* Category */}
+              <p className="text-sm text-foreground/60 mb-2">{product.category}</p>
+
+              {/* Title */}
+              <h1 className="text-4xl lg:text-5xl font-bold mb-4">{product.name}</h1>
+
+              {/* Rating */}
+              <div className="flex items-center gap-3 mb-6">
+                <div className="flex">
+                  {[...Array(5)].map((_, i) => (
+                    <span key={i} className={i < product.rating ? "text-yellow-400 text-lg" : "text-foreground/20 text-lg"}>
+                      ★
+                    </span>
+                  ))}
+                </div>
+                <span className="text-foreground/60">({product.reviews} reviews)</span>
+              </div>
+
+              {/* Price */}
+              <div className="mb-8">
+                <div className="flex items-baseline gap-3">
+                  <span className="text-4xl font-bold text-primary-cta">{product.price}</span>
+                  {product.originalPrice && (
+                    <span className="text-xl text-foreground/40 line-through">{product.originalPrice}</span>
+                  )}
+                </div>
+                {product.originalPrice && (
+                  <p className="text-sm text-green-600 mt-2">
+                    Save {Math.round((1 - parseFloat(product.price.slice(1)) / parseFloat(product.originalPrice.slice(1))) * 100)}%
+                  </p>
+                )}
+              </div>
+
+              {/* Stock Status */}
+              <div className="mb-8">
+                {product.inStock ? (
+                  <div className="flex items-center gap-2 text-green-600">
+                    <Check className="w-5 h-5" />
+                    <span className="font-medium">In Stock - Ships within 24 hours</span>
+                  </div>
+                ) : (
+                  <div className="text-red-600 font-medium">Out of Stock</div>
+                )}
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex flex-col gap-4 mb-8">
+                <a
+                  href={product.affiliateUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-full bg-primary-cta text-background py-4 rounded-lg font-bold text-lg hover:opacity-90 transition-opacity text-center"
+                >
+                  View on Amazon
+                </a>
+                <button
+                  onClick={() => setIsFavorited(!isFavorited)}
+                  className="w-full border-2 border-foreground/20 py-4 rounded-lg font-medium hover:border-primary-cta transition-colors flex items-center justify-center gap-2"
+                >
+                  <Heart className={`w-5 h-5 ${isFavorited ? "fill-current" : ""}`} />
+                  {isFavorited ? "Added to Favorites" : "Add to Favorites"}
+                </button>
+              </div>
+
+              {/* Trust Badges */}
+              <div className="border-t border-foreground/10 pt-6 space-y-4">
+                <div className="flex items-start gap-3">
+                  <Truck className="w-5 h-5 text-primary-cta flex-shrink-0 mt-1" />
+                  <div>
+                    <p className="font-medium">Free Shipping</p>
+                    <p className="text-sm text-foreground/60">Free delivery on orders over $50</p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3">
+                  <RotateCcw className="w-5 h-5 text-primary-cta flex-shrink-0 mt-1" />
+                  <div>
+                    <p className="font-medium">Easy Returns</p>
+                    <p className="text-sm text-foreground/60">30-day money-back guarantee</p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3">
+                  <Shield className="w-5 h-5 text-primary-cta flex-shrink-0 mt-1" />
+                  <div>
+                    <p className="font-medium">Secure Checkout</p>
+                    <p className="text-sm text-foreground/60">Your purchase is protected by Buyer Protection</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Features Section */}
+          <div className="mb-12">
+            <h2 className="text-3xl font-bold mb-6">Key Features</h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              {product.features.map((feature, index) => (
+                <div key={index} className="flex items-start gap-3 bg-card p-4 rounded-lg border border-foreground/10">
+                  <Check className="w-5 h-5 text-primary-cta flex-shrink-0 mt-0.5" />
+                  <p className="text-foreground">{feature}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Specifications Section */}
+          <div className="mb-12">
+            <h2 className="text-3xl font-bold mb-6">Specifications</h2>
+            <div className="bg-card rounded-lg border border-foreground/10 overflow-hidden">
+              <table className="w-full">
+                <tbody>
+                  {Object.entries(product.specifications).map(([key, value], index) => (
+                    <tr
+                      key={key}
+                      className={`border-t border-foreground/10 ${index === 0 ? "" : ""}`}
+                    >
+                      <td className="px-6 py-4 font-medium text-foreground/80 w-1/3">{key}</td>
+                      <td className="px-6 py-4 text-foreground">{value}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          {/* Description Section */}
+          <div className="mb-12">
+            <h2 className="text-3xl font-bold mb-4">About This Product</h2>
+            <p className="text-lg text-foreground/80 leading-relaxed">{product.description}</p>
+          </div>
+
+          {/* CTA Section */}
+          <div className="bg-card border border-foreground/10 rounded-lg p-8 text-center">
+            <h3 className="text-2xl font-bold mb-4">Ready to purchase?</h3>
+            <p className="text-foreground/60 mb-6">
+              Click the button below to view this product on Amazon and earn your commission on every sale.
+            </p>
+            <a
+              href={product.affiliateUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-block bg-primary-cta text-background px-8 py-4 rounded-lg font-bold text-lg hover:opacity-90 transition-opacity"
+            >
+              View Product Details
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "How It Works", href: "/how-it-works" },
+                { label: "Top Products", href: "/products" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "Dashboard", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/contact" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Affiliate Disclosure", href: "#" },
+              ],
+            },
+          ]}
+          copyrightText="© 2025 ProductHuntr. All rights reserved. | Affiliate Partnerships: Amazon | Walmart | eBay | Alibaba"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/products/page.tsx

@@ -1,23 +1,76 @@
 "use client";
 
+import { useState, useMemo } from "react";
 import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import ProductCardOne from "@/components/sections/product/ProductCardOne";
-import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import { Rocket, BarChart3, TrendingUp } from "lucide-react";
+import { Search, Filter, TrendingUp } from "lucide-react";
+
+interface Product {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt: string;
+  category: string;
+  rating: number;
+  reviews: string;
+}
+
+const allProducts: Product[] = [
+  {
+    id: "1",    name: "Wireless Smart Earbuds Pro",    price: "$59.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/high-quality-product-image-of-trending-c-1772797250769-19781c41.png?_wi=2",    imageAlt: "Trending wireless earbuds with active noise cancellation",    category: "Electronics",    rating: 4,
+    reviews: "2.3k"},
+  {
+    id: "2",    name: "Portable Power Bank 20000mAh",    price: "$24.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/lifestyle-product-image-showing-popular--1772797252162-c42c95c9.png?_wi=2",    imageAlt: "High-capacity portable power bank for mobile devices",    category: "Electronics",    rating: 5,
+    reviews: "5.1k"},
+  {
+    id: "3",    name: "LED Desk Lamp with USB Charging",    price: "$34.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/fashion-or-accessories-product-image-sho-1772797252391-aef17d9d.png?_wi=2",    imageAlt: "Modern LED desk lamp with built-in USB charging port",    category: "Home & Office",    rating: 4,
+    reviews: "892"},
+  {
+    id: "4",    name: "Ergonomic Wireless Mouse",    price: "$29.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/high-quality-product-image-of-trending-c-1772797250769-19781c41.png?_wi=3",    imageAlt: "Ergonomic wireless mouse for productivity",    category: "Electronics",    rating: 5,
+    reviews: "1.8k"},
+  {
+    id: "5",    name: "Stainless Steel Water Bottle",    price: "$19.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/lifestyle-product-image-showing-popular--1772797252162-c42c95c9.png?_wi=3",    imageAlt: "Insulated stainless steel water bottle",    category: "Sports & Outdoors",    rating: 4,
+    reviews: "3.2k"},
+  {
+    id: "6",    name: "Memory Foam Pillow Set",    price: "$49.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/fashion-or-accessories-product-image-sho-1772797252391-aef17d9d.png?_wi=3",    imageAlt: "Comfortable memory foam pillow set",    category: "Home & Office",    rating: 5,
+    reviews: "4.5k"},
+  {
+    id: "7",    name: "Bluetooth Portable Speaker",    price: "$39.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/high-quality-product-image-of-trending-c-1772797250769-19781c41.png?_wi=4",    imageAlt: "Portable Bluetooth speaker with 360 sound",    category: "Electronics",    rating: 4,
+    reviews: "2.7k"},
+  {
+    id: "8",    name: "Yoga Mat with Carrying Strap",    price: "$22.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/lifestyle-product-image-showing-popular--1772797252162-c42c95c9.png?_wi=4",    imageAlt: "Non-slip yoga mat with carrying strap",    category: "Sports & Outdoors",    rating: 4,
+    reviews: "1.6k"},
+];
+
+const categories = ["All", "Electronics", "Home & Office", "Sports & Outdoors"];
 
 export default function ProductsPage() {
   const navItems = [
     { name: "Home", id: "/" },
-    { name: "How It Works", id: "how-it-works" },
-    { name: "Top Products", id: "products" },
-    { name: "Pricing", id: "pricing" },
-    { name: "Contact", id: "contact" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Top Products", id: "/products" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
   ];
 
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("All");
+
+  const filteredProducts = useMemo(() => {
+    return allProducts.filter((product) => {
+      const matchesSearch = product.name
+        .toLowerCase()
+        .includes(searchTerm.toLowerCase()) ||
+        product.category.toLowerCase().includes(searchTerm.toLowerCase());
+      const matchesCategory = selectedCategory === "All" || product.category === selectedCategory;
+      return matchesSearch && matchesCategory;
+    });
+  }, [searchTerm, selectedCategory]);
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -35,64 +88,121 @@ export default function ProductsPage() {
         <NavbarStyleApple brandName="ProductHuntr" navItems={navItems} />
       </div>
 
-      <div id="products" data-section="products">
-        <ProductCardOne
-          title="Currently Trending Products"
-          description="These products are trending right now across all major marketplaces. Click any to view and earn commission on each purchase."
-          tag="Hot Right Now"
-          tagIcon={TrendingUp}
-          products={[
-            {
-              id: "1",              name: "Wireless Smart Earbuds Pro",              price: "$59.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/high-quality-product-image-of-trending-c-1772797250769-19781c41.png",              imageAlt: "Trending wireless earbuds with active noise cancellation"},
-            {
-              id: "2",              name: "Portable Power Bank 20000mAh",              price: "$24.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/lifestyle-product-image-showing-popular--1772797252162-c42c95c9.png",              imageAlt: "High-capacity portable power bank for mobile devices"},
-            {
-              id: "3",              name: "LED Desk Lamp with USB Charging",              price: "$34.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/fashion-or-accessories-product-image-sho-1772797252391-aef17d9d.png",              imageAlt: "Modern LED desk lamp with built-in USB charging port"},
-            {
-              id: "4",              name: "Premium Wireless Mouse",              price: "$45.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/high-quality-product-image-of-trending-c-1772797250769-19781c41.png",              imageAlt: "Ergonomic wireless mouse with precision tracking"},
-            {
-              id: "5",              name: "Smart Home Speaker System",              price: "$89.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/lifestyle-product-image-showing-popular--1772797252162-c42c95c9.png",              imageAlt: "Advanced smart speaker with voice control"},
-            {
-              id: "6",              name: "Ultra-Fast USB-C Hub",              price: "$39.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/fashion-or-accessories-product-image-sho-1772797252391-aef17d9d.png",              imageAlt: "Multi-port USB-C hub for laptops and devices"},
-          ]}
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
+      <div className="min-h-screen pt-32 pb-20">
+        <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
+          {/* Header */}
+          <div className="mb-12">
+            <h1 className="text-5xl sm:text-6xl font-bold mb-4">Product Catalog</h1>
+            <p className="text-lg text-foreground/70 max-w-2xl">
+              Browse trending products across all categories. Each product is AI-verified for quality and conversion potential.
+            </p>
+          </div>
 
-      <div id="metrics" data-section="metrics">
-        <MetricCardEleven
-          title="Why These Products Convert"
-          description="Our AI-curated selection is based on real consumer behavior and marketplace performance data"
-          tag="Product Performance"
-          tagIcon={BarChart3}
-          metrics={[
-            {
-              id: "1",              value: "99.8%",              title: "Stock Availability",              description: "Products verified in stock across all retailers",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/visualization-showing-thousands-of-produ-1772797251927-695004ad.png",              imageAlt: "Product inventory management dashboard"},
-            {
-              id: "2",              value: "4.7★",              title: "Average Rating",              description: "Minimum 4.5 stars across all platforms",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZPWQCWDl0BG7OaRt0W4bMN2B9/analytics-dashboard-showing-conversion-r-1772797252476-a60ac16b.png",              imageAlt: "Customer rating analytics"},
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
+          {/* Search and Filter Bar */}
+          <div className="mb-8 space-y-4">
+            {/* Search */}
+            <div className="relative">
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-foreground/40" />
+              <input
+                type="text"
+                placeholder="Search products by name or category..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full pl-12 pr-4 py-3 rounded-lg bg-card border border-foreground/10 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+              />
+            </div>
 
-      <div id="contact" data-section="contact">
-        <ContactCTA
-          tag="Start Earning Today"
-          tagIcon={Rocket}
-          title="Ready to Monetize These Products?"
-          description="Pick any product above, share it with your audience, and earn commission on every sale. No experience required. Start earning passive income immediately."
-          background={{ variant: "plain" }}
-          buttons={[
-            { text: "Claim Your Free Account", href: "#" },
-            { text: "See Earnings Dashboard", href: "#" },
-          ]}
-          useInvertedBackground={false}
-        />
+            {/* Category Filter */}
+            <div className="flex flex-wrap gap-2">
+              {categories.map((category) => (
+                <button
+                  key={category}
+                  onClick={() => setSelectedCategory(category)}
+                  className={`px-4 py-2 rounded-lg font-medium transition-all ${
+                    selectedCategory === category
+                      ? "bg-primary-cta text-background"
+                      : "bg-card border border-foreground/10 text-foreground hover:border-primary-cta"
+                  }`}
+                >
+                  {category}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Results Counter */}
+          <div className="mb-6">
+            <p className="text-foreground/60">
+              Showing <span className="font-semibold text-foreground">{filteredProducts.length}</span> products
+            </p>
+          </div>
+
+          {/* Products Grid */}
+          {filteredProducts.length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+              {filteredProducts.map((product) => (
+                <Link
+                  key={product.id}
+                  href={`/products/${product.id}`}
+                  className="group"
+                >
+                  <div className="bg-card rounded-lg overflow-hidden border border-foreground/10 hover:border-primary-cta transition-all hover:shadow-lg">
+                    {/* Product Image */}
+                    <div className="relative overflow-hidden aspect-square bg-background">
+                      <img
+                        src={product.imageSrc}
+                        alt={product.imageAlt}
+                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                      />
+                      <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
+                    </div>
+
+                    {/* Product Info */}
+                    <div className="p-4">
+                      <p className="text-sm text-foreground/60 mb-2">{product.category}</p>
+                      <h3 className="font-semibold text-lg mb-3 group-hover:text-primary-cta transition-colors line-clamp-2">
+                        {product.name}
+                      </h3>
+
+                      {/* Rating */}
+                      <div className="flex items-center gap-2 mb-3">
+                        <div className="flex">
+                          {[...Array(5)].map((_, i) => (
+                            <span
+                              key={i}
+                              className={`text-sm ${
+                                i < product.rating ? "text-yellow-400" : "text-foreground/20"
+                              }`}
+                            >
+                              ★
+                            </span>
+                          ))}
+                        </div>
+                        <span className="text-sm text-foreground/60">({product.reviews})</span>
+                      </div>
+
+                      {/* Price */}
+                      <p className="text-2xl font-bold text-primary-cta">{product.price}</p>
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-20">
+              <p className="text-xl text-foreground/60 mb-4">No products found matching your criteria.</p>
+              <button
+                onClick={() => {
+                  setSearchTerm("");
+                  setSelectedCategory("All");
+                }}
+                className="px-6 py-2 bg-primary-cta text-background rounded-lg font-medium hover:opacity-90 transition-opacity"
+              >
+                Reset Filters
+              </button>
+            </div>
+          )}
+        </div>
       </div>
 
       <div id="footer" data-section="footer">
@@ -100,7 +210,7 @@ export default function ProductsPage() {
           columns={[
             {
               title: "Product",              items: [
-                { label: "How It Works", href: "#how-it-works" },
+                { label: "How It Works", href: "/how-it-works" },
                 { label: "Top Products", href: "/products" },
                 { label: "Pricing", href: "/pricing" },
                 { label: "Dashboard", href: "#" },
@@ -108,10 +218,10 @@ export default function ProductsPage() {
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#" },
+                { label: "About Us", href: "/" },
                 { label: "Blog", href: "#" },
                 { label: "Careers", href: "#" },
-                { label: "Contact", href: "#" },
+                { label: "Contact", href: "/contact" },
               ],
             },
             {
@@ -128,4 +238,4 @@ export default function ProductsPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/profile/page.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { User, Settings, LogOut } from "lucide-react";
+
+export default function ProfilePage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Top Products", id: "/products" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple brandName="ProductHuntr" navItems={navItems} />
+      </div>
+
+      <div id="profile" data-section="profile" className="min-h-screen py-20">
+        <div className="max-w-4xl mx-auto px-4">
+          <h1 className="text-4xl font-bold mb-8">Account Profile</h1>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Sidebar */}
+            <div className="lg:col-span-1">
+              <div className="bg-white rounded-xl p-6 shadow-sm">
+                <div className="flex flex-col items-center">
+                  <div className="w-20 h-20 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-full flex items-center justify-center text-white mb-4">
+                    <User size={32} />
+                  </div>
+                  <h2 className="text-xl font-bold mb-1">User Account</h2>
+                  <p className="text-sm text-gray-600 mb-6">Individual Creator</p>
+
+                  <nav className="w-full space-y-2">
+                    <button className="w-full text-left px-4 py-2 rounded-lg bg-blue-100 text-blue-600 font-medium flex items-center gap-2">
+                      <User size={18} /> Profile Info
+                    </button>
+                    <button className="w-full text-left px-4 py-2 rounded-lg hover:bg-gray-100 flex items-center gap-2">
+                      <Settings size={18} /> Settings
+                    </button>
+                    <button className="w-full text-left px-4 py-2 rounded-lg hover:bg-gray-100 text-red-600 flex items-center gap-2">
+                      <LogOut size={18} /> Logout
+                    </button>
+                  </nav>
+                </div>
+              </div>
+            </div>
+
+            {/* Main Content */}
+            <div className="lg:col-span-2 space-y-6">
+              {/* Profile Information */}
+              <div className="bg-white rounded-xl p-6 shadow-sm">
+                <h3 className="text-2xl font-bold mb-6">Profile Information</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-600 mb-2">First Name</label>
+                    <input
+                      type="text"
+                      defaultValue="John"
+                      className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-600 mb-2">Last Name</label>
+                    <input
+                      type="text"
+                      defaultValue="Doe"
+                      className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+                  <div className="md:col-span-2">
+                    <label className="block text-sm font-medium text-gray-600 mb-2">Email</label>
+                    <input
+                      type="email"
+                      defaultValue="john@example.com"
+                      className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+                  <div className="md:col-span-2">
+                    <label className="block text-sm font-medium text-gray-600 mb-2">Bio</label>
+                    <textarea
+                      defaultValue="Digital entrepreneur focused on passive income strategies."
+                      className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      rows={4}
+                    />
+                  </div>
+                </div>
+                <button className="mt-4 bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 transition">
+                  Save Changes
+                </button>
+              </div>
+
+              {/* Account Statistics */}
+              <div className="bg-white rounded-xl p-6 shadow-sm">
+                <h3 className="text-2xl font-bold mb-6">Account Statistics</h3>
+                <div className="grid grid-cols-3 gap-4">
+                  <div className="text-center p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg">
+                    <p className="text-3xl font-bold text-blue-600">$2,450</p>
+                    <p className="text-sm text-gray-600 mt-1">Total Earnings</p>
+                  </div>
+                  <div className="text-center p-4 bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg">
+                    <p className="text-3xl font-bold text-green-600">127</p>
+                    <p className="text-sm text-gray-600 mt-1">Products Shared</p>
+                  </div>
+                  <div className="text-center p-4 bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg">
+                    <p className="text-3xl font-bold text-purple-600">89</p>
+                    <p className="text-sm text-gray-600 mt-1">Conversions</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "How It Works", href: "/how-it-works" },
+                { label: "Top Products", href: "/products" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "Dashboard", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/contact" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Affiliate Disclosure", href: "#" },
+              ],
+            },
+          ]}
+          copyrightText="© 2025 ProductHuntr. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/settings/page.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Bell, Lock, Eye } from "lucide-react";
+
+export default function SettingsPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Top Products", id: "/products" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple brandName="ProductHuntr" navItems={navItems} />
+      </div>
+
+      <div id="settings" data-section="settings" className="min-h-screen py-20">
+        <div className="max-w-2xl mx-auto px-4">
+          <h1 className="text-4xl font-bold mb-8">Settings</h1>
+
+          {/* Notification Settings */}
+          <div className="bg-white rounded-xl p-6 shadow-sm mb-6">
+            <div className="flex items-center mb-6">
+              <Bell className="text-blue-600 mr-3" size={24} />
+              <h2 className="text-2xl font-bold">Notifications</h2>
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Email Notifications</p>
+                  <p className="text-sm text-gray-600">Receive updates about your earnings and account</p>
+                </div>
+                <input type="checkbox" defaultChecked className="w-5 h-5" />
+              </div>
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Product Alerts</p>
+                  <p className="text-sm text-gray-600">Get notified when new trending products are available</p>
+                </div>
+                <input type="checkbox" defaultChecked className="w-5 h-5" />
+              </div>
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Weekly Digest</p>
+                  <p className="text-sm text-gray-600">Receive a weekly summary of your performance</p>
+                </div>
+                <input type="checkbox" defaultChecked className="w-5 h-5" />
+              </div>
+            </div>
+          </div>
+
+          {/* Privacy Settings */}
+          <div className="bg-white rounded-xl p-6 shadow-sm mb-6">
+            <div className="flex items-center mb-6">
+              <Eye className="text-purple-600 mr-3" size={24} />
+              <h2 className="text-2xl font-bold">Privacy</h2>
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Profile Visibility</p>
+                  <p className="text-sm text-gray-600">Allow other users to see your profile</p>
+                </div>
+                <select className="px-3 py-1 rounded border border-gray-300">
+                  <option>Public</option>
+                  <option>Private</option>
+                  <option>Friends Only</option>
+                </select>
+              </div>
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Show Earnings</p>
+                  <p className="text-sm text-gray-600">Display your total earnings publicly</p>
+                </div>
+                <input type="checkbox" className="w-5 h-5" />
+              </div>
+            </div>
+          </div>
+
+          {/* Security Settings */}
+          <div className="bg-white rounded-xl p-6 shadow-sm mb-6">
+            <div className="flex items-center mb-6">
+              <Lock className="text-red-600 mr-3" size={24} />
+              <h2 className="text-2xl font-bold">Security</h2>
+            </div>
+
+            <div className="space-y-4">
+              <div className="py-4 border-b">
+                <p className="font-medium mb-2">Change Password</p>
+                <p className="text-sm text-gray-600 mb-4">Update your password to keep your account secure</p>
+                <button className="bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-blue-700 transition">
+                  Change Password
+                </button>
+              </div>
+              <div className="py-4">
+                <p className="font-medium mb-2">Two-Factor Authentication</p>
+                <p className="text-sm text-gray-600 mb-4">Add an extra layer of security to your account</p>
+                <button className="bg-green-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-green-700 transition">
+                  Enable 2FA
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Danger Zone */}
+          <div className="bg-red-50 rounded-xl p-6 border border-red-200">
+            <h2 className="text-2xl font-bold text-red-600 mb-4">Danger Zone</h2>
+            <button className="bg-red-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-red-700 transition">
+              Delete Account
+            </button>
+            <p className="text-sm text-gray-600 mt-2">Once you delete your account, there is no going back. Please be certain.</p>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "How It Works", href: "/how-it-works" },
+                { label: "Top Products", href: "/products" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "Dashboard", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/contact" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Affiliate Disclosure", href: "#" },
+              ],
+            },
+          ]}
+          copyrightText="© 2025 ProductHuntr. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}