Update src/app/styles/variables.css

Merge version_3 into main

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactText from '@/components/sections/contact/ContactText';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+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,22 +30,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "Shop All", id: "featured" },
-          id: "hero",
+        { name: "Reviews", id: "testimonials" },
-        },
+        { name: "FAQ", id: "faq" },
-        {
-          name: "Shop All",
-          id: "featured",
-        },
-        {
-          name: "Reviews",
-          id: "testimonials",
-        },
-        {
-          name: "FAQ",
-          id: "faq",
-        },
       ]}
       brandName="SparklesByAsh"
     />
@@ -56,76 +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",
+        { 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" },
-          handle: "@aima",
+        { 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" },
-          testimonial: "Obsessed with my order! Packaging so cute literally felt like a gift.",
+        { 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" },
-          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/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=1",
-          imageAlt: "aesthetic beauty product background pink",
-        },
-        {
-          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",
-        },
-        {
-          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",
+        { src: "http://img.b2bpic.net/free-photo/creative-fengshui-practice-arrangement_23-2149135758.jpg", alt: "Customer 2" },
-          alt: "Customer 1",
+        { 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" },
-          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/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"
     />
@@ -138,18 +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",
+        { title: "Cute Packaging", description: "Every order feels like a special gift." },
-          description: "Handpicked products for the best experience.",
+        { 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"
@@ -163,27 +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",
+        { 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" },
-          value: "5000+",
+        { 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: "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",
-        },
       ]}
       title="The Sparkle Family"
       description="Join our community of thousands of happy sparkle enthusiasts."
@@ -197,42 +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",
+        { 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" },
-          name: "Soft Matte Lip Balm",
+        { 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" },
-          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: "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."
@@ -246,42 +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",
+        { 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" },
-          name: "Pink Blush Trio",
+        { id: "p9", name: "Crystal Facial Roller", price: "Rs. 1100", imageSrc: "http://img.b2bpic.net/free-photo/skincare-supplies-marble-background_23-2147710684.jpg" },
-          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: "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."
@@ -289,144 +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">
-      <FaqSplitText
+      <FaqDouble
-      useInvertedBackground={false}
+      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: "f1",
+        { id: "f2", title: "How long does shipping take?", content: "Standard delivery takes 3-5 business days." },
-          title: "What are the delivery charges?",
+        { id: "f3", title: "Can I return items?", content: "We offer returns for damaged products reported within 24 hours of delivery." },
-          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.",
-        },
       ]}
-      sideTitle="Help Corner"
       faqsAnimation="blur-reveal"
+      textboxLayout="split"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
+      <ContactText
+      text="Have questions or just want to say hi? We're here for you."
+      buttons={[{ text: "Get in Touch", href: "#contact" }]}
+      background={{ variant: "sparkles-gradient" }}
       useInvertedBackground={true}
-      title="Get in Touch"
-      description="Have questions or just want to say hi? We're here for you."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Your message",
-        required: true,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/decorative-home-plant-vase-arrangement_23-2149090646.jpg"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <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",
+            { label: "New Arrivals", href: "#featured" },
-          items: [
+            { label: "Best Sellers", href: "#best-selling" },
-            {
+            { label: "FAQ", href: "#faq" },
-              label: "New Arrivals",
+        ] },
-              href: "#featured",
-            },
-            {
-              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);