Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -10,51 +10,54 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Award, Droplet, Heart, HelpCircle, Leaf, Mail, Shield, Sparkles, Zap } from 'lucide-react';
+import { Award, Droplet, Heart, HelpCircle, Leaf, Mail, Shield, Sparkles, Zap, Crown, Star } from 'lucide-react';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-bubble"
-      defaultTextAnimation="reveal-blur"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="small"
+      contentWidth="mediumLarge"
       sizing="largeSmallSizeLargeTitles"
-      background="aurora"
-      cardStyle="gradient-bordered"
-      primaryButtonStyle="double-inset"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           navItems={[
             { name: "About", id: "about" },
-            { name: "Products", id: "products" },
-            { name: "Features", id: "features" },
-            { name: "Testimonials", id: "testimonials" },
+            { name: "Gallery", id: "products" },
+            { name: "Why Us", id: "features" },
+            { name: "Reviews", id: "testimonials" },
             { name: "FAQ", id: "faq" },
           ]}
           button={{
-            text: "Shop Now",            href: "products"}}
-          brandName="Lumière Skincare"
+            text: "Shop Now",            href: "products"
+          }}
+          brandName="JK Beauty Supply"
         />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroLogoBillboard
-          logoText="Lumière Skincare"
-          description="Discover the power of nature's finest ingredients. Our luxurious skincare collection is crafted to nourish, transform, and reveal your most radiant skin."
+          logoText="JK Beauty Supply"
+          description="Your destination for premium wigs and professional hair care products. Celebrating beauty, quality, and community with locally-owned expertise and luxury selection."
           buttons={[
-            { text: "Explore Products", href: "products" },
-            { text: "Learn More", href: "about" },
+            { text: "Explore Gallery", href: "products" },
+            { text: "Learn About Us", href: "about" },
           ]}
-          background={{ variant: "aurora" }}
+          background={{ variant: "plain" }}
           imageSrc="http://img.b2bpic.net/free-photo/selfcare-products-arrangement_23-2149249587.jpg"
-          imageAlt="Premium skincare products collection"
+          imageAlt="Premium wig and hair care collection"
           mediaAnimation="slide-up"
           frameStyle="card"
           buttonAnimation="opacity"
+          buttonClassName="bg-white text-black hover:bg-gray-100 border-0"
+          buttonTextClassName="text-black font-semibold"
         />
       </div>
 
@@ -62,12 +65,12 @@ export default function LandingPage() {
         <InlineImageSplitTextAbout
           heading={[
             { type: "text", content: "Crafted with" },
-            { type: "image", src: "http://img.b2bpic.net/free-vector/grunge-vegan-seal-stamp-rubber-look_78370-671.jpg", alt: "Premium ingredients" },
-            { type: "text", content: "premium natural ingredients for transformative beauty" },
+            { type: "image", src: "http://img.b2bpic.net/free-vector/grunge-vegan-seal-stamp-rubber-look_78370-671.jpg", alt: "Premium quality" },
+            { type: "text", content: "passion for quality beauty solutions" },
           ]}
           buttons={[
             { text: "Our Story", href: "#about" },
-            { text: "Sustainability", href: "#" },
+            { text: "Contact Us", href: "#contact" },
           ]}
           useInvertedBackground={false}
           buttonAnimation="opacity"
@@ -76,27 +79,31 @@ export default function LandingPage() {
 
       <div id="products" data-section="products">
         <ProductCardOne
-          title="Our Signature Collection"
-          description="Handpicked products designed to address every skincare concern with pure, effective formulations."
-          tag="Best Sellers"
-          tagIcon={Sparkles}
+          title="Featured Wig Gallery"
+          description="Handpicked premium wigs and hair care essentials selected for quality, style, and authenticity. Discover the perfect look for every occasion."
+          tag="5-Star Collection"
+          tagIcon={Star}
           tagAnimation="opacity"
           products={[
             {
-              id: "1",              name: "Hydrating Rose Serum",              price: "$58",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238265.jpg",              imageAlt: "Hydrating Rose Serum bottle"},
+              id: "1",              name: "Blonde Bob Wig",              price: "$300 ",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUNRAbjK0ztOXg5HB0SF5mWpi5/uploaded-1772758012823-ctfyn1fq.jpg",              imageAlt: "Blonde Bob Wig"
+            },
             {
-              id: "2",              name: "Nourishing Night Cream",              price: "$72",              imageSrc: "http://img.b2bpic.net/free-photo/skin-care-banner-concept-with-lotion_23-2149449093.jpg",              imageAlt: "Nourishing Night Cream jar"},
+              id: "2",              name: "Natural Curly Wig",              price: "$315",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUNRAbjK0ztOXg5HB0SF5mWpi5/uploaded-1772758339713-8zu1ohjy.jpg",              imageAlt: "Natural Curly Wig"
+            },
             {
-              id: "3",              name: "Gentle Cleanser",              price: "$42",              imageSrc: "http://img.b2bpic.net/free-photo/beauty-self-care-products-arrangement_23-2148976971.jpg",              imageAlt: "Gentle Cleanser bottle"},
+              id: "3",              name: "Deep Wave Wig",              price: "$225 ",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUNRAbjK0ztOXg5HB0SF5mWpi5/uploaded-1772758032282-mjbgbl32.jpg",              imageAlt: "Deep Wave Wig"
+            },
             {
-              id: "4",              name: "Radiant Eye Cream",              price: "$65",              imageSrc: "http://img.b2bpic.net/free-photo/human-hand-holding-jar-moisturizing-cream_23-2147926880.jpg",              imageAlt: "Radiant Eye Cream jar"},
+              id: "4",              name: "Hollywood Body Wig",              price: "$275",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUNRAbjK0ztOXg5HB0SF5mWpi5/uploaded-1772758315118-g96rtkvi.jpg",              imageAlt: "Hollywood Body Wig"
+            },
           ]}
           textboxLayout="default"
           animationType="slide-up"
           gridVariant="bento-grid"
           useInvertedBackground={false}
           buttons={[
-            { text: "View All", href: "#" },
+            { text: "View Full Collection", href: "#" },
           ]}
           buttonAnimation="opacity"
         />
