8 Commits

Author SHA1 Message Date
c2c270c7dd Update src/app/page.tsx 2025-12-21 16:42:55 +00:00
0b87d314a6 Update src/app/page.tsx 2025-12-21 16:38:58 +00:00
15802a1f38 Update src/app/layout.tsx 2025-12-21 16:38:58 +00:00
d12d5d1861 Update src/app/page.tsx 2025-12-21 16:37:14 +00:00
ad52610442 Update src/app/page.tsx 2025-12-21 12:59:16 +00:00
5ae0e95600 Update src/app/layout.tsx 2025-12-21 12:59:16 +00:00
f589039452 Update src/app/page.tsx 2025-12-21 12:55:58 +00:00
52d0140026 Update src/app/globals.css 2025-12-21 12:55:57 +00:00
2 changed files with 248 additions and 198 deletions

View File

@@ -4,13 +4,13 @@
/* Base units */ /* Base units */
/* --vw is set by ThemeProvider */ /* --vw is set by ThemeProvider */
--background: #fafefe;; --background: #faf5f2;
--card: #f0feff;; --card: #f5ede8;
--foreground: #001a1a;; --foreground: #3d2417;
--primary-cta: #16d4f6;; --primary-cta: #d4704c;
--secondary-cta: #ffffff;; --secondary-cta: #ffffff;
--accent: #22d3ee;; --accent: #e8a88f;
--background-accent: #06b6d4;; --background-accent: #b85a3a;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
@@ -495,7 +495,7 @@ html {
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: var(--font-jetbrains-mono), sans-serif; font-family: var(--font-inter-tight), sans-serif;
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
overscroll-behavior: none; overscroll-behavior: none;
@@ -508,5 +508,5 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--font-jetbrains-mono), sans-serif; font-family: var(--font-inter-tight), sans-serif;
} }

View File

