Compare commits
18 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| d231a7d34c | |||
| b03320959b | |||
| a76e922f25 | |||
| bd4db3a1c0 | |||
| 9d867f20c4 | |||
| fc2aca8f44 | |||
| 158338b7be | |||
| af6744a512 | |||
| 94050583f2 | |||
| c13ab3ddeb | |||
| 9ade9b21d1 | |||
| faa0185ae9 | |||
| 56153ea13e | |||
| 53f5949bec | |||
| 21646b21db | |||
| 028c4475c3 | |||
| 0f79c10f7f | |||
| f9c652af12 |
311
src/app/admin/page.tsx
Normal file
311
src/app/admin/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
151
src/app/auth/page.tsx
Normal file
151
src/app/auth/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
157
src/app/dashboard/page.tsx
Normal file
157
src/app/dashboard/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,75 +1,24 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Halant } from "next/font/google";
|
|
||||||
import { Inter } from "next/font/google";
|
import { Inter } from "next/font/google";
|
||||||
import { Roboto } from "next/font/google";
|
|
||||||
import "./globals.css";
|
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({
|
const inter = Inter({
|
||||||
variable: "--font-inter",
|
variable: "--font-inter", subsets: ["latin"],
|
||||||
subsets: ["latin"],
|
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
||||||
});
|
|
||||||
|
|
||||||
const roboto = Roboto({
|
|
||||||
variable: "--font-roboto",
|
|
||||||
subsets: ["latin"],
|
|
||||||
weight: ["100", "300", "400", "500", "700", "900"],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "ProductHuntr - AI Product Hunting Platform for Passive Income",
|
title: "ProductHuntr - AI-Powered Affiliate Marketing Platform", description:
|
||||||
description: "Discover trending products from Amazon, Walmart, Alibaba & eBay with AI. Monetize through affiliate links on Instagram, TikTok, Pinterest & Facebook. Zero investment required.",
|
"Discover trending products automatically with AI. Earn passive income through affiliate marketing with zero investment."};
|
||||||
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,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en">
|
||||||
<ServiceWrapper>
|
<body className={`${inter.variable}`}>{children}
|
||||||
<body
|
|
||||||
className={`${halant.variable} ${inter.variable} ${roboto.variable} antialiased`}
|
|
||||||
>
|
|
||||||
<Tag />
|
|
||||||
{children}
|
|
||||||
|
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
__html: `
|
__html: `
|
||||||
@@ -1437,7 +1386,6 @@ export default function RootLayout({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</body>
|
</body>
|
||||||
</ServiceWrapper>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
110
src/app/login/page.tsx
Normal file
110
src/app/login/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -115,13 +115,13 @@ export default function HomePage() {
|
|||||||
tagIcon={TrendingUp}
|
tagIcon={TrendingUp}
|
||||||
products={[
|
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"
|
gridVariant="three-columns-all-equal-width"
|
||||||
@@ -275,4 +275,4 @@ export default function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
323
src/app/products/[id]/page.tsx
Normal file
323
src/app/products/[id]/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,23 +1,76 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useMemo } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
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 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() {
|
export default function ProductsPage() {
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ name: "Home", id: "/" },
|
{ name: "Home", id: "/" },
|
||||||
{ name: "How It Works", id: "how-it-works" },
|
{ name: "How It Works", id: "/how-it-works" },
|
||||||
{ name: "Top Products", id: "products" },
|
{ name: "Top Products", id: "/products" },
|
||||||
{ name: "Pricing", id: "pricing" },
|
{ name: "Pricing", id: "/pricing" },
|
||||||
{ name: "Contact", id: "contact" },
|
{ 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 (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="text-stagger"
|
defaultButtonVariant="text-stagger"
|
||||||
@@ -35,64 +88,121 @@ export default function ProductsPage() {
|
|||||||
<NavbarStyleApple brandName="ProductHuntr" navItems={navItems} />
|
<NavbarStyleApple brandName="ProductHuntr" navItems={navItems} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="products" data-section="products">
|
<div className="min-h-screen pt-32 pb-20">
|
||||||
<ProductCardOne
|
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
title="Currently Trending Products"
|
{/* Header */}
|
||||||
description="These products are trending right now across all major marketplaces. Click any to view and earn commission on each purchase."
|
<div className="mb-12">
|
||||||
tag="Hot Right Now"
|
<h1 className="text-5xl sm:text-6xl font-bold mb-4">Product Catalog</h1>
|
||||||
tagIcon={TrendingUp}
|
<p className="text-lg text-foreground/70 max-w-2xl">
|
||||||
products={[
|
Browse trending products across all categories. Each product is AI-verified for quality and conversion potential.
|
||||||
{
|
</p>
|
||||||
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"},
|
</div>
|
||||||
{
|
|
||||||
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 id="metrics" data-section="metrics">
|
{/* Search and Filter Bar */}
|
||||||
<MetricCardEleven
|
<div className="mb-8 space-y-4">
|
||||||
title="Why These Products Convert"
|
{/* Search */}
|
||||||
description="Our AI-curated selection is based on real consumer behavior and marketplace performance data"
|
<div className="relative">
|
||||||
tag="Product Performance"
|
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-foreground/40" />
|
||||||
tagIcon={BarChart3}
|
<input
|
||||||
metrics={[
|
type="text"
|
||||||
{
|
placeholder="Search products by name or category..."
|
||||||
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"},
|
value={searchTerm}
|
||||||
{
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
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"},
|
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"
|
||||||
]}
|
/>
|
||||||
animationType="slide-up"
|
</div>
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
{/* Category Filter */}
|
||||||
<ContactCTA
|
<div className="flex flex-wrap gap-2">
|
||||||
tag="Start Earning Today"
|
{categories.map((category) => (
|
||||||
tagIcon={Rocket}
|
<button
|
||||||
title="Ready to Monetize These Products?"
|
key={category}
|
||||||
description="Pick any product above, share it with your audience, and earn commission on every sale. No experience required. Start earning passive income immediately."
|
onClick={() => setSelectedCategory(category)}
|
||||||
background={{ variant: "plain" }}
|
className={`px-4 py-2 rounded-lg font-medium transition-all ${
|
||||||
buttons={[
|
selectedCategory === category
|
||||||
{ text: "Claim Your Free Account", href: "#" },
|
? "bg-primary-cta text-background"
|
||||||
{ text: "See Earnings Dashboard", href: "#" },
|
: "bg-card border border-foreground/10 text-foreground hover:border-primary-cta"
|
||||||
]}
|
}`}
|
||||||
useInvertedBackground={false}
|
>
|
||||||
/>
|
{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>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
@@ -100,7 +210,7 @@ export default function ProductsPage() {
|
|||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
title: "Product", items: [
|
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: "Top Products", href: "/products" },
|
||||||
{ label: "Pricing", href: "/pricing" },
|
{ label: "Pricing", href: "/pricing" },
|
||||||
{ label: "Dashboard", href: "#" },
|
{ label: "Dashboard", href: "#" },
|
||||||
@@ -108,10 +218,10 @@ export default function ProductsPage() {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Company", items: [
|
title: "Company", items: [
|
||||||
{ label: "About Us", href: "#" },
|
{ label: "About Us", href: "/" },
|
||||||
{ label: "Blog", href: "#" },
|
{ label: "Blog", href: "#" },
|
||||||
{ label: "Careers", href: "#" },
|
{ label: "Careers", href: "#" },
|
||||||
{ label: "Contact", href: "#" },
|
{ label: "Contact", href: "/contact" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -128,4 +238,4 @@ export default function ProductsPage() {
|
|||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
164
src/app/profile/page.tsx
Normal file
164
src/app/profile/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
168
src/app/settings/page.tsx
Normal file
168
src/app/settings/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user