Compare commits
20 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| aa46a86536 | |||
| 6b4258b709 | |||
| c68c2fed2a | |||
| 125adbd29c | |||
| 9199d2cbf6 | |||
| c7d45f3f97 | |||
| 63b68361ae | |||
| 5f4d7447fc | |||
| 68ccdbeabc | |||
| 76f2e4d2ce | |||
| 56d5a41382 | |||
| e29db29e14 | |||
| 6fa8a673f6 | |||
| 78def5644d | |||
| d71f4eff59 | |||
| be2a36adcc | |||
| b9a0855188 | |||
| f3895c705d | |||
| d39ddded5c | |||
| bf047482f8 |
@@ -7,7 +7,7 @@ import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
||||
import { Package, ShoppingCart, Sparkles, Truck, Users } from "lucide-react";
|
||||
import { HeartHandshake, Package, ShoppingCart, Sparkles, Truck, Users } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -28,31 +28,21 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
name: "Home", id: "/"},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
name: "Products", id: "/products"},
|
||||
{
|
||||
name: "About Us",
|
||||
id: "about",
|
||||
},
|
||||
name: "About Us", id: "/about"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
name: "FAQ", id: "/faq"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "/contact"},
|
||||
{
|
||||
name: "Cart", id: "/cart"}
|
||||
]}
|
||||
brandName="DropStore"
|
||||
button={{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
}}
|
||||
text: "Shop Now", href: "/products"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -64,19 +54,13 @@ export default function LandingPage() {
|
||||
description="At DropStore, we believe in making online shopping an effortless and enjoyable experience. We meticulously curate trending products, ensuring quality and value are at the forefront for our customers worldwide."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Curated Selection",
|
||||
description: "Hand-picking only the most trending and high-quality products for you.",
|
||||
icon: Package,
|
||||
title: "Curated Selection", description: "Hand-picking only the most trending and high-quality products for you.", icon: Package,
|
||||
},
|
||||
{
|
||||
title: "Customer-Centric Service",
|
||||
description: "Our support team is dedicated to ensuring your complete satisfaction.",
|
||||
icon: HeartHandshake,
|
||||
title: "Customer-Centric Service", description: "Our support team is dedicated to ensuring your complete satisfaction.", icon: HeartHandshake,
|
||||
},
|
||||
{
|
||||
title: "Effortless Experience",
|
||||
description: "From browsing to checkout, we strive for a seamless shopping journey.",
|
||||
icon: ShoppingCart,
|
||||
title: "Effortless Experience", description: "From browsing to checkout, we strive for a seamless shopping journey.", icon: ShoppingCart,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/bearded-delivery-man-red-uniform-cap-holding-large-box-package-suffering-from-heavy-weight-standing-orange-wall_141793-48146.jpg?_wi=3"
|
||||
@@ -92,19 +76,13 @@ export default function LandingPage() {
|
||||
metrics={[
|
||||
{
|
||||
icon: Truck,
|
||||
label: "Orders Delivered",
|
||||
value: "500K+",
|
||||
},
|
||||
label: "Orders Delivered", value: "500K+"},
|
||||
{
|
||||
icon: Users,
|
||||
label: "Happy Customers",
|
||||
value: "100K+",
|
||||
},
|
||||
label: "Happy Customers", value: "100K+"},
|
||||
{
|
||||
icon: Sparkles,
|
||||
label: "Trending Products",
|
||||
value: "1.5K+",
|
||||
},
|
||||
label: "Trending Products", value: "1.5K+"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -117,26 +95,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Jane Doe",
|
||||
role: "CEO & Founder",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-woman-smiling_23-2148729675.jpg",
|
||||
imageAlt: "Jane Doe",
|
||||
},
|
||||
id: "1", name: "Jane Doe", role: "CEO & Founder", imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-woman-smiling_23-2148729675.jpg", imageAlt: "Jane Doe"},
|
||||
{
|
||||
id: "2",
|
||||
name: "John Smith",
|
||||
role: "Head of Product Curation",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-businessman-walking-near-business-center_171337-19784.jpg",
|
||||
imageAlt: "John Smith",
|
||||
},
|
||||
id: "2", name: "John Smith", role: "Head of Product Curation", imageSrc: "http://img.b2bpic.net/free-photo/happy-young-businessman-walking-near-business-center_171337-19784.jpg", imageAlt: "John Smith"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily White",
|
||||
role: "Chief Marketing Officer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-holding-beer-glass-looking-camera_23-2148154021.jpg",
|
||||
imageAlt: "Emily White",
|
||||
},
|
||||
id: "3", name: "Emily White", role: "Chief Marketing Officer", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-holding-beer-glass-looking-camera_23-2148154021.jpg", imageAlt: "Emily White"},
|
||||
]}
|
||||
title="Meet the Visionaries Behind DropStore"
|
||||
description="Our dedicated team works tirelessly to bring you the best products and shopping experience, driven by passion and innovation."
|
||||
@@ -147,58 +110,35 @@ export default function LandingPage() {
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
title: "Shop", items: [
|
||||
{
|
||||
label: "All Products",
|
||||
href: "/products",
|
||||
},
|
||||
label: "All Products", href: "/products"},
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "/products?filter=new",
|
||||
},
|
||||
label: "New Arrivals", href: "/products?filter=new"},
|
||||
{
|
||||
label: "Best Sellers",
|
||||
href: "/products?filter=bestsellers",
|
||||
},
|
||||
label: "Best Sellers", href: "/products?filter=bestsellers"},
|
||||
{
|
||||
label: "Deals",
|
||||
href: "/products?filter=deals",
|
||||
},
|
||||
label: "Deals", href: "/products?filter=deals"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "/about",
|
||||
},
|
||||
label: "About Us", href: "/about"},
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "/contact",
|
||||
},
|
||||
label: "Contact Us", href: "/contact"},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "/careers",
|
||||
},
|
||||
label: "Careers", href: "/careers"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "/faq",
|
||||
},
|
||||
label: "FAQ", href: "/faq"},
|
||||
{
|
||||
label: "Shipping & Returns",
|
||||
href: "/shipping",
|
||||
},
|
||||
label: "Shipping & Returns", href: "/shipping"},
|
||||
{
|
||||
label: "Track Your Order",
|
||||
href: "/track-order",
|
||||
},
|
||||
label: "Track Your Order", href: "/track-order"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
43
src/app/cart/page.tsx
Normal file
43
src/app/cart/page.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
export default function CartPage() {
|
||||
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: "/" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About Us", id: "/about" },
|
||||
{ name: "FAQ", id: "/faq" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Cart", id: "/cart" }
|
||||
]}
|
||||
brandName="DropStore"
|
||||
button={{
|
||||
text: "Shop Now", href: "/products"}}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-screen py-20 flex items-center justify-center">
|
||||
<h1 className="text-4xl font-bold">Your Cart</h1>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
43
src/app/checkout/page.tsx
Normal file
43
src/app/checkout/page.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
export default function CheckoutPage() {
|
||||
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: "/" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About Us", id: "/about" },
|
||||
{ name: "FAQ", id: "/faq" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Cart", id: "/cart" }
|
||||
]}
|
||||
brandName="DropStore"
|
||||
button={{
|
||||
text: "Shop Now", href: "/products"}}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-screen py-20 flex items-center justify-center">
|
||||
<h1 className="text-4xl font-bold">Checkout</h1>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
43
src/app/order-confirmation/page.tsx
Normal file
43
src/app/order-confirmation/page.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
export default function OrderConfirmationPage() {
|
||||
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: "/" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About Us", id: "/about" },
|
||||
{ name: "FAQ", id: "/faq" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Cart", id: "/cart" }
|
||||
]}
|
||||
brandName="DropStore"
|
||||
button={{
|
||||
text: "Shop Now", href: "/products"}}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-screen py-20 flex items-center justify-center">
|
||||
<h1 className="text-4xl font-bold">Order Confirmed!</h1>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
267
src/app/page.tsx
267
src/app/page.tsx
@@ -32,69 +32,44 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
name: "Home", id: "home"},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
name: "Products", id: "products"},
|
||||
{
|
||||
name: "About Us",
|
||||
id: "about",
|
||||
},
|
||||
name: "About Us", id: "about"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
name: "FAQ", id: "faq"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="DropStore"
|
||||
button={{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
}}
|
||||
text: "Shop Now", href: "#products"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
title="Your World, Delivered. Effortless Shopping Starts Here."
|
||||
description="Discover a curated selection of trending products, shipped directly to your door. Quality, convenience, and style at your fingertips."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-young-businessman-walking-near-business-center_171337-19784.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/happy-young-businessman-walking-near-business-center_171337-19784.jpg", alt: "Customer 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/positive-background-with-three-emoticons_23-2147628295.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-vector/positive-background-with-three-emoticons_23-2147628295.jpg", alt: "Customer 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-pretty-woman-smiling_23-2148729675.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-pretty-woman-smiling_23-2148729675.jpg", alt: "Customer 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-man-holding-beer-glass-looking-camera_23-2148154021.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-man-holding-beer-glass-looking-camera_23-2148154021.jpg", alt: "Customer 4"},
|
||||
]}
|
||||
avatarText="Trusted by thousands of happy customers."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Products",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Explore Products", href: "#products"},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
},
|
||||
text: "Learn More", href: "#about"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -107,45 +82,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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"},
|
||||
]}
|
||||
title="Our Trending Collections"
|
||||
description="Hand-picked items for every lifestyle. Find what you love, effortlessly."
|
||||
@@ -159,18 +106,10 @@ export default function LandingPage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Fast & Reliable Shipping",
|
||||
description: "Experience quick delivery straight to your doorstep. We partner with trusted carriers to ensure your items arrive safely and on time.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-delivery-man-red-uniform-cap-holding-large-box-package-suffering-from-heavy-weight-standing-orange-wall_141793-48146.jpg?_wi=1",
|
||||
imageAlt: "Fast delivery truck",
|
||||
},
|
||||
title: "Fast & Reliable Shipping", description: "Experience quick delivery straight to your doorstep. We partner with trusted carriers to ensure your items arrive safely and on time.", imageSrc: "http://img.b2bpic.net/free-photo/bearded-delivery-man-red-uniform-cap-holding-large-box-package-suffering-from-heavy-weight-standing-orange-wall_141793-48146.jpg?_wi=1", imageAlt: "Fast delivery truck"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Curated Quality Products",
|
||||
description: "Every item in our store is hand-picked for its quality, style, and value. Shop with confidence knowing you're getting the best.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/certified-extended-warranty-shield-badge-with-tick-mark-design_1017-61519.jpg?_wi=1",
|
||||
imageAlt: "Magnifying glass over product",
|
||||
},
|
||||
title: "Curated Quality Products", description: "Every item in our store is hand-picked for its quality, style, and value. Shop with confidence knowing you're getting the best.", imageSrc: "http://img.b2bpic.net/free-vector/certified-extended-warranty-shield-badge-with-tick-mark-design_1017-61519.jpg?_wi=1", imageAlt: "Magnifying glass over product"},
|
||||
]}
|
||||
title="Why Shop With Us?"
|
||||
description="We make dropshipping simple and delightful for you."
|
||||
@@ -182,9 +121,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Our Story"
|
||||
description={[
|
||||
"At DropStore, we believe in bringing joy and convenience to your shopping experience. We scour the globe for unique, high-quality products that you'll love, and deliver them right to your doorstep, hassle-free.",
|
||||
"Our mission is to simplify online retail by providing a seamless platform for customers to discover innovative products without the complexity of traditional stores. We prioritize customer satisfaction and efficient service above all else.",
|
||||
]}
|
||||
"At DropStore, we believe in bringing joy and convenience to your shopping experience. We scour the globe for unique, high-quality products that you'll love, and deliver them right to your doorstep, hassle-free.", "Our mission is to simplify online retail by providing a seamless platform for customers to discover innovative products without the complexity of traditional stores. We prioritize customer satisfaction and efficient service above all else."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -195,72 +132,34 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
role: "Fashion Blogger",
|
||||
company: "StyleMaven",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/curly-lady-reaches-out-her-hand-man-sitting-before-bright-window-morning_1304-3321.jpg?_wi=1",
|
||||
imageAlt: "Sarah Johnson",
|
||||
},
|
||||
id: "1", name: "Sarah Johnson", role: "Fashion Blogger", company: "StyleMaven", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/curly-lady-reaches-out-her-hand-man-sitting-before-bright-window-morning_1304-3321.jpg?_wi=1", imageAlt: "Sarah Johnson"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
role: "Tech Enthusiast",
|
||||
company: "GadgetGeek",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/excited-adult-handsome-man-looking-camera-doing-you-gesture-isolated-green-wall_141793-113627.jpg?_wi=1",
|
||||
imageAlt: "Michael Chen",
|
||||
},
|
||||
id: "2", name: "Michael Chen", role: "Tech Enthusiast", company: "GadgetGeek", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/excited-adult-handsome-man-looking-camera-doing-you-gesture-isolated-green-wall_141793-113627.jpg?_wi=1", imageAlt: "Michael Chen"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Home Decorator",
|
||||
company: "Nestling Designs",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sideways-beautiful-female-friends-looking-away_23-2148694140.jpg?_wi=1",
|
||||
imageAlt: "Emily Rodriguez",
|
||||
},
|
||||
id: "3", name: "Emily Rodriguez", role: "Home Decorator", company: "Nestling Designs", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sideways-beautiful-female-friends-looking-away_23-2148694140.jpg?_wi=1", imageAlt: "Emily Rodriguez"},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
role: "Student",
|
||||
company: "University of Tech",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-coffee-cup-showing-thumb-up_23-2148055893.jpg?_wi=1",
|
||||
imageAlt: "David Kim",
|
||||
},
|
||||
id: "4", name: "David Kim", role: "Student", company: "University of Tech", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-coffee-cup-showing-thumb-up_23-2148055893.jpg?_wi=1", imageAlt: "David Kim"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jessica Lee",
|
||||
role: "Entrepreneur",
|
||||
company: "Innovate LLC",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-young-dark-skinned-woman-wearing-stylish-turtleneck-smiling-positively-showing-thumbs-up-gesture_344912-1031.jpg",
|
||||
imageAlt: "Jessica Lee",
|
||||
},
|
||||
id: "5", name: "Jessica Lee", role: "Entrepreneur", company: "Innovate LLC", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-young-dark-skinned-woman-wearing-stylish-turtleneck-smiling-positively-showing-thumbs-up-gesture_344912-1031.jpg", imageAlt: "Jessica Lee"},
|
||||
{
|
||||
id: "6", name: "Kevin White", role: "Marketing Specialist", company: "GrowthX Agency", rating: 4,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-man-wearing-hoodie_23-2148200676.jpg?_wi=1", imageAlt: "Kevin White"
|
||||
}
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
id: "kpi-1",
|
||||
value: "100%",
|
||||
title: "Satisfaction",
|
||||
description: "Guaranteed quality and service.",
|
||||
icon: Shield,
|
||||
id: "kpi-1", value: "100%", title: "Satisfaction", description: "Guaranteed quality and service.", icon: Shield,
|
||||
},
|
||||
{
|
||||
id: "kpi-2",
|
||||
value: "24/7",
|
||||
title: "Support",
|
||||
description: "Always here to help you.",
|
||||
icon: Headphones,
|
||||
id: "kpi-2", value: "24/7", title: "Support", description: "Always here to help you.", icon: Headphones,
|
||||
},
|
||||
{
|
||||
id: "kpi-3",
|
||||
value: "50K+",
|
||||
title: "Products",
|
||||
description: "Explore our vast catalog.",
|
||||
icon: ShoppingBag,
|
||||
id: "kpi-3", value: "50K+", title: "Products", description: "Explore our vast catalog.", icon: ShoppingBag,
|
||||
},
|
||||
]}
|
||||
title="What Our Customers Say"
|
||||
@@ -274,25 +173,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How long does shipping take?",
|
||||
content: "Shipping times vary depending on your location and the specific product, but typically range from 7-20 business days. You'll receive a tracking number once your order is dispatched.",
|
||||
},
|
||||
id: "q1", title: "How long does shipping take?", content: "Shipping times vary depending on your location and the specific product, but typically range from 7-20 business days. You'll receive a tracking number once your order is dispatched."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer a 30-day return policy for most items. If you're not satisfied with your purchase, please contact our support team to initiate a return or exchange.",
|
||||
},
|
||||
id: "q2", title: "What is your return policy?", content: "We offer a 30-day return policy for most items. If you're not satisfied with your purchase, please contact our support team to initiate a return or exchange."},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you offer international shipping?",
|
||||
content: "Yes, we ship worldwide! International shipping rates and times will be calculated at checkout based on your delivery address.",
|
||||
},
|
||||
id: "q3", title: "Do you offer international shipping?", content: "Yes, we ship worldwide! International shipping rates and times will be calculated at checkout based on your delivery address."},
|
||||
{
|
||||
id: "q4",
|
||||
title: "How can I track my order?",
|
||||
content: "Once your order is shipped, you will receive an email with a tracking number and a link to track your package's journey. You can also log in to your account for order updates.",
|
||||
},
|
||||
id: "q4", title: "How can I track my order?", content: "Once your order is shipped, you will receive an email with a tracking number and a link to track your package's journey. You can also log in to your account for order updates."},
|
||||
{
|
||||
id: "q5", title: "Can I cancel or change my order?", content: "Order changes or cancellations are possible within 24 hours of purchase, provided the item has not yet shipped. Please contact our support team immediately for assistance."}
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-holding-looking-clipboard-drinking-coffee-isolated-purple-background_141793-84942.jpg?_wi=1"
|
||||
imageAlt="Customer support person answering questions"
|
||||
@@ -307,8 +196,7 @@ export default function LandingPage() {
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
tag="Get In Touch"
|
||||
title="We're Here to Help!"
|
||||
description="Have a question about your order, a product, or just want to say hello? Reach out to us anytime."
|
||||
@@ -322,56 +210,47 @@ export default function LandingPage() {
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
title: "Shop", items: [
|
||||
{
|
||||
label: "Trending Products",
|
||||
href: "#products",
|
||||
},
|
||||
label: "Trending Products", href: "#products"},
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "#products",
|
||||
},
|
||||
label: "New Arrivals", href: "#products"},
|
||||
{
|
||||
label: "Best Sellers",
|
||||
href: "#products",
|
||||
},
|
||||
label: "Best Sellers", href: "#products"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About Us", href: "#about"},
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Contact Us", href: "#contact"},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
label: "FAQ", href: "#faq"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Help Center", href: "#faq"},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
label: "Order Status", href: "#"},
|
||||
{
|
||||
label: "Shipping Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Returns", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Store Info", items: [
|
||||
{
|
||||
label: "Address: 123 E-commerce St, Suite 400", href: "#"},
|
||||
{
|
||||
label: "Email: support@dropstore.com", href: "#contact"},
|
||||
{
|
||||
label: "Phone: +1 (555) 123-4567", href: "#"},
|
||||
{
|
||||
label: "Secure Payments", href: "#"}
|
||||
],
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2024 DropStore. All rights reserved."
|
||||
/>
|
||||
@@ -379,4 +258,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
234
src/app/products/[productId]/page.tsx
Normal file
234
src/app/products/[productId]/page.tsx
Normal file
@@ -0,0 +1,234 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
114
src/app/shop/page.tsx
Normal file
114
src/app/shop/page.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"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: #000f06e6;
|
||||
--primary-cta: #0a7039;
|
||||
--foreground: #000612e6;
|
||||
--primary-cta: #106EFB;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta-text: #000f06e6;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
--background-accent: #106EFB;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user