Merge version_3 into main #4
275
src/app/page.tsx
275
src/app/page.tsx
@@ -2,15 +2,17 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroPersonalLinks from '@/components/sections/hero/HeroPersonalLinks';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -28,110 +30,253 @@ export default function LandingPage() {
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "Packages", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" }
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Products", id: "products"},
|
||||
{
|
||||
name: "Pricing", id: "pricing"},
|
||||
]}
|
||||
brandName="LuxeSkin"
|
||||
button={{ text: "Get Started" }}
|
||||
brandName="DecorNest"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroPersonalLinks
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Radiance in Every Drop"
|
||||
linkCards={[
|
||||
{ title: "View Routine", description: "Start your glow journey", button: { text: "Shop Now" } },
|
||||
{ title: "Skin Quiz", description: "Find what works for you", button: { text: "Take Quiz" } }
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
title="Elevate Your Living Space"
|
||||
description="Discover curated room decor that blends functionality with timeless elegance. Transform your home into a sanctuary of style."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Collections", href: "#products"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/creative-fengshui-practice-bedroom-arrangement_23-2149135753.jpg"
|
||||
imageAlt="Curated room decor living space"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/creative-fengshui-practice-bedroom-arrangement_23-2149135752.jpg", alt: "Creative fengshui practice bedroom arrangement"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cup-coffee-jug-bed_23-2147693745.jpg", alt: "Cup and coffee jug on bed"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/jug-with-coffee-cup_23-2147693749.jpg", alt: "Jug with coffee and cup"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/blend-minimal-nordic-interior-design-with-japanese-wabi-sabi-style_23-2151160110.jpg", alt: "Blend of minimal nordic interior design with japanese wabi-sabi style"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/freelancing-was-best-idea-my-career_329181-11588.jpg", alt: "Freelancing was the best idea for my career"},
|
||||
]}
|
||||
avatarText="Trusted by 1.2k+ homeowners"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text", text: "Minimalist"},
|
||||
{
|
||||
type: "text", text: "Sustainable"},
|
||||
{
|
||||
type: "text", text: "Timeless"},
|
||||
{
|
||||
type: "text", text: "Bespoke"},
|
||||
{
|
||||
type: "text", text: "Elegant"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
title="Pure Ingredients, Proven Results"
|
||||
description="Our science-backed formulas deliver visible radiance."
|
||||
metrics={[{ value: "100%", title: "Vegan" }, { value: "50+", title: "Clinical Trials" }]}
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{
|
||||
type: "text", content: "Crafting homes that "},
|
||||
{
|
||||
type: "image", src: "http://img.b2bpic.net/free-photo/full-shot-woman-restoring-furniture_23-2150232662.jpg", alt: "Interior design studio"},
|
||||
{
|
||||
type: "text", content: " inspire daily comfort and beauty."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
title="Why LuxeSkin"
|
||||
description="Tailored care for your unique skin barrier."
|
||||
features={[
|
||||
{ id: "f1", title: "Hydration Focus", description: "Deep nourishment for all skin types.", tag: "Hydrate" },
|
||||
{ id: "f2", title: "Anti-Aging", description: "Potent antioxidants for firmness.", tag: "Refine" }
|
||||
]}
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"No cheap plastic fixtures", "No clutter-heavy designs", "No mass-market fatigue", "No hidden fees", "No complex setups"],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Timeless designs", "Premium sustainable materials", "Fast domestic shipping", "Professional consultation", "24/7 Support"],
|
||||
}}
|
||||
title="Why Choose DecorNest?"
|
||||
description="Our curated collections ensure your home reflects your personality through every subtle detail."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
title="Featured Skincare"
|
||||
description="Top-rated products for your daily routine."
|
||||
textboxLayout="split-description"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", name: "Vitamin C Serum", price: "$45", variant: "30ml", imageSrc: "https://img.b2bpic.net/free-photo/beauty-products-collection-with-copy-space_23-2147775986.jpg?_wi=1" },
|
||||
{ id: "2", name: "Hydrating Moisturizer", price: "$38", variant: "50ml", imageSrc: "https://img.b2bpic.net/free-photo/cream-jar-cosmetics-with-bottle-skincare_23-2148769315.jpg" },
|
||||
{ id: "3", name: "Face Oil", price: "$55", variant: "30ml", imageSrc: "https://img.b2bpic.net/free-photo/beauty-products-collection-with-copy-space_23-2147775986.jpg?_wi=2" }
|
||||
{
|
||||
id: "p1", name: "Modern Ceramic Vase", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/flower-vase-modern-interior_23-2151928972.jpg"},
|
||||
{
|
||||
id: "p2", name: "Warm Glow Floor Lamp", price: "$249", imageSrc: "http://img.b2bpic.net/free-photo/comfort-mattress-contemporary-hotel-bed_1203-5169.jpg"},
|
||||
{
|
||||
id: "p3", name: "Minimalist Side Table", price: "$199", imageSrc: "http://img.b2bpic.net/free-photo/chair-with-hawaiian-shirts-with-floral-print-hat_23-2149366078.jpg"},
|
||||
{
|
||||
id: "p4", name: "Gold Frame Mirror", price: "$159", imageSrc: "http://img.b2bpic.net/free-photo/photo-frame-gift-box-sparklers_23-2147983762.jpg"},
|
||||
{
|
||||
id: "p5", name: "Wool Blend Area Rug", price: "$329", imageSrc: "http://img.b2bpic.net/free-photo/fabric-texture-background_1385-1175.jpg"},
|
||||
{
|
||||
id: "p6", name: "Abstract Wall Art", price: "$119", imageSrc: "http://img.b2bpic.net/free-photo/pastel-terrazzo-background_23-2151939753.jpg"},
|
||||
]}
|
||||
title="Signature Collections"
|
||||
description="Explore our curated selections for modern living."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
title="Skincare Routines"
|
||||
description="Choose the perfect plan for your skin needs."
|
||||
textboxLayout="split"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "basic", tag: "Starter", price: "$60", period: "/mo", description: "Basic cleansing and moisturizing.", button: { text: "Select" }, featuresTitle: "Includes:", features: ["Cleanser", "Moisturizer"] },
|
||||
{ id: "pro", tag: "Pro", price: "$120", period: "/mo", description: "Advanced care for glowing skin.", button: { text: "Select" }, featuresTitle: "Includes:", features: ["Cleanser", "Moisturizer", "Serum", "Face Oil"] }
|
||||
{
|
||||
id: "basic", badge: "Essential", price: "$299", subtitle: "For single-room refresh", features: [
|
||||
"Room layout advice", "Color palette guide", "Curated shopping list"],
|
||||
},
|
||||
{
|
||||
id: "pro", badge: "Popular", price: "$599", subtitle: "For full room design", features: [
|
||||
"3D layout rendering", "Material sourcing", "Priority support", "Furniture selection"],
|
||||
},
|
||||
{
|
||||
id: "enterprise", badge: "Comprehensive", price: "$1,200", subtitle: "Full home styling", features: [
|
||||
"Entire home curation", "Professional installation", "Custom decor sourcing", "VIP Concierge"],
|
||||
},
|
||||
]}
|
||||
title="Styling Packages"
|
||||
description="Flexible design packages to suit your room transformation needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "1.2k+", title: "Rooms Redesigned", description: "Across five major cities.", imageSrc: "http://img.b2bpic.net/free-photo/decorative-white-vase-with-polka-dots-light-background-isolated_169016-19147.jpg"},
|
||||
{
|
||||
id: "m2", value: "98%", title: "Client Satisfaction", description: "Highly rated service experiences.", imageSrc: "http://img.b2bpic.net/free-photo/view-house-lamp-with-futuristic-design_23-2151037441.jpg"},
|
||||
{
|
||||
id: "m3", value: "500+", title: "Curated Products", description: "Handpicked for uniqueness.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-home-office_1048-17751.jpg"},
|
||||
]}
|
||||
title="Impact at a Glance"
|
||||
description="We've helped thousands of homeowners find their aesthetic rhythm."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "t1", name: "Elena Rossi", role: "Lead Interior Designer", imageSrc: "http://img.b2bpic.net/free-photo/confident-businesswoman-looking-away_23-2148452694.jpg"},
|
||||
{
|
||||
id: "t2", name: "Marcus Chen", role: "Head Curator", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confused-male-designer-architect-feels-stressed-being-nervous-keeps-hand-head-stares-blueprint-exhausted-man-creates-construction-project-alone-has-some-troubles_1258-80493.jpg"},
|
||||
{
|
||||
id: "t3", name: "Sarah Miller", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/woman-living-room-smiles-holding-mug_23-2148385593.jpg"},
|
||||
{
|
||||
id: "t4", name: "Alex Johnson", role: "Design Consultant", imageSrc: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-office-graphic-tablet_23-2149119207.jpg"},
|
||||
]}
|
||||
title="Meet Our Visionaries"
|
||||
description="The creative minds behind DecorNest’s design philosophy."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
title="Customer Glow"
|
||||
description="Join thousands of happy users."
|
||||
textboxLayout="split"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
kpiItems={[{ value: "5k+", label: "Reviews" }, { value: "4.9", label: "Rating" }, { value: "98%", label: "Retention" }]}
|
||||
testimonials={[{ id: "t1", name: "Jane Doe", role: "Artist", company: "Self-Employed", rating: 5 }, { id: "t2", name: "John Smith", role: "Designer", company: "Agency", rating: 5 }]}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", name: "Claire B.", handle: "@claireb", testimonial: "The design team made my small apartment feel so spacious and warm. Truly life-changing!", imageSrc: "http://img.b2bpic.net/free-photo/two-students-smiling-happy-painting-sitting-table-art-school_839833-9696.jpg"},
|
||||
{
|
||||
id: "t2", name: "David W.", handle: "@davidw", testimonial: "Professional, efficient, and exceptionally tasteful. My living room finally feels complete.", imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-looking-out-window_23-2148369600.jpg"},
|
||||
{
|
||||
id: "t3", name: "Sophia L.", handle: "@sophial", testimonial: "Absolutely love the curated selections. The quality of the furniture is just unmatched.", imageSrc: "http://img.b2bpic.net/free-photo/fulllength-portrait-curly-blonde-woman-dressed-black-silk-pants-stylish-green-striped-sh_197531-33604.jpg"},
|
||||
{
|
||||
id: "t4", name: "James R.", handle: "@jamesr", testimonial: "DecorNest understood exactly what I was going for. Seamless and enjoyable experience.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-smiling-young-man-glasses-sits-office-table-waves-hand-say-hello-you-looking_1258-245359.jpg"},
|
||||
{
|
||||
id: "t5", name: "Maria K.", handle: "@mariak", testimonial: "The best investment I made for my home. The attention to detail is truly incredible.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-casual-wear-home_624325-4164.jpg"},
|
||||
]}
|
||||
title="Client Journeys"
|
||||
description="See how we transformed living spaces across the country."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Frequently Asked"
|
||||
description="Got questions? We have answers."
|
||||
textboxLayout="split"
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1", title: "How does the 3D rendering process work?", content: "Our designers create immersive 3D models of your space, allowing you to visualize layouts, material textures, and lighting in real-time before we ever move a piece of furniture."},
|
||||
{
|
||||
id: "f2", title: "What are the benefits of bespoke furniture?", content: "Bespoke pieces are hand-crafted to fit your unique dimensions and aesthetic preferences perfectly, ensuring a one-of-a-kind look that standard factory-made furniture simply cannot replicate."},
|
||||
{
|
||||
id: "f3", title: "Is international shipping available?", content: "Currently, we ship within the continental US to ensure our high-quality delivery standards are maintained."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-women-working-as-wedding-planners_23-2150328532.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Design Questions"
|
||||
description="Find answers to our most common decor queries."
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
faqs={[{ id: "q1", title: "Are products vegan?", content: "Yes, 100% plant-based." }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="LuxeSkin"
|
||||
columns={[{ title: "Links", items: [{ label: "Home", href: "#hero" }] }]}
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Team", href: "#team"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{
|
||||
label: "Help", href: "#faq"},
|
||||
{
|
||||
label: "Design Tips", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy", href: "#"},
|
||||
{
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="DecorNest"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user