11 Commits

Author SHA1 Message Date
901f47c535 Update src/app/page.tsx 2026-04-17 04:48:14 +00:00
97519f5279 Update src/app/styles/variables.css 2026-04-17 04:47:45 +00:00
47dc318933 Update src/app/page.tsx 2026-04-17 04:47:45 +00:00
20426ce9d6 Merge version_3 into main
Merge version_3 into main
2026-04-17 04:46:50 +00:00
61e13bbedc Update src/app/page.tsx 2026-04-17 04:46:47 +00:00
0cffb0b8c6 Merge version_2 into main
Merge version_2 into main
2026-04-17 04:46:31 +00:00
a229442ebe Update src/app/page.tsx 2026-04-17 04:46:28 +00:00
fc0d059659 Merge version_2 into main
Merge version_2 into main
2026-04-17 04:46:07 +00:00
ba86e4b039 Update src/app/page.tsx 2026-04-17 04:46:01 +00:00
78b9ed2d03 Merge version_2 into main
Merge version_2 into main
2026-04-17 04:45:37 +00:00
a64f1cbaf1 Update src/app/page.tsx 2026-04-17 04:45:34 +00:00
2 changed files with 148 additions and 439 deletions

View File

@@ -2,458 +2,167 @@
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 } 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."]}
useInvertedBackground={false}
/>
</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"
description="Only the best for your skin."
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"
useInvertedBackground={false}
/>
</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"
useInvertedBackground={false}
/>
</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"
description="Select the perfect kit for your skincare routine."
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"
useInvertedBackground={false}
/>
</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"
description="Real results backed by science."
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"
useInvertedBackground={false}
/>
</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 DecorNests design philosophy."
/>
</div>
<div id="team" data-section="team">
<TeamCardEleven
title="Our Experts"
description="Meet the team behind your glow."
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"
useInvertedBackground={false}
/>
</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"
cardTag="Reviews"
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"
useInvertedBackground={false}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "How long does a consultation take?",
content: "Initial consultations are usually 30-45 minutes.",
},
{
id: "f2",
title: "Do you provide custom furniture?",
content: "Yes, we specialize in high-end bespoke pieces.",
},
{
id: "f3",
title: "Is international shipping available?",
content: "Currently, we ship within the continental US.",
},
]}
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"
description="Answers to common skincare questions."
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"
useInvertedBackground={false}
/>
</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>
);

View File

@@ -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);