development/c3c48c72-9cc3-416f-ba3e-7f19aae75009
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-01-05 22:10:02 +02:00
commit 3ef7dd4647
308 changed files with 62621 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

512
src/app/globals.css Normal file
View File

@@ -0,0 +1,512 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
--background: #ffffff;;
--card: #fcfcfc;;
--foreground: #00120ae6;;
--primary-cta: #15ad59;;
--secondary-cta: #ffffff;;
--accent: #e2e2e2;;
--background-accent: #c4c4c4;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-epilogue), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-epilogue), sans-serif;
}

1268
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

413
src/app/page.tsx Normal file
View File

@@ -0,0 +1,413 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, TrendingUp, Zap, Shield, Users } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="mediumSmall"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="LUMINOUS"
navItems={[
{ name: "Products", id: "products" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "testimonials" },
{ name: "FAQ", id: "faq" }
]}
button={{
text: "Shop Now",
href: "products"
}}
className="bg-white/80 backdrop-blur-md"
navItemClassName="text-sm font-medium"
buttonClassName="px-6 py-2.5"
buttonTextClassName="font-semibold"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
tag="LIMITED TIME OFFER"
title="Visible Skin Results in 14 Days"
description="Dermatologist-tested formulas designed to restore, hydrate, and protect your skin. Join 12,000+ verified customers seeing real transformation."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643703492-o0tl3yti.jpg"
imageAlt="Premium skincare serum bottle"
buttons={[
{ text: "Shop Bestsellers", href: "products" },
{ text: "Learn More", href: "about" }
]}
className="relative"
titleClassName="text-4xl md:text-5xl font-bold tracking-tight"
descriptionClassName="text-lg md:text-xl text-foreground/80 max-w-2xl"
/>
</div>
<div id="products" data-section="products">
<ProductCardTwo
title="Hero Products & Routines"
description="Curated bestsellers proven to deliver visible results. Choose your perfect routine."
tag="BESTSELLERS"
products={[
{
id: "1",
brand: "LUMINOUS",
name: "Gentle Cleanse",
price: "$32.00",
rating: 5,
reviewCount: "2.4k",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643704607-300wohbd.jpg",
imageAlt: "Gentle Cleanse facial cleanser",
isFavorited: false
},
{
id: "2",
brand: "LUMINOUS",
name: "Hydra Boost Moisturizer",
price: "$38.00",
rating: 5,
reviewCount: "3.1k",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643705437-1xkd5321.jpg",
imageAlt: "Hydra Boost Moisturizer jar",
isFavorited: false
},
{
id: "3",
brand: "LUMINOUS",
name: "Renewal Serum",
price: "$48.00",
rating: 5,
reviewCount: "3.8k",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643706151-xqxlt09a.jpg",
imageAlt: "Renewal Serum dropper bottle",
isFavorited: false
}
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
gridVariant="three-columns-all-equal-width"
carouselMode="buttons"
titleClassName="text-3xl md:text-4xl font-bold"
descriptionClassName="text-base md:text-lg text-foreground/70"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
title="Complete Skincare Routines"
description="Choose a routine that works for your skin type. Save up to 20% with bundle pricing."
tag="SAVE MORE"
plans={[
{
id: "single",
price: "$32",
name: "Single Product",
buttons: [
{ text: "Select Product", href: "products" },
{ text: "Learn More" }
],
features: [
"One hero product",
"Free shipping on orders $50+",
"30-day money-back guarantee",
"Access to support"
]
},
{
id: "routine",
badge: "MOST POPULAR",
badgeIcon: Sparkles,
price: "$95",
name: "Complete Routine",
buttons: [
{ text: "Get Routine", href: "products" },
{ text: "Chat With Expert" }
],
features: [
"Cleanse + Treat + Protect trio",
"Free shipping always",
"15% subscription discount",
"Priority support",
"Free sample set included"
]
},
{
id: "bundle",
price: "$125",
name: "Ultimate Bundle",
buttons: [
{ text: "Get Bundle", href: "products" },
{ text: "View Details" }
],
features: [
"Complete 5-step routine",
"Concentrated serum bonus",
"Free express shipping",
"20% subscription savings",
"VIP customer care"
]
}
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
carouselMode="buttons"
titleClassName="text-3xl md:text-4xl font-bold"
descriptionClassName="text-base md:text-lg text-foreground/70"
/>
</div>
<div id="about" data-section="about">
<MediaSplitAbout
title="Why Dermatologists Recommend Luminous"
description="Our formulas are developed with leading dermatologists and tested in clinical labs. Every product is designed to deliver visible results in 14 days or your money back. We believe skincare should be simple, effective, and backed by science—not hype."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643708433-rrdlfqxu.jpg"
imageAlt="Premium skincare ingredients"
imagePosition="right"
useInvertedBackground="noInvert"
buttons={[
{ text: "Read Our Story", href: "#" },
{ text: "View Certifications", href: "#" }
]}
titleClassName="text-3xl md:text-4xl font-bold mb-4"
descriptionClassName="text-base md:text-lg text-foreground/75 leading-relaxed"
/>
</div>
<div id="feature" data-section="feature">
<FeatureCardEighteen
title="Our Formulas vs. Conventional Brands"
description="See the difference science-backed skincare makes."
tag="PROVEN RESULTS"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
negativeCard={{
title: "Conventional Brands",
items: [
"Harsh chemical fillers & preservatives",
"Limited clinical testing",
"Slow results (6+ months)",
"Hard to track effectiveness",
"No skin type customization"
],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643706951-gqql06yg.jpg",
imageAlt: "Before transformation"
}}
positiveCard={{
title: "Luminous Skincare",
items: [
"Clean, dermatologist-approved ingredients",
"Clinically tested & validated",
"Visible results in 14 days",
"Real customer testimonials with proof",
"Personalized recommendations for your skin"
],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643706951-gqql06yg.jpg",
imageAlt: "After transformation"
}}
titleClassName="text-3xl md:text-4xl font-bold"
descriptionClassName="text-base md:text-lg text-foreground/70"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
title="Real Results from Real Customers"
description="Join thousands of people who transformed their skin in just 14 days."
tag="VERIFIED REVIEWS"
testimonials={[
{
id: "1",
name: "Sarah Mitchell",
role: "Verified Buyer",
testimonial: "My redness was completely gone in 10 days. I'm shocked at how fast this worked. Finally found a product that actually delivers on its promises.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643709459-5wdbgujt.jpg",
imageAlt: "Sarah Mitchell"
},
{
id: "2",
name: "Emily Rodriguez",
role: "Verified Buyer",
testimonial: "No more breakouts after switching to this routine. My skin has never looked clearer. The serum alone is worth every penny.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643710136-ruy49c57.jpg",
imageAlt: "Emily Rodriguez"
},
{
id: "3",
name: "Jessica Chen",
role: "Verified Buyer",
testimonial: "My dermatologist asked what I changed. These products transformed my sensitive skin without any irritation. Best skincare investment I've made.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643710713-rxkbyehg.jpg",
imageAlt: "Jessica Chen"
},
{
id: "4",
name: "Laura Thompson",
role: "Verified Buyer",
testimonial: "At 45, I was skeptical about anti-aging claims. But the fine lines around my eyes visibly softened in two weeks. Game-changer for mature skin.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643711414-hhlov9az.jpg",
imageAlt: "Laura Thompson"
},
{
id: "5",
name: "Rachel Adams",
role: "Verified Buyer",
testimonial: "Finally, a skincare line that's clean AND effective. My hyperpigmentation is fading fast. Love that it's cruelty-free too.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643712172-j515xqam.jpg",
imageAlt: "Rachel Adams"
},
{
id: "6",
name: "Sophia Williams",
role: "Verified Buyer",
testimonial: "The 30-day guarantee gave me confidence to try. I didn't need a refund—results spoke for themselves. Permanent customer now.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643712766-1crrqx4y.jpg",
imageAlt: "Sophia Williams"
}
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
uniformGridCustomHeightClasses="min-h-auto"
titleClassName="text-3xl md:text-4xl font-bold"
descriptionClassName="text-base md:text-lg text-foreground/70"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSix
title="Why Customers Choose Luminous"
description="Proven trust through science and real results."
tag="OUR PROMISE"
metrics={[
{
id: "1",
value: "98%",
tag: "Satisfaction",
tagIcon: TrendingUp,
title: "Customer Satisfaction Rate"
},
{
id: "2",
value: "14 Days",
tag: "Timeline",
tagIcon: Zap,
title: "Visible Results Guaranteed"
},
{
id: "3",
value: "100%",
tag: "Trust",
tagIcon: Shield,
title: "Money-Back Guarantee"
},
{
id: "4",
value: "12K+",
tag: "Community",
tagIcon: Users,
title: "Verified Customer Reviews"
}
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
gridVariant="four-items-2x2-equal-grid"
carouselMode="buttons"
titleClassName="text-3xl md:text-4xl font-bold"
descriptionClassName="text-base md:text-lg text-foreground/70"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
title="Frequently Asked Questions"
description="Everything you need to know about our skincare and ordering process."
tag="SUPPORT"
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="smooth"
faqs={[
{
id: "1",
title: "How long until I see results?",
content: "Most customers report visible improvements within 7-14 days of consistent use. Full results typically appear within 4-6 weeks. Our 30-day money-back guarantee means you can try risk-free."
},
{
id: "2",
title: "Is this suitable for sensitive skin?",
content: "Yes. Our formulas are dermatologist-tested and free from parabens, sulfates, and fragrances. We recommend starting with the Gentle Cleanse and introducing one product at a time to monitor your skin's response."
},
{
id: "3",
title: "Can I use these products with acne medications?",
content: "Our products are designed to complement most dermatological treatments. However, we recommend consulting your dermatologist before introducing new skincare, especially if using prescription acne medications like isotretinoin."
},
{
id: "4",
title: "What's your return and refund policy?",
content: "We offer a hassle-free 30-day money-back guarantee. Simply contact our support team within 30 days of purchase for a full refund, no questions asked. We also cover return shipping on all returns."
},
{
id: "5",
title: "Are your products vegan and cruelty-free?",
content: "Yes, all Luminous products are 100% vegan and cruelty-free. We're certified by leading animal welfare organizations and never test on animals. All our ingredients are ethically sourced."
},
{
id: "6",
title: "Do you offer subscription discounts?",
content: "Yes! Subscribe to our auto-delivery and save 10-20% on all products. You can pause or cancel anytime with zero penalties. Subscribers also get early access to new products and exclusive deals."
}
]}
titleClassName="text-3xl md:text-4xl font-bold"
descriptionClassName="text-base md:text-lg text-foreground/70"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to transform your skin? Risk-free with our 30-day money-back guarantee. Start your skincare journey today."
animationType="reveal-blur"
useInvertedBackground="noInvert"
buttons={[
{ text: "Shop Bestsellers", href: "products" },
{ text: "Contact Support", href: "#" }
]}
textClassName="text-2xl md:text-3xl font-bold"
containerClassName="py-16 md:py-24"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="LUMINOUS"
logoLineHeight={1.2}
/>
</div>
</ThemeProvider>
);
}