207 lines
10 KiB
TypeScript
207 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
|
|
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
|
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import { Coffee, Users, Croissant, Sparkles, Menu, MapPin } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="medium"
|
|
background="floatingGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Menu", id: "products" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="Belvue Cafe"
|
|
button={{
|
|
text: "Visit Us", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboardSplit
|
|
logoText="Belvue Cafe"
|
|
description="Experience the finest specialty coffee in the heart of South Africa. Handcrafted beverages, premium beans, and warm community welcome you."
|
|
background={{ variant: "animated-grid" }}
|
|
buttons={[
|
|
{ text: "Explore Menu", href: "#products" },
|
|
{ text: "Reserve Table", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
layoutOrder="default"
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-woman-eating-croissants-cafe_1303-20409.jpg"
|
|
imageAlt="Specialty coffee latte art at Belvue Cafe"
|
|
mediaAnimation="opacity"
|
|
frameStyle="card"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="Welcome to Belvue Cafe"
|
|
description={[
|
|
"Belvue Cafe is a haven for coffee enthusiasts and community seekers. Founded with a passion for exceptional coffee quality, we source premium beans from the finest South African roasters and international suppliers.", "Our baristas are trained artisans, dedicated to crafting the perfect cup every time. From classic espresso to innovative specialty drinks, each beverage is prepared with precision and care.", "Beyond coffee, Belvue is a gathering place where friendships are made, ideas are shared, and moments are cherished. Our welcoming atmosphere and carefully curated space make it the ideal destination for work, meetings, or simply enjoying great company."
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Learn Our Story", href: "#features" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFive
|
|
title="Why Choose Belvue"
|
|
description="Discover what sets us apart from other cafes in South Africa"
|
|
features={[
|
|
{
|
|
title: "Premium Coffee Selection", description: "Carefully sourced single-origin and signature blends from top roasters", icon: Coffee,
|
|
mediaItems: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-person-making-drip-coffee_53876-24804.jpg?_wi=1", imageAlt: "specialty coffee beans quality roast" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-person-making-drip-coffee_53876-24804.jpg?_wi=2", imageAlt: "specialty coffee beans quality roast" }
|
|
]
|
|
},
|
|
{
|
|
title: "Vibrant Community Space", description: "A welcoming atmosphere perfect for work, meetings, and social gatherings", icon: Users,
|
|
mediaItems: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-peaceful-winter-arrangement_23-2148715951.jpg?_wi=1", imageAlt: "cafe community gathering seating" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-peaceful-winter-arrangement_23-2148715951.jpg?_wi=2", imageAlt: "cafe community gathering seating" }
|
|
]
|
|
},
|
|
{
|
|
title: "Fresh Pastries & Snacks", description: "Complementary artisan pastries and fresh food items to enhance your experience", icon: Croissant,
|
|
mediaItems: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/fresh-pastries-cake-stand-with-cup-nut-food-concrete-surface_23-2147956813.jpg?_wi=1", imageAlt: "fresh pastries bakery items" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/fresh-pastries-cake-stand-with-cup-nut-food-concrete-surface_23-2147956813.jpg?_wi=2", imageAlt: "fresh pastries bakery items" }
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
tag="Our Strengths"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="Our Menu"
|
|
description="Indulge in our carefully crafted beverage selection and delightful pairings"
|
|
tag="Featured Items"
|
|
tagIcon={Menu}
|
|
tagAnimation="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "espresso", name: "Single Origin Espresso", price: "R45", variant: "Premium Blend", imageSrc: "http://img.b2bpic.net/free-photo/coffee-beans-black-background-glass-jar_114579-16675.jpg", imageAlt: "Single Origin Espresso"
|
|
},
|
|
{
|
|
id: "iced-coffee", name: "Iced Cold Brew", price: "R55", variant: "Seasonal Special", imageSrc: "http://img.b2bpic.net/free-photo/iced-latte-glass-pink-stand-wooden-table-summer-cafe-green-bushes_343596-1559.jpg", imageAlt: "Iced Cold Brew"
|
|
},
|
|
{
|
|
id: "cappuccino", name: "Signature Cappuccino", price: "R50", variant: "House Favorite", imageSrc: "http://img.b2bpic.net/free-photo/close-love-brown-cup-natural_1339-67.jpg", imageAlt: "Signature Cappuccino"
|
|
}
|
|
]}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Belvue Cafe has become my daily sanctuary. The coffee is exceptional, the baristas are incredibly skilled, and the atmosphere is warm and inviting. It's more than just a cafe—it's a community."
|
|
rating={5}
|
|
author="Sarah Mitchell"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-sitting-stairs_1262-3109.jpg", alt: "Sarah Mitchell" },
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-17763.jpg", alt: "James Thompson" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-happy-businesswoman-with-notebook-holding-her-diary-planner-sitting-office_1258-194721.jpg", alt: "Jessica Van der Merwe" },
|
|
{ src: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg", alt: "Marcus Johnson" }
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Get In Touch"
|
|
tagIcon={MapPin}
|
|
tagAnimation="slide-up"
|
|
title="Visit Belvue Cafe Today"
|
|
description="Located in the heart of Cape Town, we're open daily to welcome you. Reserve your table, order online, or simply drop by for your favorite brew."
|
|
buttons={[
|
|
{ text: "Reserve Table", href: "https://www.google.com/maps" },
|
|
{ text: "Order Online", href: "mailto:hello@belvuecafe.co.za" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "animated-grid" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Belvue Cafe"
|
|
copyrightText="© 2025 Belvue Cafe. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Quick Links", items: [
|
|
{ label: "Home", href: "#hero" },
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Menu", href: "#products" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Visit Us", items: [
|
|
{ label: "Cape Town, South Africa", href: "#" },
|
|
{ label: "Hours: 6AM - 8PM Daily", href: "#" },
|
|
{ label: "hello@belvuecafe.co.za", href: "mailto:hello@belvuecafe.co.za" },
|
|
{ label: "+27 (0)21 123 4567", href: "tel:+27211234567" }
|
|
]
|
|
},
|
|
{
|
|
title: "Follow Us", items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |