bender/3f0c9183-3d9a-4a16-90f4-e5c505363c2c
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #1

Merged
bender merged 3 commits from version_2 into main 2026-04-17 16:12:00 +00:00
Conversation 0 Commits 3 Files Changed 3 +203 -223
3 changed files with 203 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/app/booking/page.tsx Normal file
View File

@@ -0,0 +1,82 @@
"use client";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import Input from '@/components/form/Input';
import ButtonHoverMagnetic from '@/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic';
export default function BookingPage() {
const [name, setName] = useState("");
const [contact, setContact] = useState("");
const [service, setService] = useState("");
const [date, setDate] = useState("");
const [time, setTime] = useState("");
const [notes, setNotes] = useState("");
const [submitted, setSubmitted] = useState(false);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (name && contact && service && date && time) {
setSubmitted(true);
}
};
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="gradient-bordered"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="semibold"
>
<ReactLenis root>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Booking", id: "/booking" },
]}
brandName="Coffee Clouds"
/>
<div className="min-h-screen pt-32 pb-20 px-6">
<div className="max-w-2xl mx-auto">
<h1 className="text-4xl font-bold mb-8">Book Your Experience</h1>
{submitted ? (
<div className="p-8 bg-green-900/20 border border-green-500 rounded-lg text-center">
<h2 className="text-2xl text-green-500">Booking Confirmed!</h2>
<p className="mt-2">We look forward to hosting you at Coffee Clouds.</p>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6">
<Input value={name} onChange={setName} placeholder="Customer Name" required />
<Input value={contact} onChange={setContact} placeholder="Contact Details (Email/Phone)" required />
<select className="w-full p-3 rounded bg-transparent border border-white/20" value={service} onChange={(e) => setService(e.target.value)} required>
<option value="">Select a Service</option>
<option value="table">Table Reservation</option>
<option value="tasting">Coffee Tasting</option>
</select>
<Input type="date" value={date} onChange={setDate} required />
<Input type="time" value={time} onChange={setTime} required />
<textarea className="w-full p-3 rounded bg-transparent border border-white/20 min-h-[100px]" placeholder="Notes" value={notes} onChange={(e) => setNotes(e.target.value)} />
<ButtonHoverMagnetic text="Submit Booking" type="submit" className="w-full" />
</form>
)}
</div>
</div>
<FooterBaseCard
logoText="Coffee Clouds"
columns={[
{ title: "Navigation", items: [{ label: "Home", href: "/" }] }
]}
/>
</ReactLenis>
</ThemeProvider>
);
}

72
src/app/bookings/page.tsx Normal file
View File

