bender/53d9ff7a-39cf-4235-811b-e607e1e31c28
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-14 06:15:43 +00:00
parent 07f5566457
commit 7c50c2402e
1 changed files with 51 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/app/page.tsx
View File

@@ -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>
);
}
}