Merge version_2 into main #3
288
src/app/page.tsx
288
src/app/page.tsx
@@ -11,8 +11,70 @@ import FaqBase from "@/components/sections/faq/FaqBase";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { Sparkles, TrendingUp, Award, CheckCircle, HelpCircle } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function HomePage() {
|
||||
const [productData, setProductData] = useState({
|
||||
bestSellers: [],
|
||||
newArrivals: [],
|
||||
featured: [],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchProductData = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/products");
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setProductData({
|
||||
bestSellers: data.bestSellers || [],
|
||||
newArrivals: data.newArrivals || [],
|
||||
featured: data.featured || [],
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching product data:", error);
|
||||
setProductData({
|
||||
bestSellers: getDefaultBestSellers(),
|
||||
newArrivals: getDefaultNewArrivals(),
|
||||
featured: [],
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
fetchProductData();
|
||||
}, []);
|
||||
|
||||
const getDefaultBestSellers = () => [
|
||||
{
|
||||
id: "product-001", name: "Wireless Noise-Cancelling Headphones", price: "$89.99", variant: "Midnight Black", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-product-photography-of-wire-1774089871179-dad3954a.png", imageAlt: "Wireless Headphones"},
|
||||
{
|
||||
id: "product-002", name: "Ultra-Fast USB-C Charging Cable", price: "$24.99", variant: "White / 2m", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-product-photography-of-ultr-1774089872775-11e791b2.png", imageAlt: "USB-C Cable"},
|
||||
{
|
||||
id: "product-003", name: "Premium Leather Phone Case", price: "$34.99", variant: "Tan Brown", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/premium-leather-phone-case-product-photo-1774089872714-9da6e5b5.png", imageAlt: "Leather Phone Case"},
|
||||
{
|
||||
id: "product-004", name: "Smart LED Desk Lamp", price: "$59.99", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-product-photography-of-smar-1774089872669-492b9917.png", imageAlt: "LED Desk Lamp"},
|
||||
{
|
||||
id: "product-005", name: "Portable Phone Power Bank", price: "$44.99", variant: "Space Gray / 20000mAh", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/portable-phone-power-bank-product-photog-1774089872824-dd7ad66d.png", imageAlt: "Power Bank"},
|
||||
{
|
||||
id: "product-006", name: "Premium Stainless Steel Water Bottle", price: "$39.99", variant: "Midnight Blue / 750ml", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/premium-stainless-steel-water-bottle-pro-1774089871271-6a59c42c.png", imageAlt: "Water Bottle"},
|
||||
];
|
||||
|
||||
const getDefaultNewArrivals = () => [
|
||||
{
|
||||
id: "product-101", name: "AI-Powered Sleep Tracker Watch", price: "$129.99", variant: "Rose Gold", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/ai-powered-sleep-tracker-watch-product-p-1774089872108-54ee6e4d.png", imageAlt: "Sleep Tracker Watch"},
|
||||
{
|
||||
id: "product-102", name: "Eco-Friendly Bamboo Desk Organizer", price: "$29.99", variant: "Natural Wood", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/eco-friendly-bamboo-desk-organizer-produ-1774089872158-051158f1.png", imageAlt: "Bamboo Organizer"},
|
||||
{
|
||||
id: "product-103", name: "Professional Wireless Keyboard", price: "$79.99", variant: "Space Gray", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-wireless-keyboard-product-p-1774089872678-55be3f8d.png", imageAlt: "Wireless Keyboard"},
|
||||
{
|
||||
id: "product-104", name: "Smart Climate Control Hub", price: "$99.99", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/smart-climate-control-hub-product-photog-1774089872354-40e9f5d0.png", imageAlt: "Climate Control Hub"},
|
||||
{
|
||||
id: "product-105", name: "Minimalist Wallet with RFID Protection", price: "$49.99", variant: "Black Leather", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/minimalist-wallet-with-rfid-protection-p-1774089874013-12e2cbe5.png", imageAlt: "RFID Wallet"},
|
||||
{
|
||||
id: "product-106", name: "Portable Photo Printer", price: "$119.99", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/portable-photo-printer-product-photograp-1774089871537-11e434f6.png", imageAlt: "Photo Printer"},
|
||||
];
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Best Sellers", id: "best-sellers" },
|
||||
@@ -24,8 +86,7 @@ export default function HomePage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Products",
|
||||
items: [
|
||||
title: "Products", items: [
|
||||
{ label: "Best Sellers", href: "/collections/best-sellers" },
|
||||
{ label: "New Arrivals", href: "/collections/new-arrivals" },
|
||||
{ label: "Featured Products", href: "/collections/featured" },
|
||||
@@ -33,8 +94,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Our Story", href: "/our-story" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
@@ -42,8 +102,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping Information", href: "/shipping" },
|
||||
{ label: "Returns & Refunds", href: "/returns" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
@@ -51,8 +110,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
{ label: "Cookie Policy", href: "/cookies" },
|
||||
@@ -98,29 +156,17 @@ export default function HomePage() {
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/modern-premium-product-photography-showc-1774089871759-12815b24.png",
|
||||
imageAlt: "Premium Product Display 1",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/modern-premium-product-photography-showc-1774089871759-12815b24.png", imageAlt: "Premium Product Display 1"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-lifestyle-product-photograp-1774089872611-75253491.png",
|
||||
imageAlt: "Premium Product Display 2",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-lifestyle-product-photograp-1774089872611-75253491.png", imageAlt: "Premium Product Display 2"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/modern-tech-product-in-action-showing-re-1774089871679-205be3a4.png",
|
||||
imageAlt: "Premium Product Display 3",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/modern-tech-product-in-action-showing-re-1774089871679-205be3a4.png", imageAlt: "Premium Product Display 3"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/close-up-premium-product-photography-hig-1774089872757-465fec48.png",
|
||||
imageAlt: "Premium Product Display 4",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/close-up-premium-product-photography-hig-1774089872757-465fec48.png", imageAlt: "Premium Product Display 4"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/dynamic-product-photography-with-multipl-1774089872561-62674417.png",
|
||||
imageAlt: "Premium Product Display 5",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/dynamic-product-photography-with-multipl-1774089872561-62674417.png", imageAlt: "Premium Product Display 5"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/contemporary-product-photography-in-eleg-1774089872802-1b3a9fdb.png",
|
||||
imageAlt: "Premium Product Display 6",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/contemporary-product-photography-in-eleg-1774089872802-1b3a9fdb.png", imageAlt: "Premium Product Display 6"},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
ariaLabel="Hero section showcasing premium products"
|
||||
@@ -140,56 +186,7 @@ export default function HomePage() {
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "product-001",
|
||||
name: "Wireless Noise-Cancelling Headphones",
|
||||
price: "$89.99",
|
||||
variant: "Midnight Black",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-product-photography-of-wire-1774089871179-dad3954a.png",
|
||||
imageAlt: "Wireless Headphones",
|
||||
},
|
||||
{
|
||||
id: "product-002",
|
||||
name: "Ultra-Fast USB-C Charging Cable",
|
||||
price: "$24.99",
|
||||
variant: "White / 2m",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-product-photography-of-ultr-1774089872775-11e791b2.png",
|
||||
imageAlt: "USB-C Cable",
|
||||
},
|
||||
{
|
||||
id: "product-003",
|
||||
name: "Premium Leather Phone Case",
|
||||
price: "$34.99",
|
||||
variant: "Tan Brown",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/premium-leather-phone-case-product-photo-1774089872714-9da6e5b5.png",
|
||||
imageAlt: "Leather Phone Case",
|
||||
},
|
||||
{
|
||||
id: "product-004",
|
||||
name: "Smart LED Desk Lamp",
|
||||
price: "$59.99",
|
||||
variant: "White",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-product-photography-of-smar-1774089872669-492b9917.png",
|
||||
imageAlt: "LED Desk Lamp",
|
||||
},
|
||||
{
|
||||
id: "product-005",
|
||||
name: "Portable Phone Power Bank",
|
||||
price: "$44.99",
|
||||
variant: "Space Gray / 20000mAh",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/portable-phone-power-bank-product-photog-1774089872824-dd7ad66d.png",
|
||||
imageAlt: "Power Bank",
|
||||
},
|
||||
{
|
||||
id: "product-006",
|
||||
name: "Premium Stainless Steel Water Bottle",
|
||||
price: "$39.99",
|
||||
variant: "Midnight Blue / 750ml",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/premium-stainless-steel-water-bottle-pro-1774089871271-6a59c42c.png",
|
||||
imageAlt: "Water Bottle",
|
||||
},
|
||||
]}
|
||||
products={productData.bestSellers.length > 0 ? productData.bestSellers : getDefaultBestSellers()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -205,32 +202,16 @@ export default function HomePage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Free Shipping Over $50",
|
||||
description: "Enjoy free expedited shipping on all orders exceeding $50. Fast delivery guaranteed with real-time tracking.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/modern-icon-illustration-representing-fr-1774089871983-b964ea83.png?_wi=1",
|
||||
imageAlt: "Free Shipping Icon",
|
||||
},
|
||||
title: "Free Shipping Over $50", description: "Enjoy free expedited shipping on all orders exceeding $50. Fast delivery guaranteed with real-time tracking.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/modern-icon-illustration-representing-fr-1774089871983-b964ea83.png?_wi=1", imageAlt: "Free Shipping Icon"},
|
||||
{
|
||||
id: 2,
|
||||
title: "30-Day Money Back Guarantee",
|
||||
description: "Not satisfied? Get a full refund within 30 days, no questions asked. Your satisfaction is our priority.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/premium-icon-illustration-representing-m-1774089871865-39a417a8.png?_wi=1",
|
||||
imageAlt: "Money Back Guarantee",
|
||||
},
|
||||
title: "30-Day Money Back Guarantee", description: "Not satisfied? Get a full refund within 30 days, no questions asked. Your satisfaction is our priority.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/premium-icon-illustration-representing-m-1774089871865-39a417a8.png?_wi=1", imageAlt: "Money Back Guarantee"},
|
||||
{
|
||||
id: 3,
|
||||
title: "24/7 Customer Support",
|
||||
description: "Our dedicated support team is always available to help. Chat, email, or call us anytime for immediate assistance.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/modern-customer-support-icon-illustratio-1774089872089-7cd7f34f.png?_wi=1",
|
||||
imageAlt: "Customer Support",
|
||||
},
|
||||
title: "24/7 Customer Support", description: "Our dedicated support team is always available to help. Chat, email, or call us anytime for immediate assistance.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/modern-customer-support-icon-illustratio-1774089872089-7cd7f34f.png?_wi=1", imageAlt: "Customer Support"},
|
||||
{
|
||||
id: 4,
|
||||
title: "Secure Checkout",
|
||||
description: "Industry-leading SSL encryption protects your data. Shop with confidence using trusted payment methods.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-security-icon-illustration--1774089872079-e587b0cb.png?_wi=1",
|
||||
imageAlt: "Secure Payment",
|
||||
},
|
||||
title: "Secure Checkout", description: "Industry-leading SSL encryption protects your data. Shop with confidence using trusted payment methods.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-security-icon-illustration--1774089872079-e587b0cb.png?_wi=1", imageAlt: "Secure Payment"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -248,56 +229,7 @@ export default function HomePage() {
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "product-101",
|
||||
name: "AI-Powered Sleep Tracker Watch",
|
||||
price: "$129.99",
|
||||
variant: "Rose Gold",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/ai-powered-sleep-tracker-watch-product-p-1774089872108-54ee6e4d.png",
|
||||
imageAlt: "Sleep Tracker Watch",
|
||||
},
|
||||
{
|
||||
id: "product-102",
|
||||
name: "Eco-Friendly Bamboo Desk Organizer",
|
||||
price: "$29.99",
|
||||
variant: "Natural Wood",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/eco-friendly-bamboo-desk-organizer-produ-1774089872158-051158f1.png",
|
||||
imageAlt: "Bamboo Organizer",
|
||||
},
|
||||
{
|
||||
id: "product-103",
|
||||
name: "Professional Wireless Keyboard",
|
||||
price: "$79.99",
|
||||
variant: "Space Gray",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-wireless-keyboard-product-p-1774089872678-55be3f8d.png",
|
||||
imageAlt: "Wireless Keyboard",
|
||||
},
|
||||
{
|
||||
id: "product-104",
|
||||
name: "Smart Climate Control Hub",
|
||||
price: "$99.99",
|
||||
variant: "White",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/smart-climate-control-hub-product-photog-1774089872354-40e9f5d0.png",
|
||||
imageAlt: "Climate Control Hub",
|
||||
},
|
||||
{
|
||||
id: "product-105",
|
||||
name: "Minimalist Wallet with RFID Protection",
|
||||
price: "$49.99",
|
||||
variant: "Black Leather",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/minimalist-wallet-with-rfid-protection-p-1774089874013-12e2cbe5.png",
|
||||
imageAlt: "RFID Wallet",
|
||||
},
|
||||
{
|
||||
id: "product-106",
|
||||
name: "Portable Photo Printer",
|
||||
price: "$119.99",
|
||||
variant: "White",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/portable-photo-printer-product-photograp-1774089871537-11e434f6.png",
|
||||
imageAlt: "Photo Printer",
|
||||
},
|
||||
]}
|
||||
products={productData.newArrivals.length > 0 ? productData.newArrivals : getDefaultNewArrivals()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -308,21 +240,13 @@ export default function HomePage() {
|
||||
author="Sarah Mitchell & Team"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-headshot-photography-of-a-p-1774089874660-b2799511.png",
|
||||
alt: "Sarah Mitchell",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-headshot-photography-of-a-p-1774089874660-b2799511.png", alt: "Sarah Mitchell"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-headshot-photography-of-a-p-1774089871589-718d1682.png",
|
||||
alt: "James Chen",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-headshot-photography-of-a-p-1774089871589-718d1682.png", alt: "James Chen"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-headshot-photography-of-a-p-1774089873003-ce85b845.png",
|
||||
alt: "Emma Rodriguez",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-headshot-photography-of-a-p-1774089873003-ce85b845.png", alt: "Emma Rodriguez"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-headshot-photography-of-a-p-1774089872442-c70d717d.png",
|
||||
alt: "Michael Park",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-headshot-photography-of-a-p-1774089872442-c70d717d.png", alt: "Michael Park"},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="blur-reveal"
|
||||
@@ -342,23 +266,9 @@ export default function HomePage() {
|
||||
speed={40}
|
||||
showCard={true}
|
||||
names={[
|
||||
"TechCorp",
|
||||
"RetailPro",
|
||||
"FastShip",
|
||||
"GrowthCo",
|
||||
"DigitalHub",
|
||||
"EliteStore",
|
||||
"PremiumGoods",
|
||||
]}
|
||||
"TechCorp", "RetailPro", "FastShip", "GrowthCo", "DigitalHub", "EliteStore", "PremiumGoods"]}
|
||||
logos={[
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/modern-tech-company-logo-design-minimali-1774089872465-bb219c15.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-retail-company-logo-design--1774089872291-98981719.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/shipping-company-logo-design-emphasizing-1774089872235-fce03204.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/growth-focused-company-logo-with-modern--1774089872783-652d746d.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/digital-technology-hub-logo-with-modern--1774089871362-d67305d6.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/premium-retail-store-logo-with-luxury-br-1774089871353-9625ecc0.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/premium-goods-company-logo-with-luxury-a-1774089872196-d4e1fcf2.png",
|
||||
]}
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/modern-tech-company-logo-design-minimali-1774089872465-bb219c15.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-retail-company-logo-design--1774089872291-98981719.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/shipping-company-logo-design-emphasizing-1774089872235-fce03204.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/growth-focused-company-logo-with-modern--1774089872783-652d746d.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/digital-technology-hub-logo-with-modern--1774089871362-d67305d6.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/premium-retail-store-logo-with-luxury-br-1774089871353-9625ecc0.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/premium-goods-company-logo-with-luxury-a-1774089872196-d4e1fcf2.png"]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -378,35 +288,17 @@ export default function HomePage() {
|
||||
showCard={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1",
|
||||
title: "How does product linking work?",
|
||||
content: "Every product card is fully clickable and dynamically linked to its dedicated product page. Simply click on any product card or image to view full details, specifications, variants, pricing, customer reviews, and complete purchasing options. Our system ensures seamless navigation from browsing to checkout.",
|
||||
},
|
||||
id: "faq-1", title: "How does product linking work?", content: "Every product card is fully clickable and dynamically linked to its dedicated product page. Simply click on any product card or image to view full details, specifications, variants, pricing, customer reviews, and complete purchasing options. Our system ensures seamless navigation from browsing to checkout."},
|
||||
{
|
||||
id: "faq-2",
|
||||
title: "What is your shipping policy?",
|
||||
content: "We offer free expedited shipping on all orders over $50. Standard shipping takes 5-7 business days, while expedited shipping arrives in 2-3 business days. All orders are fully tracked with real-time updates. International shipping is available to select countries.",
|
||||
},
|
||||
id: "faq-2", title: "What is your shipping policy?", content: "We offer free expedited shipping on all orders over $50. Standard shipping takes 5-7 business days, while expedited shipping arrives in 2-3 business days. All orders are fully tracked with real-time updates. International shipping is available to select countries."},
|
||||
{
|
||||
id: "faq-3",
|
||||
title: "Can I return products within 30 days?",
|
||||
content: "Absolutely! We offer a hassle-free 30-day money-back guarantee. If you're not completely satisfied with any purchase, simply contact our support team for a prepaid return label. Once we receive and inspect your item, we'll process a full refund within 5-7 business days.",
|
||||
},
|
||||
id: "faq-3", title: "Can I return products within 30 days?", content: "Absolutely! We offer a hassle-free 30-day money-back guarantee. If you're not completely satisfied with any purchase, simply contact our support team for a prepaid return label. Once we receive and inspect your item, we'll process a full refund within 5-7 business days."},
|
||||
{
|
||||
id: "faq-4",
|
||||
title: "Are your products Shopify-compatible?",
|
||||
content: "Yes! Our entire product catalog is fully optimized for Shopify integration. All products include detailed specifications, high-quality images, variant options, and SEO-friendly descriptions. Our dropshipping system seamlessly integrates with Shopify stores through our API and fulfillment partners.",
|
||||
},
|
||||
id: "faq-4", title: "Are your products Shopify-compatible?", content: "Yes! Our entire product catalog is fully optimized for Shopify integration. All products include detailed specifications, high-quality images, variant options, and SEO-friendly descriptions. Our dropshipping system seamlessly integrates with Shopify stores through our API and fulfillment partners."},
|
||||
{
|
||||
id: "faq-5",
|
||||
title: "How do I track my order?",
|
||||
content: "All orders receive a tracking number via email immediately after shipment. You can track your package in real-time through our website or the carrier's tracking portal. Most orders include SMS updates at key shipment milestones for your convenience.",
|
||||
},
|
||||
id: "faq-5", title: "How do I track my order?", content: "All orders receive a tracking number via email immediately after shipment. You can track your package in real-time through our website or the carrier's tracking portal. Most orders include SMS updates at key shipment milestones for your convenience."},
|
||||
{
|
||||
id: "faq-6",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, Apple Pay, and Google Pay. All transactions are protected by industry-leading SSL encryption and fraud detection systems for maximum security.",
|
||||
},
|
||||
id: "faq-6", title: "What payment methods do you accept?", content: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, Apple Pay, and Google Pay. All transactions are protected by industry-leading SSL encryption and fraud detection systems for maximum security."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
395
src/app/products/[id]/page.tsx
Normal file
395
src/app/products/[id]/page.tsx
Normal file
@@ -0,0 +1,395 @@
|
||||
"use client";
|
||||
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { ArrowLeft, Star, ShoppingCart, Heart, Truck, Shield, RefreshCw } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
const productDatabase: Record<string, any> = {
|
||||
"product-001": {
|
||||
name: "Wireless Noise-Cancelling Headphones", price: "$89.99", originalPrice: "$129.99", rating: 4.8,
|
||||
reviewCount: 342,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-product-photography-of-wire-1774089871179-dad3954a.png", variants: ["Midnight Black", "Silver", "Champagne Gold"],
|
||||
description: "Experience premium audio with active noise cancellation technology. These wireless headphones deliver crystal-clear sound with deep bass, comfortable over-ear design, and 30-hour battery life. Perfect for music lovers, professionals, and travelers.", features: [
|
||||
"Active Noise Cancellation (ANC)", "30-hour battery life", "Wireless Bluetooth 5.0", "Premium noise-isolating design", "Built-in microphone for calls", "Comfortable over-ear fit", "Foldable design with carrying case"],
|
||||
specs: {
|
||||
"Frequency Response": "20Hz - 20kHz", "Driver Size": "40mm", "Weight": "250g", "Connection Type": "Bluetooth 5.0", "Battery Type": "Lithium-ion", "Charging Time": "2 hours"},
|
||||
},
|
||||
"product-002": {
|
||||
name: "Ultra-Fast USB-C Charging Cable", price: "$24.99", originalPrice: "$39.99", rating: 4.9,
|
||||
reviewCount: 587,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-product-photography-of-ultr-1774089872775-11e791b2.png", variants: ["White / 2m", "Black / 2m", "White / 3m", "Black / 3m"],
|
||||
description: "Fast, reliable USB-C charging for all your devices. This premium cable supports up to 100W fast charging, making it perfect for phones, tablets, and laptops. Durable braided construction ensures longevity and flexibility.", features: [
|
||||
"100W fast charging support", "Durable braided nylon design", "High-speed data transfer (480 Mbps)", "Available in 2m and 3m lengths", "Universal USB-C compatibility", "Tangle-free cable management", "5-year warranty included"],
|
||||
specs: {
|
||||
"Length Options": "2m, 3m", "Max Power Output": "100W", "Data Transfer Speed": "480 Mbps", "Connector Type": "USB-C to USB-C", "Material": "Braided Nylon", "Warranty": "5 years"},
|
||||
},
|
||||
"product-003": {
|
||||
name: "Premium Leather Phone Case", price: "$34.99", originalPrice: "$59.99", rating: 4.7,
|
||||
reviewCount: 289,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/premium-leather-phone-case-product-photo-1774089872714-9da6e5b5.png", variants: ["Tan Brown", "Black", "Burgundy", "Caramel"],
|
||||
description: "Protect your phone in style with our genuine leather case. Handcrafted from premium Italian leather, this case combines protection with elegance. Perfect for those who appreciate quality craftsmanship.", features: [
|
||||
"Genuine Italian leather", "Handcrafted construction", "Precise cutouts for all ports", "Premium protective design", "Available in 4 colors", "Aging with character", "Slim profile design"],
|
||||
specs: {
|
||||
"Material": "Genuine Italian Leather", "Compatibility": "iPhone 14/15/Pro models", "Colors": "Tan Brown, Black, Burgundy, Caramel", "Thickness": "8mm", "Weight": "45g"},
|
||||
},
|
||||
"product-004": {
|
||||
name: "Smart LED Desk Lamp", price: "$59.99", originalPrice: "$89.99", rating: 4.6,
|
||||
reviewCount: 156,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-product-photography-of-smar-1774089872669-492b9917.png", variants: ["White", "Black", "Silver"],
|
||||
description: "Illuminate your workspace with smart LED technology. Adjustable brightness, color temperature, and USB charging port make this lamp perfect for work, study, or reading.", features: [
|
||||
"Smart brightness adjustment", "Adjustable color temperature", "USB charging port", "Touch control interface", "Memory function", "Energy-efficient LED", "Flexible gooseneck"],
|
||||
specs: {
|
||||
"Power Output": "12W LED", "Brightness Levels": "10 adjustable levels", "Color Temperature": "2700K - 6500K", "USB Port": "5V/2A", "Dimensions": "40cm height", "Material": "Aluminum alloy"},
|
||||
},
|
||||
"product-005": {
|
||||
name: "Portable Phone Power Bank", price: "$44.99", originalPrice: "$69.99", rating: 4.8,
|
||||
reviewCount: 412,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/portable-phone-power-bank-product-photog-1774089872824-dd7ad66d.png", variants: ["Space Gray / 20000mAh", "Black / 20000mAh", "Space Gray / 30000mAh"],
|
||||
description: "Stay powered on the go with our high-capacity power bank. Fast charging technology and compact design make it the perfect travel companion.", features: [
|
||||
"20000mAh/30000mAh capacity", "Dual USB-C ports", "Fast charging support", "Compact, portable design", "LED power indicator", "Multiple device charging", "Includes USB-C cable"],
|
||||
specs: {
|
||||
"Capacity": "20000mAh or 30000mAh", "Output": "Dual USB-C", "Input": "USB-C", "Fast Charging": "Yes (65W)", "Dimensions": "150 x 75 x 18mm (20000mAh)", "Weight": "360g (20000mAh)"},
|
||||
},
|
||||
"product-006": {
|
||||
name: "Premium Stainless Steel Water Bottle", price: "$39.99", originalPrice: "$59.99", rating: 4.9,
|
||||
reviewCount: 523,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/premium-stainless-steel-water-bottle-pro-1774089871271-6a59c42c.png", variants: ["Midnight Blue / 750ml", "Silver / 750ml", "Midnight Blue / 1L"],
|
||||
description: "Keep your beverages at the perfect temperature with our premium insulated water bottle. Durable stainless steel construction keeps drinks cold for 24 hours or hot for 12 hours.", features: [
|
||||
"Double-wall vacuum insulation", "Temperature retention: 24h cold, 12h hot", "Stainless steel construction", "BPA-free materials", "Leak-proof cap", "Available in 750ml and 1L", "Eco-friendly design"],
|
||||
specs: {
|
||||
"Material": "Food-grade stainless steel", "Capacity": "750ml or 1L", "Insulation": "Double-wall vacuum", "Weight": "420g (750ml)", "Dimensions": "26cm height x 7.5cm diameter", "Colors": "Midnight Blue, Silver"},
|
||||
},
|
||||
"product-101": {
|
||||
name: "AI-Powered Sleep Tracker Watch", price: "$129.99", originalPrice: "$179.99", rating: 4.7,
|
||||
reviewCount: 278,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/ai-powered-sleep-tracker-watch-product-p-1774089872108-54ee6e4d.png", variants: ["Rose Gold", "Silver", "Gunmetal"],
|
||||
description: "Advanced sleep tracking with AI analysis. Monitor your sleep patterns, wake times, and get personalized recommendations for better rest.", features: [
|
||||
"AI-powered sleep analysis", "Heart rate monitoring", "SpO2 tracking", "7-day battery life", "Water-resistant (50m)", "AMOLED display", "Multiple sport modes"],
|
||||
specs: {
|
||||
"Display": "1.4\" AMOLED", "Battery": "7 days", "Water Resistance": "5 ATM (50m)", "Sensors": "PPG, Accelerometer, Gyroscope", "Compatibility": "iOS and Android", "Weight": "35g"},
|
||||
},
|
||||
"product-102": {
|
||||
name: "Eco-Friendly Bamboo Desk Organizer", price: "$29.99", originalPrice: "$49.99", rating: 4.8,
|
||||
reviewCount: 195,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/eco-friendly-bamboo-desk-organizer-produ-1774089872158-051158f1.png", variants: ["Natural Wood", "Light Oak"],
|
||||
description: "Organize your desk sustainably with our bamboo organizer. Multiple compartments for pens, papers, and accessories keep everything within reach.", features: [
|
||||
"100% natural bamboo", "Eco-friendly materials", "Multiple compartments", "Sustainable sourced", "Easy to clean", "Minimalist design", "Durable construction"],
|
||||
specs: {
|
||||
"Material": "Natural bamboo", "Dimensions": "30cm x 20cm x 12cm", "Weight": "800g", "Compartments": "6", "Finish": "Natural, Light Oak"},
|
||||
},
|
||||
"product-103": {
|
||||
name: "Professional Wireless Keyboard", price: "$79.99", originalPrice: "$119.99", rating: 4.6,
|
||||
reviewCount: 234,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/professional-wireless-keyboard-product-p-1774089872678-55be3f8d.png", variants: ["Space Gray", "Silver", "Black"],
|
||||
description: "Type with precision on this professional wireless keyboard. Low-profile keys, quiet mechanical design, and excellent battery life.", features: [
|
||||
"Wireless 2.4GHz connection", "Low-profile mechanical keys", "Quiet operation", "90-hour battery life", "Multi-device compatible", "Sleek aluminum design", "Rechargeable battery"],
|
||||
specs: {
|
||||
"Connection": "Wireless 2.4GHz", "Keys": "Low-profile mechanical", "Battery": "90 hours (rechargeable)", "Compatibility": "Windows, Mac, Linux", "Dimensions": "444mm x 131mm x 22mm", "Weight": "420g"},
|
||||
},
|
||||
"product-104": {
|
||||
name: "Smart Climate Control Hub", price: "$99.99", originalPrice: "$149.99", rating: 4.7,
|
||||
reviewCount: 167,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/smart-climate-control-hub-product-photog-1774089872354-40e9f5d0.png", variants: ["White", "Black"],
|
||||
description: "Control your home temperature intelligently. Schedules, remote access, and energy-saving modes help reduce utility bills.", features: [
|
||||
"Smart temperature control", "Learning algorithm", "Remote app control", "Energy-saving modes", "Voice control compatible", "Weekly scheduling", "Energy reports"],
|
||||
specs: {
|
||||
"Display": "3.5\" touchscreen", "Connectivity": "WiFi", "Temperature Range": "10-35°C", "Compatibility": "Alexa, Google Home", "Power": "24V AC", "Dimensions": "120mm x 85mm"},
|
||||
},
|
||||
"product-105": {
|
||||
name: "Minimalist Wallet with RFID Protection", price: "$49.99", originalPrice: "$79.99", rating: 4.8,
|
||||
reviewCount: 412,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/minimalist-wallet-with-rfid-protection-p-1774089874013-12e2cbe5.png", variants: ["Black Leather", "Brown Leather", "Navy"],
|
||||
description: "Slim and secure. RFID-blocking technology protects your credit cards from unauthorized scanning while maintaining a minimalist profile.", features: [
|
||||
"RFID blocking technology", "Genuine leather", "Minimalist design", "Holds up to 8 cards", "Bill compartment", "Anti-theft protection", "Lifetime warranty"],
|
||||
specs: {
|
||||
"Material": "Genuine leather", "Capacity": "8 cards + bills", "Dimensions": "110mm x 90mm x 8mm", "Weight": "50g", "Colors": "Black, Brown, Navy", "RFID Protection": "Yes"},
|
||||
},
|
||||
"product-106": {
|
||||
name: "Portable Photo Printer", price: "$119.99", originalPrice: "$169.99", rating: 4.9,
|
||||
reviewCount: 289,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFdiJM1FPLk929hwYKwxIxUMZI/portable-photo-printer-product-photograp-1774089871537-11e434f6.png", variants: ["White", "Black"],
|
||||
description: "Print vibrant photos instantly with this portable printer. Wireless connectivity and compact design make it perfect for events, travel, and creating memories.", features: [
|
||||
"Instant photo printing", "Wireless Bluetooth", "Compact and portable", "Vibrant color output", "Battery powered", "Easy-to-use interface", "Includes film and paper"],
|
||||
specs: {
|
||||
"Print Size": "2x3 inches", "Connection": "Bluetooth wireless", "Battery": "Rechargeable Li-ion", "Print Speed": "1 photo per minute", "Dimensions": "110mm x 183mm x 32mm", "Weight": "390g"},
|
||||
},
|
||||
};
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const productId = params.id as string;
|
||||
|
||||
const product = productDatabase[productId];
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLarge"
|
||||
background="grid"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Product Not Found</h1>
|
||||
<p className="text-foreground/60 mb-6">The product you're looking for doesn't exist.</p>
|
||||
<button
|
||||
onClick={() => router.push("/")}
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
Back to Home
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Best Sellers", id: "best-sellers" },
|
||||
{ name: "Featured", id: "featured" },
|
||||
{ name: "New Arrivals", id: "new-arrivals" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Products", items: [
|
||||
{ label: "Best Sellers", href: "/collections/best-sellers" },
|
||||
{ label: "New Arrivals", href: "/collections/new-arrivals" },
|
||||
{ label: "Featured Products", href: "/collections/featured" },
|
||||
{ label: "All Products", href: "/products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Our Story", href: "/our-story" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping Information", href: "/shipping" },
|
||||
{ label: "Returns & Refunds", href: "/returns" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Customer Support", href: "/support" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
{ label: "Cookie Policy", href: "/cookies" },
|
||||
{ label: "Accessibility", href: "/accessibility" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLarge"
|
||||
background="grid"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="PrimeShop"
|
||||
bottomLeftText="Premium Dropshipping Store"
|
||||
bottomRightText="support@primeshop.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
{/* Back Button */}
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="inline-flex items-center gap-2 text-foreground/60 hover:text-foreground mb-8 transition"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
<span>Back</span>
|
||||
</button>
|
||||
|
||||
{/* Product Detail Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
|
||||
{/* Product Image */}
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-full aspect-square bg-card rounded-lg overflow-hidden">
|
||||
<img
|
||||
src={product.imageSrc}
|
||||
alt={product.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Info */}
|
||||
<div className="flex flex-col justify-start">
|
||||
{/* Title */}
|
||||
<h1 className="text-4xl font-bold mb-4">{product.name}</h1>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<div className="flex items-center">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
size={20}
|
||||
className={i < Math.floor(product.rating) ? "fill-primary-cta text-primary-cta" : "text-foreground/20"}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-foreground/60">({product.reviewCount} reviews)</span>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-baseline gap-3">
|
||||
<span className="text-4xl font-bold text-primary-cta">{product.price}</span>
|
||||
<span className="text-2xl text-foreground/40 line-through">{product.originalPrice}</span>
|
||||
</div>
|
||||
<p className="text-foreground/60 mt-2">Free shipping on orders over $50</p>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-foreground/80 mb-8 leading-relaxed">{product.description}</p>
|
||||
|
||||
{/* Variants */}
|
||||
<div className="mb-8">
|
||||
<label className="block text-sm font-semibold mb-3">Select Variant</label>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{product.variants.map((variant: string, idx: number) => (
|
||||
<button
|
||||
key={idx}
|
||||
className="px-4 py-2 border border-card rounded-lg hover:border-primary-cta transition text-sm"
|
||||
>
|
||||
{variant}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-4 mb-8">
|
||||
<button className="flex-1 flex items-center justify-center gap-2 bg-primary-cta text-white py-3 rounded-lg hover:opacity-90 transition font-semibold">
|
||||
<ShoppingCart size={20} />
|
||||
Add to Cart
|
||||
</button>
|
||||
<button className="flex items-center justify-center gap-2 px-6 py-3 border border-card rounded-lg hover:border-primary-cta transition">
|
||||
<Heart size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Trust Badges */}
|
||||
<div className="grid grid-cols-3 gap-4 pt-8 border-t border-card">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<Truck className="mb-2 text-primary-cta" size={24} />
|
||||
<p className="text-sm font-semibold">Free Shipping</p>
|
||||
<p className="text-xs text-foreground/60">Orders over $50</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<RefreshCw className="mb-2 text-primary-cta" size={24} />
|
||||
<p className="text-sm font-semibold">Easy Returns</p>
|
||||
<p className="text-xs text-foreground/60">30-day guarantee</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<Shield className="mb-2 text-primary-cta" size={24} />
|
||||
<p className="text-sm font-semibold">Secure Checkout</p>
|
||||
<p className="text-xs text-foreground/60">SSL encrypted</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features and Specs */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
|
||||
{/* Features */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-6">Key Features</h2>
|
||||
<ul className="space-y-3">
|
||||
{product.features.map((feature: string, idx: number) => (
|
||||
<li key={idx} className="flex items-start gap-3">
|
||||
<CheckCircle size={20} className="text-primary-cta mt-0.5 flex-shrink-0" />
|
||||
<span className="text-foreground/80">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Specifications */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-6">Specifications</h2>
|
||||
<div className="space-y-3">
|
||||
{Object.entries(product.specs).map(([key, value]) => (
|
||||
<div key={key} className="flex justify-between py-3 border-b border-card">
|
||||
<span className="font-semibold text-foreground/80">{key}</span>
|
||||
<span className="text-foreground/60">{String(value)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Related Products Section */}
|
||||
<div className="mb-16">
|
||||
<h2 className="text-2xl font-bold mb-6">You Might Also Like</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{Object.entries(productDatabase)
|
||||
.filter(([id]) => id !== productId)
|
||||
.slice(0, 4)
|
||||
.map(([id, p]) => (
|
||||
<button
|
||||
key={id}
|
||||
onClick={() => router.push(`/products/${id}`)}
|
||||
className="group rounded-lg overflow-hidden bg-card hover:shadow-lg transition"
|
||||
>
|
||||
<div className="w-full aspect-square overflow-hidden">
|
||||
<img
|
||||
src={p.imageSrc}
|
||||
alt={p.name}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="font-semibold text-sm line-clamp-2 mb-2">{p.name}</p>
|
||||
<p className="text-primary-cta font-bold">{p.price}</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 PrimeShop. All rights reserved. Premium Dropshipping Products & Fulfillment."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user