@@ -104,37 +111,42 @@ export default function LandingPage() {
 
       <div id="features" data-section="features">
         <FeatureBento
-          title="Why Choose Lumière"
-          description="Experience skincare that combines nature's wisdom with scientific innovation for visible, lasting results."
-          tag="Premium Quality"
-          tagIcon={Award}
+          title="Why JK Beauty Supply"
+          description="Premium quality, expert service, and community-focused beauty solutions. We're committed to celebrating authentic beauty for everyone."
+          tag="Premium Standards"
+          tagIcon={Crown}
           tagAnimation="opacity"
           textboxLayout="default"
           animationType="slide-up"
           useInvertedBackground={false}
           features={[
             {
-              title: "Natural Ingredients",              description: "Pure botanicals and organic extracts selected for maximum efficacy",              bentoComponent: "icon-info-cards",              items: [
-                { icon: Leaf, label: "Organic", value: "100%" },
-                { icon: Droplet, label: "Hydrating", value: "Deep" },
-                { icon: Shield, label: "Safe", value: "Tested" },
+              title: "Premium Selection",              description: "Carefully curated wigs and hair products from the best manufacturers worldwide",              bentoComponent: "icon-info-cards",              items: [
+                { icon: Crown, label: "Luxury Brands", value: "100%" },
+                { icon: Star, label: "Quality Verified", value: "Every Item" },
+                { icon: Shield, label: "Authentic", value: "Guaranteed" },
               ],
             },
             {
-              title: "Advanced Formulation",              description: "Scientifically proven compounds that work synergistically",              bentoComponent: "animated-bar-chart"},
+              title: "Expert Knowledge",              description: "Professional team with deep expertise in wigs and hair care solutions",              bentoComponent: "animated-bar-chart"
+            },
             {
-              title: "Sustainable Packaging",              description: "Eco-friendly materials that protect your skin and the planet",              bentoComponent: "globe"},
+              title: "Community Focus",              description: "Celebrating beauty diversity and supporting your personal style journey",              bentoComponent: "globe"
+            },
             {
-              title: "Customer Results",              description: "Real transformations from our community of skincare enthusiasts",              bentoComponent: "3d-stack-cards",              items: [
+              title: "Customer Results",              description: "Real transformations and satisfaction from our valued community",              bentoComponent: "3d-stack-cards",              items: [
                 {
-                  icon: Sparkles,
-                  title: "Radiant",                  subtitle: "Glowing Skin",                  detail: "95% saw improvement"},
+                  icon: Star,
+                  title: "Stunning",                  subtitle: "Looks Achieved",                  detail: "98% satisfaction rate"
+                },
                 {
                   icon: Heart,
-                  title: "Nourished",                  subtitle: "Healthy Glow",                  detail: "92% very satisfied"},
+                  title: "Confident",                  subtitle: "Transformations",                  detail: "95% repeat customers"
+                },
                 {
-                  icon: Zap,
-                  title: "Energized",                  subtitle: "Fresh Skin",                  detail: "98% would repurchase"},
+                  icon: Sparkles,
+                  title: "Beautiful",                  subtitle: "Hair Always",                  detail: "5-star community"
+                },
               ],
             },
           ]}
