bender/7c7b66d8-7aac-4441-95be-4ab01b5bfb82
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #2

Merged
bender merged 10 commits from version_2 into main 2026-03-26 09:49:43 +00:00
Conversation 0 Commits 10 Files Changed 10 +813 -696
10 changed files with 813 additions and 696 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
src/app/about/page.tsx
View File

@@ -2,14 +2,11 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import FooterBase from '@/components/sections/footer/FooterBase';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
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 TextSplitAbout from '@/components/sections/about/TextSplitAbout';
export default function LandingPage() {
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
@@ -24,187 +21,72 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "home",
},
{
name: "Products",
id: "products",
},
{
name: "About Us",
id: "about",
},
{
name: "FAQ",
id: "faq",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="DropStore"
button={{
text: "Shop Now",
href: "#products",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home", href: "/"},
{
name: "Products", href: "/#products"},
{
name: "About Us", href: "/about"},
{
name: "FAQ", href: "/faq"},
{
name: "Contact", href: "/contact"},
]}
brandName="DropStore"
button={{
text: "Shop Now", href: "/#products"}}
/>
</div>
<div id="about-us" data-section="about-us">
<SplitAbout
textboxLayout="default"
useInvertedBackground={false}
title="Our Mission at DropStore"
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: "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,
},
]}
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"
imageAlt="Delivery man with a package, symbolizing efficient logistics"
mediaAnimation="slide-up"
/>
</div>
<div id="about-content" data-section="about-content">
<TextSplitAbout
useInvertedBackground={false}
title="About DropStore"
description={[
"DropStore is dedicated to providing a seamless online shopping experience, offering a hand-picked selection of trending products. Our journey began with a vision to connect customers with unique and high-quality items from around the globe, delivered right to their doorstep with ease.", "We pride ourselves on exceptional customer service, reliable shipping, and a commitment to quality. Our team works tirelessly to source products that meet our high standards, ensuring every purchase brings joy and value to our customers. Thank you for choosing DropStore as your trusted online shopping destination."]}
/>
</div>
<div id="about-metrics" data-section="about-metrics">
<AboutMetric
useInvertedBackground={true}
title="Our Impact in Numbers"
metrics={[
{
icon: Truck,
label: "Orders Delivered",
value: "500K+",
},
{
icon: Users,
label: "Happy Customers",
value: "100K+",
},
{
icon: Sparkles,
label: "Trending Products",
value: "1.5K+",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="our-team" data-section="our-team">
<TeamCardFive
animationType="slide-up"
textboxLayout="default"
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: "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",
},
]}
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."
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Shop",
items: [
{
label: "All Products",
href: "/products",
},
{
label: "New Arrivals",
href: "/products?filter=new",
},
{
label: "Best Sellers",
href: "/products?filter=bestsellers",
},
{
label: "Deals",
href: "/products?filter=deals",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "/about",
},
{
label: "Contact Us",
href: "/contact",
},
{
label: "Careers",
href: "/careers",
},
],
},
{
title: "Support",
items: [
{
label: "FAQ",
href: "/faq",
},
{
label: "Shipping & Returns",
href: "/shipping",
},
{
label: "Track Your Order",
href: "/track-order",
},
],
},
]}
copyrightText="© 2024 DropStore. All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<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."
/>
</div>
</ReactLenis>
</ThemeProvider>
);

56
src/app/cart/page.tsx Normal file
View File

@@ -0,0 +1,56 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ReactLenis from "lenis/react";
import Link from "next/link";
export default function CartPage() {
const navItems = [
{ name: "Home", href: "/" },
{ name: "Products", href: "/#products" },
{ name: "About Us", href: "/#about" },
{ name: "FAQ", href: "/#faq" },
{ name: "Contact", href: "/#contact" },
{ name: "Cart", href: "/cart" },
{ name: "Checkout", href: "/checkout" }
];
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={navItems}
brandName="DropStore"
button={{
text: "Shop Now", href: "/#products"}}
/>
</div>
<main className="min-h-screen flex flex-col items-center justify-center p-8">
<h1 className="text-4xl font-extrabold mb-8">Your Shopping Cart</h1>
<p className="text-lg mb-4">Your cart is currently empty.</p>
<Link href="/#products" className="text-blue-500 hover:underline">
Continue Shopping
</Link>
<div className="mt-8">
<Link href="/checkout" className="bg-primary-cta text-white px-6 py-3 rounded-lg text-lg hover:opacity-90 transition-opacity">
Proceed to Checkout
</Link>
</div>
</main>
</ReactLenis>
</ThemeProvider>
);
}

