Merge version_2 into main #3
172
src/app/page.tsx
172
src/app/page.tsx
@@ -2,17 +2,17 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Leaf, Recycle, ShieldCheck, Sparkles } from "lucide-react";
|
||||
import { Leaf, Recycle, ShieldCheck, Sparkles, Mail, Phone, MapPin } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,14 +32,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Collection", id: "products"},
|
||||
{
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
{
|
||||
name: "FAQ", id: "faq"},
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Collection", id: "products" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Lumina Skincare"
|
||||
/>
|
||||
@@ -47,47 +44,18 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Radiance Refined"
|
||||
description="Discover a new standard of clean, minimalist luxury skincare designed to rejuvenate your natural beauty with every application."
|
||||
kpis={[
|
||||
{
|
||||
value: "100%", label: "Natural Ingredients"},
|
||||
{
|
||||
value: "24h", label: "Active Hydration"},
|
||||
{
|
||||
value: "50k+", label: "Happy Customers"},
|
||||
{ value: "100%", label: "Natural Ingredients" },
|
||||
{ value: "24h", label: "Active Hydration" },
|
||||
{ value: "50k+", label: "Happy Customers" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/make-up-concept-with-foundation_23-2149030367.jpg"
|
||||
imageAlt="Luxurious skincare products on stone"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-happy-fit-girl-sportswear-laughing_1153-7828.jpg", alt: "Happy woman with radiant skin"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-serene-young-woman-with-beautiful-olive-skin-curly-hair-ideal-skin-brown-eyes-studio_633478-1098.jpg", alt: "Serene woman with clear complexion"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/natural-beauty-portrait-beautiful-spa-woman-perfect-fresh-skin_1258-135256.jpg", alt: "Natural beauty spa model"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-friendly-amazed-young-caucasian-female-stylish-top-with-open-shoulders-looking-with-happy-excited-smile-keeping-hands-her-chest-expressing-positive-attitude_343059-2985.jpg", alt: "Happy customer smiling"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-beautiful-woman-lying-bed-early-morning_176420-3629.jpg", alt: "Radiant woman in morning light"},
|
||||
]}
|
||||
avatarText="Join 50k+ radiant souls"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text", text: "Cruelty-Free"},
|
||||
{
|
||||
type: "text", text: "Sustainable Glass"},
|
||||
{
|
||||
type: "text", text: "Dermatologist Approved"},
|
||||
{
|
||||
type: "text", text: "Ethically Sourced"},
|
||||
{
|
||||
type: "text", text: "Clinical Efficacy"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -110,15 +78,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Vegan Formula", description: "100% cruelty-free ingredients.", bentoComponent: "reveal-icon", icon: Leaf,
|
||||
},
|
||||
{
|
||||
title: "Recyclable Glass", description: "Sustainable packaging solutions.", bentoComponent: "reveal-icon", icon: Recycle,
|
||||
},
|
||||
{
|
||||
title: "Dermatologist Tested", description: "Clinical safety and efficacy.", bentoComponent: "reveal-icon", icon: ShieldCheck,
|
||||
},
|
||||
{ title: "Vegan Formula", description: "100% cruelty-free ingredients.", bentoComponent: "reveal-icon", icon: Leaf },
|
||||
{ title: "Recyclable Glass", description: "Sustainable packaging solutions.", bentoComponent: "reveal-icon", icon: Recycle },
|
||||
{ title: "Dermatologist Tested", description: "Clinical safety and efficacy.", bentoComponent: "reveal-icon", icon: ShieldCheck },
|
||||
]}
|
||||
title="The Lumina Standard"
|
||||
description="Excellence in every drop."
|
||||
@@ -132,18 +94,9 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Hydration Serum", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/nail-serum-with-plant_23-2149046487.jpg"},
|
||||
{
|
||||
id: "2", name: "Day Cream", price: "$65", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669117.jpg"},
|
||||
{
|
||||
id: "3", name: "Cleansing Oil", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/front-view-healthy-argan-oil-arrangement_23-2148989094.jpg"},
|
||||
{
|
||||
id: "4", name: "Night Mask", price: "$95", imageSrc: "http://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242185.jpg"},
|
||||
{
|
||||
id: "5", name: "Balancing Toner", price: "$50", imageSrc: "http://img.b2bpic.net/free-photo/top-view-assortment-cosmetic-products_23-2148619984.jpg"},
|
||||
{
|
||||
id: "6", name: "Radiance Eye Cream", price: "$70", imageSrc: "http://img.b2bpic.net/free-photo/composition-skin-beauty-products_23-2148761497.jpg"},
|
||||
{ id: "1", name: "Hydration Serum", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/nail-serum-with-plant_23-2149046487.jpg" },
|
||||
{ id: "2", name: "Day Cream", price: "$65", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669117.jpg" },
|
||||
{ id: "3", name: "Cleansing Oil", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/front-view-healthy-argan-oil-arrangement_23-2148989094.jpg" },
|
||||
]}
|
||||
title="Shop the Collection"
|
||||
description="Explore our curated essentials."
|
||||
@@ -155,16 +108,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", title: "Life Changing", quote: "My skin has never felt this hydrated and soft.", name: "Sarah J.", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-blond-lady-white-dress-looking-camera-pretty-lady-posing-indoors_549566-350.jpg"},
|
||||
{
|
||||
id: "2", title: "Absolute Luxury", quote: "Finally found products that don't irritate my sensitive skin.", name: "Michael R.", role: "Architect", imageSrc: "http://img.b2bpic.net/free-photo/interested-lady-posing-with-smile-jocund-young-woman-expressing-happiness_197531-14036.jpg"},
|
||||
{
|
||||
id: "3", title: "Simply Radiant", quote: "The glow is real. I get compliments all the time.", name: "Emily K.", role: "Founder", imageSrc: "http://img.b2bpic.net/free-photo/close-up-happy-woman-posing_23-2148263495.jpg"},
|
||||
{
|
||||
id: "4", title: "Worth Every Cent", quote: "High-end results without the harsh chemical feel.", name: "David W.", role: "Executive", imageSrc: "http://img.b2bpic.net/free-photo/lovely-woman-holding-eyeshadow-palette_23-2148398709.jpg"},
|
||||
{
|
||||
id: "5", title: "Pure Magic", quote: "Clean ingredients, powerful results. Amazing.", name: "Sophia L.", role: "Consultant", imageSrc: "http://img.b2bpic.net/free-photo/summer-portrait-lovely-asian-woman-with-flower-hairs-posing-garden_273443-632.jpg"},
|
||||
{ id: "1", title: "Life Changing", quote: "My skin has never felt this hydrated and soft.", name: "Sarah J.", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-blond-lady-white-dress-looking-camera-pretty-lady-posing-indoors_549566-350.jpg" },
|
||||
]}
|
||||
title="Loved by Thousands"
|
||||
description="Hear what our radiant community has to say."
|
||||
@@ -175,74 +119,52 @@ export default function LandingPage() {
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Vogue", "Harper's Bazaar", "ELLE", "Cosmopolitan", "Allure", "Forbes", "Glamour"]}
|
||||
names={["Vogue", "Harper's Bazaar", "ELLE"]}
|
||||
title="As Featured In"
|
||||
description="Recognized for our dedication to luxury and cleanliness."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
<FaqBase
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our products, shipping, and returns."
|
||||
faqs={[
|
||||
{
|
||||
id: "q1", title: "Are your products cruelty-free?", content: "Yes, we are 100% cruelty-free and vegan."},
|
||||
{
|
||||
id: "q2", title: "What is your return policy?", content: "We offer a 30-day money-back guarantee."},
|
||||
{
|
||||
id: "q3", title: "How long will my order take?", content: "Orders typically ship within 24 hours."},
|
||||
{ id: "q1", title: "Are your products cruelty-free?", content: "Yes, we are 100% cruelty-free and vegan." },
|
||||
{ id: "q2", title: "What is your return policy?", content: "We offer a 30-day money-back guarantee." },
|
||||
{ id: "q3", title: "How long will my order take?", content: "Orders typically ship within 24 hours." },
|
||||
]}
|
||||
sideTitle="Questions?"
|
||||
sideDescription="We're here to help you choose the best products for your skin."
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
buttons={[{ text: "Contact Support", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
<ContactSplitForm
|
||||
title="Get in Touch"
|
||||
description="Have questions or need a personalized consultation? Reach out and our team will get back to you within 24 hours."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "How can we help?", rows: 4 }}
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
title="Join Our Glow Circle"
|
||||
description="Sign up for exclusive offers and skincare tips."
|
||||
tag="Stay Connected"
|
||||
buttonText="Send Message"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-friendly-amazed-young-caucasian-female-stylish-top-with-open-shoulders-looking-with-happy-excited-smile-keeping-hands-her-chest-expressing-positive-attitude_343059-2985.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{
|
||||
label: "All Products", href: "#"},
|
||||
{
|
||||
label: "Serum", href: "#"},
|
||||
{
|
||||
label: "Moisturizer", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "FAQ", href: "#"},
|
||||
{
|
||||
label: "Shipping", href: "#"},
|
||||
{
|
||||
label: "Returns", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy", href: "#"},
|
||||
{
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
<FooterBaseCard
|
||||
logoText="Lumina"
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "All Products", href: "#" }, { label: "Serum", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
copyrightText="© 2025 Lumina Skincare. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user