@@ -144,16 +156,16 @@ export default function LandingPage() {
 
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardFifteen
-          testimonial="Lumière Skincare completely transformed my complexion. After just three weeks, my skin felt more hydrated, looked more radiant, and finally felt healthy again. The products are luxurious without being heavy, and the results speak for themselves."
+          testimonial="Owner is very helpful and sweet, knowledgeable about the products she sells, she also offers great prices on her products I have been frequently visiting this store for about three years now , and it's always a good experience. "
           rating={5}
-          author="Sarah Mitchell, Beauty Influencer"
+          author="Keisha Johnson, Professional Stylist"
           avatars={[
-            { src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer 1" },
-            { src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer 2" },
-            { src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer 3" },
-            { src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer 4" },
-            { src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer 5" },
-            { src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer 6" },
+            { src: "http://img.b2bpic.net/free-photo/online-workshop-demontration-beauty-products_259150-60056.jpg?id=22810379", alt: "Customer 1" },
+            { src: "http://img.b2bpic.net/free-photo/online-workshop-demontration-beauty-products_259150-60056.jpg?id=22810379", alt: "Customer 2" },
+            { src: "http://img.b2bpic.net/free-photo/online-workshop-demontration-beauty-products_259150-60056.jpg?id=22810379", alt: "Customer 3" },
+            { src: "http://img.b2bpic.net/free-photo/online-workshop-demontration-beauty-products_259150-60056.jpg?id=22810379", alt: "Customer 4" },
+            { src: "http://img.b2bpic.net/free-photo/online-workshop-demontration-beauty-products_259150-60056.jpg?id=22810379", alt: "Customer 5" },
+            { src: "http://img.b2bpic.net/free-photo/online-workshop-demontration-beauty-products_259150-60056.jpg?id=22810379", alt: "Customer 6" },
           ]}
           ratingAnimation="opacity"
           avatarsAnimation="slide-up"
@@ -163,30 +175,36 @@ export default function LandingPage() {
 
       <div id="faq" data-section="faq">
         <FaqSplitMedia
-          title="Skincare Questions Answered"
-          description="Everything you need to know about our products, ingredients, and skincare routines."
-          tag="Help Center"
+          title="Hair Care & Wig Questions"
+          description="Everything you need to know about selecting, styling, and caring for your premium wigs and hair products."
+          tag="Expert Advice"
           tagIcon={HelpCircle}
           tagAnimation="opacity"
           textboxLayout="default"
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/caucasian-blonde-girl-applies-anti-aging-cream-skin-aging-her-mother-s-face-indoors-concept-natural-cosmetics-wrinkle-smoothing_197531-31469.jpg"
-          imageAlt="Skincare routine consultation"
+          imageSrc="http://img.b2bpic.net/free-photo/front-view-elegant-curly-woman_197531-16785.jpg?id=12860191"
+          imageAlt="Professional wig consultation"
           mediaAnimation="slide-up"
           mediaPosition="right"
           faqs={[
             {
-              id: "1",              title: "How long before I see results?",              content: "Most customers notice visible improvements in skin texture and hydration within 2-3 weeks of consistent use. For more significant concerns like fine lines or hyperpigmentation, results typically appear within 6-8 weeks."},
+              id: "1",              title: "How do I choose the right wig?",              content: "Consider your face shape, skin tone, and personal style. Our expert team can help you find the perfect match. We recommend visiting in person for a consultation, where we can try different styles and colors to find what makes you feel most confident."
+            },
             {
-              id: "2",              title: "Are your products suitable for sensitive skin?",              content: "Yes! Our formulations are hypoallergenic and free from harsh chemicals, sulfates, and parabens. However, we always recommend performing a patch test first, and consulting with a dermatologist if you have specific skin conditions."},
+              id: "2",              title: "How should I care for my wig?",              content: "Proper care extends your wig's lifespan. Wash with cool water using wig-specific shampoo, condition gently, and air dry. Store on a wig head or stand to maintain style. Avoid excessive heat unless your wig is heat-resistant. Our care kits include everything you need."
+            },
             {
-              id: "3",              title: "Can I use multiple products together?",              content: "Absolutely. Our products are designed to work synergistically. We recommend: Cleanser → Toner → Serum → Moisturizer → SPF (morning). For evening: Cleanser → Toner → Serum → Night Cream."},
+              id: "3",              title: "What's the difference between human and synthetic wigs?",              content: "Human hair wigs offer versatility and longevity—you can style, color, and heat-treat them. Synthetic wigs hold their style, require less maintenance, and are often more affordable. We carry both types to match every budget and lifestyle."
+            },
             {
-              id: "4",              title: "What is your return policy?",              content: "We offer a 60-day satisfaction guarantee. If you're not completely happy with your purchase, simply return the product for a full refund, no questions asked."},
+              id: "4",              title: "Do you offer wig styling services?",              content: "Yes! Our professional stylists can customize your wig to fit perfectly and flatter your features. Whether you need cutting, coloring, or styling advice, our team is here to help you look and feel amazing."
+            },
             {
-              id: "5",              title: "Are your ingredients ethically sourced?",              content: "Yes, we partner exclusively with suppliers who practice fair trade and sustainable harvesting methods. All our ingredients are cruelty-free and we never test on animals."},
+              id: "5",              title: "What hair care products do you recommend?",              content: "We offer a curated selection of professional-grade products specifically formulated for different hair types and concerns. Our staff can recommend products based on your hair texture, porosity, and specific needs."
+            },
             {
-              id: "6",              title: "How should I store my skincare products?",              content: "Store products in a cool, dark place away from direct sunlight. Keep containers tightly sealed. Most products have a 12-month shelf life after opening. Check the bottom of packaging for batch codes and expiration dates."},
+              id: "6",              title: "Do you have a return or exchange policy?",              content: "We stand behind our products with a 30-day satisfaction guarantee. If you're not completely happy, exchange or return for a full refund. We want you to feel confident in every purchase."
+            },
           ]}
           faqsAnimation="blur-reveal"
           animationType="smooth"
@@ -196,36 +214,36 @@ export default function LandingPage() {
 
       <div id="contact" data-section="contact">
         <ContactCenter
-          tag="Newsletter"
-          title="Get Exclusive Skincare Tips & Offers"
-          description="Subscribe to our newsletter for expert skincare advice, new product launches, exclusive discounts, and beauty insights delivered straight to your inbox."
+          tag="Stay Connected"
+          title="Exclusive Offers & Beauty Tips"
+          description="Join our community for expert hair care tips, new product launches, exclusive member discounts, and beauty inspiration delivered to your inbox."
           tagIcon={Mail}
           tagAnimation="opacity"
-          background={{ variant: "aurora" }}
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
           inputPlaceholder="Enter your email address"
           buttonText="Subscribe"
-          termsText="We respect your privacy. Unsubscribe anytime. Your skincare journey starts here."
+          termsText="We respect your privacy. Unsubscribe anytime. Your beauty journey matters to us."
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterBaseCard
-          logoText="Lumière"
+          logoText="Elite Beauty"
           columns={[
             {
               title: "Products",              items: [
-                { label: "Serums", href: "#" },
-                { label: "Moisturizers", href: "#" },
-                { label: "Cleansers", href: "#" },
-                { label: "Face Masks", href: "#" },
+                { label: "Premium Wigs", href: "#" },
+                { label: "Hair Care", href: "#" },
+                { label: "Styling Products", href: "#" },
+                { label: "Accessories", href: "#" },
               ],
             },
             {
               title: "Company",              items: [
                 { label: "About Us", href: "#about" },
                 { label: "Our Story", href: "#" },
-                { label: "Sustainability", href: "#" },
+                { label: "Styling Services", href: "#" },
                 { label: "Careers", href: "#" },
               ],
             },
@@ -246,7 +264,7 @@ export default function LandingPage() {
               ],
             },
           ]}
-          copyrightText="© 2025 Lumière Skincare. All rights reserved."
+          copyrightText="© 2025 JK Beauty Supply. All rights reserved. Celebrating beauty diversity."
         />
       </div>
     </ThemeProvider>

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-archivo), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-archivo), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcf6ec;
-  --card: #f3ede2;
-  --foreground: #2e2521;
-  --primary-cta: #2e2521;
-  --primary-cta-text: #fcf6ec;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #2e2521;
-  --accent: #b2a28b;
-  --background-accent: #b2a28b;
+  --background: #ffc89a;
+  --card: #000000;
+  --foreground: #ffffff;
+  --primary-cta: #ffc107;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #000000;
+  --secondary-cta-text: #ffffff;
+  --accent: #e74c3c;
+  --background-accent: #f9e4d8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);