Merge version_4 into main #5
386
src/app/page.tsx
386
src/app/page.tsx
@@ -2,284 +2,154 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
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 { Sparkles, Leaf, Palette, Star, ArrowRight } from "lucide-react";
|
||||
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';
|
||||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function SkincareLandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="grid"
|
||||
background="fluid"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Products", id: "products"},
|
||||
{
|
||||
name: "Pricing", id: "pricing"},
|
||||
]}
|
||||
brandName="DecorNest"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[{ name: "Home", id: "hero" }, { name: "About", id: "about" }, { name: "Products", id: "products" }, { name: "Pricing", id: "pricing" }]}
|
||||
brandName="PureGlow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<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="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial
|
||||
title="Radiance in Every Drop"
|
||||
description="Discover scientifically formulated skincare designed to nourish, protect, and restore your natural glow."
|
||||
testimonials={[{ name: "Sarah J.", handle: "@sarahglow", testimonial: "My skin has never felt this hydrated. Absolutely love these products!", rating: 5 }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cosmetics-skin-care-routine-top-view_23-2148705031.jpg"
|
||||
buttons={[{ text: "Explore Collection", href: "#products" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<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="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="The Science of Nature"
|
||||
description={["We blend botanical wisdom with clinical innovation to create clean, effective skincare.", "Our commitment is to transparency, sustainability, and your skin's long-term health."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
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="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="blur-reveal"
|
||||
title="Pure Ingredients, Real Results"
|
||||
features={[
|
||||
{ id: "f1", label: "Natural", title: "Sourced from Earth", items: ["Organic extracts", "Cold-pressed oils", "Vegan formula"], buttons: [{text: "Learn more"}] },
|
||||
{ id: "f2", label: "Clinical", title: "Scientifically Proven", items: ["Dermatologist tested", "Clinical trials", "Fragrance free"], buttons: [{text: "See data"}] }
|
||||
]}
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
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="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
title="Our Best Sellers"
|
||||
description="Daily essentials curated for your unique skin journey."
|
||||
products={[
|
||||
{ id: "p1", brand: "Glow Series", name: "Hydrating Serum", price: "$45", rating: 5, reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottles-with-natural-ingredients_23-2148671234.jpg" },
|
||||
{ id: "p2", brand: "Glow Series", name: "Day Cream", price: "$55", rating: 4, reviewCount: "96", imageSrc: "http://img.b2bpic.net/free-photo/luxury-cosmetic-cream-packaging_23-2148671245.jpg" }
|
||||
]}
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
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="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
title="Complete Regimen Kits"
|
||||
plans={[
|
||||
{ id: "starter", title: "Starter Kit", price: "$89", period: "/monthly", features: ["Cleanser", "Serum", "Day Cream"], button: { text: "Get Started" } },
|
||||
{ id: "pro", title: "Advanced Kit", price: "$149", period: "/monthly", features: ["Everything in Starter", "Night Cream", "Eye Gel", "Weekly Mask"], button: { text: "Upgrade Now" } }
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</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="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
title="Proven Impact"
|
||||
metrics={[
|
||||
{ id: "m1", value: "95%", title: "Skin Elasticity", description: "Reported improvement after 4 weeks.", icon: Sparkles },
|
||||
{ id: "m2", value: "80k+", title: "Happy Customers", description: "Joining our clean beauty movement.", icon: Leaf }
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</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="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
title="Our Experts"
|
||||
groups={[{
|
||||
id: "team-1", groupTitle: "Formulation Team", members: [{ id: "e1", title: "Dr. Elena Rose", subtitle: "Lead Chemist", detail: "15 years in skincare innovation.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-scientist-lab_23-2148671321.jpg" }]
|
||||
}]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
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="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
cardTitle="See Our Results"
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Julia M.", imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-with-natural-skin_23-2148671456.jpg" },
|
||||
{ id: "t2", name: "Chloe B.", imageSrc: "http://img.b2bpic.net/free-photo/woman-smiling-natural-beauty_23-2148671489.jpg" }
|
||||
]}
|
||||
cardAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Frequently Asked"
|
||||
faqs={[
|
||||
{ id: "q1", title: "Is it safe for sensitive skin?", content: "Yes, all our products are dermatologically tested and fragrance-free." },
|
||||
{ id: "q2", title: "Do you ship internationally?", content: "We currently ship across the globe with local distribution partners." }
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<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>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
logoText="PureGlow"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/bottles-beauty-products_23-2148671567.jpg"
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Serums", href: "#products" }, { label: "Creams", href: "#products" }] },
|
||||
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #120006e6;
|
||||
--primary-cta: #e63946;
|
||||
--background: #fbf8f5;
|
||||
--card: #f4f1ed;
|
||||
--foreground: #3d3630;
|
||||
--primary-cta: #a89078;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta: #e8e1d9;
|
||||
--secondary-cta-text: #120006e6;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
--accent: #d6c9bd;
|
||||
--background-accent: #efeae5;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user