Merge version_1 into main #2
131
src/app/page.tsx
131
src/app/page.tsx
@@ -1,41 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { Award, CheckCircle, Heart, Leaf, Sparkles, Star } from 'lucide-react';
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
||||
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
|
||||
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
||||
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { Sparkles, Heart, Leaf, Award, CheckCircle, Star } from "lucide-react";
|
||||
|
||||
export default function Home() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Products", id: "#products" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Reviews", id: "#testimonials" },
|
||||
];
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Bloom"
|
||||
navItems={[
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Benefits", id: "features" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" }
|
||||
]}
|
||||
/>
|
||||
<NavbarStyleApple navItems={navItems} brandName="Bloom" />
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
@@ -48,15 +47,15 @@ export default function LandingPage() {
|
||||
kpis={[
|
||||
{ value: "98%", label: "Natural Ingredients" },
|
||||
{ value: "30K+", label: "Satisfied Customers" },
|
||||
{ value: "15+", label: "Years Expertise" }
|
||||
{ value: "15+", label: "Years Expertise" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232229.jpg"
|
||||
imageAlt="Luxury skincare products collection"
|
||||
imageAlt="luxury skincare product bottles elegant display"
|
||||
mediaAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Shop Collection", href: "#products" },
|
||||
{ text: "Learn More", href: "#about" }
|
||||
{ text: "Learn More", href: "#about" },
|
||||
]}
|
||||
imagePosition="right"
|
||||
/>
|
||||
@@ -71,7 +70,7 @@ export default function LandingPage() {
|
||||
subdescription="Bloom Skincare – Where Science Meets Nature"
|
||||
icon={Leaf}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-wearing-bathrobe_23-2150100184.jpg"
|
||||
imageAlt="Dr. Sarah Mitchell, Bloom Skincare Founder"
|
||||
imageAlt="skincare expert dermatologist portrait professional"
|
||||
mediaAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
@@ -90,18 +89,16 @@ export default function LandingPage() {
|
||||
carouselMode="buttons"
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Hydrating Moisturizer", price: "$48", variant: "All Skin Types · Lightweight", imageSrc: "http://img.b2bpic.net/free-photo/bottle-with-moisturizer_23-2147710598.jpg", imageAlt: "Hydrating Moisturizer Cream", isFavorited: false
|
||||
id: "1", name: "Hydrating Moisturizer", price: "$48", variant: "All Skin Types · Lightweight", imageSrc: "http://img.b2bpic.net/free-photo/bottle-with-moisturizer_23-2147710598.jpg", imageAlt: "luxury moisturizer cream jar elegant packaging", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "2", name: "Gentle Facial Cleanser", price: "$32", variant: "Sensitive Skin · Fragrance-Free", imageSrc: "http://img.b2bpic.net/free-photo/top-view-orange-cleansing-product_23-2148532792.jpg", imageAlt: "Gentle Facial Cleanser", isFavorited: false
|
||||
id: "2", name: "Gentle Facial Cleanser", price: "$32", variant: "Sensitive Skin · Fragrance-Free", imageSrc: "http://img.b2bpic.net/free-photo/top-view-orange-cleansing-product_23-2148532792.jpg", imageAlt: "gentle face cleanser liquid product bottle", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "3", name: "Brightening Serum", price: "$68", variant: "Vitamin C · 1 oz", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-woman-with-prosthesis_23-2150589313.jpg", imageAlt: "Brightening Vitamin C Serum", isFavorited: false
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Explore All Products", href: "#" }
|
||||
id: "3", name: "Brightening Serum", price: "$68", variant: "Vitamin C · 1 oz", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-woman-with-prosthesis_23-2150589313.jpg", imageAlt: "vitamin C serum dropper bottle skincare", isFavorited: false,
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Explore All Products", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -116,16 +113,13 @@ export default function LandingPage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
tag: "Pure Ingredients", title: "Natural & Organic", subtitle: "98% natural botanical extracts", description: "We source the finest natural ingredients from sustainable suppliers worldwide. Every product is free from harmful chemicals, parabens, and synthetic fragrances. Our formulations respect your skin and the environment.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238265.jpg", imageAlt: "Natural botanical ingredients"
|
||||
},
|
||||
tag: "Pure Ingredients", title: "Natural & Organic", subtitle: "98% natural botanical extracts", description: "We source the finest natural ingredients from sustainable suppliers worldwide. Every product is free from harmful chemicals, parabens, and synthetic fragrances. Our formulations respect your skin and the environment.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238265.jpg", imageAlt: "natural ingredients botanical plants skincare organic"},
|
||||
{
|
||||
id: 2,
|
||||
tag: "Science-Backed", title: "Dermatologist Tested", subtitle: "Proven efficacy and safety", description: "Each formula undergoes rigorous dermatological testing and clinical trials. Our research team collaborates with leading skincare experts to ensure maximum effectiveness and safety for all skin types.", imageSrc: "http://img.b2bpic.net/free-photo/chemist-researcher-doctor-wearing-ppe-equipment-prevent-infection-with-coronavirus-analyzing-virus-sample-using-microscope-working-medical-vaccine-chemistry-laboratory-medicine-concept_482257-28277.jpg", imageAlt: "Skincare science laboratory"
|
||||
},
|
||||
tag: "Science-Backed", title: "Dermatologist Tested", subtitle: "Proven efficacy and safety", description: "Each formula undergoes rigorous dermatological testing and clinical trials. Our research team collaborates with leading skincare experts to ensure maximum effectiveness and safety for all skin types.", imageSrc: "http://img.b2bpic.net/free-photo/chemist-researcher-doctor-wearing-ppe-equipment-prevent-infection-with-coronavirus-analyzing-virus-sample-using-microscope-working-medical-vaccine-chemistry-laboratory-medicine-concept_482257-28277.jpg", imageAlt: "skincare laboratory dermatology science research"},
|
||||
{
|
||||
id: 3,
|
||||
tag: "Real Results", title: "Visible Transformation", subtitle: "See improvements in 4 weeks", description: "Our customers report noticeably clearer, more radiant skin within weeks of consistent use. With visible results backed by real testimonials, you can trust that Bloom delivers on its promises.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-models-looking-each-other_23-2148313379.jpg", imageAlt: "Skincare results and transformation"
|
||||
}
|
||||
tag: "Real Results", title: "Visible Transformation", subtitle: "See improvements in 4 weeks", description: "Our customers report noticeably clearer, more radiant skin within weeks of consistent use. With visible results backed by real testimonials, you can trust that Bloom delivers on its promises.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-models-looking-each-other_23-2148313379.jpg", imageAlt: "skincare before after results glowing skin"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -144,20 +138,16 @@ export default function LandingPage() {
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Emma Rodriguez", role: "Marketing Professional", company: "Digital Agency", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-with-blond-hair_176420-28338.jpg", imageAlt: "Emma Rodriguez"
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-with-blond-hair_176420-28338.jpg", imageAlt: "happy woman skincare results radiant smile"},
|
||||
{
|
||||
id: "2", name: "Jessica Chen", role: "Skincare Enthusiast", company: "Beauty Blogger", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-girl-posing-with-lily-flower_651396-1317.jpg", imageAlt: "Jessica Chen"
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-girl-posing-with-lily-flower_651396-1317.jpg", imageAlt: "young woman skincare testimonial happy portrait"},
|
||||
{
|
||||
id: "3", name: "Sophia Patel", role: "Dermatology Student", company: "Medical School", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-posing_23-2149265857.jpg", imageAlt: "Sophia Patel"
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-posing_23-2149265857.jpg", imageAlt: "woman skincare results happy glowing portrait"},
|
||||
{
|
||||
id: "4", name: "Amanda Thompson", role: "Wellness Coach", company: "Holistic Health", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-strong-sporty-athletic-fitness-trainer-instructor-woman-wearing-brown-tracksuit-sitting_1258-200304.jpg", imageAlt: "Amanda Thompson"
|
||||
}
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-strong-sporty-athletic-fitness-trainer-instructor-woman-wearing-brown-tracksuit-sitting_1258-200304.jpg", imageAlt: "woman portrait skincare benefits happy customer"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -172,20 +162,15 @@ export default function LandingPage() {
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "Are your products suitable for sensitive skin?", content: "Yes! All Bloom products are hypoallergenic and formulated to be gentle on sensitive skin. We perform extensive patch testing and avoid common irritants. If you have specific concerns, please consult with a dermatologist."
|
||||
},
|
||||
id: "1", title: "Are your products suitable for sensitive skin?", content: "Yes! All Bloom products are hypoallergenic and formulated to be gentle on sensitive skin. We perform extensive patch testing and avoid common irritants. If you have specific concerns, please consult with a dermatologist."},
|
||||
{
|
||||
id: "2", title: "How long until I see results?", content: "Most customers notice improvements within 2-4 weeks of consistent use. Full results typically appear after 8-12 weeks. Results vary based on individual skin type and concerns."
|
||||
},
|
||||
id: "2", title: "How long until I see results?", content: "Most customers notice improvements within 2-4 weeks of consistent use. Full results typically appear after 8-12 weeks. Results vary based on individual skin type and concerns."},
|
||||
{
|
||||
id: "3", title: "Do you offer refunds?", content: "We offer a 60-day money-back guarantee if you're not completely satisfied. No questions asked – your satisfaction is our priority."
|
||||
},
|
||||
id: "3", title: "Do you offer refunds?", content: "We offer a 60-day money-back guarantee if you're not completely satisfied. No questions asked – your satisfaction is our priority."},
|
||||
{
|
||||
id: "4", title: "Are your products cruelty-free?", content: "Absolutely! Bloom is certified cruelty-free and never tests on animals. We're committed to ethical beauty practices."
|
||||
},
|
||||
id: "4", title: "Are your products cruelty-free?", content: "Absolutely! Bloom is certified cruelty-free and never tests on animals. We're committed to ethical beauty practices."},
|
||||
{
|
||||
id: "5", title: "Can I use multiple products together?", content: "Yes! Our products are designed to work synergistically. We recommend starting with cleanser, toner, serum, and moisturizer. Our website includes personalized skincare routines for different skin types."
|
||||
}
|
||||
id: "5", title: "Can I use multiple products together?", content: "Yes! Our products are designed to work synergistically. We recommend starting with cleanser, toner, serum, and moisturizer. Our website includes personalized skincare routines for different skin types."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -198,26 +183,26 @@ export default function LandingPage() {
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "#products" },
|
||||
{ label: "Best Sellers", href: "#products" },
|
||||
{ label: "New Arrivals", href: "#products" }
|
||||
]
|
||||
{ label: "New Arrivals", href: "#products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Our Story", href: "#about" },
|
||||
{ label: "Contact", href: "#" }
|
||||
]
|
||||
{ label: "Contact", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Shipping Info", href: "#" },
|
||||
{ label: "Privacy Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user