74
src/app/checkout/page.tsx Normal file
View File

@@ -0,0 +1,74 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ReactLenis from "lenis/react";
import Link from "next/link";
export default function CheckoutPage() {
const navItems = [
{ name: "Home", href: "/" },
{ name: "Products", href: "/#products" },
{ name: "About Us", href: "/#about" },
{ name: "FAQ", href: "/#faq" },
{ name: "Contact", href: "/#contact" },
{ name: "Cart", href: "/cart" },
{ name: "Checkout", href: "/checkout" }
];
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={navItems}
brandName="DropStore"
button={{
text: "Shop Now", href: "/#products"}}
/>
</div>
<main className="min-h-screen flex flex-col items-center justify-center p-8">
<h1 className="text-4xl font-extrabold mb-8">Checkout</h1>
<p className="text-lg mb-4">Please fill in your details to complete the purchase.</p>
<div className="w-full max-w-md bg-card p-8 rounded-lg shadow-md">
<form className="space-y-4">
<div>
<label htmlFor="name" className="block text-sm font-medium text-foreground">Name</label>
<input type="text" id="name" className="mt-1 block w-full border border-accent rounded-md shadow-sm p-2 bg-background-accent text-foreground" placeholder="John Doe" />
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-foreground">Email</label>
<input type="email" id="email" className="mt-1 block w-full border border-accent rounded-md shadow-sm p-2 bg-background-accent text-foreground" placeholder="john.doe@example.com" />
</div>
<div>
<label htmlFor="address" className="block text-sm font-medium text-foreground">Address</label>
<input type="text" id="address" className="mt-1 block w-full border border-accent rounded-md shadow-sm p-2 bg-background-accent text-foreground" placeholder="123 Main St" />
</div>
<div>
<label htmlFor="card" className="block text-sm font-medium text-foreground">Card Number</label>
<input type="text" id="card" className="mt-1 block w-full border border-accent rounded-md shadow-sm p-2 bg-background-accent text-foreground" placeholder="**** **** **** ****" />
</div>
<Link href="/order-confirmation" className="w-full bg-primary-cta text-white px-6 py-3 rounded-lg text-lg block text-center hover:opacity-90 transition-opacity mt-6">
Place Order
</Link>
</form>
</div>
<Link href="/cart" className="text-blue-500 hover:underline mt-4">
Return to Cart
</Link>
</main>
</ReactLenis>
</ThemeProvider>
);
}

229
src/app/contact/page.tsx
View File

