290 lines
8.9 KiB
TypeScript
290 lines
8.9 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import { Coffee, Flame, Gauge, Leaf, Truck } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="fluid"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Store",
|
|
id: "#store",
|
|
},
|
|
{
|
|
name: "Locations",
|
|
id: "#contact",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "#about",
|
|
},
|
|
]}
|
|
brandName="Caffelito"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
background={{
|
|
variant: "radial-gradient",
|
|
}}
|
|
title="Awaken Your Senses with Caffelito"
|
|
description="Premium ethically sourced coffee beans, roasted to perfection in the heart of your city. Experience artisanal flavor in every cup."
|
|
testimonials={[
|
|
{
|
|
name: "S.",
|
|
handle: "@sarahcoff",
|
|
testimonial: "The best espresso I have had in years!",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-girl-holding-coffee-cup-hands_23-2147906504.jpg",
|
|
},
|
|
{
|
|
name: "Mark D.",
|
|
handle: "@markbeans",
|
|
testimonial: "Consistently excellent roasts.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/person-drinking-beverage-while-break-time_23-2149256893.jpg",
|
|
},
|
|
{
|
|
name: "ly R.",
|
|
handle: "@emilycafe",
|
|
testimonial: "My morning ritual is now perfect.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-asian-woman-sitting-cafe-smartphone-coffee-table-businesswoman_1258-199404.jpg",
|
|
},
|
|
{
|
|
name: " robiya",
|
|
handle: "@leocoffee",
|
|
testimonial: "Exceptional variety and freshness.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-female-sunglasses-drinks-coffee-cafe-street_613910-10422.jpg",
|
|
},
|
|
{
|
|
name: "Anna P.",
|
|
handle: "@annap",
|
|
testimonial: "Top quality, delivered right to my door.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cup-coffee-female-hands-bed-top-view_169016-18291.jpg",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Shop Now",
|
|
href: "#store",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/barista-making-cappuccino_1150-8043.jpg"
|
|
imageAlt="Artisanal latte cup"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/woman-drinking-cup-warm-herbal-orange-tea_53876-95287.jpg",
|
|
alt: "Customer profile 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/woman-drinking-coffee-her-window_23-2148574050.jpg",
|
|
alt: "Customer profile 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/good-background-white-adult-warmth-dawn_1418-439.jpg",
|
|
alt: "Customer profile 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/barefoot-female-with-beverage-bed_23-2147911467.jpg",
|
|
alt: "Customer profile 4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-woman-with-curly-hair-wearing-bandana_273609-16333.jpg",
|
|
alt: "Customer profile 5",
|
|
},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon",
|
|
text: "Ethically Sourced",
|
|
icon: Coffee,
|
|
},
|
|
{
|
|
type: "text-icon",
|
|
text: "Small-Batch Roasted",
|
|
icon: Flame,
|
|
},
|
|
{
|
|
type: "text-icon",
|
|
text: "Sustainable Farming",
|
|
icon: Leaf,
|
|
},
|
|
{
|
|
type: "text-icon",
|
|
text: "Worldwide Delivery",
|
|
icon: Truck,
|
|
},
|
|
{
|
|
type: "text-icon",
|
|
text: "Freshly Ground",
|
|
icon: Gauge,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="store" data-section="store">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Ethiopian Yirgacheffe",
|
|
price: "$18.00",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/coffee-beans-cardboard-box-book_114579-6399.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Nitro Cold Brew",
|
|
price: "$6.50",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/black-coffee-coffee-cup_1203-8884.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Signature Flat White",
|
|
price: "$5.00",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-cup-coffee-white-surface_140725-61563.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Dark Roast Blend",
|
|
price: "$16.00",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/roasted-coffee-beans-dark-textured-surface_84443-74005.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Cold Brew Bottles",
|
|
price: "$22.00",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/glass-medical-bottle_187299-45860.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Pistachio Raf",
|
|
price: "$7.00",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/coffee-with-caramel-cinnamon_140725-9492.jpg",
|
|
},
|
|
]}
|
|
title="Signature Coffee Selection"
|
|
description="Discover our handpicked range of single-origin and premium blended coffees."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
useInvertedBackground={false}
|
|
title="Our Passion for Perfection"
|
|
buttons={[
|
|
{
|
|
text: "Learn More",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
sideTitle="Common Questions"
|
|
sideDescription="Everything you need to know about our beans, roasting process, and shipping."
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "Do you ship internationally?",
|
|
content: "Yes, we ship our premium beans worldwide using carbon-neutral logistics.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "How long until the coffee expires?",
|
|
content: "Our beans are roasted to order and best enjoyed within 3 months of the roast date.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "Do you offer wholesale?",
|
|
content: "We work with cafes and restaurants globally. Contact us through the form above.",
|
|
},
|
|
{
|
|
id: "q4",
|
|
title: "Are your beans organic?",
|
|
content: "Most of our single-origin offerings are certified organic and fair trade.",
|
|
},
|
|
{
|
|
id: "q5",
|
|
title: "Can I return a product?",
|
|
content: "If you are not satisfied, we offer a full refund on unopened coffee bags.",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Visit Our Roastery"
|
|
description="Find our locations near you or get in touch for wholesale inquiries."
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Your Name",
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Your Email",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/charming-african-american-woman-model-black-jacket-waist-bag-relaxing-cafe-free-time_627829-5344.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Caffelito"
|
|
leftLink={{
|
|
text: "Privacy Policy",
|
|
href: "#",
|
|
}}
|
|
rightLink={{
|
|
text: "Contact Support",
|
|
href: "#contact",
|
|
}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|