Compare commits
18 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 55cc9d3433 | |||
| 020175467a | |||
| fe78152c44 | |||
| a248bdf749 | |||
| 5caaf2818e | |||
| e121bff10c | |||
| 45f6315b8b | |||
| b19be049da | |||
| d2e0f6298c | |||
| fce5468155 | |||
| 2252ae59aa | |||
| 9db6f6832b | |||
| 7d3090e55d | |||
| b2a0e23d7f | |||
| a8d229d818 | |||
| 1ab716b7d5 | |||
| 41aff91f8e | |||
| b249802e61 |
@@ -1,234 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
|
||||
const productsData = [
|
||||
{
|
||||
id: "p1", brand: "Tech Innovations", name: "Wireless Earbuds Pro", price: "$79.99", rating: 5,
|
||||
reviewCount: "120 reviews", imageSrc: "http://img.b2bpic.net/free-photo/front-view-hand-holding-virtual-reality-headset_23-2148775908.jpg?_wi=1", imageAlt: "Wireless Earbuds Pro", description: "Immerse yourself in crystal-clear audio with these advanced wireless earbuds. Featuring active noise cancellation and a comfortable, ergonomic design, they are perfect for music lovers and professionals alike. Enjoy up to 24 hours of battery life with the charging case and seamless connectivity.", details: [
|
||||
"Active Noise Cancellation", "24-Hour Battery Life", "Ergonomic Design", "Bluetooth 5.2", "Water Resistant (IPX4)"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "p2", brand: "Home & Hearth", name: "Ceramic Plant Pot Set", price: "$45.00", rating: 4,
|
||||
reviewCount: "85 reviews", imageSrc: "http://img.b2bpic.net/free-photo/close-up-arrangement-modern-vases_23-2149646532.jpg?_wi=1", imageAlt: "Ceramic Plant Pot Set", description: "Elevate your indoor garden with this stylish set of ceramic plant pots. Crafted from high-quality ceramic, these pots are durable and feature a minimalist design that complements any decor. Perfect for succulents, herbs, and small houseplants.", details: [
|
||||
"Set of 3 assorted sizes", "High-quality ceramic", "Drainage holes with stoppers", "Modern minimalist design", "Ideal for indoor plants"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "p3", brand: "Fashion Forward", name: "Unisex Hoodie Comfort", price: "$59.99", rating: 5,
|
||||
reviewCount: "150 reviews", imageSrc: "http://img.b2bpic.net/free-photo/still-life-spring-wardrobe-switch_23-2150478953.jpg?_wi=1", imageAlt: "Unisex Hoodie Comfort", description: "Stay cozy and stylish with our Unisex Hoodie Comfort. Made from a premium cotton blend, it offers exceptional softness and warmth. The classic fit and versatile design make it a wardrobe essential for any season.", details: [
|
||||
"Premium cotton blend", "Soft fleece interior", "Adjustable drawstring hood", "Kangaroo pocket", "Available in multiple colors"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "p4", brand: "Kitchen Master", name: "Multi-function Blender", price: "$120.00", rating: 4,
|
||||
reviewCount: "90 reviews", imageSrc: "http://img.b2bpic.net/free-photo/woman-buys-dishes-store_1157-36696.jpg?_wi=1", imageAlt: "Multi-function Blender", description: "Unleash your culinary creativity with the Multi-function Blender. This powerful blender features multiple speed settings and pre-programmed modes for smoothies, soups, and crushing ice. Its durable blades and easy-to-clean design make meal prep a breeze.", details: [
|
||||
"1200W powerful motor", "Multiple speed settings", "Stainless steel blades", "2L BPA-free pitcher", "Easy to clean"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
interface ProductDetailPageProps {
|
||||
params: {
|
||||
productId: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default function ProductDetailPage({ params }: ProductDetailPageProps) {
|
||||
const { productId } = params;
|
||||
const product = productsData.find((p) => p.id === productId);
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "home", href: "/" },
|
||||
{ name: "Products", id: "products", href: "/#products" },
|
||||
{ name: "About Us", id: "about", href: "/#about" },
|
||||
{ name: "FAQ", id: "faq", href: "/#faq" },
|
||||
{ name: "Contact", id: "contact", href: "/#contact" }
|
||||
]}
|
||||
brandName="DropStore"
|
||||
button={{
|
||||
text: "Shop Now", href: "/#products"
|
||||
}}
|
||||
/>
|
||||
<div className="min-h-screen flex flex-col items-center justify-center p-8">
|
||||
<h1 className="text-3xl font-bold text-foreground">Product Not Found</h1>
|
||||
<p className="mt-4 text-lg text-foreground-accent">The product you are looking for does not exist.</p>
|
||||
<ButtonBounceEffect text="Back to Products" href="/#products" className="mt-8" />
|
||||
</div>
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Trending Products", href: "/#products" },
|
||||
{ label: "New Arrivals", href: "/#products" },
|
||||
{ label: "Best Sellers", href: "/#products" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Contact Us", href: "/#contact" },
|
||||
{ label: "FAQ", href: "/#faq" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Shipping Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2024 DropStore. All rights reserved."
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "home", href: "/" },
|
||||
{ name: "Products", id: "products", href: "/#products" },
|
||||
{ name: "About Us", id: "about", href: "/#about" },
|
||||
{ name: "FAQ", id: "faq", href: "/#faq" },
|
||||
{ name: "Contact", id: "contact", href: "/#contact" }
|
||||
]}
|
||||
brandName="DropStore"
|
||||
button={{
|
||||
text: "Shop Now", href: "/#products"
|
||||
}}
|
||||
/>
|
||||
<div className="container mx-auto px-4 py-16 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
|
||||
{/* Product Image */}
|
||||
<div className="lg:sticky lg:top-16 self-start">
|
||||
<img
|
||||
src={product.imageSrc}
|
||||
alt={product.imageAlt}
|
||||
className="w-full h-auto object-cover rounded-lg shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Product Details */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<p className="text-primary-cta text-sm font-semibold uppercase tracking-wide">
|
||||
{product.brand}
|
||||
</p>
|
||||
<h1 className="text-4xl font-extrabold text-foreground leading-tight">
|
||||
{product.name}
|
||||
</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Simple star rating - not using a specific component for simplicity */}
|
||||
<div className="flex text-yellow-500">
|
||||
{Array.from({ length: product.rating }).map((_, i) => (
|
||||
<svg
|
||||
key={i}
|
||||
className="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm text-foreground-accent">
|
||||
({product.reviewCount})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-5xl font-extrabold text-foreground mt-4">
|
||||
{product.price}
|
||||
</p>
|
||||
|
||||
<p className="text-lg text-foreground-accent leading-relaxed mt-6">
|
||||
{product.description}
|
||||
</p>
|
||||
|
||||
{product.details && (
|
||||
<div className="mt-6">
|
||||
<h2 className="text-xl font-bold text-foreground mb-3">Key Features</h2>
|
||||
<ul className="list-disc list-inside text-foreground-accent space-y-2">
|
||||
{product.details.map((detail, index) => (
|
||||
<li key={index}>{detail}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-8 flex gap-4">
|
||||
<ButtonBounceEffect
|
||||
text="Add to Cart"
|
||||
onClick={() => alert(`Added ${product.name} to cart!`)}
|
||||
className="px-8 py-3 w-fit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Trending Products", href: "/#products" },
|
||||
{ label: "New Arrivals", href: "/#products" },
|
||||
{ label: "Best Sellers", href: "/#products" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Contact Us", href: "/#contact" },
|
||||
{ label: "FAQ", href: "/#faq" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Shipping Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2024 DropStore. All rights reserved."
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
|
||||
export default function ShopPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "home"},
|
||||
{
|
||||
name: "Shop", id: "shop"},
|
||||
{
|
||||
name: "About Us", id: "about"},
|
||||
{
|
||||
name: "FAQ", id: "faq"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="DropStore"
|
||||
button={{
|
||||
text: "Go to Home", href: "/"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shop-catalog" data-section="shop-catalog">
|
||||
{/* Placeholder for filtering and sorting controls */}
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "Wireless Earbuds Pro", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/front-view-hand-holding-virtual-reality-headset_23-2148775908.jpg?_wi=1", imageAlt: "Wireless Earbuds Pro"},
|
||||
{
|
||||
id: "p2", name: "Ceramic Plant Pot Set", price: "$45.00", imageSrc: "http://img.b2bpic.net/free-photo/close-up-arrangement-modern-vases_23-2149646532.jpg?_wi=1", imageAlt: "Ceramic Plant Pot Set"},
|
||||
{
|
||||
id: "p3", name: "Unisex Hoodie Comfort", price: "$59.99", imageSrc: "http://img.b2bpic.net/free-photo/still-life-spring-wardrobe-switch_23-2150478953.jpg?_wi=1", imageAlt: "Unisex Hoodie Comfort"},
|
||||
{
|
||||
id: "p4", name: "Multi-function Blender", price: "$120.00", imageSrc: "http://img.b2bpic.net/free-photo/woman-buys-dishes-store_1157-36696.jpg?_wi=1", imageAlt: "Multi-function Blender"},
|
||||
{
|
||||
id: "p5", name: "Smartwatch Fitness Tracker", price: "$149.99", imageSrc: "http://img.b2bpic.net/free-photo/view-smartwatch-hand_23-2148408906.jpg?_wi=1", imageAlt: "Smartwatch Fitness Tracker"},
|
||||
{
|
||||
id: "p6", name: "Cozy Fleece Blanket", price: "$35.50", imageSrc: "http://img.b2bpic.net/free-photo/cozy-still-life-with-hot-coffee_23-2149503697.jpg?_wi=1", imageAlt: "Cozy Fleece Blanket"},
|
||||
{
|
||||
id: "p7", name: "Gamer's Mechanical Keyboard", price: "$99.00", imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-composition-with-gaming-keyboard_23-2149717770.jpg?_wi=1", imageAlt: "Gamer's Mechanical Keyboard"},
|
||||
{
|
||||
id: "p8", name: "Essential Oil Diffuser", price: "$29.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-essential-oil-aromatherapy-diffuser_23-2149257007.jpg?_wi=1", imageAlt: "Essential Oil Diffuser"},
|
||||
]}
|
||||
title="Our Full Product Catalog"
|
||||
description="Explore our extensive collection of high-quality products. Filter and sort to find exactly what you're looking for."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{
|
||||
label: "Trending Products", href: "/shop"},
|
||||
{
|
||||
label: "New Arrivals", href: "/shop"},
|
||||
{
|
||||
label: "Best Sellers", href: "/shop"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About Us", href: "#about"},
|
||||
{
|
||||
label: "Contact Us", href: "#contact"},
|
||||
{
|
||||
label: "FAQ", href: "#faq"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service", href: "#"},
|
||||
{
|
||||
label: "Shipping Policy", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 DropStore. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -12,13 +12,13 @@
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #000612e6;
|
||||
--primary-cta: #106EFB;
|
||||
--foreground: #000f06e6;
|
||||
--primary-cta: #0a7039;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta-text: #000f06e6;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #106EFB;
|
||||
--background-accent: #c4c4c4;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user