Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -5,12 +5,10 @@ import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleAp
 import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
 import TextAbout from "@/components/sections/about/TextAbout";
 import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
 import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
-import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import { Mail, Leaf, Droplet, Sprout, Wind, MessageSquare } from "lucide-react";
+import { MessageSquare } from "lucide-react";
 
 export default function SkincareTemplatePage() {
     return (
@@ -68,7 +66,7 @@ export default function SkincareTemplatePage() {
                         { id: "2", brand: "Luminé", name: "Restorative Oil", price: "$85", rating: 5, reviewCount: "96", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image3.webp" }
                     ]}
                     gridVariant="two-columns-alternating-heights"
-                    animationType="slide-up"
+                    animationType="scale-rotate"
                     textboxLayout="split-description"
                     useInvertedBackground={true}
                 />
@@ -83,6 +81,7 @@ export default function SkincareTemplatePage() {
                     ]}
                     textboxLayout="split"
                     useInvertedBackground={false}
+                    cardClassName="bg-white/80 backdrop-blur-md border border-white/20 shadow-2xl transition-transform hover:scale-[1.02] duration-300"
                 />
             </div>
 

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #fcf8f3;
-  --card: #ffffff70;
+  --card: #f3eee5;
-  --foreground: #2c3e50;
+  --foreground: #2e2521;
   --primary-cta: #2a5d67;
   --primary-cta-text: #fcf6ec;
   --secondary-cta: #f1e9d2;
   --secondary-cta-text: #2e2521;
   --accent: #b8c9d0;
-  --background-accent: #e0dcd5;
+  --background-accent: #e1b875;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);