Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactText from '@/components/sections/contact/ContactText';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SplitAbout from '@/components/sections/about/SplitAbout';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 
 export default function LandingPage() {
   return (
@@ -30,14 +30,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "Shop All", id: "featured" },
-        {
+        { name: "Reviews", id: "testimonials" },
-          name: "Shop All",          id: "featured"},
+        { name: "FAQ", id: "faq" },
-        {
-          name: "Reviews",          id: "testimonials"},
-        {
-          name: "FAQ",          id: "faq"},
       ]}
       brandName="SparklesByAsh"
     />
@@ -48,39 +44,21 @@ export default function LandingPage() {
       title="Because You Deserve Pretty Things ㅤ♡"
       description="Discover our collection of handpicked essentials designed to make you feel beautiful every single day."
       testimonials={[
-        {
+        { name: "Aima", handle: "@aima", testimonial: "Obsessed with my order! Packaging so cute literally felt like a gift.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink" },
-          name: "Aima",          handle: "@aima",          testimonial: "Obsessed with my order! Packaging so cute literally felt like a gift.",          rating: 5,
+        { name: "Zara", handle: "@zara", testimonial: "Quality is 10/10, will definitely order again!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blissful-brunette-girl-white-sneakers-posing-with-bouquet-alliums-indoor-shot-adorable-african-lady-sitting-with-legs-crossed-reading-phone-message_197531-10106.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink" },
-          imageSrc: "http://img.b2bpic.net/free-photo/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=1",          imageAlt: "aesthetic beauty product background pink"},
+        { name: "Sana", handle: "@sana", testimonial: "So pretty, loved every single thing in my package.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163113.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink" },
-        {
+        { name: "Mina", handle: "@mina", testimonial: "My favorite store for pretty things, always satisfied.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/office-desktop-with-lipstick_23-2148166751.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink" },
-          name: "Zara",          handle: "@zara",          testimonial: "Quality is 10/10, will definitely order again!",          rating: 5,
+        { name: "Hina", handle: "@hina", testimonial: "Absolutely magical experience, everything is so aesthetic!", rating: 5, imageSrc: "http://img.b2bpic.net/free-vector/watercolor-cottagecore-item-set_52683-148267.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink" },
-          imageSrc: "http://img.b2bpic.net/free-photo/blissful-brunette-girl-white-sneakers-posing-with-bouquet-alliums-indoor-shot-adorable-african-lady-sitting-with-legs-crossed-reading-phone-message_197531-10106.jpg?_wi=1",          imageAlt: "aesthetic beauty product background pink"},
-        {
-          name: "Sana",          handle: "@sana",          testimonial: "So pretty, loved every single thing in my package.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163113.jpg?_wi=1",          imageAlt: "aesthetic beauty product background pink"},
-        {
-          name: "Mina",          handle: "@mina",          testimonial: "My favorite store for pretty things, always satisfied.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/office-desktop-with-lipstick_23-2148166751.jpg?_wi=1",          imageAlt: "aesthetic beauty product background pink"},
-        {
-          name: "Hina",          handle: "@hina",          testimonial: "Absolutely magical experience, everything is so aesthetic!",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-vector/watercolor-cottagecore-item-set_52683-148267.jpg?_wi=1",          imageAlt: "aesthetic beauty product background pink"},
-      ]}
-      buttons={[
-        {
-          text: "Shop Now",          href: "#featured"},
       ]}
+      buttons={[{ text: "Shop Now", href: "#featured" }]}
       imageSrc="http://img.b2bpic.net/free-photo/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=2"
       imageAlt="Hero beauty aesthetic"
       avatars={[
-        {
+        { src: "http://img.b2bpic.net/free-photo/high-angle-messy-makeup-products-table_23-2149363784.jpg", alt: "Customer 1" },
-          src: "http://img.b2bpic.net/free-photo/high-angle-messy-makeup-products-table_23-2149363784.jpg",          alt: "Customer 1"},
+        { src: "http://img.b2bpic.net/free-photo/creative-fengshui-practice-arrangement_23-2149135758.jpg", alt: "Customer 2" },
-        {
+        { src: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150217998.jpg", alt: "Customer 3" },
-          src: "http://img.b2bpic.net/free-photo/creative-fengshui-practice-arrangement_23-2149135758.jpg",          alt: "Customer 2"},
+        { src: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150218001.jpg", alt: "Customer 4" },
-        {
+        { src: "http://img.b2bpic.net/free-photo/beautiful-woman-studio_1157-17150.jpg", alt: "Customer 5" },
-          src: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150217998.jpg",          alt: "Customer 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150218001.jpg",          alt: "Customer 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-woman-studio_1157-17150.jpg",          alt: "Customer 5"},
       ]}
       avatarText="Loved by 5,000+ sparkle enthusiasts"
     />
@@ -93,12 +71,9 @@ export default function LandingPage() {
       title="Our Vibe"
       description="We believe in bringing magic to your daily routine through curated beauty items that spark joy."
       bulletPoints={[
-        {
+        { title: "Curated Quality", description: "Handpicked products for the best experience." },
-          title: "Curated Quality",          description: "Handpicked products for the best experience."},
+        { title: "Cute Packaging", description: "Every order feels like a special gift." },
-        {
+        { title: "Fast Shipping", description: "Delivering across Pakistan with love." },
-          title: "Cute Packaging",          description: "Every order feels like a special gift."},
-        {
-          title: "Fast Shipping",          description: "Delivering across Pakistan with love."},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/blissful-brunette-girl-white-sneakers-posing-with-bouquet-alliums-indoor-shot-adorable-african-lady-sitting-with-legs-crossed-reading-phone-message_197531-10106.jpg?_wi=2"
       imageAlt="About Sparkles by Ash"
@@ -112,12 +87,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        {
+        { id: "m1", value: "5000+", title: "Reviews", description: "Customer love shared daily", imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-showing-golden-star-rating-symbol_53876-71536.jpg" },
-          id: "m1",          value: "5000+",          title: "Reviews",          description: "Customer love shared daily",          imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-showing-golden-star-rating-symbol_53876-71536.jpg"},
+        { id: "m2", value: "115k+", title: "Followers", description: "Growing on Instagram", imageSrc: "http://img.b2bpic.net/free-photo/business-achievement-improvement-success-result_53876-123860.jpg" },
-        {
+        { id: "m3", value: "8000+", title: "Shipped", description: "Happy orders delivered", imageSrc: "http://img.b2bpic.net/free-photo/warehouse-with-boxes-conveyor-belt_23-2152001489.jpg" },
-          id: "m2",          value: "115k+",          title: "Followers",          description: "Growing on Instagram",          imageSrc: "http://img.b2bpic.net/free-photo/business-achievement-improvement-success-result_53876-123860.jpg"},
-        {
-          id: "m3",          value: "8000+",          title: "Shipped",          description: "Happy orders delivered",          imageSrc: "http://img.b2bpic.net/free-photo/warehouse-with-boxes-conveyor-belt_23-2152001489.jpg"},
       ]}
       title="The Sparkle Family"
       description="Join our community of thousands of happy sparkle enthusiasts."
@@ -131,18 +103,9 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
       products={[
-        {
+        { id: "p1", name: "Soft Matte Lip Balm", price: "Rs. 650", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163113.jpg?_wi=2" },
-          id: "p1",          name: "Soft Matte Lip Balm",          price: "Rs. 650",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163113.jpg?_wi=2"},
+        { id: "p2", name: "Peptide Lip Treatment", price: "Rs. 699", imageSrc: "http://img.b2bpic.net/free-photo/office-desktop-with-lipstick_23-2148166751.jpg?_wi=2" },
-        {
+        { id: "p3", name: "Aesthetic Hair Clip", price: "Rs. 450", imageSrc: "http://img.b2bpic.net/free-vector/watercolor-cottagecore-item-set_52683-148267.jpg?_wi=2" },
-          id: "p2",          name: "Peptide Lip Treatment",          price: "Rs. 699",          imageSrc: "http://img.b2bpic.net/free-photo/office-desktop-with-lipstick_23-2148166751.jpg?_wi=2"},
-        {
-          id: "p3",          name: "Aesthetic Hair Clip",          price: "Rs. 450",          imageSrc: "http://img.b2bpic.net/free-vector/watercolor-cottagecore-item-set_52683-148267.jpg?_wi=2"},
-        {
-          id: "p4",          name: "Dewy Skin Mist",          price: "Rs. 899",          imageSrc: "http://img.b2bpic.net/free-photo/decorative-cosmetics-near-makeup-applicators_23-2147742692.jpg"},
-        {
-          id: "p5",          name: "Glitter Shadow Palette",          price: "Rs. 1200",          imageSrc: "http://img.b2bpic.net/free-photo/different-shades-lip-glosses-with-bright-sky_23-2149681515.jpg"},
-        {
-          id: "p6",          name: "Velvet Scrunchies Set",          price: "Rs. 350",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-colorful-lipsticks-with-abstract-background_23-2148320906.jpg"},
       ]}
       title="New Arrivals"
       description="Pick your new obsession from our latest drops."
@@ -156,18 +119,9 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "p7", name: "Pink Blush Trio", price: "Rs. 950", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-beatufiul-woman-looking-mirror-fixing-her-makeup-put-lipstick-standing-beige-background-cosmetics-women-beauty-concept_1258-88511.jpg" },
-          id: "p7",          name: "Pink Blush Trio",          price: "Rs. 950",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-beatufiul-woman-looking-mirror-fixing-her-makeup-put-lipstick-standing-beige-background-cosmetics-women-beauty-concept_1258-88511.jpg"},
+        { id: "p8", name: "Hydrating Face Mask", price: "Rs. 550", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-red-lipstick-still-life_23-2149234375.jpg" },
-        {
+        { id: "p9", name: "Crystal Facial Roller", price: "Rs. 1100", imageSrc: "http://img.b2bpic.net/free-photo/skincare-supplies-marble-background_23-2147710684.jpg" },
-          id: "p8",          name: "Hydrating Face Mask",          price: "Rs. 550",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-red-lipstick-still-life_23-2149234375.jpg"},
-        {
-          id: "p9",          name: "Crystal Facial Roller",          price: "Rs. 1100",          imageSrc: "http://img.b2bpic.net/free-photo/skincare-supplies-marble-background_23-2147710684.jpg"},
-        {
-          id: "p10",          name: "Mini Gloss Kit",          price: "Rs. 750",          imageSrc: "http://img.b2bpic.net/free-photo/pink-shades-lipgloss-arrangement_23-2149096675.jpg"},
-        {
-          id: "p11",          name: "Silk Pillowcase",          price: "Rs. 1500",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-lipsticks-with-palm-branch-shadow_23-2148210814.jpg"},
-        {
-          id: "p12",          name: "Sparkle Hand Mirror",          price: "Rs. 500",          imageSrc: "http://img.b2bpic.net/free-photo/accessories-makeup-supplies_23-2147710693.jpg"},
       ]}
       title="Best Selling"
       description="Loved by thousands, these essentials are must-haves."
@@ -175,82 +129,55 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
+      <TestimonialCardFifteen
-      textboxLayout="default"
+      testimonial="Obsessed with my order! Packaging so cute literally felt like a gift."
+      rating={5}
+      author="Aima"
+      avatars={[{ src: "http://img.b2bpic.net/free-photo/happy-woman-applying-moisturizer-face-morning_329181-1364.jpg", alt: "Customer" }]}
+      ratingAnimation="blur-reveal"
+      avatarsAnimation="blur-reveal"
       useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "t1",          title: "Amazing Quality!",          quote: "Packaging so cute, felt like opening a gift.",          name: "Aima",          role: "Customer",          imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-applying-moisturizer-face-morning_329181-1364.jpg"},
-        {
-          id: "t2",          title: "So Cute!",          quote: "Literally obsessed with my order, quality is 10/10.",          name: "Zara",          role: "Customer",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-hat-pink-red-wall_343596-5526.jpg"},
-        {
-          id: "t3",          title: "Quick Delivery!",          quote: "Love the products and the fast service, will order again.",          name: "Sana",          role: "Customer",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-fit-woman-doing-sports-exercises-home-drinks-water-from-bottle-sm_1258-182451.jpg"},
-        {
-          id: "t4",          title: "Worth it!",          quote: "Everything I bought was so pretty and exactly as described.",          name: "Mina",          role: "Customer",          imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-beauty-routine-with-golden-eye-patches_23-2150166466.jpg"},
-        {
-          id: "t5",          title: "Great Experience!",          quote: "The aesthetic is just unmatched, highly recommended.",          name: "Hina",          role: "Customer",          imageSrc: "http://img.b2bpic.net/free-photo/friendly-young-interracial-girls-good-mood-wear-nightgowns-pajama-party-leisure-lifestyle-beauty-concept_197531-31732.jpg"},
-      ]}
-      title="Our Happy Customers"
-      description="See why everyone is obsessed with their sparkles."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
+      <FaqDouble
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",          title: "What are the delivery charges?",          content: "Our delivery charges are Rs. 299 all over Pakistan."},
-        {
-          id: "f2",          title: "How long does shipping take?",          content: "Standard delivery takes 3-5 business days."},
-        {
-          id: "f3",          title: "Can I return items?",          content: "We offer returns for damaged products reported within 24 hours of delivery."},
-      ]}
       title="Help Corner"
       description="Need assistance? We're here to help you out."
+      faqs={[
+        { id: "f1", title: "What are the delivery charges?", content: "Our delivery charges are Rs. 299 all over Pakistan." },
+        { id: "f2", title: "How long does shipping take?", content: "Standard delivery takes 3-5 business days." },
+        { id: "f3", title: "Can I return items?", content: "We offer returns for damaged products reported within 24 hours of delivery." },
+      ]}
       faqsAnimation="blur-reveal"
       textboxLayout="split"
-      imageSrc="http://img.b2bpic.net/free-photo/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=1"
+      useInvertedBackground={false}
-      mediaPosition="left"
-      mediaAnimation="blur-reveal"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
+      <ContactText
-      tag="Contact Us"
+      text="Have questions or just want to say hi? We're here for you."
-      title="Get in Touch"
+      buttons={[{ text: "Get in Touch", href: "#contact" }]}
-      description="Have questions or just want to say hi? We're here for you."
-      useInvertedBackground={true}
       background={{ variant: "sparkles-gradient" }}
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBase
+      <FooterMedia
+      imageSrc="http://img.b2bpic.net/free-photo/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=2"
       logoText="SparklesByAsh"
       columns={[
-        {
+        { title: "Links", items: [
-          title: "Shop",          items: [
+            { label: "New Arrivals", href: "#featured" },
-            {
+            { label: "Best Sellers", href: "#best-selling" },
-              label: "New Arrivals",              href: "#featured"},
+            { label: "FAQ", href: "#faq" },
-            {
+        ] },
-              label: "Best Sellers",              href: "#best-selling"},
-          ],
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "FAQ",              href: "#faq"},
-            {
-              label: "Contact Us",              href: "#contact"},
-          ],
-        },
       ]}
-      copyrightText="© 2025 SparklesByAsh. All rights reserved."
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fdf7f7;
+  --background: #ffffff;
-  --card: #ffffff;
+  --card: #fbfbfb;
-  --foreground: #2d1b24;
+  --foreground: #1a1a1a;
-  --primary-cta: #ff7a8a;
+  --primary-cta: #2a2a2a;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f1f1f1;
   --secondary-cta-text: #2d1b24;
-  --accent: #fccdd3;
+  --accent: #e5e5e5;
-  --background-accent: #fbcfe8;
+  --background-accent: #f5f5f5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);