Update src/app/styles/variables.css

Merge version_3 into main

src/app/page.tsx

@@ -6,6 +6,7 @@ import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroSplit from '@/components/sections/hero/HeroSplit';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
@@ -19,10 +20,10 @@ export default function LandingPage() {
         borderRadius="soft"
         contentWidth="small"
         sizing="mediumLargeSizeMediumTitles"
-        background="noiseDiagonalGradient"
-        cardStyle="gradient-bordered"
-        primaryButtonStyle="radial-glow"
-        secondaryButtonStyle="layered"
+        background="none"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="solid"
         headingFontWeight="bold"
     >
       <ReactLenis root>
@@ -32,13 +33,13 @@ export default function LandingPage() {
         {
           name: "Home",          id: "/"},
         {
-          name: "Products",          id: "/products"},
+          name: "Products",          id: "#products"},
         {
-          name: "Contact",          id: "/contact"},
+          name: "Contact",          id: "#contact"},
       ]}
       logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x51310"
-      logoAlt="SKIN CARE Logo"
-      brandName="SKIN CARE"
+      logoAlt="SKIN TO SKIN Logo"
+      brandName="SKIN TO SKIN"
     />
   </div>
 
@@ -46,46 +47,46 @@ export default function LandingPage() {
       <HeroSplit
       background={{
         variant: "radial-gradient"}}
-      title="Radiant Skin, Naturally Yours"
-      description="Discover SKIN CARE's exquisite range of natural products designed to nourish, protect, and revitalize your skin. Experience the glow of healthy, beautiful skin."
+      title="Radiant Skin, Naturally Yours with Skin to Skin"
+      description="Discover Skin to Skin's exquisite range of natural products designed to nourish, protect, and revitalize your skin, crafted for Pakistani skin types. Experience the glow of healthy, beautiful skin."
       buttons={[
         {
-          text: "Shop Now",          href: "/products"},
+          text: "Shop Now",          href: "#products"},
         {
           text: "Learn More",          href: "#about"},
       ]}
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/attractive-young-woman-with-charming-smile-feeling-happy-free-after-graduating-university-relaxing-cafe-waiting-food-making-plans-future-ginger-woman-having-rest-indoors_273609-481.jpg",          alt: "Customer 1"},
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/pakistani-woman-1.jpg",          alt: "Pakistani Customer 1"},
         {
-          src: "http://img.b2bpic.net/free-photo/young-man-with-back-hair-arms-crossed-looking-camera_23-2148112769.jpg",          alt: "Customer 2"},
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/pakistani-man-1.jpg",          alt: "Pakistani Customer 2"},
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-blond-model-dressed-summer-hipster-clothes-trendy-girl-posing-street-background-funny-positive-woman_158538-5479.jpg",          alt: "Customer 3"},
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/pakistani-woman-2.jpg",          alt: "Pakistani Customer 3"},
         {
-          src: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",          alt: "Customer 4"},
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/pakistani-woman-3.jpg",          alt: "Pakistani Customer 4"},
         {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-young-redhead-woman-with-charming-smile-healthy-clean-skin_273609-9036.jpg",          alt: "Happy Customer"},
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/pakistani-woman-4.jpg",          alt: "Happy Pakistani Customer"},
       ]}
       avatarText="Loved by thousands of happy customers"
-      imageSrc="http://img.b2bpic.net/free-photo/branch-near-rake-cosmetics_23-2147787970.jpg"
-      imageAlt="Woman with glowing skin applying skincare product"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/hero-skincare-pakistan.jpg"
+      imageAlt="Pakistani woman with glowing skin applying skincare product"
       mediaAnimation="slide-up"
       marqueeItems={[
         {
-          type: "text-icon",          text: "Natural Ingredients",          icon: Leaf,
+          type: "text-icon",          text: "Natural Ingredients",          icon: Leaf
         },
         {
-          type: "text-icon",          text: "Cruelty-Free",          icon: Heart,
+          type: "text-icon",          text: "Cruelty-Free",          icon: Heart
         },
         {
-          type: "text-icon",          text: "Dermatologist Approved",          icon: ShieldCheck,
+          type: "text-icon",          text: "Dermatologist Approved",          icon: ShieldCheck
         },
         {
-          type: "text-icon",          text: "Sustainable Sourcing",          icon: Globe,
+          type: "text-icon",          text: "Sustainable Sourcing",          icon: Globe
         },
         {
-          type: "text-icon",          text: "Visible Results",          icon: Sparkles,
-        },
+          type: "text-icon",          text: "Visible Results",          icon: Sparkles
+        }
       ]}
     />
   </div>
