279 lines
16 KiB
TypeScript
279 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="directional-hover"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="pill"
|
||
contentWidth="smallMedium"
|
||
sizing="largeSizeMediumTitles"
|
||
background="noiseDiagonalGradient"
|
||
cardStyle="outline"
|
||
primaryButtonStyle="radial-glow"
|
||
secondaryButtonStyle="radial-glow"
|
||
headingFontWeight="light"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
navItems={[
|
||
{
|
||
name: "Home", id: "#home"},
|
||
{
|
||
name: "About", id: "#about"},
|
||
{
|
||
name: "Menu", id: "#menu"},
|
||
{
|
||
name: "Testimonials", id: "#testimonials"},
|
||
{
|
||
name: "FAQ", id: "#faq"},
|
||
{
|
||
name: "Contact", id: "#contact"},
|
||
]}
|
||
logoSrc="http://img.b2bpic.net/free-vector/colorful-minimal-logo-collection-retro-style_23-2148397034.jpg"
|
||
logoAlt="Good Vibes Coffee Logo"
|
||
brandName="Good Vibes Coffee"
|
||
bottomLeftText="Your Daily Dose of Joy"
|
||
bottomRightText="contact@goodvibes.com"
|
||
/>
|
||
</div>
|
||
|
||
<div id="home" data-section="home">
|
||
<HeroBillboard
|
||
background={{
|
||
variant: "radial-gradient"}}
|
||
title="Sip into Serenity: Good Vibes Coffee"
|
||
description="Discover a charming oasis in the city's heart, offering exquisite coffee, vibrant matcha, and delightful treats in a cozy Moroccan-inspired setting. Experience good vibes and great prices."
|
||
tag="Your Daily Ritual"
|
||
buttons={[
|
||
{
|
||
text: "Explore Our Menu", href: "#menu"},
|
||
{
|
||
text: "Find Us", href: "#contact"},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/bowl-french-dessert-garnished-with-berries-placed-book_140725-8511.jpg"
|
||
imageAlt="Moroccan-inspired coffee shop interior with various drinks"
|
||
mediaAnimation="slide-up"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/vertical-shot-brunette-asian-girl-barista-wearing-apron-making-coffee-prepare-order-cafe_1258-203391.jpg", alt: "Happy customer enjoying coffee"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/young-woman-wearing-embroidered-shirt_23-2149394275.jpg", alt: "Smiling customer in a cafe"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/man-enjoying-cup-matcha-tea_23-2150215066.jpg", alt: "Person relaxing with a drink"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/co-working-people-working-together_23-2149328300.jpg", alt: "Customer giving positive feedback"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/low-angle-friends-enjoying-time-together_23-2148395330.jpg", alt: "Visitor in a cozy cafe setting"},
|
||
]}
|
||
avatarText="Loved by 10,000+ Coffee Enthusiasts"
|
||
marqueeItems={[
|
||
{
|
||
type: "image", src: "http://img.b2bpic.net/free-photo/close-up-hands-preparing-tasty-drink_23-2148865604.jpg", alt: "Freshly brewed coffee"},
|
||
{
|
||
type: "text", text: "Organic Beans"},
|
||
{
|
||
type: "image", src: "http://img.b2bpic.net/free-photo/close-up-glass-matcha-tea-plate_23-2148378923.jpg", alt: "Vibrant matcha latte"},
|
||
{
|
||
type: "text", text: "Artisanal Pastries"},
|
||
{
|
||
type: "image", src: "http://img.b2bpic.net/free-photo/side-view-sugar-bowl-with-flowers-vase-wall_140725-12844.jpg", alt: "Cozy cafe ambiance"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TextSplitAbout
|
||
useInvertedBackground={false}
|
||
title="Our Story: A Moroccan Gem in the Alley"
|
||
description={[
|
||
"Nestled in a bustling alley, Good Vibes Coffee offers a unique escape. We blend the warmth of a traditional Moroccan ambiance with a modern coffee culture, creating a comfortable and inviting space perfect for unwinding or capturing beautiful moments.", "Our carefully curated menu features a wide selection of drinks, from rich coffees and aromatic teas to refreshing matcha creations. We believe in serving quality and delight at good prices, ensuring every visit leaves you with a smile and a good vibe."]}
|
||
buttons={[
|
||
{
|
||
text: "Learn More", href: "#"},
|
||
]}
|
||
showBorder={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureCardTwentyEight
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
id: "strawberry-matcha", title: "Signature Strawberry Matcha", subtitle: "A delightful blend of sweet strawberries and earthy matcha, crafted for a vibrant taste. We're committed to balancing flavors for your perfect sip.", category: "Specialty Drink", value: "Improved Flavor"},
|
||
{
|
||
id: "flat-white-perfection", title: "Smooth Flat White Coffee", subtitle: "Experience our expertly prepared flat white, now made with enhanced coffee quality for a richer, more satisfying taste. A classic done right.", category: "Coffee Classic", value: "Premium Beans"},
|
||
{
|
||
id: "artisanal-teas", title: "Exotic Tea Selection", subtitle: "Explore a world of flavors with our range of artisanal teas, from refreshing green teas to calming herbal infusions. Perfect for any mood.", category: "Tea & Infusions", value: "Diverse Blends"},
|
||
{
|
||
id: "moroccan-pastries", title: "Moroccan Inspired Pastries", subtitle: "Pair your drink with our selection of delicious pastries and savory snacks, freshly baked with a touch of Moroccan culinary artistry.", category: "Food & Snacks", value: "Freshly Baked"},
|
||
]}
|
||
title="Crafted Beverages & Cozy Bites"
|
||
description="Indulge in our diverse selection, perfected for your taste. From classic coffees to unique matcha blends and delicious food, we've got your cravings covered."
|
||
/>
|
||
</div>
|
||
|
||
<div id="menu" data-section="menu">
|
||
<ProductCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="four-items-2x2-equal-grid"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "p1", name: "Iced Caramel Macchiato", price: "$5.50", imageSrc: "http://img.b2bpic.net/free-photo/coffee-bag-cup-with-coffee-beans-wooden-table-with-green-background_23-2151965885.jpg", imageAlt: "Iced Caramel Macchiato"},
|
||
{
|
||
id: "p2", name: "Classic Cappuccino", price: "$4.00", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-hands-trendy-green-matcha-drink-smartphone-top-view_169016-33942.jpg", imageAlt: "Classic Cappuccino"},
|
||
{
|
||
id: "p3", name: "Strawberry Matcha Latte", price: "$6.00", imageSrc: "http://img.b2bpic.net/free-photo/iced-lemonade-with-strawberry-lime_140725-4762.jpg", imageAlt: "Strawberry Matcha Latte"},
|
||
{
|
||
id: "p4", name: "Almond Croissant", price: "$3.75", imageSrc: "http://img.b2bpic.net/free-photo/chocolate-muffins-put-round-white-plate-with-cup-coffee_1150-34519.jpg", imageAlt: "Almond Croissant"},
|
||
{
|
||
id: "p5", name: "Moroccan Mint Tea", price: "$3.50", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-glass-cup-with-aroma-tea_114579-77491.jpg", imageAlt: "Moroccan Mint Tea"},
|
||
{
|
||
id: "p6", name: "Vegan Blueberry Muffin", price: "$4.25", imageSrc: "http://img.b2bpic.net/free-photo/coffee-cup_74190-2649.jpg", imageAlt: "Vegan Blueberry Muffin"},
|
||
]}
|
||
title="Our Best Sellers & Essentials"
|
||
description="Handpicked favorites and core offerings that capture the essence of Good Vibes Coffee. Discover your next obsession."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardTen
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "t1", title: "A True Hidden Gem!", quote: "This charming spot is exactly what our neighborhood needed. The staff is incredibly nice, and the comfortable seating makes it perfect for taking photos. Definitely recommend a visit!", name: "Sarah J.", role: "Local Explorer", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-holding-cup-coffee_23-2147834494.jpg", imageAlt: "Customer Sarah J."},
|
||
{
|
||
id: "t2", title: "Best Matcha Experience", quote: "I tried the strawberry matcha and while it was generally good, I appreciate their continuous effort to improve the flavor balance. The ambiance is lovely, especially the Moroccan style! Really good.", name: "Amina R.", role: "Matcha Enthusiast", imageSrc: "http://img.b2bpic.net/free-photo/man-putting-coffee-pot-bar-with-customer_23-2148366624.jpg", imageAlt: "Customer Amina R."},
|
||
{
|
||
id: "t3", title: "Cozy & Welcoming Atmosphere", quote: "Good Vibes Coffee lives up to its name! The Moroccan decor is beautiful, and I loved spending my afternoon here. The flat white was good, and I’m excited for their improved coffee quality.", name: "David K.", role: "Freelance Designer", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-long-hair-talking-phone-coffee-shop_273609-2803.jpg", imageAlt: "Customer David K."},
|
||
{
|
||
id: "t4", title: "Great Prices, Great Drinks!", quote: "You can't beat the prices here, especially for the quality drinks they offer. The girl who works there is super nice and always makes me feel welcome. A great spot to grab a quick coffee.", name: "Emily C.", role: "Student", imageSrc: "http://img.b2bpic.net/free-photo/romantic-couple-sitting-face-face_1170-748.jpg", imageAlt: "Customer Emily C."},
|
||
{
|
||
id: "t5", title: "My New Favorite Spot", quote: "The comfortable and inviting seating is perfect for getting some work done or just relaxing. I highly recommend visiting this place for its unique charm and excellent service.", name: "Michael B.", role: "Remote Worker", imageSrc: "http://img.b2bpic.net/free-photo/person-cafe-enjoying-book_23-2150064701.jpg", imageAlt: "Customer Michael B."},
|
||
{
|
||
id: "t6", title: "Authentic & Inviting", quote: "The modest Moroccan style is truly charming. It feels like a little getaway in the city. The food and drinks are affordable, making it a regular stop for me. Love the vibe!", name: "Jessica L.", role: "Local Resident", imageSrc: "http://img.b2bpic.net/free-photo/watching-funny-video-internet-with-coworkers-cafe-terrace-with-tasty-food_8353-10265.jpg", imageAlt: "Customer Jessica L."},
|
||
]}
|
||
title="Hear From Our Happy Customers"
|
||
description="Our community loves the Good Vibes experience – from our friendly staff to our inviting atmosphere and delicious drinks."
|
||
/>
|
||
</div>
|
||
|
||
<div id="social-proof" data-section="social-proof">
|
||
<SocialProofOne
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
names={[
|
||
"Local Bites Magazine", "Alley Art Collective", "Neighborhood Bloggers", "Urban Coffee Critics", "Morning Buzz Reviews", "Sweet Treats Corner", "Craft Beverage Guide"]}
|
||
title="Proudly Loved by Our Community"
|
||
description="We're grateful for the support from our wonderful customers and local partners."
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqBase
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
faqs={[
|
||
{
|
||
id: "f1", title: "What kind of drinks do you offer?", content: "We offer a wide variety of drinks including freshly brewed coffees, specialty lattes, exotic teas, and refreshing matcha creations like our popular strawberry matcha."},
|
||
{
|
||
id: "f2", title: "Do you have food options?", content: "Yes, we offer a selection of delicious pastries, savory snacks, and light bites, all at good prices to complement your drink."},
|
||
{
|
||
id: "f3", title: "What is the ambiance like?", content: "Our coffee shop features a lovely, modest Moroccan style with comfortable and inviting seating, perfect for relaxing, working, or taking photos."},
|
||
{
|
||
id: "f4", title: "Where are you located?", content: "We are a charming coffee shop located on the side of the road in a busy alley, making us a hidden gem easily accessible. Come find us!"},
|
||
{
|
||
id: "f5", title: "Do you offer Wi-Fi?", content: "Yes, complimentary high-speed Wi-Fi is available for all our customers, making Good Vibes Coffee an ideal spot for remote work or studying."},
|
||
]}
|
||
title="Your Questions, Our Answers"
|
||
description="Find quick answers to common questions about our coffee shop, menu, and services."
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={false}
|
||
title="Get In Touch"
|
||
description="Have a question, feedback, or just want to say hello? Visit us at Good Vibes Coffee! We're located at 123 Coffee Lane, Cityville, CA 90210. Our doors are open Mon-Fri: 7 AM - 6 PM, Sat-Sun: 8 AM - 5 PM. You can reach us by phone at (123) 456-7890 or email us at contact@goodvibes.com. Find us easily on Google Maps: https://maps.app.goo.gl/5gMGRMVzuu9VLBX6A"
|
||
inputs={[
|
||
{
|
||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||
},
|
||
{
|
||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||
},
|
||
]}
|
||
textarea={{
|
||
name: "message", placeholder: "Your Message", rows: 4,
|
||
required: true,
|
||
}}
|
||
imageSrc="http://img.b2bpic.net/free-photo/front-view-smiley-barista-serving-cups-coffee_23-2148522983.jpg"
|
||
imageAlt="Friendly barista preparing coffee"
|
||
mediaAnimation="opacity"
|
||
mediaPosition="right"
|
||
buttonText="Send Message"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterLogoEmphasis
|
||
logoSrc="http://img.b2bpic.net/free-vector/colorful-minimal-logo-collection-retro-style_23-2148397034.jpg"
|
||
logoAlt="Good Vibes Coffee Logo"
|
||
columns={[
|
||
{
|
||
items: [
|
||
{
|
||
label: "Home", href: "#home"},
|
||
{
|
||
label: "About Us", href: "#about"},
|
||
{
|
||
label: "Menu", href: "#menu"},
|
||
],
|
||
},
|
||
{
|
||
items: [
|
||
{
|
||
label: "Testimonials", href: "#testimonials"},
|
||
{
|
||
label: "FAQ", href: "#faq"},
|
||
{
|
||
label: "Contact", href: "#contact"},
|
||
],
|
||
},
|
||
{
|
||
items: [
|
||
{
|
||
label: "Privacy Policy", href: "#"},
|
||
{
|
||
label: "Terms of Service", href: "#"},
|
||
],
|
||
},
|
||
]}
|
||
logoText="Good Vibes Coffee"
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
} |