Merge version_2 into main #6
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 { 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -275,4 +275,4 @@ export default function HomePage() {
|
||||
</div>
|
||||
</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", 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", 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", 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";
|
||||
|
||||
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", 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", 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", 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", 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", 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", 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", 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", 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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