@@ -1,218 +1,268 @@
"use client" "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import SplitAboutCards from '@/components/sections/about/SplitAboutCards';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { Instagram, Facebook } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="directional-hover" defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight" defaultTextAnimation="entrance-slide"
borderRadius="sharp" borderRadius="rounded"
contentWidth="large" contentWidth="medium"
sizing="small" sizing="medium"
background="radialGradient" background="circleGradient"
cardStyle="spotlight" cardStyle="glass-elevated"
primaryButtonStyle="outline" primaryButtonStyle="gradient"
secondaryButtonStyle="minimal" secondaryButtonStyle="glass"
headingFontWeight="extrabold" headingFontWeight="normal"
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleCentered <div className="min-h-[60px] bg-background border-b border-border flex items-center justify-center px-4">
brandName="Mongusta" <div className="text-xl font-semibold text-foreground">Mongusta Coffee Shop</div>
navItems={[ </div>
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Menu", id: "menu" },
{ name: "Contact", id: "contact" }
]}
button={{ text: "Reserve", href: "contact" }}
/>
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroLogoBillboardSplit <div className="min-h-screen bg-background flex items-center justify-center px-4">
logoText="MONGUSTA" <div className="text-center">
description="Experience premium specialty coffee in the heart of Amsterdam. Handcrafted beverages, locally roasted beans, and a welcoming community space where coffee lovers unite." <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-4">MONGUSTA</h1>
buttons={[ <p className="text-lg text-foreground/70 max-w-2xl mx-auto mb-8">
{ text: "View Menu", href: "menu" }, Experience premium specialty coffee in the heart of Amsterdam. Handcrafted beverages, locally roasted beans, and a welcoming community space where coffee lovers unite.
{ text: "Visit Us", href: "contact" } </p>
]} <div className="flex gap-4 justify-center">
layoutOrder="default" <a href="#menu" className="px-6 py-3 bg-primary-cta text-white rounded hover:opacity-90 transition-opacity">
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140051179-xqh9zjdi.jpg" View Menu
imageAlt="Fresh espresso drink at Mongusta coffee shop" </a>
frameStyle="card" <a href="#contact" className="px-6 py-3 border border-border rounded hover:bg-accent transition-colors">
/> Visit Us
</a>
</div>
</div>
</div>
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<SplitAboutCards <div className="py-20 px-4 bg-background">
tag="Our Story" <div className="max-w-4xl mx-auto text-center">
title="Crafted for Coffee Enthusiasts" <h2 className="text-3xl font-bold text-foreground mb-8">Crafted for Coffee Enthusiasts</h2>
description="Mongusta brings specialty coffee culture to Amsterdam with a commitment to quality, sustainability, and community. Founded in 2018, we source the finest beans from ethical producers and roast them fresh daily." <p className="text-lg text-foreground/70 mb-12">
features={[ Mongusta brings specialty coffee culture to Amsterdam with a commitment to quality, sustainability, and community. Founded in 2018, we source the finest beans from ethical producers and roast them fresh daily.
{ </p>
id: "roasting", <div className="grid md:grid-cols-2 gap-8">
title: "Artisan Roasting", <div className="p-6 card rounded">
description: "Small batch roasting ensures every bean reaches peak flavor. Our roasters work with passion to bring out unique characteristics from each origin.", <h3 className="text-xl font-semibold text-foreground mb-4">Artisan Roasting</h3>
label: "Daily Fresh" <p className="text-foreground/70">
}, Small batch roasting ensures every bean reaches peak flavor. Our roasters work with passion to bring out unique characteristics from each origin.
{ </p>
id: "atmosphere", </div>
title: "Welcoming Space", <div className="p-6 card rounded">
description: "More than a cafe, Mongusta is a gathering place. Comfortable seating, free wifi, and a warm atmosphere make it perfect for work or conversation.", <h3 className="text-xl font-semibold text-foreground mb-4">Welcoming Space</h3>
label: "Community First" <p className="text-foreground/70">
} More than a cafe, Mongusta is a gathering place. Comfortable seating, free wifi, and a warm atmosphere make it perfect for work or conversation.
]} </p>
buttons={[ </div>
{ text: "Learn More", href: "#" } </div>
]} </div>
useInvertedBackground="noInvert" </div>
/>
</div> </div>
<div id="menu" data-section="menu"> <div id="menu" data-section="menu">
<ProductCardTwo <div className="py-20 px-4 bg-background">
title="Our Menu" <div className="max-w-6xl mx-auto">
description="Discover our signature drinks crafted with precision and passion" <div className="text-center mb-12">
products={[ <h2 className="text-3xl font-bold text-foreground mb-4">Our Menu</h2>
{ <p className="text-lg text-foreground/70">
id: "1", Discover our signature drinks crafted with precision and passion
brand: "Mongusta", </p>
name: "Signature Latte", </div>
price: "€4.50", <div className="grid md:grid-cols-3 gap-8">
rating: 5, <div className="card rounded overflow-hidden">
reviewCount: "320", <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140052116-ugc31hy1.jpg" alt="Smooth and creamy signature latte" className="w-full h-48 object-cover" />
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140052116-ugc31hy1.jpg", <div className="p-6">
imageAlt: "Smooth and creamy signature latte" <h3 className="text-xl font-semibold text-foreground mb-2">Signature Latte</h3>
}, <p className="text-2xl font-bold text-foreground mb-4">4.50</p>
{ <button className="w-full px-4 py-2 bg-primary-cta text-white rounded hover:opacity-90 transition-opacity">
id: "2", Buy Now
brand: "Mongusta", </button>
name: "Double Espresso", </div>
price: "€2.80", </div>
rating: 5, <div className="card rounded overflow-hidden">
reviewCount: "450", <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766321575502-dja1nmgo.jpg" alt="Rich and bold double espresso shot" className="w-full h-48 object-cover" />
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766321575502-dja1nmgo.jpg", <div className="p-6">
imageAlt: "Rich and bold double espresso shot" <h3 className="text-xl font-semibold text-foreground mb-2">Double Espresso</h3>
}, <p className="text-2xl font-bold text-foreground mb-4">2.80</p>
{ <button className="w-full px-4 py-2 bg-primary-cta text-white rounded hover:opacity-90 transition-opacity">
id: "3", Buy Now
brand: "Mongusta", </button>
name: "Iced Cold Brew", </div>
price: "€4.20", </div>
rating: 5, <div className="card rounded overflow-hidden">
reviewCount: "280", <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140058956-okqwoo8n.jpg" alt="Refreshing cold brew concentrate" className="w-full h-48 object-cover" />
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140058956-okqwoo8n.jpg", <div className="p-6">
imageAlt: "Refreshing cold brew concentrate" <h3 className="text-xl font-semibold text-foreground mb-2">Iced Cold Brew</h3>
} <p className="text-2xl font-bold text-foreground mb-4">4.20</p>
]} <button className="w-full px-4 py-2 bg-primary-cta text-white rounded hover:opacity-90 transition-opacity">
textboxLayout="default" Buy Now
gridVariant="three-columns-all-equal-width" </button>
containerStyle="default" </div>
animationType="slide-up" </div>
useInvertedBackground="noInvert" </div>
/> </div>
</div>
</div>
<div id="team" data-section="team">
<div className="py-20 px-4 bg-background">
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold text-foreground mb-12">Meet Our Team</h2>
<div className="grid md:grid-cols-2 gap-8 justify-center">
<div className="card rounded overflow-hidden">
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg" alt="Damiano Patri, Owner and Founder" className="w-full h-64 object-cover" />
<div className="p-6">
<h3 className="text-xl font-semibold text-foreground">Damiano Patri</h3>
<p className="text-foreground/70">Owner and Founder</p>
</div>
</div>
<div className="card rounded overflow-hidden">
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140063369-vzpeyskp.jpg" alt="Lorenzo Noya, Co-Founder" className="w-full h-64 object-cover" />
<div className="p-6">
<h3 className="text-xl font-semibold text-foreground">Lorenzo Noya</h3>
<p className="text-foreground/70">Co-Founder</p>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardFive <div className="py-20 px-4 bg-background">
title="What Our Guests Say" <div className="max-w-6xl mx-auto">
description="Join hundreds of coffee lovers who have made Mongusta their favorite spot in Amsterdam" <div className="text-center mb-12">
testimonials={[ <h2 className="text-3xl font-bold text-foreground mb-4">What Our Guests Say</h2>
{ <p className="text-lg text-foreground/70">
id: "1", Join hundreds of coffee lovers who have made Mongusta their favorite spot in Amsterdam
name: "Sophie van der Berg, Amsterdam Local", </p>
date: "Date: 15 January 2025", </div>
title: "Best coffee in the city", <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
quote: "I come to Mongusta almost every day. The quality is unmatched and the atmosphere is so welcoming. This is where coffee meets community.", <div className="card rounded p-6">
tag: "Regular", <div className="flex items-center mb-4">
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg" <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg" alt="Sophie van der Berg" className="w-12 h-12 rounded-full mr-4 object-cover" />
}, <div>
{ <h4 className="font-semibold text-foreground">Sophie van der Berg</h4>
id: "2", <p className="text-sm text-foreground/70">Amsterdam Local</p>
name: "Marco Rossi, Entrepreneur", </div>
date: "Date: 10 January 2025", </div>
title: "Perfect workspace", <p className="text-foreground/70 text-sm">
quote: "As a freelancer, I need a good workspace with excellent coffee. Mongusta delivers on both fronts. The wifi is reliable and the team is incredibly friendly.", "I come to Mongusta almost every day. The quality is unmatched and the atmosphere is so welcoming. This is where coffee meets community."
tag: "Frequent Visitor", </p>
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140063369-vzpeyskp.jpg" </div>
}, <div className="card rounded p-6">
{ <div className="flex items-center mb-4">
id: "3", <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140063369-vzpeyskp.jpg" alt="Marco Rossi" className="w-12 h-12 rounded-full mr-4 object-cover" />
name: "Emma Johnson, Designer", <div>
date: "Date: 8 January 2025", <h4 className="font-semibold text-foreground">Marco Rossi</h4>
title: "Inspiring place", <p className="text-sm text-foreground/70">Entrepreneur</p>
quote: "Mongusta inspires creativity. The minimalist design, quality coffee, and creative energy make it my favorite place to brainstorm and work on projects.", </div>
tag: "Creative", </div>
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766321576736-ix2lum2h.jpg" <p className="text-foreground/70 text-sm">
}, "As a freelancer, I need a good workspace with excellent coffee. Mongusta delivers on both fronts. The wifi is reliable and the team is incredibly friendly."
{ </p>
id: "4", </div>
name: "Jan de Wit, Coffee Connoisseur", <div className="card rounded p-6">
date: "Date: 5 January 2025", <div className="flex items-center mb-4">
title: "Exceptional quality", <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766321576736-ix2lum2h.jpg" alt="Emma Johnson" className="w-12 h-12 rounded-full mr-4 object-cover" />
quote: "Finally, a coffee shop that respects the craft. The single-origin selections are outstanding, and the baristas really know their stuff.", <div>
tag: "Enthusiast", <h4 className="font-semibold text-foreground">Emma Johnson</h4>
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320181151-p24uxfcb.jpg" <p className="text-sm text-foreground/70">Designer</p>
} </div>
]} </div>
textboxLayout="default" <p className="text-foreground/70 text-sm">
useInvertedBackground="noInvert" "Mongusta inspires creativity. The minimalist design, quality coffee, and creative energy make it my favorite place to brainstorm and work on projects."
/> </p>
</div>
<div className="card rounded p-6">
<div className="flex items-center mb-4">
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320181151-p24uxfcb.jpg" alt="Jan de Wit" className="w-12 h-12 rounded-full mr-4 object-cover" />
<div>
<h4 className="font-semibold text-foreground">Jan de Wit</h4>
<p className="text-sm text-foreground/70">Coffee Connoisseur</p>
</div>
</div>
<p className="text-foreground/70 text-sm">
"Finally, a coffee shop that respects the craft. The single-origin selections are outstanding, and the baristas really know their stuff."
</p>
</div>
</div>
</div>
</div>
</div> </div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactText <div className="py-20 px-4 bg-background">
text="Ready to experience exceptional coffee? Visit Mongusta or get in touch. We are located in the heart of Amsterdam, open 7 days a week." <div className="max-w-4xl mx-auto text-center">
animationType="entrance-slide" <p className="text-xl text-foreground/70 mb-8">
buttons={[ Ready to experience exceptional coffee? Visit Mongusta or get in touch. We are located in the heart of Amsterdam, open 7 days a week.
{ text: "Contact Us", href: "#" }, </p>
{ text: "Find Us", href: "#" } <div className="flex gap-4 justify-center">
]} <button className="px-6 py-3 bg-primary-cta text-white rounded hover:opacity-90 transition-opacity">
useInvertedBackground="noInvert" Contact Us
/> </button>
<button className="px-6 py-3 border border-border rounded hover:bg-accent transition-colors">
Find Us
</button>
</div>
</div>
</div>
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterSocial <div className="py-12 px-4 bg-background border-t border-border">
logoText="Mongusta" <div className="max-w-6xl mx-auto">
copyrightText="© Mongusta Coffee Shop, Amsterdam 2025" <div className="grid md:grid-cols-4 gap-8 mb-8">
columns={[ <div>
{ <h3 className="text-xl font-bold text-foreground mb-4">Mongusta</h3>
title: "Shop", <p className="text-foreground/70">Premium specialty coffee in Amsterdam</p>
items: [ </div>
{ label: "Menu", href: "menu" }, <div>
{ label: "Coffee Beans", href: "#" } <h4 className="font-semibold text-foreground mb-4">Shop</h4>
] <ul className="space-y-2">
}, <li><a href="#menu" className="text-foreground/70 hover:text-foreground transition-colors">Menu</a></li>
{ <li><a href="#" className="text-foreground/70 hover:text-foreground transition-colors">Coffee Beans</a></li>
title: "Company", </ul>
items: [ </div>
{ label: "About Us", href: "about" }, <div>
{ label: "Contact", href: "contact" } <h4 className="font-semibold text-foreground mb-4">Company</h4>
] <ul className="space-y-2">
}, <li><a href="#about" className="text-foreground/70 hover:text-foreground transition-colors">About Us</a></li>
{ <li><a href="#contact" className="text-foreground/70 hover:text-foreground transition-colors">Contact</a></li>
title: "Info", </ul>
items: [ </div>
{ label: "Hours", href: "#" }, <div>
{ label: "Location", href: "#" } <h4 className="font-semibold text-foreground mb-4">Info</h4>
] <ul className="space-y-2">
} <li><a href="#" className="text-foreground/70 hover:text-foreground transition-colors">Hours</a></li>
]} <li><a href="#" className="text-foreground/70 hover:text-foreground transition-colors">Location</a></li>
socialLinks={[ </ul>
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" }, </div>
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" } </div>
]} <div className="flex justify-between items-center pt-8 border-t border-border">
/> <p className="text-foreground/70">© Mongusta Coffee Shop, Amsterdam 2025</p>
<div className="flex gap-4">
<a href="https://instagram.com" className="text-foreground/70 hover:text-foreground transition-colors" aria-label="Instagram">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</a>
<a href="https://facebook.com" className="text-foreground/70 hover:text-foreground transition-colors" aria-label="Facebook">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div> </div>
</ThemeProvider> </ThemeProvider>
); );