@@ -94,12 +95,12 @@ export default function LandingPage() {
       <TestimonialAboutCard
       useInvertedBackground={false}
       tag="Our Philosophy"
-      title="Embrace Your Natural Beauty"
-      description="At SKIN CARE, we believe in harnessing the power of nature to create effective and gentle products. Our formulations are crafted with ethically sourced ingredients, free from harsh chemicals, ensuring purity and potency."
+      title="Embrace Your Natural Beauty with Skin to Skin"
+      description="At Skin to Skin, we believe in harnessing the power of nature to create effective and gentle products. Our formulations are crafted with ethically sourced ingredients, free from harsh chemicals, ensuring purity and potency suitable for Pakistani skincare needs."
       subdescription="We are committed to sustainability, transparency, and delivering exceptional skincare solutions that make a visible difference."
       icon={Sparkles}
-      imageSrc="http://img.b2bpic.net/free-photo/retaining-herbs_23-2147985319.jpg"
-      imageAlt="Natural skincare ingredients and botanical extracts"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/pakistani-herbs-ingredients.jpg"
+      imageAlt="Natural Pakistani skincare ingredients and botanical extracts"
       mediaAnimation="slide-up"
     />
   </div>
@@ -112,7 +113,7 @@ export default function LandingPage() {
       features={[
         {
           title: "Pure & Potent Ingredients",          description: "We source the finest natural and organic ingredients, ensuring each product is packed with skin-loving nutrients without harsh chemicals.",          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/mysterious-woman-posing-indoors-side-view_23-2149551261.jpg",            imageAlt: "Close-up of a natural ingredient"},
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/feature-pakistani-ingredient-closeup.jpg",            imageAlt: "Close-up of a natural ingredient from Pakistan"},
           items: [
             {
               icon: Leaf,
@@ -128,7 +129,7 @@ export default function LandingPage() {
         },
         {
           title: "Sustainable & Ethical",          description: "Our dedication to the planet means using eco-friendly packaging and sustainable practices, so you can feel good about your beauty routine.",          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/composition-spa-treatment-cream-hair-brushes_23-2148645562.jpg",            imageAlt: "Eco-friendly skincare packaging"},
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/feature-eco-friendly-packaging.jpg",            imageAlt: "Eco-friendly skincare packaging in a Pakistani context"},
           items: [
             {
               icon: Recycle,
@@ -144,7 +145,7 @@ export default function LandingPage() {
         },
         {
           title: "Dermatologist Approved",          description: "Developed with expert guidance, our products are rigorously tested to ensure efficacy and gentleness for all skin types, even the most sensitive.",          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/woman-doing-self-care-treatment-indoors_23-2148974284.jpg",            imageAlt: "Dermatologist examining skin"},
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/feature-dermatologist-examining-pakistani-skin.jpg",            imageAlt: "Dermatologist examining Pakistani skin"},
           items: [
             {
               icon: CheckCircle,
@@ -159,31 +160,69 @@ export default function LandingPage() {
           reverse: false
         }
       ]}
-      title="The SKIN CARE Difference"
+      title="The Skin to Skin Difference"
       description="Our commitment to excellence shines through in every product. Discover what sets us apart."
       tag="Why Choose Us"
     />
   </div>
 
+  <div id="products" data-section="products"> 
+    <ProductCardTwo
+      animationType="slide-up"
+      gridVariant="uniform-all-items-equal"
+      title="Our Skincare Collection for Pakistani Skin"
+      description="Explore our range of natural and effective skincare products, specially formulated to address the unique needs of Pakistani skin types."
+      tag="Featured Products"
+      textboxLayout="default"
+      useInvertedBackground={false}
+      products={[
+        {
+          id: "1",          brand: "Skin to Skin",          name: "Brightening Saffron Face Wash",          price: "PKR 1,200",          rating: 4.8,
+          reviewCount: "250",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/product-saffron-facewash.jpg",          imageAlt: "Brightening Saffron Face Wash"
+        },
+        {
+          id: "2",          brand: "Skin to Skin",          name: "Rose & Aloe Vera Hydrating Toner",          price: "PKR 1,500",          rating: 4.7,
+          reviewCount: "180",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/product-rose-aloe-toner.jpg",          imageAlt: "Rose & Aloe Vera Hydrating Toner"
+        },
+        {
+          id: "3",          brand: "Skin to Skin",          name: "Ubtan Radiance Mask",          price: "PKR 1,800",          rating: 4.9,
+          reviewCount: "300",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/product-ubtan-mask.jpg",          imageAlt: "Ubtan Radiance Mask"
+        },
+        {
+          id: "4",          brand: "Skin to Skin",          name: "Argan Oil & Vitamin E Serum",          price: "PKR 2,500",          rating: 4.9,
+          reviewCount: "220",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/product-argan-serum.jpg",          imageAlt: "Argan Oil & Vitamin E Serum"
+        },
+        {
+          id: "5",          brand: "Skin to Skin",          name: "Herbal Glow Night Cream",          price: "PKR 2,000",          rating: 4.7,
+          reviewCount: "190",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/product-herbal-night-cream.jpg",          imageAlt: "Herbal Glow Night Cream"
+        },
+        {
+          id: "6",          brand: "Skin to Skin",          name: "Turmeric & Neem Acne Spot Treatment",          price: "PKR 900",          rating: 4.5,
+          reviewCount: "150",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/product-turmeric-neem-treatment.jpg",          imageAlt: "Turmeric & Neem Acne Spot Treatment"
+        }
+      ]}
+    />
+  </div>
+
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardTwelve
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",          name: "Sophia R.",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg",          imageAlt: "Sophia R."},
+          id: "1",          name: "Aisha K.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/testimonial-aisha.jpg",          imageAlt: "Aisha K."},
         {
-          id: "2",          name: "Liam K.",          imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-cheerful-girl-baking-kitchen-making-dough-holding-recipe-book-having-ideas_1258-195141.jpg",          imageAlt: "Liam K."},
+          id: "2",          name: "Bilal S.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/testimonial-bilal.jpg",          imageAlt: "Bilal S."},
         {
-          id: "3",          name: "Olivia M.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket-flowers_23-2149020787.jpg",          imageAlt: "Olivia M."},
+          id: "3",          name: "Zara L.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/testimonial-zara.jpg",          imageAlt: "Zara L."},
         {
-          id: "4",          name: "Noah J.",          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-brunette-female-blue-shirt-grey-background_613910-7970.jpg",          imageAlt: "Noah J."},
+          id: "4",          name: "Omer B.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/testimonial-omer.jpg",          imageAlt: "Omer B."},
         {
-          id: "5",          name: "Ava P.",          imageSrc: "http://img.b2bpic.net/free-photo/happy-cute-korean-girl-suit-opens-up-heart-shaped-box-with-romantic-gift-white-day-holiday-standing-suit-pink-background_1258-99176.jpg",          imageAlt: "Ava P."},
+          id: "5",          name: "Fatima A.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/testimonial-fatima.jpg",          imageAlt: "Fatima A."},
         {
-          id: "6",          name: "Ethan C.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-sitting-beach_613910-806.jpg",          imageAlt: "Ethan C."},
+          id: "6",          name: "Imran F.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/testimonial-imran.jpg",          imageAlt: "Imran F."},
       ]}
-      cardTitle="Hear From Our Happy Customers"
-      cardTag="Real Results"
+      cardTitle="Real Stories from Our Skincare Enthusiasts"
+      cardTag="Customer Reviews"
       buttons={[
         {
           text: "Read All Reviews",          href: "#"},
@@ -197,39 +236,40 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "Vogue",        "Allure",        "Cosmopolitan",        "Glamour",        "Harper's Bazaar",        "ELLE",        "Beauty Insider"]}
-      title="Featured In"
-      description="Trusted by leading beauty experts and publications."
+        "98% Customer Satisfaction",        "100% Cruelty-Free",        "500K+ Happy Customers",        "Organic Certified",        "Dermatologist Recommended",        "Eco-Friendly Packaging"
+      ]}
+      title="Our Skincare Impact"
+      description="Proudly sharing our commitment to quality, efficacy, and sustainability."
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBaseReveal
       logoSrc="http://img.b2bpic.net/free-photo/black-white-beauty-product_23-2151307248.jpg"
-      logoAlt="SKIN CARE Footer Logo"
-      logoText="SKIN CARE"
+      logoAlt="Skin to Skin Footer Logo"
+      logoText="Skin to Skin"
       columns={[
         {
           title: "Products",          items: [
             {
-              label: "Face Care",              href: "/products#face"},
+              label: "Face Care",              href: "#products"},
             {
-              label: "Hand Care",              href: "/products#hand"},
+              label: "Hand Care",              href: "#products"},
             {
-              label: "Foot Care",              href: "/products#foot"},
+              label: "Foot Care",              href: "#products"},
             {
-              label: "All Products",              href: "/products"},
-          ],
+              label: "All Products",              href: "#products"},
+          ]
         },
         {
           title: "Company",          items: [
             {
               label: "About Us",              href: "#about"},
             {
-              label: "Our Philosophy",              href: "#"},
+              label: "Our Philosophy",              href: "#about"},
             {
-              label: "Contact Us",              href: "/contact"},
-          ],
+              label: "Contact Us",              href: "#contact"},
+          ]
         },
         {
           title: "Legal",          items: [
@@ -239,13 +279,13 @@ export default function LandingPage() {
               label: "Terms of Service",              href: "#"},
             {
               label: "Cookie Policy",              href: "#"},
-          ],
-        },
+          ]
+        }
       ]}
-      copyrightText="© 2024 SKIN CARE. All rights reserved."
+      copyrightText="© 2024 Skin to Skin. All rights reserved."
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1c1c1c;
-  --primary-cta-text: #f5f5f5;
+  --background: #fcf6ec;
+  --card: #f3ede2;
+  --foreground: #2e2521;
+  --primary-cta: #2e2521;
+  --primary-cta-text: #fcf6ec;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #1c1c1c;
-  --accent: #e63946;
-  --background-accent: #e8bea8;
+  --secondary-cta-text: #2e2521;
+  --accent: #b2a28b;
+  --background-accent: #b2a28b;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);