Merge version_1_1781777944618 into main #2
@@ -12,316 +12,174 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboard
|
||||
tag="Advanced AI Skincare"
|
||||
title="Uncover Your Skin’s True Potential"
|
||||
description="Upload your photo for a professional-grade facial scan. Get instant analysis on pigmentation, dark spots, and skin tone, along with your perfect seasonal color profile."
|
||||
primaryButton={{
|
||||
text: "Scan My Skin",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn Science",
|
||||
href: "#about",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/technology-hologram-illustrated_23-2151877756.jpg?_wi=1"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Advanced AI Skincare"
|
||||
title="Uncover Your Skin’s True Potential"
|
||||
description="Upload your photo for a professional-grade facial scan. Get instant analysis on pigmentation, dark spots, and skin tone, along with your perfect seasonal color profile."
|
||||
primaryButton={{
|
||||
text: "Scan My Skin", href: "#contact"}}
|
||||
secondaryButton={{
|
||||
text: "Learn Science", href: "#about"}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/technology-hologram-illustrated_23-2151877756.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="features-bento" data-section="features-bento">
|
||||
<SectionErrorBoundary name="features-bento">
|
||||
<div id="features-bento" data-section="features-bento">
|
||||
<SectionErrorBoundary name="features-bento">
|
||||
<FeaturesBento
|
||||
tag="Core Capabilities"
|
||||
title="Everything Your Face Needs"
|
||||
description="Powerful AI diagnostics meet personalized wellness for a comprehensive skin health journey."
|
||||
features={[
|
||||
{
|
||||
title: "Face Mapping",
|
||||
description: "Detect pigmentation and spot patterns.",
|
||||
bentoComponent: "media-stack",
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-mri-scan-report-computer-screen_107420-74012.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/combination-facial-features-concept_23-2150087674.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-blogger-records-video-her-room-has-camera-coffee-table-shows-eyeshadow-palette_1258-281750.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technology-hologram-illustrated_23-2151877756.jpg?_wi=2",
|
||||
imageAlt: "holographic skin map analysis",
|
||||
},
|
||||
{
|
||||
title: "Diet & Nutrition",
|
||||
description: "Expert diet advice for clear skin.",
|
||||
bentoComponent: "info-card-marquee",
|
||||
infoCards: [
|
||||
{
|
||||
icon: Apple,
|
||||
label: "Vitamin Intake",
|
||||
value: "Optimal",
|
||||
},
|
||||
{
|
||||
icon: Droplets,
|
||||
label: "Hydration",
|
||||
value: "85%",
|
||||
},
|
||||
{
|
||||
icon: Leaf,
|
||||
label: "Anti-Inflammatory",
|
||||
value: "Active",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/homemade-remedy-with-honey_23-2148894305.jpg?_wi=1",
|
||||
imageAlt: "holographic skin map analysis",
|
||||
},
|
||||
{
|
||||
title: "Beauty Advice",
|
||||
description: "Real-time AI skincare pro advice.",
|
||||
bentoComponent: "chat-marquee",
|
||||
aiIcon: Sparkles,
|
||||
userIcon: User,
|
||||
exchanges: [
|
||||
{
|
||||
userMessage: "How to fade dark spots?",
|
||||
aiResponse: "Targeted vitamin C treatment recommended.",
|
||||
},
|
||||
{
|
||||
userMessage: "Is this cream good?",
|
||||
aiResponse: "Perfect for your spring tone.",
|
||||
},
|
||||
],
|
||||
placeholder: "Ask your skin coach...",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-tips-makeup-accessories-concept_53876-125076.jpg?_wi=1",
|
||||
imageAlt: "holographic skin map analysis",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Core Capabilities"
|
||||
title="Everything Your Face Needs"
|
||||
description="Powerful AI diagnostics meet personalized wellness for a comprehensive skin health journey."
|
||||
features={[
|
||||
{
|
||||
title: "Face Mapping", description: "Detect pigmentation and spot patterns.", bentoComponent: "media-stack", mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-mri-scan-report-computer-screen_107420-74012.jpg"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/combination-facial-features-concept_23-2150087674.jpg"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-blogger-records-video-her-room-has-camera-coffee-table-shows-eyeshadow-palette_1258-281750.jpg"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Diet & Nutrition", description: "Expert diet advice for clear skin.", bentoComponent: "info-card-marquee", infoCards: [
|
||||
{
|
||||
icon: Apple,
|
||||
label: "Vitamin Intake", value: "Optimal"},
|
||||
{
|
||||
icon: Droplets,
|
||||
label: "Hydration", value: "85%"},
|
||||
{
|
||||
icon: Leaf,
|
||||
label: "Anti-Inflammatory", value: "Active"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Beauty Advice", description: "Real-time AI skincare pro advice.", bentoComponent: "chat-marquee", aiIcon: Sparkles,
|
||||
userIcon: User,
|
||||
exchanges: [
|
||||
{
|
||||
userMessage: "How to fade dark spots?", aiResponse: "Targeted vitamin C treatment recommended."},
|
||||
{
|
||||
userMessage: "Is this cream good?", aiResponse: "Perfect for your spring tone."},
|
||||
],
|
||||
placeholder: "Ask your skin coach..."},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="analysis-product" data-section="analysis-product">
|
||||
<SectionErrorBoundary name="analysis-product">
|
||||
<div id="analysis-product" data-section="analysis-product">
|
||||
<SectionErrorBoundary name="analysis-product">
|
||||
<FeaturesImageBento
|
||||
tag="How It Works"
|
||||
title="The Diagnostic Process"
|
||||
description="Precision technology for exact beauty results."
|
||||
items={[
|
||||
{
|
||||
title: "Upload Scan",
|
||||
description: "Instant high-res facial capture.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-colorful-thermal-scan-with-celsius-degree-temperature_23-2149170126.jpg",
|
||||
},
|
||||
{
|
||||
title: "Detect Pigmentation",
|
||||
description: "Identify spots and tone issues.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-online-avatar-design_23-2149699883.jpg",
|
||||
},
|
||||
{
|
||||
title: "Analyze Brightness",
|
||||
description: "Luminance score calculation.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-with-gradient-style_23-2147887431.jpg",
|
||||
},
|
||||
{
|
||||
title: "Diet & Wellness",
|
||||
description: "Nutrition matching logic.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/homemade-remedy-with-honey_23-2148894305.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "Beauty Pro Regimens",
|
||||
description: "Clinical grade recommendations.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-tips-makeup-accessories-concept_53876-125076.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "Routine Setup",
|
||||
description: "Daily guidance.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-home-kitchen-counter-using-her-smartphone-concept-social-media_1258-201598.jpg",
|
||||
},
|
||||
{
|
||||
title: "Product Matching",
|
||||
description: "Custom color cosmetics guide.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-making-natural-face-mask_23-2148883846.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="How It Works"
|
||||
title="The Diagnostic Process"
|
||||
description="Precision technology for exact beauty results."
|
||||
items={[
|
||||
{ title: "Upload Scan", description: "Instant high-res facial capture.", imageSrc: "http://img.b2bpic.net/free-photo/people-colorful-thermal-scan-with-celsius-degree-temperature_23-2149170126.jpg" },
|
||||
{ title: "Detect Pigmentation", description: "Identify spots and tone issues.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-online-avatar-design_23-2149699883.jpg" },
|
||||
{ title: "Analyze Brightness", description: "Luminance score calculation.", imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-with-gradient-style_23-2147887431.jpg" },
|
||||
{ title: "Diet & Wellness", description: "Nutrition matching logic.", imageSrc: "http://img.b2bpic.net/free-photo/homemade-remedy-with-honey_23-2148894305.jpg" },
|
||||
{ title: "Beauty Pro Regimens", description: "Clinical grade recommendations.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-tips-makeup-accessories-concept_53876-125076.jpg" },
|
||||
{ title: "Routine Setup", description: "Daily guidance.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-home-kitchen-counter-using-her-smartphone-concept-social-media_1258-201598.jpg" },
|
||||
{ title: "Product Matching", description: "Custom color cosmetics guide.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-making-natural-face-mask_23-2148883846.jpg" },
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="Clinical Intelligence"
|
||||
title="Data-Driven Skincare Science"
|
||||
description="We combine dermatological clinical standards with advanced computer vision to ensure every product and home remedy you choose actually improves your skin health."
|
||||
items={[
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Secure Scanning",
|
||||
description: "Privacy-first facial data encryption.",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Pro Endorsements",
|
||||
description: "Verified by board-certified experts.",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Seasonal Accuracy",
|
||||
description: "Perfect color theory precision.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-typing-laptop-sitting-home-with-automation-lighting-system_482257-8729.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Clinical Intelligence"
|
||||
title="Data-Driven Skincare Science"
|
||||
description="We combine dermatological clinical standards with advanced computer vision to ensure every product and home remedy you choose actually improves your skin health."
|
||||
items={[
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Secure Scanning", description: "Privacy-first facial data encryption."},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Pro Endorsements", description: "Verified by board-certified experts."},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Seasonal Accuracy", description: "Perfect color theory precision."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-typing-laptop-sitting-home-with-automation-lighting-system_482257-8729.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<PricingLayeredCards
|
||||
tag="Choose Your Journey"
|
||||
title="Beauty Plans"
|
||||
description="Unlock advanced insights for every budget."
|
||||
plans={[
|
||||
{
|
||||
tag: "Essentials",
|
||||
price: "$0",
|
||||
description: "Basic face scan and color profile.",
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
features: [
|
||||
"Face Analysis",
|
||||
"Color Tone Data",
|
||||
"Basic Diet Tips",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Professional",
|
||||
price: "$29",
|
||||
description: "Custom regimens and pro support.",
|
||||
primaryButton: {
|
||||
text: "Start Pro",
|
||||
href: "#",
|
||||
},
|
||||
features: [
|
||||
"Full Skin Diagnostics",
|
||||
"Custom Beauty Regimen",
|
||||
"24/7 Skin Coach AI",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Clinical",
|
||||
price: "$79",
|
||||
description: "Everything in Pro plus dermatologist calls.",
|
||||
primaryButton: {
|
||||
text: "Start Clinical",
|
||||
href: "#",
|
||||
},
|
||||
features: [
|
||||
"Dermatologist Consultation",
|
||||
"Monthly Skin Tests",
|
||||
"Priority Ingredient Tracking",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Choose Your Journey"
|
||||
title="Beauty Plans"
|
||||
description="Unlock advanced insights for every budget."
|
||||
plans={[
|
||||
{
|
||||
tag: "Essentials", price: "$0", description: "Basic face scan and color profile.", primaryButton: { text: "Get Started", href: "#" },
|
||||
features: ["Face Analysis", "Color Tone Data", "Basic Diet Tips"],
|
||||
},
|
||||
{
|
||||
tag: "Professional", price: "$29", description: "Custom regimens and pro support.", primaryButton: { text: "Start Pro", href: "#" },
|
||||
features: ["Full Skin Diagnostics", "Custom Beauty Regimen", "24/7 Skin Coach AI"],
|
||||
},
|
||||
{
|
||||
tag: "Clinical", price: "$79", description: "Everything in Pro plus dermatologist calls.", primaryButton: { text: "Start Clinical", href: "#" },
|
||||
features: ["Dermatologist Consultation", "Monthly Skin Tests", "Priority Ingredient Tracking"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="User Success Stories"
|
||||
title="Glowing Results"
|
||||
description="Hear from those who transformed their skin with our AI."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Elena R.",
|
||||
role: "Creative",
|
||||
quote: "Finally know my true seasonal color! My complexion looks so much brighter.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-naked-ginger-woman-looking_171337-10637.jpg",
|
||||
},
|
||||
{
|
||||
name: "Marcus D.",
|
||||
role: "Engineer",
|
||||
quote: "Simplified my entire routine. My pigmentation is finally fading.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/charming-cheerful-young-caucasian-woman-wearing-pink-hair-bun-rejoicing-looking-with-joy-excitement_273609-576.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sofia K.",
|
||||
role: "Artist",
|
||||
quote: "The diet advice actually helped my breakouts. Such a unique platform.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-making-home-comfortable_23-2149092117.jpg",
|
||||
},
|
||||
{
|
||||
name: "Leo P.",
|
||||
role: "Student",
|
||||
quote: "The seasonal palette suggestion is a game changer for my wardrobe.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg",
|
||||
},
|
||||
{
|
||||
name: "Zara M.",
|
||||
role: "Director",
|
||||
quote: "I feel so much more confident after following the custom beauty pro regimen.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-serene-young-woman-with-beautiful-olive-skin-curly-hair-ideal-skin-brown-eyes-studio_633478-1098.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="User Success Stories"
|
||||
title="Glowing Results"
|
||||
description="Hear from those who transformed their skin with our AI."
|
||||
testimonials={[
|
||||
{ name: "Elena R.", role: "Creative", quote: "Finally know my true seasonal color! My complexion looks so much brighter.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-naked-ginger-woman-looking_171337-10637.jpg" },
|
||||
{ name: "Marcus D.", role: "Engineer", quote: "Simplified my entire routine. My pigmentation is finally fading.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/charming-cheerful-young-caucasian-woman-wearing-pink-hair-bun-rejoicing-looking-with-joy-excitement_273609-576.jpg" },
|
||||
{ name: "Sofia K.", role: "Artist", quote: "The diet advice actually helped my breakouts. Such a unique platform.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-making-home-comfortable_23-2149092117.jpg" },
|
||||
{ name: "Leo P.", role: "Student", quote: "The seasonal palette suggestion is a game changer for my wardrobe.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg" },
|
||||
{ name: "Zara M.", role: "Director", quote: "I feel so much more confident after following the custom beauty pro regimen.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-serene-young-woman-with-beautiful-olive-skin-curly-hair-ideal-skin-brown-eyes-studio_633478-1098.jpg" },
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Common Queries"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about your skin transformation."
|
||||
items={[
|
||||
{
|
||||
question: "Is my facial data safe?",
|
||||
answer: "Yes, we use advanced encryption and do not store raw photos.",
|
||||
},
|
||||
{
|
||||
question: "How often should I scan?",
|
||||
answer: "We recommend a weekly scan for tracking progress.",
|
||||
},
|
||||
{
|
||||
question: "Do you provide remedies?",
|
||||
answer: "We suggest clinically approved home remedies and beauty tips.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/illustration-beauty-cosmetics-makeover-skincare-digital-tablet_53876-120634.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Common Queries"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about your skin transformation."
|
||||
items={[
|
||||
{ question: "Is my facial data safe?", answer: "Yes, we use advanced encryption and do not store raw photos." },
|
||||
{ question: "How often should I scan?", answer: "We recommend a weekly scan for tracking progress." },
|
||||
{ question: "Do you provide remedies?", answer: "We suggest clinically approved home remedies and beauty tips." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/illustration-beauty-cosmetics-makeover-skincare-digital-tablet_53876-120634.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Ready to Scan?"
|
||||
text="Start your journey to perfect skin health today. Get your free AI diagnostic in under 60 seconds."
|
||||
primaryButton={{
|
||||
text: "Upload Photo",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Ready to Scan?"
|
||||
text="Start your journey to perfect skin health today. Get your free AI diagnostic in under 60 seconds."
|
||||
primaryButton={{ text: "Upload Photo", href: "#" }}
|
||||
secondaryButton={{ text: "Learn More", href: "#" }}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user