Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -6,11 +6,12 @@ import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { CheckCircle, Heart, Leaf, Shield } from 'lucide-react';
+import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import { CheckCircle, Heart, Leaf, Shield, Sparkles, Zap, Target, Award } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -41,7 +42,7 @@ export default function LandingPage() {
 
       <div id="hero" data-section="hero">
         <HeroLogoBillboard
-          logoText="DermAI "
+          logoText="DermAI"
           description="Transform your skin with our premium, naturally-formulated skincare collection. Experience the power of botanical extracts and scientific innovation."
           buttons={[
             { text: "Explore Products", href: "#products" },
@@ -85,7 +86,7 @@ export default function LandingPage() {
               id: "cleanser",              name: "Gentle Botanical Cleanser",              price: "$52",              imageSrc: "http://img.b2bpic.net/free-photo/containers-plants-assortment_23-2149339761.jpg",              imageAlt: "Gentle Botanical Cleanser"
             },
             {
-              id: "eye-serum",              name: "Luminous Eye Treatment",              price: "$85",              imageSrc: "http://img.b2bpic.net/free-photo/woman-doing-beauty-care-treatments_23-2149197188.jpg",              imageAlt: "Luminous Eye Treatment"
+              id: "eye-serum",              name: "Luminous Eye Treatment",              price: "$85",              imageSrc: "http://img.b2bpic.net/free-photo/woman-doing-beauty-care-treatments_23-2149197188.jpg?_wi=1",              imageAlt: "Luminous Eye Treatment"
             }
           ]}
           gridVariant="three-columns-all-equal-width"
@@ -100,6 +101,48 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="skinScanner" data-section="skinScanner">
+        <FeatureCardTen
+          title="Advanced Skin Scanner Demo"
+          description="Experience our AI-powered skin analysis technology. Get personalized product recommendations based on your unique skin profile."
+          tag="Innovation"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttonAnimation="slide-up"
+          buttons={[
+            { text: "Try Skin Scanner", href: "#" }
+          ]}
+          features={[
+            {
+              id: "analysis",              title: "Real-Time Analysis",              description: "Get instant insights into your skin type, texture, and concerns",              media: {
+                imageSrc: "http://img.b2bpic.net/free-photo/woman-doing-beauty-care-treatments_23-2149197188.jpg?_wi=2",                imageAlt: "Skin analysis interface"
+              },
+              items: [
+                { icon: Target, text: "Precision Scanning" },
+                { icon: Zap, text: "Instant Results" },
+                { icon: Award, text: "Expert Insights" }
+              ],
+              reverse: false
+            },
+            {
+              id: "recommendations",              title: "Personalized Recommendations",              description: "Receive curated product suggestions tailored to your skin's unique needs",              media: {
+                imageSrc: "http://img.b2bpic.net/free-photo/front-view-model-holding-cream-container_23-2150232541.jpg?_wi=1",                imageAlt: "Product recommendations"
+              },
+              items: [
+                { icon: Heart, text: "Custom Routines" },
+                { icon: Sparkles, text: "Best Matches" },
+                { icon: Leaf, text: "Natural Focus" }
+              ],
+              reverse: true
+            }
+          ]}
+          ariaLabel="Skin Scanner section"
+        />
+      </div>
+
       <div id="benefits" data-section="benefits">
         <FeatureBento
           title="Why Choose LuxeGlow"
@@ -133,18 +176,25 @@ export default function LandingPage() {
       </div>
 
       <div id="reviews" data-section="reviews">
-        <TestimonialCardFifteen
-          testimonial="LuxeGlow completely transformed my skincare routine. My skin has never looked or felt better. The products are luxurious and the results speak for themselves."
-          rating={5}
-          author="Sarah Mitchell"
-          avatars={[
-            { src: "http://img.b2bpic.net/free-photo/portrait-beautiful-blond-woman-with-trendy-hairstyle_23-2149430879.jpg", alt: "Sarah Mitchell" },
-            { src: "http://img.b2bpic.net/free-photo/young-woman-smiling-isolated-yellow_23-2149088348.jpg", alt: "Jessica Chen" },
-            { src: "http://img.b2bpic.net/free-photo/front-view-model-holding-cream-container_23-2150232541.jpg", alt: "Emma Rodriguez" },
-            { src: "http://img.b2bpic.net/free-photo/young-woman-with-short-hair-talking-phone_273609-15367.jpg", alt: "Lisa Anderson" }
+        <TestimonialCardTwelve
+          testimonials={[
+            {
+              id: "1",              name: "Sarah Mitchell",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-blond-woman-with-trendy-hairstyle_23-2149430879.jpg",              imageAlt: "Sarah Mitchell"
+            },
+            {
+              id: "2",              name: "Jessica Chen",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-smiling-isolated-yellow_23-2149088348.jpg",              imageAlt: "Jessica Chen"
+            },
+            {
+              id: "3",              name: "Emma Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-model-holding-cream-container_23-2150232541.jpg?_wi=2",              imageAlt: "Emma Rodriguez"
+            },
+            {
+              id: "4",              name: "Lisa Anderson",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-short-hair-talking-phone_273609-15367.jpg",              imageAlt: "Lisa Anderson"
+            }
           ]}
-          ratingAnimation="slide-up"
-          avatarsAnimation="slide-up"
+          cardTitle="Client Testimonials"
+          cardTag="5-Star Reviews"
+          cardTagIcon={Award}
+          cardAnimation="slide-up"
           useInvertedBackground={true}
           ariaLabel="Testimonial section"
         />
@@ -238,4 +288,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

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