@@ -2,12 +2,11 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBase from '@/components/sections/footer/FooterBase';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
export default function LandingPage() {
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
@@ -22,161 +21,77 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "home",
},
{
name: "Products",
id: "products",
},
{
name: "About Us",
id: "about",
},
{
name: "FAQ",
id: "faq",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="DropStore"
button={{
text: "Shop Now",
href: "#products",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home", href: "/"},
{
name: "Products", href: "/#products"},
{
name: "About Us", href: "/about"},
{
name: "FAQ", href: "/faq"},
{
name: "Contact", href: "/contact"},
]}
brandName="DropStore"
button={{
text: "Shop Now", href: "/#products"}}
/>
</div>
<div id="contact-form" data-section="contact-form">
<ContactSplitForm
useInvertedBackground={false}
title="Get in Touch with DropStore"
description="We'd love to hear from you! Fill out the form below and we'll get back to you as soon as possible. Your feedback is important to us."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Your Email",
required: true,
},
{
name: "subject",
type: "text",
placeholder: "Subject",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "Your Message",
rows: 5,
required: true,
}}
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=2"
imageAlt="Customer support representative with headset"
mediaAnimation="slide-up"
mediaPosition="right"
buttonText="Send Message"
/>
</div>
<div id="contact-content" data-section="contact-content">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "radial-gradient"}}
tag="Reach Out"
title="Contact Our Support Team"
description="Have questions, feedback, or need assistance with your order? Our dedicated support team is here to help you. Fill out the form below or reach us through our social channels."
inputPlaceholder="Your email address"
buttonText="Send Message"
termsText="By clicking Send Message you're confirming that you agree with our Privacy Policy."
/>
</div>
<div id="contact-cta-details" data-section="contact-cta-details">
<ContactCTA
useInvertedBackground={true}
background={{
variant: "radial-gradient",
}}
tag="Need immediate assistance?"
title="Reach Out Directly"
description="Connect with our support team through phone or live chat for real-time help with your orders or inquiries."
buttons={[
{
text: "Call Us: (800) 123-4567",
href: "tel:+18001234567",
},
{
text: "Start Live Chat",
href: "/chat",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Shop",
items: [
{
label: "All Products",
href: "/products",
},
{
label: "New Arrivals",
href: "/products?filter=new",
},
{
label: "Best Sellers",
href: "/products?filter=bestsellers",
},
{
label: "Deals",
href: "/products?filter=deals",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "/about",
},
{
label: "Contact Us",
href: "/contact",
},
{
label: "Careers",
href: "/careers",
},
],
},
{
title: "Support",
items: [
{
label: "FAQ",
href: "/faq",
},
{
label: "Shipping & Returns",
href: "/shipping",
},
{
label: "Track Your Order",
href: "/track-order",
},
],
},
]}
copyrightText="© 2024 DropStore. All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<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."
/>
</div>
</ReactLenis>
</ThemeProvider>
);

239
src/app/faq/page.tsx
View File

@@ -2,12 +2,11 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterBase from '@/components/sections/footer/FooterBase';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
export default function LandingPage() {
export default function FaqPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
@@ -22,160 +21,88 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "home",
},
{
name: "Products",
id: "products",
},
{
name: "About Us",
id: "about",
},
{
name: "FAQ",
id: "faq",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="DropStore"
button={{
text: "Shop Now",
href: "#products",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home", href: "/"},
{
name: "Products", href: "/#products"},
{
name: "About Us", href: "/about"},
{
name: "FAQ", href: "/faq"},
{
name: "Contact", href: "/contact"},
]}
brandName="DropStore"
button={{
text: "Shop Now", href: "/#products"}}
/>
</div>
<div id="faq-main" data-section="faq-main">
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "How do I track my order?",
content: "You can track your order directly from your account dashboard or by using the tracking link provided in your shipping confirmation email.",
},
{
id: "2",
title: "What payment methods do you accept?",
content: "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and Apple Pay for secure and convenient transactions.",
},
{
id: "3",
title: "What is your return policy?",
content: "We offer a 30-day return policy on most items, provided they are in their original condition. Please refer to our Returns page for full details.",
},
{
id: "4",
title: "How long does shipping take?",
content: "Standard shipping typically takes 5-7 business days, while expedited options are available for faster delivery. Delivery times may vary based on location.",
},
{
id: "5",
title: "Do you ship internationally?",
content: "Yes, DropStore proudly offers international shipping to many countries worldwide. Shipping costs and times will be calculated at checkout.",
},
{
id: "6",
title: "Can I change or cancel my order?",
content: "Order changes or cancellations are possible within a short window after purchase. Please contact our support team immediately for assistance.",
},
]}
title="Frequently Asked Questions"
description="Find quick answers to your most common inquiries about shopping, orders, accounts, and more. We're here to make your DropStore experience seamless."
faqsAnimation="slide-up"
/>
</div>
<div id="faq-content" data-section="faq-content">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "q1", title: "How do I place an order?", content: "To place an order, simply browse our product catalog, add desired items to your cart, and proceed to checkout. Follow the prompts to enter your shipping and payment information to complete your purchase."},
{
id: "q2", title: "What payment methods do you accept?", content: "We accept all major credit cards (Visa, MasterCard, American Express, Discover), PayPal, and other secure payment options. All transactions are securely processed."},
{
id: "q3", title: "Can I change or cancel my order after it's placed?", content: "If you need to change or cancel your order, please contact our customer support immediately. We will do our best to accommodate your request, but please note that changes might not be possible if the order has already been processed for shipping."},
{
id: "q4", title: "What is your warranty policy?", content: "Most of our products come with a manufacturer's warranty. Specific warranty details can be found on each product page or by contacting our support team."},
{
id: "q5", title: "How can I get customer support?", content: "You can reach our customer support team via the contact form on our 'Contact Us' page, or by emailing us directly. We aim to respond to all inquiries within 24-48 business hours."},
]}
imageSrc="http://img.b2bpic.net/free-photo/diverse-group-employees-working-together_107420-99433.jpg?_wi=1"
imageAlt="Diverse team collaborating"
mediaAnimation="opacity"
title="Frequently Asked Questions"
description="Find quick answers to common questions about our products, orders, shipping, and more."
faqsAnimation="slide-up"
/>
</div>
<div id="faq-contact-cta" data-section="faq-contact-cta">
<ContactCTA
useInvertedBackground={true}
background={{
variant: "sparkles-gradient",
}}
tag="Still have questions?"
title="We're Here to Help"
description="If you can't find what you're looking for, our friendly support team is ready to assist you. Don't hesitate to reach out!"
buttons={[
{
text: "Contact Support",
href: "/contact",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Shop",
items: [
{
label: "All Products",
href: "/products",
},
{
label: "New Arrivals",
href: "/products?filter=new",
},
{
label: "Best Sellers",
href: "/products?filter=bestsellers",
},
{
label: "Deals",
href: "/products?filter=deals",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "/about",
},
{
label: "Contact Us",
href: "/contact",
},
{
label: "Careers",
href: "/careers",
},
],
},
{
title: "Support",
items: [
{
label: "FAQ",
href: "/faq",
},
{
label: "Shipping & Returns",
href: "/shipping",
},
{
label: "Track Your Order",
href: "/track-order",
},
],
},
]}
copyrightText="© 2024 DropStore. All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<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."
/>
</div>
</ReactLenis>
</ThemeProvider>
);