@@ -0,0 +1,72 @@
"use client";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
export default function BookingsPage() {
const [bookings, setBookings] = useState([
{ id: "1", name: "John Doe", date: "2023-11-01", status: "Confirmed" },
{ id: "2", name: "Jane Smith", date: "2023-11-02", status: "Pending" },
]);
return (
<ThemeProvider>
<ReactLenis root>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Bookings", id: "/bookings" }
]}
brandName="Coffee Clouds"
/>
<main className="container mx-auto px-6 py-20 min-h-screen">
<h1 className="text-4xl font-bold mb-10">Admin Bookings Dashboard</h1>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
<section className="p-6 border rounded-lg">
<h2 className="text-2xl font-semibold mb-6">New Booking</h2>
<form className="flex flex-col gap-4" onSubmit={(e) => e.preventDefault()}>
<input type="text" placeholder="Client Name" className="w-full p-3 border rounded" aria-label="Client Name" />
<input type="date" className="w-full p-3 border rounded" aria-label="Booking Date" />
<button type="submit" className="bg-primary p-3 rounded text-white font-semibold">Create Booking</button>
</form>
</section>
<section className="p-6 border rounded-lg">
<h2 className="text-2xl font-semibold mb-6">Recent Bookings</h2>
<div className="overflow-x-auto">
<table className="w-full text-left">
<thead>
<tr className="border-b">
<th className="py-2">Name</th>
<th className="py-2">Date</th>
<th className="py-2">Status</th>
</tr>
</thead>
<tbody>
{bookings.map((booking) => (
<tr key={booking.id} className="border-b">
<td className="py-3">{booking.name}</td>
<td className="py-3">{booking.date}</td>
<td className="py-3">{booking.status}</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
</div>
</main>
<FooterBaseCard
logoText="Coffee Clouds"
columns={[]}
/>
</ReactLenis>
</ThemeProvider>
);
}

272
src/app/page.tsx
View File

@@ -31,26 +31,12 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "#hero",
},
{
name: "Story",
id: "#about",
},
{
name: "Menu",
id: "#menu",
},
{
name: "Testimonials",
id: "#testimonials",
},
{
name: "Contact",
id: "#contact",
},
{ name: "Home", id: "#hero" },
{ name: "Story", id: "#about" },
{ name: "Menu", id: "#menu" },
{ name: "Testimonials", id: "#testimonials" },
{ name: "Contact", id: "#contact" },
{ name: "Bookings", id: "/bookings" },
]}
brandName="Coffee Clouds"
/>
@@ -58,47 +44,21 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{
variant: "gradient-bars",
}}
background={{ variant: "gradient-bars" }}
title="Escape into the Clouds."
description="Where hidden gems brew memories. Discover our signature charcoal-roasted coffee and cloud-whipped lattes in our dark-lit, sanctuary space."
tag="Hidden Gem Café"
buttons={[
{
text: "View Menu",
href: "#menu",
},
{
text: "Get Directions",
href: "#contact",
},
{ text: "View Menu", href: "#menu" },
{ text: "Get Directions", href: "#contact" },
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-phone-night_1303-5738.jpg",
imageAlt: "Moody coffee atmosphere",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-cocktail-with-cinnamon-decor-table_141793-2878.jpg",
imageAlt: "Signature drinks",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-phone-night_1303-5741.jpg",
imageAlt: "Minimalist cafe interior",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-working-computer-cafe-drinking-coffee_1303-14506.jpg",
imageAlt: "Cinematic coffee vibe",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/crispy-crackes-glass-cup-with-glass-icecream-top-view_114579-19110.jpg",
imageAlt: "Rich hot beverage",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-pouring-milk-into-her-coffee_1153-545.jpg",
imageAlt: "Cloud shop signage",
},
{ imageSrc: "http://img.b2bpic.net/free-photo/girl-with-phone-night_1303-5738.jpg", imageAlt: "Moody coffee atmosphere" },
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-cocktail-with-cinnamon-decor-table_141793-2878.jpg", imageAlt: "Signature drinks" },
{ imageSrc: "http://img.b2bpic.net/free-photo/girl-with-phone-night_1303-5741.jpg", imageAlt: "Minimalist cafe interior" },
{ imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-working-computer-cafe-drinking-coffee_1303-14506.jpg", imageAlt: "Cinematic coffee vibe" },
{ imageSrc: "http://img.b2bpic.net/free-photo/crispy-crackes-glass-cup-with-glass-icecream-top-view_114579-19110.jpg", imageAlt: "Rich hot beverage" },
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-pouring-milk-into-her-coffee_1153-545.jpg", imageAlt: "Cloud shop signage" },
]}
/>
</div>
@@ -109,18 +69,9 @@ export default function LandingPage() {
title="Beyond the Bean"
description="We don't just serve coffee; we craft moments. Coffee Clouds began as a secret passion project, dedicated to slow-brewing and high-quality, ethically sourced ingredients served in an atmosphere designed for quiet reflection."
metrics={[
{
value: "2018",
title: "Established",
},
{
value: "15+",
title: "Bean Varieties",
},
{
value: "98%",
title: "Happy Guests",
},
{ value: "2018", title: "Established" },
{ value: "15+", title: "Bean Varieties" },
{ value: "98%", title: "Happy Guests" },
]}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-guys-drinking-coffee-indoors_23-2148450779.jpg"
imageAlt="Storytelling image of our space"
@@ -136,42 +87,12 @@ export default function LandingPage() {
gridVariant="asymmetric-60-wide-40-narrow"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Velvet Hot Cocoa",
price: "$7.50",
imageSrc: "http://img.b2bpic.net/free-photo/coffee-with-wheat-thread-drawn-foam_1220-648.jpg",
},
{
id: "p2",
name: "Crème Brûlée Latte",
price: "$8.50",
imageSrc: "http://img.b2bpic.net/free-photo/hot-chocolate-with-cinnamon-mug-flat-lay-holiday-food-photography_53876-103587.jpg",
},
{
id: "p3",
name: "Spiced Cloud Chai",
price: "$7.00",
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-male-pouring-milk-into-glass-coffee_181624-1769.jpg",
},
{
id: "p4",
name: "Midnight Espresso",
price: "$5.00",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-sits-table-with-cocktail-lit-candle_140725-9075.jpg",
},
{
id: "p5",
name: "Vanilla Cloud Foam",
price: "$6.50",
imageSrc: "http://img.b2bpic.net/free-photo/fresh-tea-cloth-near-leaves-kernels_23-2147885962.jpg",
},
{
id: "p6",
name: "Iced Charcoal Latte",
price: "$9.00",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-concept-table_23-2148459670.jpg",
},
{ id: "p1", name: "Velvet Hot Cocoa", price: "$7.50", imageSrc: "http://img.b2bpic.net/free-photo/coffee-with-wheat-thread-drawn-foam_1220-648.jpg" },
{ id: "p2", name: "Crème Brûlée Latte", price: "$8.50", imageSrc: "http://img.b2bpic.net/free-photo/hot-chocolate-with-cinnamon-mug-flat-lay-holiday-food-photography_53876-103587.jpg" },
{ id: "p3", name: "Spiced Cloud Chai", price: "$7.00", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-male-pouring-milk-into-glass-coffee_181624-1769.jpg" },
{ id: "p4", name: "Midnight Espresso", price: "$5.00", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-sits-table-with-cocktail-lit-candle_140725-9075.jpg" },
{ id: "p5", name: "Vanilla Cloud Foam", price: "$6.50", imageSrc: "http://img.b2bpic.net/free-photo/fresh-tea-cloth-near-leaves-kernels_23-2147885962.jpg" },
{ id: "p6", name: "Iced Charcoal Latte", price: "$9.00", imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-concept-table_23-2148459670.jpg" },
]}
title="Signature Rituals"
description="Indulge in our carefully curated selection of signature drinks, crafted to perfection."
@@ -183,14 +104,7 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={true}
names={[
"The Daily Grind",
"Urban Coffee Journal",
"City Hidden Gems",
"Caffeine Weekly",
"The Modern Sip",
"Street Press",
"Night Owl Brews",
]}
"The Daily Grind", "Urban Coffee Journal", "City Hidden Gems", "Caffeine Weekly", "The Modern Sip", "Street Press", "Night Owl Brews"]}
title="As Seen In"
description="Featured in leading lifestyle and culinary publications."
/>
@@ -203,46 +117,11 @@ export default function LandingPage() {
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Elena V.",
role: "Creative Director",
company: "Studio D",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-hot-chocolate_52683-102636.jpg",
},
{
id: "t2",
name: "Marcus J.",
role: "Photographer",
company: "Freeform",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-holding-mobile-phone-coffee-cup-waiting-area_107420-95820.jpg",
},
{
id: "t3",
name: "Sophia R.",
role: "Marketing",
company: "GrowthCo",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/person-drinking-coffee-spacious-cafeteria_23-2150424023.jpg",
},
{
id: "t4",
name: "Julian D.",
role: "Architect",
company: "UrbanDesign",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-waiter-holding-cup-coffee_1170-557.jpg",
},
{
id: "t5",
name: "Maya L.",
role: "Writer",
company: "Bookish",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-all-black-outfit-holding-cup_114579-26448.jpg",
},
{ id: "t1", name: "Elena V.", role: "Creative Director", company: "Studio D", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-hot-chocolate_52683-102636.jpg" },
{ id: "t2", name: "Marcus J.", role: "Photographer", company: "Freeform", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-holding-mobile-phone-coffee-cup-waiting-area_107420-95820.jpg" },
{ id: "t3", name: "Sophia R.", role: "Marketing", company: "GrowthCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/person-drinking-coffee-spacious-cafeteria_23-2150424023.jpg" },
{ id: "t4", name: "Julian D.", role: "Architect", company: "UrbanDesign", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-waiter-holding-cup-coffee_1170-557.jpg" },
{ id: "t5", name: "Maya L.", role: "Writer", company: "Bookish", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-all-black-outfit-holding-cup_114579-26448.jpg" },
]}
title="Whispers of Delight"
description="Read what our community feels when they step into the clouds."
@@ -255,21 +134,9 @@ export default function LandingPage() {
title="By The Numbers"
tag="Quality First"
metrics={[
{
id: "m1",
value: "100K+",
description: "Cups Poured",
},
{
id: "m2",
value: "50+",
description: "Local Suppliers",
},
{
id: "m3",
value: "24/7",
description: "Bean Roast Cycle",
},
{ id: "m1", value: "100K+", description: "Cups Poured" },
{ id: "m2", value: "50+", description: "Local Suppliers" },
{ id: "m3", value: "24/7", description: "Bean Roast Cycle" },
]}
/>
</div>
@@ -279,21 +146,9 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Do you accept walk-ins?",
content: "Yes, we prioritize walk-ins to keep the atmosphere communal.",
},
{
id: "f2",
title: "Can I book a table?",
content: "We offer reservations for groups of 6+ via our website portal.",
},
{
id: "f3",
title: "Are you pet friendly?",
content: "Our patio is perfectly equipped for your furry coffee lovers.",
},
{ id: "f1", title: "Do you accept walk-ins?", content: "Yes, we prioritize walk-ins to keep the atmosphere communal." },
{ id: "f2", title: "Can I book a table?", content: "We offer reservations for groups of 6+ via our website portal." },
{ id: "f3", title: "Are you pet friendly?", content: "Our patio is perfectly equipped for your furry coffee lovers." },
]}
imageSrc="http://img.b2bpic.net/free-photo/top-view-cup-full-roasted-coffee-beans_23-2148251685.jpg"
title="Common Inquiries"
@@ -305,19 +160,11 @@ export default function LandingPage() {
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{
variant: "rotated-rays-static",
}}
background={{ variant: "rotated-rays-static" }}
text="Visit our hideaway at the heart of the city. We are waiting for you."
buttons={[
{
text: "Directions",
href: "https://maps.google.com",
},
{
text: "Instagram",
href: "https://instagram.com",
},
{ text: "Directions", href: "https://maps.google.com" },
{ text: "Instagram", href: "https://instagram.com" },
]}
/>
</div>
@@ -326,40 +173,19 @@ export default function LandingPage() {
<FooterBaseCard
logoText="Coffee Clouds"
columns={[
{
title: "Links",
items: [
{
label: "Story",
href: "#about",
},
{
label: "Menu",
href: "#menu",
},
{
label: "Reviews",
href: "#testimonials",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy",
href: "#",
},
{
label: "Terms",
href: "#",
},
],
},
{ title: "Links", items: [
{ label: "Story", href: "#about" },
{ label: "Menu", href: "#menu" },
{ label: "Reviews", href: "#testimonials" },
]},
{ title: "Legal", items: [
{ label: "Privacy", href: "#" },
{ label: "Terms", href: "#" },
]},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}