|
|
|
@@ -1,13 +1,6 @@
|
|
|
|
"use client"
|
|
|
|
"use client";
|
|
|
|
|
|
|
|
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
|
|
|
|
|
|
import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
|
|
|
|
|
|
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
|
|
|
|
|
|
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
|
|
|
|
|
|
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
|
|
|
|
|
|
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
|
|
|
|
|
|
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
export default function LandingPage() {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
@@ -24,201 +17,157 @@ export default function LandingPage() {
|
|
|
|
headingFontWeight="bold"
|
|
|
|
headingFontWeight="bold"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
<NavbarLayoutFloatingInline
|
|
|
|
<div>
|
|
|
|
brandName="Coffee Haven"
|
|
|
|
<h1>Coffee Haven</h1>
|
|
|
|
navItems={[
|
|
|
|
<nav>
|
|
|
|
{ name: "Menu", id: "features" },
|
|
|
|
<a href="#features">Menu</a>
|
|
|
|
{ name: "About", id: "about" },
|
|
|
|
<a href="#about">About</a>
|
|
|
|
{ name: "Reviews", id: "testimonials" },
|
|
|
|
<a href="#testimonials">Reviews</a>
|
|
|
|
{ name: "Contact", id: "contact" }
|
|
|
|
<a href="#contact">Contact</a>
|
|
|
|
]}
|
|
|
|
</nav>
|
|
|
|
button={{
|
|
|
|
<a href="#contact">Visit Us</a>
|
|
|
|
text: "Visit Us",
|
|
|
|
</div>
|
|
|
|
href: "#contact"
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
<HeroBillboardMetrics
|
|
|
|
<div>
|
|
|
|
title="Brew Perfection, Sip Happiness"
|
|
|
|
<span>Premium Coffee Experience</span>
|
|
|
|
description="Welcome to Coffee Haven, where every cup is crafted with passion and served with warmth. Experience the finest specialty coffee in a welcoming atmosphere designed for relaxation and connection."
|
|
|
|
<h1>Brew Perfection, Sip Happiness</h1>
|
|
|
|
tag="Premium Coffee Experience"
|
|
|
|
<p>Welcome to Coffee Haven, where every cup is crafted with passion and served with warmth. Experience the finest specialty coffee in a welcoming atmosphere designed for relaxation and connection.</p>
|
|
|
|
buttons={[
|
|
|
|
<div>
|
|
|
|
{ text: "View Our Menu", href: "#features" },
|
|
|
|
<a href="#features" className="bg-yellow-400 hover:bg-yellow-500 text-black px-6 py-3 rounded-full">View Our Menu</a>
|
|
|
|
{ text: "Reserve a Table", href: "#contact" }
|
|
|
|
<a href="#contact" className="bg-yellow-400 hover:bg-yellow-500 text-black px-6 py-3 rounded-full">Reserve a Table</a>
|
|
|
|
]}
|
|
|
|
</div>
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919707214-xfwl0qtf.jpg"
|
|
|
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919707214-xfwl0qtf.jpg" alt="Cozy Coffee Shop Interior" />
|
|
|
|
imageAlt="Cozy Coffee Shop Interior"
|
|
|
|
<div>
|
|
|
|
frameStyle="card"
|
|
|
|
<p>Trusted by coffee lovers and professionals</p>
|
|
|
|
metricsLabel="Trusted by coffee lovers and professionals"
|
|
|
|
<div>
|
|
|
|
metrics={[
|
|
|
|
<div>
|
|
|
|
{ id: "1", value: "15+", label: "Years of Excellence" },
|
|
|
|
<span>15+</span>
|
|
|
|
{ id: "2", value: "8K+", label: "Happy Customers" },
|
|
|
|
<span>Years of Excellence</span>
|
|
|
|
{ id: "3", value: "100%", label: "Quality Guarantee" }
|
|
|
|
</div>
|
|
|
|
]}
|
|
|
|
<div>
|
|
|
|
/>
|
|
|
|
<span>8K+</span>
|
|
|
|
|
|
|
|
<span>Happy Customers</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<span>100%</span>
|
|
|
|
|
|
|
|
<span>Quality Guarantee</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="features" data-section="features">
|
|
|
|
<div id="features" data-section="features">
|
|
|
|
<FeatureCardThree
|
|
|
|
<div>
|
|
|
|
title="Our Specialty Offerings"
|
|
|
|
<span>Menu</span>
|
|
|
|
description="Discover what makes Coffee Haven unique - from signature blends to premium pastries"
|
|
|
|
<h2>Our Specialty Offerings</h2>
|
|
|
|
tag="Menu"
|
|
|
|
<p>Discover what makes Coffee Haven unique - from signature blends to premium pastries</p>
|
|
|
|
features={[
|
|
|
|
<div>
|
|
|
|
{
|
|
|
|
<div>
|
|
|
|
id: "01",
|
|
|
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919708873-ytcp5e0t.jpg" alt="Specialty Espresso Drinks" />
|
|
|
|
title: "Specialty Espresso Drinks",
|
|
|
|
<h3>Specialty Espresso Drinks</h3>
|
|
|
|
description: "Expertly crafted espresso-based beverages made with single-origin beans and precision technique",
|
|
|
|
<p>Expertly crafted espresso-based beverages made with single-origin beans and precision technique</p>
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919708873-ytcp5e0t.jpg",
|
|
|
|
</div>
|
|
|
|
imageAlt: "Specialty Espresso Drinks"
|
|
|
|
<div>
|
|
|
|
},
|
|
|
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919711870-pqmtpepw.jpg" alt="Fresh Pastries" />
|
|
|
|
{
|
|
|
|
<h3>Fresh Pastries & Bakery</h3>
|
|
|
|
id: "02",
|
|
|
|
<p>Daily baked goods featuring organic ingredients and artisanal recipes from local bakers</p>
|
|
|
|
title: "Fresh Pastries & Bakery",
|
|
|
|
</div>
|
|
|
|
description: "Daily baked goods featuring organic ingredients and artisanal recipes from local bakers",
|
|
|
|
<div>
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919711870-pqmtpepw.jpg",
|
|
|
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919713358-250dmtaa.jpg" alt="Coffee Shop Atmosphere" />
|
|
|
|
imageAlt: "Fresh Pastries"
|
|
|
|
<h3>Cozy Atmosphere</h3>
|
|
|
|
},
|
|
|
|
<p>A warm, inviting space designed for conversations, work sessions, or quiet reflection</p>
|
|
|
|
{
|
|
|
|
</div>
|
|
|
|
id: "03",
|
|
|
|
<div>
|
|
|
|
title: "Cozy Atmosphere",
|
|
|
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919714903-peohmaas.jpg" alt="Workspace Facilities" />
|
|
|
|
description: "A warm, inviting space designed for conversations, work sessions, or quiet reflection",
|
|
|
|
<h3>Work-Friendly Café</h3>
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919713358-250dmtaa.jpg",
|
|
|
|
<p>Reliable WiFi, comfortable seating, and power outlets for professionals and remote workers</p>
|
|
|
|
imageAlt: "Coffee Shop Atmosphere"
|
|
|
|
</div>
|
|
|
|
},
|
|
|
|
</div>
|
|
|
|
{
|
|
|
|
</div>
|
|
|
|
id: "04",
|
|
|
|
|
|
|
|
title: "Work-Friendly Café",
|
|
|
|
|
|
|
|
description: "Reliable WiFi, comfortable seating, and power outlets for professionals and remote workers",
|
|
|
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919714903-peohmaas.jpg",
|
|
|
|
|
|
|
|
imageAlt: "Workspace Facilities"
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
]}
|
|
|
|
|
|
|
|
gridVariant="uniform-all-items-equal"
|
|
|
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
|
|
|
useInvertedBackground="noInvert"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="about" data-section="about">
|
|
|
|
<div id="about" data-section="about">
|
|
|
|
<ParallaxAbout
|
|
|
|
<div>
|
|
|
|
title="Our Coffee Story"
|
|
|
|
<span>About Us</span>
|
|
|
|
description="Founded with a passion for exceptional coffee and genuine human connection, Coffee Haven has been serving our community for over 15 years. We believe every cup tells a story - from the farmers who grow the beans to the hands that craft your drink. Our commitment to quality, sustainability, and customer care is what sets us apart."
|
|
|
|
<h2>Our Coffee Story</h2>
|
|
|
|
tag="About Us"
|
|
|
|
<p>Founded with a passion for exceptional coffee and genuine human connection, Coffee Haven has been serving our community for over 15 years. We believe every cup tells a story - from the farmers who grow the beans to the hands that craft your drink. Our commitment to quality, sustainability, and customer care is what sets us apart.</p>
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919716883-zgfn7bv1.jpg"
|
|
|
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919716883-zgfn7bv1.jpg" alt="Skilled Barista Preparing Coffee" />
|
|
|
|
imageAlt="Skilled Barista Preparing Coffee"
|
|
|
|
<a href="#">Learn More</a>
|
|
|
|
buttons={[
|
|
|
|
</div>
|
|
|
|
{ text: "Learn More", href: "#" }
|
|
|
|
|
|
|
|
]}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
<TestimonialCardTwelve
|
|
|
|
<div>
|
|
|
|
testimonials={[
|
|
|
|
<span>Loved by our community</span>
|
|
|
|
{
|
|
|
|
<h2>Over 8,000 customers trust Coffee Haven for their daily coffee fix</h2>
|
|
|
|
id: "1",
|
|
|
|
<div>
|
|
|
|
name: "Sarah Johnson",
|
|
|
|
<div>
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919718932-46zkjjkj.jpg",
|
|
|
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919718932-46zkjjkj.jpg" alt="Sarah Johnson" />
|
|
|
|
imageAlt: "Sarah Johnson"
|
|
|
|
<p>Sarah Johnson</p>
|
|
|
|
},
|
|
|
|
</div>
|
|
|
|
{
|
|
|
|
<div>
|
|
|
|
id: "2",
|
|
|
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919719902-9d9xokbi.jpg" alt="Michael Chen" />
|
|
|
|
name: "Michael Chen",
|
|
|
|
<p>Michael Chen</p>
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919719902-9d9xokbi.jpg",
|
|
|
|
</div>
|
|
|
|
imageAlt: "Michael Chen"
|
|
|
|
<div>
|
|
|
|
},
|
|
|
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919721068-hquen5z9.jpg" alt="Emily Davis" />
|
|
|
|
{
|
|
|
|
<p>Emily Davis</p>
|
|
|
|
id: "3",
|
|
|
|
</div>
|
|
|
|
name: "Emily Davis",
|
|
|
|
<div>
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919721068-hquen5z9.jpg",
|
|
|
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919722288-3udpi897.jpg" alt="James Wilson" />
|
|
|
|
imageAlt: "Emily Davis"
|
|
|
|
<p>James Wilson</p>
|
|
|
|
},
|
|
|
|
</div>
|
|
|
|
{
|
|
|
|
</div>
|
|
|
|
id: "4",
|
|
|
|
</div>
|
|
|
|
name: "James Wilson",
|
|
|
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919722288-3udpi897.jpg",
|
|
|
|
|
|
|
|
imageAlt: "James Wilson"
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
]}
|
|
|
|
|
|
|
|
cardTitle="Over 8,000 customers trust Coffee Haven for their daily coffee fix"
|
|
|
|
|
|
|
|
cardTag="Loved by our community"
|
|
|
|
|
|
|
|
useInvertedBackground="noInvert"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
<ContactCenterForm
|
|
|
|
<div>
|
|
|
|
title="Visit Coffee Haven"
|
|
|
|
<h2>Visit Coffee Haven</h2>
|
|
|
|
description="Stop by today or get in touch with us. We're open Monday to Sunday, serving great coffee and warm welcomes from 7am to 8pm."
|
|
|
|
<p>Stop by today or get in touch with us. We're open Monday to Sunday, serving great coffee and warm welcomes from 7am to 8pm.</p>
|
|
|
|
inputs={[
|
|
|
|
<form>
|
|
|
|
{
|
|
|
|
<input type="text" placeholder="Your Name" required />
|
|
|
|
name: "name",
|
|
|
|
<input type="email" placeholder="Your Email" required />
|
|
|
|
type: "text",
|
|
|
|
<input type="tel" placeholder="Phone Number" />
|
|
|
|
placeholder: "Your Name",
|
|
|
|
<textarea placeholder="Tell us what brings you in today..." rows={5} required></textarea>
|
|
|
|
required: true
|
|
|
|
<button type="submit">Send Message</button>
|
|
|
|
},
|
|
|
|
</form>
|
|
|
|
{
|
|
|
|
</div>
|
|
|
|
name: "email",
|
|
|
|
|
|
|
|
type: "email",
|
|
|
|
|
|
|
|
placeholder: "Your Email",
|
|
|
|
|
|
|
|
required: true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: "phone",
|
|
|
|
|
|
|
|
type: "tel",
|
|
|
|
|
|
|
|
placeholder: "Phone Number",
|
|
|
|
|
|
|
|
required: false
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
]}
|
|
|
|
|
|
|
|
textarea={{
|
|
|
|
|
|
|
|
name: "message",
|
|
|
|
|
|
|
|
placeholder: "Tell us what brings you in today...",
|
|
|
|
|
|
|
|
rows: 5,
|
|
|
|
|
|
|
|
required: true
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
useInvertedBackground="noInvert"
|
|
|
|
|
|
|
|
buttonText="Send Message"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
<FooterMedia
|
|
|
|
<div>
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919710075-t6o45sqb.jpg"
|
|
|
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919710075-t6o45sqb.jpg" alt="Coffee Beans" />
|
|
|
|
imageAlt="Coffee Beans"
|
|
|
|
<div>
|
|
|
|
logoText="Coffee Haven"
|
|
|
|
<h3>Coffee Haven</h3>
|
|
|
|
copyrightText="© 2025 Coffee Haven. Crafted with passion."
|
|
|
|
<p>© 2025 Coffee Haven. Crafted with passion.</p>
|
|
|
|
columns={[
|
|
|
|
</div>
|
|
|
|
{
|
|
|
|
<div>
|
|
|
|
title: "Quick Links",
|
|
|
|
<div>
|
|
|
|
items: [
|
|
|
|
<h4>Quick Links</h4>
|
|
|
|
{ label: "Home", href: "#hero" },
|
|
|
|
<a href="#hero">Home</a>
|
|
|
|
{ label: "Menu", href: "#features" },
|
|
|
|
<a href="#features">Menu</a>
|
|
|
|
{ label: "About", href: "#about" },
|
|
|
|
<a href="#about">About</a>
|
|
|
|
{ label: "Contact", href: "#contact" }
|
|
|
|
<a href="#contact">Contact</a>
|
|
|
|
]
|
|
|
|
</div>
|
|
|
|
},
|
|
|
|
<div>
|
|
|
|
{
|
|
|
|
<h4>Hours</h4>
|
|
|
|
title: "Hours",
|
|
|
|
<p>Monday - Friday: 7am - 8pm</p>
|
|
|
|
items: [
|
|
|
|
<p>Saturday - Sunday: 8am - 9pm</p>
|
|
|
|
{ label: "Monday - Friday: 7am - 8pm" },
|
|
|
|
<p>Closed on major holidays</p>
|
|
|
|
{ label: "Saturday - Sunday: 8am - 9pm" },
|
|
|
|
</div>
|
|
|
|
{ label: "Closed on major holidays" }
|
|
|
|
<div>
|
|
|
|
]
|
|
|
|
<h4>Connect</h4>
|
|
|
|
},
|
|
|
|
<a href="https://instagram.com">Instagram</a>
|
|
|
|
{
|
|
|
|
<a href="https://facebook.com">Facebook</a>
|
|
|
|
title: "Connect",
|
|
|
|
<a href="mailto:hello@coffeehaven.com">Email Us</a>
|
|
|
|
items: [
|
|
|
|
</div>
|
|
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
|
|
</div>
|
|
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
|
|
</div>
|
|
|
|
{ label: "Email Us", href: "mailto:hello@coffeehaven.com" }
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
]}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ThemeProvider>
|
|
|
|
</ThemeProvider>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