54
src/app/order-confirmation/page.tsx Normal file
View File

@@ -0,0 +1,54 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ReactLenis from "lenis/react";
import Link from "next/link";
import { CheckCircle } from "lucide-react";
export default function OrderConfirmationPage() {
const navItems = [
{ name: "Home", href: "/" },
{ name: "Products", href: "/#products" },
{ name: "About Us", href: "/#about" },
{ name: "FAQ", href: "/#faq" },
{ name: "Contact", href: "/#contact" },
{ name: "Cart", href: "/cart" },
{ name: "Checkout", href: "/checkout" }
];
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={navItems}
brandName="DropStore"
button={{
text: "Shop Now", href: "/#products"}}
/>
</div>
<main className="min-h-screen flex flex-col items-center justify-center p-8 text-center">
<CheckCircle className="h-24 w-24 text-green-500 mb-6" />
<h1 className="text-4xl font-extrabold mb-4">Order Confirmed!</h1>
<p className="text-lg mb-8">Thank you for your purchase. Your order has been successfully placed and will be processed shortly.</p>
<p className="text-md mb-8">A confirmation email with your order details has been sent to your inbox.</p>
<Link href="/" className="bg-primary-cta text-white px-6 py-3 rounded-lg text-lg hover:opacity-90 transition-opacity">
Continue Shopping
</Link>
</main>
</ReactLenis>
</ThemeProvider>
);
}

251
src/app/page.tsx
View File

@@ -23,8 +23,8 @@ export default function LandingPage() {
sizing="mediumSizeLargeTitles"
background="circleGradient"
cardStyle="gradient-radial"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<ReactLenis root>
@@ -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,30 @@ 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"},
]}
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 +169,13 @@ 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."},
]}
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 +190,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,54 +204,33 @@ 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: "Legal", items: [
{
label: "Privacy Policy",
href: "#",
},
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service",
href: "#",
},
label: "Terms of Service", href: "#"},
{
label: "Shipping Policy",
href: "#",
},
label: "Shipping Policy", href: "#"},
],
},
]}

234
src/app/products/[productId]/page.tsx Normal file
View 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
View 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>
);
}

6
src/app/styles/variables.css
View File

@@ -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);