434 lines
13 KiB
TypeScript
434 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="text-shift"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="rounded"
|
||
contentWidth="compact"
|
||
sizing="mediumSizeLargeTitles"
|
||
background="circleGradient"
|
||
cardStyle="gradient-radial"
|
||
primaryButtonStyle="radial-glow"
|
||
secondaryButtonStyle="radial-glow"
|
||
headingFontWeight="semibold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
navItems={[
|
||
{
|
||
name: "Shop",
|
||
id: "shop",
|
||
},
|
||
{
|
||
name: "Our Farms",
|
||
id: "about",
|
||
},
|
||
{
|
||
name: "Why Us",
|
||
id: "why",
|
||
},
|
||
{
|
||
name: "Reviews",
|
||
id: "testimonials",
|
||
},
|
||
]}
|
||
brandName="Spice United"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboard
|
||
background={{
|
||
variant: "sparkles-gradient",
|
||
}}
|
||
title="Madagascar Vanilla & Spices — Grown on Our Farms, Delivered Fresh"
|
||
description="We don’t source from suppliers—we grow and harvest our own spices in Madagascar, ensuring unmatched freshness, flavor, and quality."
|
||
buttons={[
|
||
{
|
||
text: "Shop Vanilla Beans",
|
||
href: "#shop",
|
||
},
|
||
{
|
||
text: "Shop All Spices",
|
||
href: "#shop",
|
||
},
|
||
]}
|
||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kjkogj&_wi=1"
|
||
imageAlt="vanilla spice farm Madagascar fresh harvest"
|
||
avatars={[
|
||
{
|
||
src: "asset://hero-avatar-1",
|
||
alt: "Customer 1",
|
||
},
|
||
{
|
||
src: "asset://hero-avatar-2",
|
||
alt: "Customer 2",
|
||
},
|
||
{
|
||
src: "asset://hero-avatar-3",
|
||
alt: "Customer 3",
|
||
},
|
||
{
|
||
src: "asset://hero-avatar-4",
|
||
alt: "Customer 4",
|
||
},
|
||
{
|
||
src: "asset://hero-avatar-5",
|
||
alt: "Customer 5",
|
||
},
|
||
]}
|
||
avatarText="Trusted by 5,000+ spice lovers"
|
||
marqueeItems={[
|
||
{
|
||
type: "text",
|
||
text: "Direct from Farm",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "100% Organic",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Sustainable Harvest",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Ethical Sourcing",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Pure Madagascar Flavor",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hook" data-section="hook">
|
||
<SplitAbout
|
||
textboxLayout="split"
|
||
useInvertedBackground={false}
|
||
title="Most Spices Change Hands. Ours Don’t."
|
||
description="Most spices go through multiple middlemen before they reach you—losing freshness and quality along the way. Ours come straight from our farms in Madagascar. No unnecessary handling. No delays. Just spices harvested, prepared, and delivered with their full natural flavor intact."
|
||
bulletPoints={[
|
||
{
|
||
title: "Direct Harvest",
|
||
description: "From our farms straight to your pantry.",
|
||
},
|
||
{
|
||
title: "Full Freshness",
|
||
description: "Preserved natural aroma and flavor profile.",
|
||
},
|
||
{
|
||
title: "Zero Middlemen",
|
||
description: "Total control over quality.",
|
||
},
|
||
]}
|
||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2h2qzj&_wi=1"
|
||
mediaAnimation="slide-up"
|
||
imageAlt="ethically grown spice harvest madagascar"
|
||
/>
|
||
</div>
|
||
|
||
<div id="why" data-section="why">
|
||
<FeatureCardTwelve
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
id: "1",
|
||
label: "Origin",
|
||
title: "Grown on Our Farms",
|
||
items: [
|
||
"Direct soil control",
|
||
"Artisanal techniques",
|
||
"Community focused",
|
||
],
|
||
},
|
||
{
|
||
id: "2",
|
||
label: "Harvest",
|
||
title: "Peak Freshness",
|
||
items: [
|
||
"Harvested at maturity",
|
||
"Rapid processing",
|
||
"Aroma preservation",
|
||
],
|
||
},
|
||
{
|
||
id: "3",
|
||
label: "Values",
|
||
title: "Ethical Farming",
|
||
items: [
|
||
"Sustainable practices",
|
||
"Traceable sourcing",
|
||
"Fair wages",
|
||
],
|
||
},
|
||
]}
|
||
title="From Our Farms to Your Kitchen"
|
||
description="Why we are the standard for Madagascar spices."
|
||
/>
|
||
</div>
|
||
|
||
<div id="shop" data-section="shop">
|
||
<ProductCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="four-items-2x2-equal-grid"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "p1",
|
||
brand: "Spice United",
|
||
name: "Rich & Creamy Vanilla Beans",
|
||
price: "$29.00",
|
||
rating: 5,
|
||
reviewCount: "128",
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=anmron&_wi=1",
|
||
},
|
||
{
|
||
id: "p2",
|
||
brand: "Spice United",
|
||
name: "Bold Aromatic Black Pepper",
|
||
price: "$12.00",
|
||
rating: 5,
|
||
reviewCount: "94",
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pxdkon&_wi=1",
|
||
},
|
||
{
|
||
id: "p3",
|
||
brand: "Spice United",
|
||
name: "Intensely Fragrant Cloves",
|
||
price: "$15.00",
|
||
rating: 5,
|
||
reviewCount: "67",
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=scy9ly&_wi=1",
|
||
},
|
||
{
|
||
id: "p4",
|
||
brand: "Spice United",
|
||
name: "Madagascar Spice Set",
|
||
price: "$45.00",
|
||
rating: 5,
|
||
reviewCount: "45",
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qrmn7y",
|
||
},
|
||
{
|
||
id: "p5",
|
||
brand: "Spice United",
|
||
name: "Premium Cinnamon Bark",
|
||
price: "$14.00",
|
||
rating: 5,
|
||
reviewCount: "82",
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=efhrdp",
|
||
},
|
||
{
|
||
id: "p6",
|
||
brand: "Spice United",
|
||
name: "Star Anise Selection",
|
||
price: "$18.00",
|
||
rating: 5,
|
||
reviewCount: "39",
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6mks75",
|
||
},
|
||
]}
|
||
title="Customer Favorites"
|
||
description="Our most aromatic, fresh-harvested spice selections."
|
||
/>
|
||
</div>
|
||
|
||
<div id="comparison" data-section="comparison">
|
||
<MetricCardFourteen
|
||
useInvertedBackground={true}
|
||
title="Not All Spices Are The Same"
|
||
tag="Transparency"
|
||
metrics={[
|
||
{
|
||
id: "m1",
|
||
value: "100%",
|
||
description: "Farm-grown origin",
|
||
},
|
||
{
|
||
id: "m2",
|
||
value: "Direct",
|
||
description: "No middlemen involved",
|
||
},
|
||
{
|
||
id: "m3",
|
||
value: "Fresh",
|
||
description: "Harvested at peak maturity",
|
||
},
|
||
]}
|
||
metricsAnimation="blur-reveal"
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardThirteen
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "t1",
|
||
name: "Sarah J.",
|
||
handle: "@sarahcooks",
|
||
testimonial: "Night and day difference from store-bought vanilla. The quality is unmatched.",
|
||
rating: 5,
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kjkogj&_wi=2",
|
||
imageAlt: "vanilla spice farm Madagascar fresh harvest",
|
||
},
|
||
{
|
||
id: "t2",
|
||
name: "Michael R.",
|
||
handle: "@mikespice",
|
||
testimonial: "You can actually smell how fresh it is. Absolutely incredible aromas.",
|
||
rating: 5,
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=anmron&_wi=2",
|
||
imageAlt: "vanilla spice farm Madagascar fresh harvest",
|
||
},
|
||
{
|
||
id: "t3",
|
||
name: "Emily P.",
|
||
handle: "@emilyinthekitchen",
|
||
testimonial: "Best spices I’ve ever used—period. Will never go back.",
|
||
rating: 5,
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pxdkon&_wi=2",
|
||
imageAlt: "vanilla spice farm Madagascar fresh harvest",
|
||
},
|
||
{
|
||
id: "t4",
|
||
name: "David W.",
|
||
handle: "@davechef",
|
||
testimonial: "The consistency and flavor depth are exactly what I need for my recipes.",
|
||
rating: 5,
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=scy9ly&_wi=2",
|
||
imageAlt: "vanilla spice farm Madagascar fresh harvest",
|
||
},
|
||
{
|
||
id: "t5",
|
||
name: "Jessica L.",
|
||
handle: "@jessbakes",
|
||
testimonial: "Fast shipping and incredible quality. Highly recommended for any serious cook.",
|
||
rating: 5,
|
||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2h2qzj&_wi=2",
|
||
imageAlt: "vanilla spice farm Madagascar fresh harvest",
|
||
},
|
||
]}
|
||
showRating={true}
|
||
title="Real Customers. Real Flavor."
|
||
description="Discover why home cooks and chefs alike are switching to Spice United."
|
||
/>
|
||
</div>
|
||
|
||
<div id="story" data-section="story">
|
||
<SplitAbout
|
||
textboxLayout="split-description"
|
||
useInvertedBackground={true}
|
||
title="Where Flavor Begins"
|
||
description="In Madagascar, growing spices isn’t just agriculture—it’s craftsmanship. From hand-pollinated vanilla flowers to carefully harvested and cured spices, every step happens on our farms, where quality is our priority from day one."
|
||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s6cb7n"
|
||
mediaAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqDouble
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "f1",
|
||
title: "What is your refund policy?",
|
||
content: "If you’re not completely satisfied, we’ll make it right—no hassle. That's our promise.",
|
||
},
|
||
{
|
||
id: "f2",
|
||
title: "Are your spices organic?",
|
||
content: "We follow sustainable farming practices across all our Madagascar farms, prioritizing natural health.",
|
||
},
|
||
{
|
||
id: "f3",
|
||
title: "How fresh is your harvest?",
|
||
content: "We harvest at peak maturity and ship directly, ensuring the most intense aromatic profile possible.",
|
||
},
|
||
{
|
||
id: "f4",
|
||
title: "Do you ship worldwide?",
|
||
content: "Yes, we ship our fresh harvested spices globally to ensure everyone has access to real Madagascar flavor.",
|
||
},
|
||
]}
|
||
title="Love It or It’s On Us"
|
||
description="Everything you need to know about our farm-fresh guarantee."
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterMedia
|
||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o87olv"
|
||
logoText="Spice United"
|
||
columns={[
|
||
{
|
||
title: "Shop",
|
||
items: [
|
||
{
|
||
label: "Vanilla Beans",
|
||
href: "#shop",
|
||
},
|
||
{
|
||
label: "All Spices",
|
||
href: "#shop",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Company",
|
||
items: [
|
||
{
|
||
label: "Our Farm Story",
|
||
href: "#about",
|
||
},
|
||
{
|
||
label: "Why Us",
|
||
href: "#why",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Support",
|
||
items: [
|
||
{
|
||
label: "Returns",
|
||
href: "#faq",
|
||
},
|
||
{
|
||
label: "Contact",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|