From 7c50c2402edb027e05a2fb397fbf631592a220e8 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 14 Mar 2026 06:15:43 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 75 ++++++++++++++++++++++++++++++++----------------
 1 file changed, 51 insertions(+), 24 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 76cca46..03f8ac3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,9 +11,12 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Award, Heart, HelpCircle, Mail, Sparkles, Star } from 'lucide-react';
+import { Award, Heart, HelpCircle, Mail, Sparkles, Star, Plus } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [showProductInfo, setShowProductInfo] = useState(false);
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -43,28 +46,52 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard
-          logoText="Lumière"
-          description="Discover the power of nature refined by science. Our premium skincare collection harnesses botanical ingredients with cutting-edge formulation to reveal your most radiant skin."
-          buttons={[
-            { "text": "Explore Collection", "href": "#products" },
-            { "text": "Learn More", "href": "#about" }
-          ]}
-          buttonAnimation="slide-up"
-          background={{ "variant": "sparkles-gradient" }}
-          imageSrc="http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232241.jpg"
-          imageAlt="Premium Lumière skincare product collection"
-          mediaAnimation="blur-reveal"
-          frameStyle="card"
-          ariaLabel="Hero section - Lumière premium skincare"
-          className="w-full"
-          containerClassName="max-w-7xl mx-auto px-6"
-          logoClassName="text-4xl font-bold tracking-tight"
-          descriptionClassName="text-lg leading-relaxed max-w-2xl"
-          buttonContainerClassName="flex flex-wrap gap-4 mt-8"
-          buttonClassName="px-8 py-3 rounded-full font-medium transition-all"
-          mediaWrapperClassName="mt-12 rounded-2xl overflow-hidden"
-        />
+        <div className="relative">
+          <HeroLogoBillboard
+            logoText="Lumière"
+            description="Discover the power of nature refined by science. Our premium skincare collection harnesses botanical ingredients with cutting-edge formulation to reveal your most radiant skin."
+            buttons={[
+              { "text": "Explore Collection", "href": "#products" },
+              { "text": "Learn More", "href": "#about" }
+            ]}
+            buttonAnimation="slide-up"
+            background={{ "variant": "sparkles-gradient" }}
+            imageSrc="http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232241.jpg"
+            imageAlt="Premium Lumière skincare product collection"
+            mediaAnimation="blur-reveal"
+            frameStyle="card"
+            ariaLabel="Hero section - Lumière premium skincare"
+            className="w-full"
+            containerClassName="max-w-7xl mx-auto px-6"
+            logoClassName="text-4xl font-bold tracking-tight"
+            descriptionClassName="text-lg leading-relaxed max-w-2xl"
+            buttonContainerClassName="flex flex-wrap gap-4 mt-8"
+            buttonClassName="px-8 py-3 rounded-full font-medium transition-all"
+            mediaWrapperClassName="mt-12 rounded-2xl overflow-hidden relative"
+          />
+          <button
+            onClick={() => setShowProductInfo(!showProductInfo)}
+            className="absolute top-12 right-12 z-20 p-2 rounded-full bg-white bg-opacity-80 hover:bg-opacity-100 transition-all shadow-lg hover:shadow-xl"
+            aria-label="Show product information"
+          >
+            <Plus className="w-6 h-6 text-gray-800" />
+          </button>
+          {showProductInfo && (
+            <div className="absolute top-24 right-12 z-30 bg-white rounded-xl shadow-2xl p-6 max-w-xs animate-in fade-in zoom-in-95 duration-200">
+              <button
+                onClick={() => setShowProductInfo(false)}
+                className="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
+                aria-label="Close product information"
+              >
+                ×
+              </button>
+              <h3 className="font-semibold text-gray-900 mb-2">About Our Product</h3>
+              <p className="text-sm text-gray-700 leading-relaxed">
+                This premium skincare collection combines botanical extracts with cutting-edge scientific formulation. Each product is dermatologist-tested and suitable for all skin types, delivering visible results within 2-3 weeks of consistent use.
+              </p>
+            </div>
+          )}
+        </div>
       </div>
 
       <div id="about" data-section="about">
@@ -328,4 +355,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file