bender/2c3f248a-cd34-4d43-86f4-6a737c81a558
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #4

Merged
bender merged 4 commits from version_1 into main 2026-02-23 12:21:02 +00:00
Conversation 0 Commits 4 Files Changed 4 +399 -496
4 changed files with 399 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/app/blog/page.tsx
View File

@@ -1,6 +1,7 @@
use client";
"use client";
import ReactLenis from "lenis/react";
import React from 'react';
import Link from 'next/link';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useBlogPosts } from "@/hooks/useBlogPosts";
@@ -16,6 +17,16 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
export default function BlogPage() {
const { posts, isLoading } = useBlogPosts();
const navItems = [
{ name: "Home", id: "/" },
{ name: "Shop", id: "/#shop" },
{ name: "About", id: "/#about" },
{ name: "Features", id: "/#features" },
{ name: "Testimonials", id: "/#testimonials" },
{ name: "FAQ", id: "/#faq" },
{ name: "Contact", id: "/#contact" },
];
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
@@ -29,30 +40,24 @@ export default function BlogPage() {
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Find Me"
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "shop" },
{ name: "About", id: "about" },
{ name: "Features", id: "features" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
]}
button={{ text: "Explore Now", href: "#shop" }}
navItems={navItems}
button={{ text: "Explore Now", href: "/#shop" }}
className="bg-card/80 backdrop-blur-md"
buttonClassName="bg-primary-cta text-primary-cta-text"
buttonTextClassName="font-semibold"
/>
</div>
{isLoading ? (
<div className="w-full min-h-screen flex items-center justify-center">
<p className="text-foreground">Loading posts...</p>
</div>
) : (
<main className="pt-24">
{isLoading ? (
<div className="w-full min-h-screen flex items-center justify-center">
<p className="text-foreground">Loading posts...</p>
</div>
) : (
<main className="pt-24">
<div id="blog" data-section="blog">
<BlogCardTwo
posts={posts}
title="From Our Blog"
@@ -62,30 +67,32 @@ export default function BlogPage() {
useInvertedBackground={false}
carouselMode="buttons"
/>
</main>
)}
</div>
</main>
)}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/pink-silk-background_1048-401.jpg?_wi=2"
imageSrc="https://img.b2bpic.net/free-vector/pink-silk-background_1048-401.jpg"
imageAlt="Abstract luxury texture background with soft gradients"
columns={[
{
title: "Shop", items: [
{ label: "New Arrivals", href: "#shop" },
{ label: "Best Sellers", href: "#shop" },
{ label: "Discovery Sets", href: "#shop" },
{ label: "New Arrivals", href: "/#shop" },
{ label: "Best Sellers", href: "/#shop" },
{ label: "Discovery Sets", href: "/#shop" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Our Promise", href: "#features" },
{ label: "Contact", href: "#contact" },
{ label: "About Us", href: "/#about" },
{ label: "Our Promise", href: "/#features" },
{ label: "Contact", href: "/#contact" },
],
},
{
title: "Support", items: [
{ label: "FAQ", href: "#faq" },
{ label: "FAQ", href: "/#faq" },
{ label: "Shipping", href: "#" },
{ label: "Returns", href: "#" },
],
@@ -93,14 +100,13 @@ export default function BlogPage() {
]}
logoText="Find Me"
copyrightText="© 2024 Find Me. All rights reserved."
useInvertedBackground={false}
className="bg-card"
logoTextClassName="text-foreground"
columnTitleClassName="text-foreground"
columnItemClassName="text-foreground/80 hover:text-primary-cta"
copyrightTextClassName="text-foreground/70"
/>
</ReactLenis>
</div>
</ThemeProvider>
);
}

447
src/app/page.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import React from 'react';
import Link from 'next/link';
import { Award, CheckCircle, Heart, HelpCircle, Mail, MessageSquare, Sparkles } from 'lucide-react';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
@@ -15,6 +16,15 @@ import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterMedia from '@/components/sections/footer/FooterMedia';
export default function LandingPage() {
const navItems = [
{ name: 'Shop', id: '#shop' },
{ name: 'About', id: '#about' },
{ name: 'Features', id: '#features' },
{ name: 'Testimonials', id: '#testimonials' },
{ name: 'FAQ', id: '#faq' },
{ name: 'Contact', id: '#contact' },
];
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
@@ -28,237 +38,228 @@ export default function LandingPage() {
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<main className="bg-background">
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Find Me"
navItems={[
{ name: 'Shop', id: 'shop' },
{ name: 'About', id: 'about' },
{ name: 'Features', id: 'features' },
{ name: 'Testimonials', id: 'testimonials' },
{ name: 'FAQ', id: 'faq' },
{ name: 'Contact', id: 'contact' },
]}
button={{ text: 'Explore Now', href: '#shop' }}
className="bg-card/80 backdrop-blur-md"
buttonClassName="bg-primary-cta text-primary-cta-text"
buttonTextClassName="font-semibold"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Find Me"
navItems={navItems}
button={{ text: 'Explore Now', href: '#shop' }}
className="bg-card/80 backdrop-blur-md"
buttonClassName="bg-primary-cta text-primary-cta-text"
buttonTextClassName="font-semibold"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
title="Unveil Your Signature Scent"
description="Discover an exquisite collection of perfumes that capture the essence of luxury and individuality. Find the fragrance that truly speaks to you."
tag="Find Me Exclusives"
tagIcon={Sparkles}
tagAnimation="background-highlight"
buttons={[
{ text: 'Shop Now', href: '#shop' },
{ text: 'Our Story', href: '#about' },
]}
buttonAnimation="background-highlight"
carouselItems={[
{ id: '1', imageSrc: 'https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg?_wi=1', imageAlt: 'Close up of several elegant perfume bottles on a display' },
{ id: '2', imageSrc: 'https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg?_wi=2', imageAlt: 'A hand holding a luxury perfume bottle, showcasing its design' },
{ id: '3', imageSrc: 'https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg?_wi=3', imageAlt: 'Perfume atomiser spraying a fine mist, close up' },
{ id: '4', imageSrc: 'https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg?_wi=4', imageAlt: 'Various sizes and shapes of perfume bottles on a marble surface' },
{ id: '5', imageSrc: 'https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg?_wi=5', imageAlt: 'A person applying perfume to their wrist, motion blur' },
{ id: '6', imageSrc: 'https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg?_wi=6', imageAlt: 'Artistic arrangement of perfume bottles with soft lighting' },
]}
autoPlay={true}
autoPlayInterval={4000}
background={{ variant: 'radial-gradient' }}
textBoxClassName="text-foreground"
titleClassName="text-foreground"
descriptionClassName="text-foreground"
tagClassName="text-accent"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
title="Unveil Your Signature Scent"
description="Discover an exquisite collection of perfumes that capture the essence of luxury and individuality. Find the fragrance that truly speaks to you."
tag="Find Me Exclusives"
tagIcon={Sparkles}
tagAnimation="background-highlight"
buttons={[
{ text: 'Shop Now', href: '#shop' },
{ text: 'Our Story', href: '#about' },
]}
buttonAnimation="slide-up"
carouselItems={[
{ id: '1', imageSrc: 'https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg', imageAlt: 'Close up of several elegant perfume bottles on a display' },
{ id: '2', imageSrc: 'https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg', imageAlt: 'A hand holding a luxury perfume bottle, showcasing its design' },
{ id: '3', imageSrc: 'https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg', imageAlt: 'Perfume atomiser spraying a fine mist, close up' },
{ id: '4', imageSrc: 'https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg', imageAlt: 'Various sizes and shapes of perfume bottles on a marble surface' },
{ id: '5', imageSrc: 'https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg', imageAlt: 'A person applying perfume to their wrist, motion blur' },
{ id: '6', imageSrc: 'https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg', imageAlt: 'Artistic arrangement of perfume bottles with soft lighting' },
]}
autoPlay={true}
autoPlayInterval={4000}
background={{ variant: 'radial-gradient' }}
textBoxClassName="text-foreground"
titleClassName="text-foreground"
descriptionClassName="text-foreground"
tagClassName="text-accent"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
title="The Art of Fragrance"
description="At Find Me, we believe perfume is more than just a scent—it's an expression of identity, a memory, a feeling. Our curated selection brings you masterpieces from renowned perfumers and hidden gems, crafted with passion and precision."
tag="Our Philosophy"
tagIcon={Award}
tagAnimation="background-highlight"
buttons={[{ text: 'Learn More', href: '#' }]}
buttonAnimation="background-highlight"
imageSrc="https://img.b2bpic.net/free-photo/high-angle-ecological-zero-waster-concept_23-2148591681.jpg"
imageAlt="Close up of a perfumer's tools and ingredients, glass bottles and delicate flowers"
useInvertedBackground={false}
className="bg-background-accent/20"
textBoxClassName="text-foreground"
titleClassName="text-foreground"
descriptionClassName="text-foreground"
tagClassName="text-accent"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
title="The Art of Fragrance"
description="At Find Me, we believe perfume is more than just a scent—it's an expression of identity, a memory, a feeling. Our curated selection brings you masterpieces from renowned perfumers and hidden gems, crafted with passion and precision."
tag="Our Philosophy"
tagIcon={Award}
tagAnimation="background-highlight"
buttons={[{ text: 'Learn More', href: '#' }]}
buttonAnimation="slide-up"
imageSrc="https://img.b2bpic.net/free-photo/high-angle-ecological-zero-waster-concept_23-2148591681.jpg"
imageAlt="Close up of a perfumer's tools and ingredients, glass bottles and delicate flowers"
useInvertedBackground={false}
className="bg-background-accent/20"
textBoxClassName="text-foreground"
titleClassName="text-foreground"
descriptionClassName="text-foreground"
tagClassName="text-accent"
/>
</div>
<div id="shop" data-section="shop">
<ProductCardTwo
title="Our Exquisite Collection"
description="Explore our range of captivating perfumes, each a unique blend of artistry and aroma."
tag="Signature Scents"
tagIcon={Heart}
tagAnimation="background-highlight"
products={[
{ id: '1', brand: 'Essence de Nuit', name: 'Midnight Bloom', price: '$120.00', rating: 5, reviewCount: '1.5k', imageSrc: 'https://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669104.jpg', imageAlt: 'Elegant amber perfume bottle' },
{ id: '2', brand: 'Aura', name: 'Morning Dew', price: '$95.00', rating: 4, reviewCount: '870', imageSrc: 'https://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337694.jpg', imageAlt: 'Modern clear perfume bottle with floral notes' },
{ id: '3', brand: 'Velvet Dreams', name: 'Cashmere Embrace', price: '$150.00', rating: 5, reviewCount: '2.1k', imageSrc: 'https://img.b2bpic.net/free-photo/close-up-perfume-floating-water_23-2150963110.jpg', imageAlt: 'Minimalist white perfume bottle' },
{ id: '4', brand: 'Terra Botanica', name: 'Forest Whisper', price: '$110.00', rating: 4, reviewCount: '620', imageSrc: 'https://img.b2bpic.net/free-photo/japanese-bottle-cups_23-2149869744.jpg', imageAlt: 'Dark green perfume bottle with woody scent' },
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
className="bg-card"
textBoxClassName="text-foreground"
textBoxTitleClassName="text-foreground"
textBoxDescriptionClassName="text-foreground"
cardClassName="bg-card/80 shadow-soft-shadow"
cardNameClassName="text-foreground"
cardBrandClassName="text-foreground/70"
cardPriceClassName="text-foreground"
cardRatingClassName="text-accent"
actionButtonClassName="text-primary-cta"
textBoxTagClassName="text-accent"
/>
</div>
<div id="shop" data-section="shop">
<ProductCardTwo
title="Our Exquisite Collection"
description="Explore our range of captivating perfumes, each a unique blend of artistry and aroma."
tag="Signature Scents"
tagIcon={Heart}
tagAnimation="background-highlight"
products={[
{ id: '1', brand: 'Essence de Nuit', name: 'Midnight Bloom', price: '$120.00', rating: 5, reviewCount: '1.5k', imageSrc: 'https://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669104.jpg', imageAlt: 'Elegant amber perfume bottle' },
{ id: '2', brand: 'Aura', name: 'Morning Dew', price: '$95.00', rating: 4, reviewCount: '870', imageSrc: 'https://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337694.jpg', imageAlt: 'Modern clear perfume bottle with floral notes' },
{ id: '3', brand: 'Velvet Dreams', name: 'Cashmere Embrace', price: '$150.00', rating: 5, reviewCount: '2.1k', imageSrc: 'https://img.b2bpic.net/free-photo/close-up-perfume-floating-water_23-2150963110.jpg', imageAlt: 'Minimalist white perfume bottle' },
{ id: '4', brand: 'Terra Botanica', name: 'Forest Whisper', price: '$110.00', rating: 4, reviewCount: '620', imageSrc: 'https://img.b2bpic.net/free-photo/japanese-bottle-cups_23-2149869744.jpg', imageAlt: 'Dark green perfume bottle with woody scent' },
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
className="bg-card"
textBoxClassName="text-foreground"
textBoxTitleClassName="text-foreground"
textBoxDescriptionClassName="text-foreground"
cardClassName="bg-card/80 shadow-soft-shadow"
cardNameClassName="text-foreground"
cardBrandClassName="text-foreground/70"
cardPriceClassName="text-foreground"
cardRatingClassName="text-accent"
actionButtonClassName="text-primary-cta"
textBoxTagClassName="text-accent"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
title="Why Choose Find Me?"
description="Experience unparalleled quality, personalized service, and a passion for fine fragrances."
tag="Our Promise"
tagIcon={CheckCircle}
tagAnimation="background-highlight"
accordionItems={[
{ id: '1', title: 'Curated Selection', content: 'We handpick each perfume, ensuring a collection of exceptional quality and unique character from across the globe.' },
{ id: '2', title: 'Expert Guidance', content: 'Our fragrance specialists offer personalized consultations to help you discover the perfect scent that reflects your style.' },
{ id: '3', title: 'Sustainable Sourcing', content: 'Committed to ethical practices, we partner with perfumers who prioritize sustainability and responsible ingredient sourcing.' },
]}
imageSrc="https://img.b2bpic.net/free-vector/black-gold-logo-with-star-middle_698780-965.jpg"
imageAlt="Sparkling star icon representing quality"
mediaAnimation="blur-reveal"
useInvertedBackground={false}
mediaPosition="left"
className="bg-background-accent/30"
textBoxClassName="text-foreground"
titleClassName="text-foreground"
descriptionClassName="text-foreground"
tagClassName="text-accent"
accordionClassName="bg-card shadow-soft-shadow"
accordionTitleClassName="text-foreground"
accordionContentClassName="text-foreground/80"
accordionIconClassName="text-accent"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
title="Why Choose Find Me?"
description="Experience unparalleled quality, personalized service, and a passion for fine fragrances."
tag="Our Promise"
tagIcon={CheckCircle}
tagAnimation="background-highlight"
accordionItems={[
{ id: '1', title: 'Curated Selection', content: 'We handpick each perfume, ensuring a collection of exceptional quality and unique character from across the globe.' },
{ id: '2', title: 'Expert Guidance', content: 'Our fragrance specialists offer personalized consultations to help you discover the perfect scent that reflects your style.' },
{ id: '3', title: 'Sustainable Sourcing', content: 'Committed to ethical practices, we partner with perfumers who prioritize sustainability and responsible ingredient sourcing.' },
]}
imageSrc="https://img.b2bpic.net/free-vector/black-gold-logo-with-star-middle_698780-965.jpg"
imageAlt="Sparkling star icon representing quality"
mediaAnimation="blur-reveal"
useInvertedBackground={false}
mediaPosition="left"
className="bg-background-accent/30"
textBoxClassName="text-foreground"
titleClassName="text-foreground"
descriptionClassName="text-foreground"
tagClassName="text-accent"
accordionClassName="bg-card shadow-soft-shadow"
accordionTitleClassName="text-foreground"
accordionContentClassName="text-foreground/80"
accordionIconClassName="text-accent"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
title="Hear From Our Scent Enthusiasts"
description="Read what our cherished customers have to say about their 'Find Me' experience."
tag="Customer Love"
tagIcon={MessageSquare}
tagAnimation="background-highlight"
testimonials={[
{ id: '1', title: 'Truly a game-changer for my fragrance journey!', quote: '"Find Me transformed how I discover perfumes. Their selection is exquisite, and the personalized recommendations are spot on. I\'ve found my new signature scent!"', name: 'Elara Vance', role: 'Fragrance Blogger', imageSrc: 'https://img.b2bpic.net/free-photo/european-woman-with-bright-make-up-elegant-outfit-preparing-birthday-party_291650-580.jpg', imageAlt: 'Portrait of Elara Vance' },
{ id: '2', title: 'Exceptional service and an unparalleled collection.', quote: '"The team at Find Me is incredibly knowledgeable. They helped me choose a unique fragrance for a special occasion, and I couldn\'t be happier with the quality and experience."', name: 'Marcus Thorne', role: 'Creative Director', imageSrc: 'https://img.b2bpic.net/free-photo/handsome-welldressed-arabian-man-smoke-cigar-with-glass-whiskey-balcony-pub_627829-5920.jpg', imageAlt: 'Portrait of Marcus Thorne' },
{ id: '3', title: 'My go-to for luxury perfumes and expert advice.', quote: '"I\'ve been a loyal customer for years. Find Me consistently offers the most beautiful and hard-to-find fragrances, along with amazing customer support."', name: 'Sophia Dubois', role: 'Fashion Stylist', imageSrc: 'https://img.b2bpic.net/free-photo/young-woman-with-long-curly-hair-celebrating-married-with-champagne_496169-577.jpg', imageAlt: 'Portrait of Sophia Dubois' },
{ id: '4', title: 'A sensory delight from start to finish.', quote: '"Every purchase from Find Me is an experience. The packaging, the exquisite scents, and the attention to detail make it my favorite perfume destination."', name: 'Liam Sterling', role: 'Art Collector', imageSrc: 'https://img.b2bpic.net/free-photo/beauty-woman-talking-by-mobile-phone-home_329181-4277.jpg', imageAlt: 'Portrait of Liam Sterling' },
]}
textboxLayout="default"
useInvertedBackground={false}
className="bg-card"
textBoxClassName="text-foreground"
textBoxTitleClassName="text-foreground"
textBoxDescriptionClassName="text-foreground"
tagClassName="text-accent"
quoteCardClassName="bg-background/80 shadow-soft-shadow"
testimonialTitleClassName="text-foreground"
quoteClassName="text-foreground/90"
nameClassName="text-primary-cta"
roleClassName="text-foreground/70"
navigationButtonClassName="text-primary-cta hover:text-accent"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
title="Hear From Our Scent Enthusiasts"
description="Read what our cherished customers have to say about their 'Find Me' experience."
tag="Customer Love"
tagIcon={MessageSquare}
tagAnimation="background-highlight"
testimonials={[
{ id: '1', title: 'Truly a game-changer for my fragrance journey!', quote: "Find Me transformed how I discover perfumes. Their selection is exquisite, and the personalized recommendations are spot on. I've found my new signature scent!", name: 'Elara Vance', role: 'Fragrance Blogger', imageSrc: 'https://img.b2bpic.net/free-photo/european-woman-with-bright-make-up-elegant-outfit-preparing-birthday-party_291650-580.jpg', imageAlt: 'Portrait of Elara Vance' },
{ id: '2', title: 'Exceptional service and an unparalleled collection.', quote: "The team at Find Me is incredibly knowledgeable. They helped me choose a unique fragrance for a special occasion, and I couldn't be happier with the quality and experience.", name: 'Marcus Thorne', role: 'Creative Director', imageSrc: 'https://img.b2bpic.net/free-photo/handsome-welldressed-arabian-man-smoke-cigar-with-glass-whiskey-balcony-pub_627829-5920.jpg', imageAlt: 'Portrait of Marcus Thorne' },
{ id: '3', title: 'My go-to for luxury perfumes and expert advice.', quote: "I've been a loyal customer for years. Find Me consistently offers the most beautiful and hard-to-find fragrances, along with amazing customer support.", name: 'Sophia Dubois', role: 'Fashion Stylist', imageSrc: 'https://img.b2bpic.net/free-photo/young-woman-with-long-curly-hair-celebrating-married-with-champagne_496169-577.jpg', imageAlt: 'Portrait of Sophia Dubois' },
{ id: '4', title: 'A sensory delight from start to finish.', quote: "Every purchase from Find Me is an experience. The packaging, the exquisite scents, and the attention to detail make it my favorite perfume destination.", name: 'Liam Sterling', role: 'Art Collector', imageSrc: 'https://img.b2bpic.net/free-photo/beauty-woman-talking-by-mobile-phone-home_329181-4277.jpg', imageAlt: 'Portrait of Liam Sterling' },
]}
textboxLayout="default"
useInvertedBackground={false}
className="bg-card"
textBoxClassName="text-foreground"
textBoxTitleClassName="text-foreground"
textBoxDescriptionClassName="text-foreground"
tagClassName="text-accent"
quoteCardClassName="bg-background/80 shadow-soft-shadow"
testimonialTitleClassName="text-foreground"
quoteClassName="text-foreground/90"
nameClassName="text-primary-cta"
roleClassName="text-foreground/70"
navigationButtonClassName="text-primary-cta hover:text-accent"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Frequently Asked Questions"
description="Find answers to common inquiries about our products, shipping, and services."
tag="Need Help?"
tagIcon={HelpCircle}
tagAnimation="background-highlight"
faqs={[
{ id: '1', title: 'What is your return policy?', content: 'We offer returns on unopened and unused perfumes within 14 days of purchase. Please refer to our full policy for details.' },
{ id: '2', title: 'How long does shipping take?', content: 'Standard shipping usually takes 3-7 business days within the country. International shipping times vary.' },
{ id: '3', title: 'Do you offer gift wrapping?', content: 'Yes, we provide luxury gift wrapping services for all orders at a small additional cost. You can select this option at checkout.' },
{ id: '4', title: 'Can I sample perfumes before buying?', content: 'We currently offer discovery sets with small samples of our popular fragrances for purchase.' },
{ id: '5', title: 'Are your perfumes authentic?', content: 'Absolutely. We source all our perfumes directly from authorized distributors and brands, guaranteeing 100% authenticity.' },
{ id: '6', title: 'How should I store my perfume?', content: 'To preserve the integrity of your fragrance, store it in a cool, dark place away from direct sunlight and extreme temperatures.' },
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="smooth"
className="bg-background-accent/10"
textBoxClassName="text-foreground"
textBoxTitleClassName="text-foreground"
textBoxDescriptionClassName="text-foreground"
tagClassName="text-accent"
faqsContainerClassName="bg-card shadow-soft-shadow"
accordionTitleClassName="text-foreground"
accordionIconClassName="text-primary-cta"
accordionContentClassName="text-foreground/80"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Frequently Asked Questions"
description="Find answers to common inquiries about our products, shipping, and services."
tag="Need Help?"
tagIcon={HelpCircle}
tagAnimation="background-highlight"
faqs={[
{ id: '1', title: 'What is your return policy?', content: 'We offer returns on unopened and unused perfumes within 14 days of purchase. Please refer to our full policy for details.' },
{ id: '2', title: 'How long does shipping take?', content: 'Standard shipping usually takes 3-7 business days within the country. International shipping times vary.' },
{ id: '3', title: 'Do you offer gift wrapping?', content: 'Yes, we provide luxury gift wrapping services for all orders at a small additional cost. You can select this option at checkout.' },
{ id: '4', title: 'Can I sample perfumes before buying?', content: 'We currently offer discovery sets with small samples of our popular fragrances for purchase.' },
{ id: '5', title: 'Are your perfumes authentic?', content: 'Absolutely. We source all our perfumes directly from authorized distributors and brands, guaranteeing 100% authenticity.' },
{ id: '6', title: 'How should I store my perfume?', content: 'To preserve the integrity of your fragrance, store it in a cool, dark place away from direct sunlight and extreme temperatures.' },
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="smooth"
className="bg-background-accent/10"
textBoxClassName="text-foreground"
textBoxTitleClassName="text-foreground"
textBoxDescriptionClassName="text-foreground"
tagClassName="text-accent"
faqsContainerClassName="bg-card shadow-soft-shadow"
accordionTitleClassName="text-foreground"
accordionIconClassName="text-primary-cta"
accordionContentClassName="text-foreground/80"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Connect With Us"
title="Inquire About Your Next Scent"
description="Have questions or need assistance? Our expert team is here to help you find your perfect fragrance."
tagIcon={Mail}
tagAnimation="background-highlight"
background={{ variant: 'sparkles-gradient' }}
useInvertedBackground={false}
inputPlaceholder="Your email address"
buttonText="Send Message"
termsText="By submitting, you agree to our privacy policy and terms of service."
className="bg-background-accent/40"
contentClassName="text-foreground"
tagClassName="text-accent"
titleClassName="text-foreground"
descriptionClassName="text-foreground"
buttonClassName="bg-primary-cta text-primary-cta-text"
buttonTextClassName="font-semibold"
inputClassName="text-foreground bg-card placeholder:text-foreground/60 focus:ring-accent"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Connect With Us"
title="Inquire About Your Next Scent"
description="Have questions or need assistance? Our expert team is here to help you find your perfect fragrance."
tagIcon={Mail}
tagAnimation="background-highlight"
background={{ variant: 'sparkles-gradient' }}
useInvertedBackground={false}
inputPlaceholder="Your email address"
buttonText="Send Message"
termsText="By submitting, you agree to our privacy policy and terms of service."
className="bg-background-accent/40"
contentClassName="text-foreground"
tagClassName="text-accent"
titleClassName="text-foreground"
descriptionClassName="text-foreground"
buttonClassName="bg-primary-cta text-primary-cta-text"
buttonTextClassName="font-semibold"
inputClassName="text-foreground bg-card placeholder:text-foreground/60 focus:ring-accent"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/pink-silk-background_1048-401.jpg?_wi=1"
imageAlt="Abstract luxury texture background with soft gradients"
columns={[
{ title: 'Shop', items: [{ label: 'New Arrivals', href: '#shop' }, { label: 'Best Sellers', href: '#shop' }, { label: 'Discovery Sets', href: '#shop' }] },
{ title: 'Company', items: [{ label: 'About Us', href: '#about' }, { label: 'Our Promise', href: '#features' }, { label: 'Contact', href: '#contact' }] },
{ title: 'Support', items: [{ label: 'FAQ', href: '#faq' }, { label: 'Shipping', href: '#' }, { label: 'Returns', href: '#' }] },
]}
logoText="Find Me"
copyrightText="© 2024 Find Me. All rights reserved."
className="bg-card"
logoTextClassName="text-foreground"
columnTitleClassName="text-foreground"
columnItemClassName="text-foreground/80 hover:text-primary-cta"
copyrightTextClassName="text-foreground/70"
/>
</div>
</main>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/pink-silk-background_1048-401.jpg"
imageAlt="Abstract luxury texture background with soft gradients"
columns={[
{ title: 'Shop', items: [{ label: 'New Arrivals', href: '#shop' }, { label: 'Best Sellers', href: '#shop' }, { label: 'Discovery Sets', href: '#shop' }] },
{ title: 'Company', items: [{ label: 'About Us', href: '#about' }, { label: 'Our Promise', href: '#features' }, { label: 'Contact', href: '#contact' }] },
{ title: 'Support', items: [{ label: 'FAQ', href: '#faq' }, { label: 'Shipping', href: '#' }, { label: 'Returns', href: '#' }] },
]}
logoText="Find Me"
copyrightText="© 2024 Find Me. All rights reserved."
className="bg-card"
logoTextClassName="text-foreground"
columnTitleClassName="text-foreground"
columnItemClassName="text-foreground/80 hover:text-primary-cta"
copyrightTextClassName="text-foreground/70"
/>
</div>
</ThemeProvider>
);
}

262
src/app/shop/[id]/page.tsx
View File

@@ -2,7 +2,7 @@
import { Suspense, use, useCallback } from "react";
import { useRouter } from "next/navigation";
import ReactLenis from "lenis/react";
import Link from 'next/link';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterMedia from '@/components/sections/footer/FooterMedia';
@@ -16,6 +16,17 @@ interface ProductPageProps {
params: Promise<{ id: string }>;
}
const navItems = [
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "About", id: "/#about" },
{ name: "Features", id: "/#features" },
{ name: "Testimonials", id: "/#testimonials" },
{ name: "FAQ", id: "/#faq" },
{ name: "Contact", id: "/#contact" },
];
export default function ProductPage({ params }: ProductPageProps) {
return (
<Suspense fallback={null}>
@@ -74,108 +85,52 @@ function ProductPageContent({ params }: ProductPageProps) {
await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
}, [cartItems, checkout, getCheckoutItems]);
if (isLoading) {
const MainContent = () => {
if (isLoading) {
return (
<main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Loading product...</p>
</main>
)
}
if (!product) {
return (
<main className="min-h-screen flex items-center justify-center pt-20">
<div className="text-center">
<p className="text-foreground mb-4">Product not found</p>
<button
onClick={() => router.push("/shop")}
className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
>
Back to Shop
</button>
</div>
</main>
);
}
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="blurBottom"
cardStyle="soft-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Find Me"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "shop" }, { name: "About", id: "about" }, { name: "Features", id: "features" }, { name: "Testimonials", id: "testimonials" }, { name: "FAQ", id: "faq" }, { name: "Contact", id: "contact" }]}
className="bg-card/80 backdrop-blur-md"
buttonClassName="bg-primary-cta text-primary-cta-text"
buttonTextClassName="font-semibold"
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/>
</div>
<main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Loading product...</p>
</main>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/pink-silk-background_1048-401.jpg?_wi=5"
imageAlt="Abstract luxury texture background with soft gradients"
columns={[{ title: "Shop", items: [{ label: "New Arrivals", href: "#shop" }, { label: "Best Sellers", href: "#shop" }, { label: "Discovery Sets", href: "#shop" }] }, { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Our Promise", href: "#features" }, { label: "Contact", href: "#contact" }] }, { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] }]}
logoText="Find Me"
copyrightText="© 2024 Find Me. All rights reserved."
useInvertedBackground={false}
className="bg-card"
logoTextClassName="text-foreground"
columnTitleClassName="text-foreground"
columnItemClassName="text-foreground/80 hover:text-primary-cta"
copyrightTextClassName="text-foreground/70"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
if (!product) {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="blurBottom"
cardStyle="soft-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Find Me"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "shop" }, { name: "About", id: "about" }, { name: "Features", id: "features" }, { name: "Testimonials", id: "testimonials" }, { name: "FAQ", id: "faq" }, { name: "Contact", id: "contact" }]}
className="bg-card/80 backdrop-blur-md"
buttonClassName="bg-primary-cta text-primary-cta-text"
buttonTextClassName="font-semibold"
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/>
</div>
<main className="min-h-screen flex items-center justify-center pt-20">
<div className="text-center">
<p className="text-foreground mb-4">Product not found</p>
<button
onClick={() => router.push("/shop")}
className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
>
Back to Shop
</button>
</div>
</main>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/pink-silk-background_1048-401.jpg?_wi=6"
imageAlt="Abstract luxury texture background with soft gradients"
columns={[{ title: "Shop", items: [{ label: "New Arrivals", href: "#shop" }, { label: "Best Sellers", href: "#shop" }, { label: "Discovery Sets", href: "#shop" }] }, { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Our Promise", href: "#features" }, { label: "Contact", href: "#contact" }] }, { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] }]}
logoText="Find Me"
copyrightText="© 2024 Find Me. All rights reserved."
useInvertedBackground={false}
className="bg-card"
logoTextClassName="text-foreground"
columnTitleClassName="text-foreground"
columnItemClassName="text-foreground/80 hover:text-primary-cta"
copyrightTextClassName="text-foreground/70"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
<div id="product-detail-card" data-section="product-detail-card">
<ProductDetailCard
layout="page"
name={product.name}
price={product.price}
salePrice={meta.salePrice}
rating={product.rating || 0}
description={product.description}
images={images}
variants={variants.length > 0 ? variants : undefined}
quantity={quantityVariant}
ribbon={meta.ribbon}
inventoryStatus={meta.inventoryStatus}
inventoryQuantity={meta.inventoryQuantity}
sku={meta.sku}
buttons={[
{ text: "Add To Cart", onClick: handleAddToCart },
{ text: "Buy Now", onClick: handleBuyNow },
]}
/>
</div>
)
}
return (
@@ -191,69 +146,46 @@ function ProductPageContent({ params }: ProductPageProps) {
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Find Me"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "shop" }, { name: "About", id: "about" }, { name: "Features", id: "features" }, { name: "Testimonials", id: "testimonials" }, { name: "FAQ", id: "faq" }, { name: "Contact", id: "contact" }]}
className="bg-card/80 backdrop-blur-md"
buttonClassName="bg-primary-cta text-primary-cta-text"
buttonTextClassName="font-semibold"
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/>
</div>
<div id="product-detail-card" data-section="product-detail-card">
<ProductDetailCard
layout="page"
name={product.name}
price={product.price}
salePrice={meta.salePrice}
rating={product.rating || 0}
description={product.description}
images={images}
variants={variants.length > 0 ? variants : undefined}
quantity={quantityVariant}
ribbon={meta.ribbon}
inventoryStatus={meta.inventoryStatus}
inventoryQuantity={meta.inventoryQuantity}
sku={meta.sku}
buttons={[
{ text: "Add To Cart", onClick: handleAddToCart },
{ text: "Buy Now", onClick: handleBuyNow },
]}
/>
</div>
<div id="product-cart" data-section="product-cart">
<ProductCart
isOpen={cartOpen}
onClose={() => setCartOpen(false)}
items={cartItems}
onQuantityChange={updateQuantity}
onRemove={removeItem}
total={`$${cartTotal}`}
buttons={[
{
text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout,
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/pink-silk-background_1048-401.jpg?_wi=7"
imageAlt="Abstract luxury texture background with soft gradients"
columns={[{ title: "Shop", items: [{ label: "New Arrivals", href: "#shop" }, { label: "Best Sellers", href: "#shop" }, { label: "Discovery Sets", href: "#shop" }] }, { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Our Promise", href: "#features" }, { label: "Contact", href: "#contact" }] }, { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] }]}
logoText="Find Me"
copyrightText="© 2024 Find Me. All rights reserved."
useInvertedBackground={false}
className="bg-card"
logoTextClassName="text-foreground"
columnTitleClassName="text-foreground"
columnItemClassName="text-foreground/80 hover:text-primary-cta"
copyrightTextClassName="text-foreground/70"
/>
</div>
</ReactLenis>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Find Me"
navItems={navItems}
className="bg-card/80 backdrop-blur-md"
buttonClassName="bg-primary-cta text-primary-cta-text"
buttonTextClassName="font-semibold"
button={{ text: `Cart (${cartItems.length})`, onClick: () => setCartOpen(true) }}
/>
</div>
<MainContent />
<div id="product-cart" data-section="product-cart">
<ProductCart
isOpen={cartOpen}
onClose={() => setCartOpen(false)}
items={cartItems}
onQuantityChange={updateQuantity}
onRemove={removeItem}
total={`$${cartTotal}`}
buttons={[
{
text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout,
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/pink-silk-background_1048-401.jpg"
imageAlt="Abstract luxury texture background with soft gradients"
columns={[{ title: "Shop", items: [{ label: "New Arrivals", href: "/shop" }, { label: "Best Sellers", href: "/shop" }, { label: "Discovery Sets", href: "/shop" }] }, { title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Our Promise", href: "/#features" }, { label: "Contact", href: "/#contact" }] }, { title: "Support", items: [{ label: "FAQ", href: "/#faq" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] }]}
logoText="Find Me"
copyrightText="© 2024 Find Me. All rights reserved."
className="bg-card"
logoTextClassName="text-foreground"
columnTitleClassName="text-foreground"
columnItemClassName="text-foreground/80 hover:text-primary-cta"
copyrightTextClassName="text-foreground/70"
/>
</div>
</ThemeProvider>
);
}

116
src/app/shop/page.tsx
View File

@@ -1,13 +1,22 @@
"use client";
import { Suspense } from "react";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from 'next/link';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
import { useProductCatalog } from "@/hooks/useProductCatalog";
const navItems = [
{ name: "Home", id: "/" },
{ name: "About", id: "/#about" },
{ name: "Features", id: "/#features" },
{ name: "Testimonials", id: "/#testimonials" },
{ name: "FAQ", id: "/#faq" },
{ name: "Contact", id: "/#contact" },
];
function ShopPageContent() {
const {
products,
@@ -17,54 +26,6 @@ function ShopPageContent() {
filters,
} = useProductCatalog({ basePath: "/shop" });
if (isLoading) {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="blurBottom"
cardStyle="soft-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Find Me"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "shop" }, { name: "About", id: "about" }, { name: "Features", id: "features" }, { name: "Testimonials", id: "testimonials" }, { name: "FAQ", id: "faq" }, { name: "Contact", id: "contact" }]}
className="bg-card/80 backdrop-blur-md"
buttonClassName="bg-primary-cta text-primary-cta-text"
buttonTextClassName="font-semibold"
button={{ text: "Cart", onClick: () => { } }}
/>
</div>
<main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Loading products...</p>
</main>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/pink-silk-background_1048-401.jpg?_wi=3"
imageAlt="Abstract luxury texture background with soft gradients"
columns={[{ title: "Shop", items: [{ label: "New Arrivals", href: "#shop" }, { label: "Best Sellers", href: "#shop" }, { label: "Discovery Sets", href: "#shop" }] }, { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Our Promise", href: "#features" }, { label: "Contact", href: "#contact" }] }, { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] }]}
logoText="Find Me"
copyrightText="© 2024 Find Me. All rights reserved."
useInvertedBackground={false}
className="bg-card"
logoTextClassName="text-foreground"
columnTitleClassName="text-foreground"
columnItemClassName="text-foreground/80 hover:text-primary-cta"
copyrightTextClassName="text-foreground/70"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
@@ -78,17 +39,21 @@ function ShopPageContent() {
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Find Me"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "shop" }, { name: "About", id: "about" }, { name: "Features", id: "features" }, { name: "Testimonials", id: "testimonials" }, { name: "FAQ", id: "faq" }, { name: "Contact", id: "contact" }]}
className="bg-card/80 backdrop-blur-md"
buttonClassName="bg-primary-cta text-primary-cta-text"
buttonTextClassName="font-semibold"
button={{ text: "Cart", onClick: () => { } }}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Find Me"
navItems={navItems}
className="bg-card/80 backdrop-blur-md"
buttonClassName="bg-primary-cta text-primary-cta-text"
buttonTextClassName="font-semibold"
button={{ text: "Cart", onClick: () => { } }}
/>
</div>
{isLoading ? (
<main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Loading products...</p>
</main>
) : (
<div id="product-catalog" data-section="product-catalog">
<ProductCatalog
layout="page"
@@ -100,22 +65,21 @@ function ShopPageContent() {
emptyMessage="No products found"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/pink-silk-background_1048-401.jpg?_wi=4"
imageAlt="Abstract luxury texture background with soft gradients"
columns={[{ title: "Shop", items: [{ label: "New Arrivals", href: "#shop" }, { label: "Best Sellers", href: "#shop" }, { label: "Discovery Sets", href: "#shop" }] }, { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Our Promise", href: "#features" }, { label: "Contact", href: "#contact" }] }, { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] }]}
logoText="Find Me"
copyrightText="© 2024 Find Me. All rights reserved."
useInvertedBackground={false}
className="bg-card"
logoTextClassName="text-foreground"
columnTitleClassName="text-foreground"
columnItemClassName="text-foreground/80 hover:text-primary-cta"
copyrightTextClassName="text-foreground/70"
/>
</div>
</ReactLenis>
)}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/pink-silk-background_1048-401.jpg"
imageAlt="Abstract luxury texture background with soft gradients"
columns={[{ title: "Shop", items: [{ label: "New Arrivals", href: "/#shop" }, { label: "Best Sellers", href: "/#shop" }, { label: "Discovery Sets", href: "/#shop" }] }, { title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Our Promise", href: "/#features" }, { label: "Contact", href: "/#contact" }] }, { title: "Support", items: [{ label: "FAQ", href: "/#faq" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] }]}
logoText="Find Me"
copyrightText="© 2024 Find Me. All rights reserved."
className="bg-card"
logoTextClassName="text-foreground"
columnTitleClassName="text-foreground"
columnItemClassName="text-foreground/80 hover:text-primary-cta"
copyrightTextClassName="text-foreground/70"
/>
</div>
</ThemeProvider>
);
}