Merge version_3 into main #6
199
src/app/page.tsx
199
src/app/page.tsx
@@ -2,15 +2,15 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { Droplets, Sun, ThumbsUp } from "lucide-react";
|
||||
|
||||
@@ -32,14 +32,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Benefits", id: "features"},
|
||||
{
|
||||
name: "Shop", id: "products"},
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Benefits", id: "features" },
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
]}
|
||||
brandName="Charab USA"
|
||||
/>
|
||||
@@ -47,47 +43,17 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="A Timeless Rose Tradition, Reimagined."
|
||||
description="Charab is a refreshing carbonated rose drink with zero alcohol, zero sugar, and zero calories. Experience delicate floral notes in a light, modern, ready-to-drink format."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Elena R.", handle: "@elena_wellness", testimonial: "The floral notes are subtle and the carbonation is just right.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/healthy-lifestyle-happy-smiling-woman-holding-water-bottle-with-lemon-vitamin-c-drink-looking-joyful-camera-posing-against-pink-background_1258-300506.jpg?_wi=1"},
|
||||
{
|
||||
name: "Julian B.", handle: "@julian_lifestyle", testimonial: "Zero calories, zero sugar - it's the perfect wellness companion.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mockup-cosmetics-hydrogel-eyes-patches-woman-home-with-glass-water_197531-32429.jpg?_wi=1"},
|
||||
{
|
||||
name: "Sophie C.", handle: "@sophie_chic", testimonial: "A beautiful blend of French elegance and botanical tradition.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-stylish-blond-girl-knitted-sweater-sensually-looking-camera-outdoor_574295-741.jpg?_wi=1"},
|
||||
{
|
||||
name: "Marc L.", handle: "@marcl_health", testimonial: "Refreshing, pure, and light. Exactly what a wellness drink should be.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-cute-brunette-girl-with-short-hair-sitting-table-gray-plaid-terrace-restaurant-she-wears-blue-shirt-looks-happy_197531-971.jpg"},
|
||||
{
|
||||
name: "Claire D.", handle: "@claire_botanics", testimonial: "I love the delicate rose essence. It feels like a little moment of luxury.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now", href: "#products"},
|
||||
{ name: "Elena R.", handle: "@elena_wellness", testimonial: "The floral notes are subtle and the carbonation is just right.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/healthy-lifestyle-happy-smiling-woman-holding-water-bottle-with-lemon-vitamin-c-drink-looking-joyful-camera-posing-against-pink-background_1258-300506.jpg?_wi=1" },
|
||||
{ name: "Julian B.", handle: "@julian_lifestyle", testimonial: "Zero calories, zero sugar - it's the perfect wellness companion.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/mockup-cosmetics-hydrogel-eyes-patches-woman-home-with-glass-water_197531-32429.jpg?_wi=1" },
|
||||
]}
|
||||
buttons={[{ text: "Shop Now", href: "#products" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=1"
|
||||
imageAlt="Charab Rose Drink"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/middle-age-curly-hair-woman-drinking-healthy-glass-orange-juice-white-background-doing-ok-sign-with-fingers-excellent-symbol_839833-34407.jpg", alt: "Customer portrait"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/healthy-lifestyle-happy-smiling-woman-holding-water-bottle-with-lemon-vitamin-c-drink-looking-joyful_1258-119956.jpg", alt: "Customer portrait"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/healthy-lifestyle-happy-smiling-woman-holding-water-bottle-with-lemon-vitamin-c-drink-looking-joyful-camera-posing-against-pink-background_1258-301295.jpg", alt: "Customer portrait"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/healthy-lifestyle-happy-smiling-woman-holding-water-bottle-with-lemon-vitamin-c-drink-looking-joyful-camera-posing-against-pink-background_1258-122496.jpg", alt: "Customer portrait"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-asian-fitness-girl-takes-selfie-with-rubber-yoga-mat-park-healthy-young-sportswoman-makes-p_1258-123765.jpg", alt: "Customer portrait"},
|
||||
]}
|
||||
avatarText="Loved by 10,000+ wellness seekers"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -95,50 +61,33 @@ export default function LandingPage() {
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Inspired by Tradition, Crafted for Modern Wellness."
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More"},
|
||||
]}
|
||||
buttons={[{ text: "Learn More" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
<FeatureCardNine
|
||||
showStepNumbers={true}
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"No Artificial Flavors", "No Preservatives", "No Preparation Needed"],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"0% Alcohol", "0% Sugar", "0% Calories"],
|
||||
}}
|
||||
features={[
|
||||
{ title: "Pure Rose", description: "Natural floral essence.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=1" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=1" } }
|
||||
]}
|
||||
title="Why You'll Love Charab"
|
||||
description="0 alcohol, 0 sugar, 0 calories. Pure rose floral refreshment."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
<ProductCardOne
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "sku-001-1", name: "Charab Rose Drink (Single)", price: "$5.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=2"},
|
||||
{
|
||||
id: "sku-001-2", name: "Charab Rose Drink (Pack of 4)", price: "$22.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=3"},
|
||||
{
|
||||
id: "sku-001-3", name: "Charab Rose Drink (Pack of 6)", price: "$32.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=4"},
|
||||
{
|
||||
id: "sku-001-4", name: "Charab Rose Drink (Pack of 12)", price: "$60.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=5"},
|
||||
{
|
||||
id: "sku-001-5", name: "Charab Rose Drink (Pack of 24)", price: "$115.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=6"},
|
||||
{
|
||||
id: "sku-001-6", name: "Charab Rose Drink (Monthly Sub)", price: "$100.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=7"},
|
||||
{ id: "s1", name: "Rose Classic", price: "$5.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=2" },
|
||||
{ id: "s2", name: "Rose Pack of 4", price: "$22.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=3" }
|
||||
]}
|
||||
title="Shop Charab"
|
||||
description="Ready to experience the refreshing floral essence? Order your bottles below."
|
||||
@@ -146,105 +95,67 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
<MetricCardSeven
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Wellness by the Numbers"
|
||||
description="Charab nutrition overview."
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", icon: Droplets,
|
||||
title: "Rose Essence", value: "100%"},
|
||||
{
|
||||
id: "m2", icon: Sun,
|
||||
title: "Calories", value: "0"},
|
||||
{
|
||||
id: "m3", icon: ThumbsUp,
|
||||
title: "Satisfaction", value: "99%"},
|
||||
{ id: "m1", title: "Rose Essence", value: "100%", items: ["Pure Botanical Extracts"] },
|
||||
{ id: "m2", title: "Calories", value: "0", items: ["Zero Sugar Added"] },
|
||||
{ id: "m3", title: "Satisfaction", value: "99%", items: ["Customer Approved"] }
|
||||
]}
|
||||
title="Wellness by the Numbers"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
<TestimonialCardTen
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Loved by Our Community"
|
||||
description="See what our customers have to say about Charab."
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Elena R.", handle: "@elena_wellness", testimonial: "Refreshing floral essence, perfection.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-women-doing-yoga-medium-shot_23-2148935674.jpg"},
|
||||
{
|
||||
id: "2", name: "Julian B.", handle: "@julian_lifestyle", testimonial: "Zero calories never tasted so good.", imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-smiling-beautiful-woman-having-cup-coffee-kitchen-looking-camera-with-happy-facial-expression-female-wearing-white-casual-style-shirt_176532-15763.jpg"},
|
||||
{
|
||||
id: "3", name: "Sophie C.", handle: "@sophie_chic", testimonial: "My new favorite daily treat.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-drinking-water_23-2148774239.jpg"},
|
||||
{
|
||||
id: "4", name: "Marc L.", handle: "@marcl_health", testimonial: "The best sugar-free drink I've had.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-drinking-tea-outdoors_23-2149967014.jpg"},
|
||||
{
|
||||
id: "5", name: "Claire D.", handle: "@claire_botanics", testimonial: "Luxury in a bottle, really impressed.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-holding-book-close-up_23-2148396302.jpg"},
|
||||
{ id: "1", title: "Perfection", quote: "Refreshing floral essence, perfection.", name: "Elena R.", role: "Wellness Advocate" }
|
||||
]}
|
||||
title="Loved by Our Community"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
description="Find answers to common questions about Charab."
|
||||
<FaqSplitText
|
||||
faqsAnimation="blur-reveal"
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Find answers to common questions about Charab."
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1", title: "Is Charab really zero sugar?", content: "Yes, Charab is formulated with zero sugar using natural processes."},
|
||||
{
|
||||
id: "f2", title: "Where is the rose sourced?", content: "Our rose essence is sourced from high-quality traditional botanical growers."},
|
||||
{
|
||||
id: "f3", title: "Can I order in bulk?", content: "Yes, we offer bulk packs and subscription services through our online shop."},
|
||||
{ id: "f1", title: "Is Charab really zero sugar?", content: "Yes, Charab is formulated with zero sugar using natural processes." },
|
||||
{ id: "f2", title: "Where is the rose sourced?", content: "Our rose essence is sourced from high-quality traditional botanical growers." }
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
<ContactCTA
|
||||
tag="Stay Informed"
|
||||
title="Join the Wellness Movement"
|
||||
description="Sign up for exclusive offers and news from Charab USA."
|
||||
buttons={[{ text: "Sign Up" }]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Shop", href: "#products"},
|
||||
{
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "FAQ", href: "#faq"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy", href: "#"},
|
||||
{
|
||||
label: "Terms", href: "#"},
|
||||
{
|
||||
label: "Contact", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{ title: "Shop", items: [{ label: "Catalog", href: "#products" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
logoText="Charab USA"
|
||||
bottomLeftText="Charab USA"
|
||||
bottomRightText="© 2024"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
font-family: var(--font-figtree), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -24,5 +24,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-public-sans), sans-serif;
|
||||
font-family: var(--font-figtree), sans-serif;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user