development/e9736fd2-71cb-4015-b97c-e9ca1a312d37
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-01-25 13:22:26 +02:00
commit 751b268ff7
297 changed files with 57773 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/app/blog/page.tsx Normal file
View File

@@ -0,0 +1,166 @@
"use client";
import { useEffect, useState } from "react";
import ReactLenis from "lenis/react";
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
type BlogPost = {
id: string;
category: string;
title: string;
excerpt: string;
imageSrc: string;
imageAlt?: string;
authorName: string;
authorAvatar: string;
date: string;
onBlogClick?: () => void;
};
const defaultPosts: BlogPost[] = [
{
id: "1", category: "Design", title: "UX review presentations", excerpt: "How do you create compelling presentations that wow your colleagues and impress your managers?", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Abstract design with purple and silver tones", authorName: "Olivia Rhye", authorAvatar: "/placeholders/placeholder3.avif", date: "20 Jan 2025", onBlogClick: () => console.log("Blog 1 clicked"),
},
{
id: "2", category: "Development", title: "Building scalable applications", excerpt: "Learn the best practices for building applications that can handle millions of users.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Development workspace", authorName: "John Smith", authorAvatar: "/placeholders/placeholder4.webp", date: "18 Jan 2025", onBlogClick: () => console.log("Blog 2 clicked"),
},
{
id: "3", category: "Marketing", title: "Content strategy essentials", excerpt: "Discover how to create a content strategy that drives engagement and conversions.", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Marketing strategy board", authorName: "Sarah Johnson", authorAvatar: "/placeholders/placeholder3.avif", date: "15 Jan 2025", onBlogClick: () => console.log("Blog 3 clicked"),
},
{
id: "4", category: "Product", title: "Product management 101", excerpt: "Everything you need to know to become an effective product manager in 2025.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Product planning session", authorName: "Mike Davis", authorAvatar: "/placeholders/placeholder4.webp", date: "12 Jan 2025", onBlogClick: () => console.log("Blog 4 clicked"),
},
];
export default function BlogPage() {
const [posts, setPosts] = useState<BlogPost[]>(defaultPosts);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchPosts = async () => {
try {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!apiUrl || !projectId) {
console.warn("NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured, using default posts");
setIsLoading(false);
return;
}
const url = `${apiUrl}/posts/${projectId}?status=published`;
const response = await fetch(url, {
method: "GET", headers: {
"Content-Type": "application/json"},
});
if (response.ok) {
const resp = await response.json();
const data = resp.data;
if (Array.isArray(data) && data.length > 0) {
const mappedPosts = data.map((post: any) => ({
id: post.id || String(Math.random()),
category: post.category || "General", title: post.title || "Untitled", excerpt: post.excerpt || post.content.slice(0, 30) || "", imageSrc: post.imageUrl || "/placeholders/placeholder3.avif", imageAlt: post.imageAlt || post.title || "", authorName: post.author?.name || "Anonymous", authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif", date: post.date || post.createdAt || new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }),
onBlogClick: () => console.log(`Blog ${post.id} clicked`),
}));
setPosts(mappedPosts);
}
} else {
console.warn(`API request failed with status ${response.status}, using default posts`);
}
} catch (error) {
console.error("Error fetching posts:", error);
} finally {
setIsLoading(false);
}
};
fetchPosts();
}, []);
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="mediumLargeSizeMediumTitles"
background="none"
cardStyle="gradient-mesh"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<ReactLenis root>
<div className="min-h-screen bg-background">
<NavbarStyleApple
brandName="Brew Haven"
navItems={[
{ name: "Home", id: "/home" },
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Menu", id: "products" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
/>
{isLoading ? (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading posts...</p>
</div>
) : (
<BlogCardOne
blogs={posts}
title="Coffee Culture & Stories"
description="Discover the art of brewing, coffee culture, and stories from our passionate community of coffee lovers"
textboxLayout="default"
useInvertedBackground="noInvert"
carouselMode="buttons"
animationType="slide-up"
tag="Blog"
buttons={[
{ text: "View All Articles", href: "/blog" },
{ text: "Subscribe", onClick: () => console.log("Subscribe clicked") }
]}
/>
)}
<FooterBaseCard
logoText="Brew Haven"
copyrightText="© 2024 Brew Haven Coffee. All rights reserved. | Located at 123 Main Street, Your City, ST 12345"
columns={[
{
title: "Explore", items: [
{ label: "About Us", href: "#about" },
{ label: "Our Menu", href: "#products" },
{ label: "Testimonials", href: "#testimonials" },
{ label: "FAQ", href: "#faq" }
]
},
{
title: "Visit", items: [
{ label: "Hours", href: "#" },
{ label: "Location", href: "#" },
{ label: "Parking", href: "#" },
{ label: "Catering", href: "#" }
]
},
{
title: "Connect", items: [
{ label: "Instagram", href: "#" },
{ label: "Facebook", href: "#" },
{ label: "Email", href: "mailto:hello@brewhaven.com" },
{ label: "Contact", href: "#contact" }
]
}
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

595
src/app/globals.css Normal file
View File

@@ -0,0 +1,595 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f4ef;;
--card: #dad6cd;;
--foreground: #2a2928;;
--primary-cta: #2a2928;;
--secondary-cta: #ecebea;;
--accent: #ffffff;;
--background-accent: #c6b180;; */
--background: #f5f4ef;;
--card: #dad6cd;;
--foreground: #2a2928;;
--primary-cta: #2a2928;;
--secondary-cta: #ecebea;;
--accent: #ffffff;;
--background-accent: #c6b180;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 20s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-epilogue), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-epilogue), sans-serif;
}

1267
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

276
src/app/page.tsx Normal file
View File

@@ -0,0 +1,276 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Coffee, Heart, Leaf, User, Users, Star, Home, Wifi, CheckCircle, Zap, Award } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="mediumLargeSizeMediumTitles"
background="none"
cardStyle="gradient-mesh"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Brew Haven"
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Menu", id: "products" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
title="Discover Your Perfect Cup"
description="Experience the art of specialty coffee crafted with passion and precision. From single-origin beans to artisanal espresso drinks, every sip tells a story of quality and tradition."
tag="Specialty Coffee Since 2015"
tagIcon={Coffee}
buttons={[
{ text: "Visit Us Today", href: "#contact" },
{ text: "View Our Menu", href: "#products" }
]}
background={{ variant: "plain" }}
carouselItems={[
{
id: "1", imageSrc: "https://img.b2bpic.net/free-photo/barista-preparing-beverage_23-2149458036.jpg", imageAlt: "Freshly brewed specialty coffee"
},
{
id: "2", imageSrc: "https://img.b2bpic.net/free-photo/coffee-maker-coffee-shop_23-2148366609.jpg", imageAlt: "Artisan coffee preparation"
},
{
id: "3", imageSrc: "https://img.b2bpic.net/free-photo/parisian-coffee-shop-style-with-tasty-coffee-served-wooden-table-coffee-shop-design_482257-18283.jpg", imageAlt: "Warm coffee shop atmosphere"
},
{
id: "4", imageSrc: "https://img.b2bpic.net/free-photo/close-up-man-pouring-coffee-from-pot-filter_23-2148366666.jpg", imageAlt: "Community gathering space"
},
{
id: "5", imageSrc: "https://img.b2bpic.net/free-photo/black-ground-coffee-barista-brews-drink-coffee-glass-jug_1157-47316.jpg", imageAlt: "Premium coffee beans selection"
},
{
id: "6", imageSrc: "https://img.b2bpic.net/free-photo/ice-black-coffee-glass-wooden-table_1150-13459.jpg", imageAlt: "Delicious cappuccino"
}
]}
autoPlay={true}
autoPlayInterval={4000}
ariaLabel="Hero section with coffee showcase carousel"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
title="Crafted with Care"
description="At Brew Haven, we believe that great coffee is more than just a beverage—it's a ritual, a moment of connection, and a celebration of craftsmanship. Founded in 2015, our mission has been to source the finest beans and create an inviting space where every guest feels at home."
tag="Our Story"
tagIcon={Heart}
textboxLayout="default"
useInvertedBackground="noInvert"
imagePosition="right"
imageSrc="https://img.b2bpic.net/free-photo/parisian-coffee-shop-style-with-tasty-coffee-served-wooden-table-coffee-shop-design_482257-18283.jpg"
imageAlt="Brew Haven coffee shop interior"
bulletPoints={[
{
title: "Single-Origin Excellence", description: "We source premium coffee beans from ethical farms around the world, ensuring exceptional quality in every cup.", icon: Leaf
},
{
title: "Expert Baristas", description: "Our skilled baristas are trained in the art and science of coffee, delivering perfectly crafted drinks every time.", icon: User
},
{
title: "Sustainable Practices", description: "From compostable cups to renewable energy, we're committed to environmental responsibility and sustainability.", icon: Leaf
},
{
title: "Community Gathering", description: "More than a cafe, we're a gathering place where friendships are made and ideas flow as freely as our coffee.", icon: Users
}
]}
buttons={[
{ text: "Learn More", href: "#faq" }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTen
title="Why Choose Brew Haven"
description="We've perfected the craft of coffee through quality ingredients, expert technique, and genuine hospitality. Here's what sets us apart."
textboxLayout="default"
useInvertedBackground="invertDefault"
animationType="slide-up"
features={[
{
id: "1", title: "Specialty Coffee Selection", description: "Discover an extensive range of single-origin and blended coffees, carefully curated from sustainable farms across Ethiopia, Colombia, Kenya, and beyond.", media: { imageSrc: "https://img.b2bpic.net/free-photo/coffee-maker-coffee-shop_23-2148366609.jpg" },
items: [
{ icon: Star, text: "Award-winning espresso blends" },
{ icon: Leaf, text: "Single-origin beans rotated monthly" },
{ icon: Heart, text: "Ethically sourced and fair-trade" }
],
reverse: false
},
{
id: "2", title: "Welcoming Atmosphere", description: "Our beautifully designed space combines warmth and sophistication, featuring comfortable seating, natural lighting, and acoustics perfect for conversation or quiet reflection.", media: { imageSrc: "https://img.b2bpic.net/free-photo/close-up-man-pouring-coffee-from-pot-filter_23-2148366666.jpg" },
items: [
{ icon: Home, text: "Cozy wooden interiors" },
{ icon: Wifi, text: "Fast reliable WiFi for remote work" },
{ icon: Users, text: "Events and community gatherings" }
],
reverse: true
},
{
id: "3", title: "Quality You Can Trust", description: "From bean selection to your cup, every step is handled with meticulous attention. Our baristas use precision equipment and time-honored techniques to create the perfect extraction.", media: { imageSrc: "https://img.b2bpic.net/free-photo/black-ground-coffee-barista-brews-drink-coffee-glass-jug_1157-47316.jpg" },
items: [
{ icon: CheckCircle, text: "Expert roasting and grinding" },
{ icon: Zap, text: "Perfect water temperature control" },
{ icon: Award, text: "Certified specialty coffee baristas" }
],
reverse: false
}
]}
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
title="Our Menu"
description="Explore our signature drinks and delicious pastries, crafted fresh daily to complement your coffee experience."
textboxLayout="default"
useInvertedBackground="noInvert"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
products={[
{
id: "1", name: "Double Shot Espresso", price: "$4.50", imageSrc: "https://img.b2bpic.net/free-photo/double-espresso-coffee-mug-with-cinnamon-sticks-coffee-beans-wooden-board_181624-57625.jpg", imageAlt: "Double shot espresso"
},
{
id: "2", name: "Cappuccino", price: "$5.50", imageSrc: "https://img.b2bpic.net/free-photo/ice-black-coffee-glass-wooden-table_1150-13459.jpg", imageAlt: "Creamy cappuccino with latte art"
},
{
id: "3", name: "Artisan Pastry", price: "$6.00", imageSrc: "https://img.b2bpic.net/free-photo/coffee-cups-coffee-beans-table-international-day-coffee-concept_1150-25507.jpg", imageAlt: "Fresh baked artisan pastry"
}
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
title="What Our Regulars Say"
description="Hear from the coffee lovers who make Brew Haven part of their daily routine."
textboxLayout="default"
useInvertedBackground="invertDefault"
testimonials={[
{
id: "1", name: "Sarah Chen, Marketing Manager", date: "Date: 15 November 2024", title: "The Best Coffee in Town", quote: "Brew Haven has become my sanctuary. The quality of coffee is exceptional, and the baristas remember my order. It's the perfect place to start my morning or meet with friends.", tag: "Regular Customer", avatarSrc: "https://img.b2bpic.net/free-photo/smiling-handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-6626.jpg", imageSrc: "https://img.b2bpic.net/free-photo/barista-preparing-beverage_23-2149458036.jpg", imageAlt: "Coffee shop atmosphere"
},
{
id: "2", name: "Marcus Johnson, Software Engineer", date: "Date: 10 November 2024", title: "Perfect Place to Work", quote: "I've tried many cafes, but Brew Haven's combination of excellent coffee, WiFi, and ambiance is unmatched. I get my best work done here.", tag: "Remote Worker", avatarSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1652.jpg", imageSrc: "https://img.b2bpic.net/free-photo/close-up-man-pouring-coffee-from-pot-filter_23-2148366666.jpg", imageAlt: "Community workspace"
},
{
id: "3", name: "Elena Rodriguez, Coffee Enthusiast", date: "Date: 5 November 2024", title: "A True Specialty Coffee Haven", quote: "Finally, a place that takes coffee seriously! Their single-origin selections are thoughtfully curated, and the baristas are genuinely knowledgeable.", tag: "Coffee Connoisseur", avatarSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1664.jpg", imageSrc: "https://img.b2bpic.net/free-photo/black-ground-coffee-barista-brews-drink-coffee-glass-jug_1157-47316.jpg", imageAlt: "Premium coffee preparation"
},
{
id: "4", name: "David Park, Freelance Designer", date: "Date: 28 October 2024", title: "My Creative Home Away from Home", quote: "The atmosphere here inspires creativity. Great coffee, beautiful space, and friendly staff. I can't imagine working anywhere else.", tag: "Creative Professional", avatarSrc: "https://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136890.jpg", imageSrc: "https://img.b2bpic.net/free-photo/parisian-coffee-shop-style-with-tasty-coffee-served-wooden-table-coffee-shop-design_482257-18283.jpg", imageAlt: "Inviting interior design"
},
{
id: "5", name: "Jessica Williams, Student", date: "Date: 22 October 2024", title: "My Study Buddy", quote: "Perfect for studying! The coffee keeps me focused, the environment is conducive to concentration, and the staff is incredibly friendly and supportive.", tag: "Student", avatarSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1628.jpg", imageSrc: "https://img.b2bpic.net/free-photo/coffee-maker-coffee-shop_23-2148366609.jpg", imageAlt: "Coffee craftsmanship"
},
{
id: "6", name: "Thomas Anderson, Business Owner", date: "Date: 18 October 2024", title: "Business Meetings Made Better", quote: "I regularly host client meetings at Brew Haven. The professional atmosphere and exceptional service create the perfect setting for meaningful conversations.", tag: "Business Professional", avatarSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg", imageSrc: "https://img.b2bpic.net/free-photo/ice-black-coffee-glass-wooden-table_1150-13459.jpg", imageAlt: "Quality beverage service"
}
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Frequently Asked Questions"
description="Get answers to common questions about Brew Haven, our coffee, and our services."
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="smooth"
faqs={[
{
id: "1", title: "What makes your coffee special?", content: "We source premium, ethically-sourced beans from specialty farms worldwide and roast them in-house. Our baristas are extensively trained in precision brewing techniques, ensuring every cup meets our high standards."
},
{
id: "2", title: "Do you offer dairy-free options?", content: "Yes! We offer oat, almond, soy, and coconut milk as alternatives. Our baristas can customize any drink to your preferences."
},
{
id: "3", title: "Can I order for catering or events?", content: "Absolutely! We offer catering services for events and meetings. Please contact us at least 48 hours in advance to discuss your needs and get a quote."
},
{
id: "4", title: "What are your opening hours?", content: "We're open Monday-Friday 6:00 AM - 8:00 PM, Saturday 7:00 AM - 9:00 PM, and Sunday 8:00 AM - 7:00 PM. We're closed on major holidays."
},
{
id: "5", title: "Do you sell whole beans?", content: "Yes! We sell a rotating selection of whole bean coffee. You can purchase single-origin or blended bags to enjoy at home. Ask our baristas for recommendations based on your taste preferences."
},
{
id: "6", title: "Is WiFi available for remote work?", content: "Yes, we have fast, reliable WiFi perfect for remote work or studying. We ask that you purchase at least one beverage during your visit."
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to experience Brew Haven? Visit us today and discover why we're the neighborhood's favorite coffee destination. We look forward to welcoming you!"
animationType="entrance-slide"
useInvertedBackground="invertDefault"
buttons={[
{ text: "Get Directions", href: "https://maps.google.com" },
{ text: "Call Us", href: "tel:+15551234567" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Brew Haven"
copyrightText="© 2024 Brew Haven Coffee. All rights reserved. | Located at 123 Main Street, Your City, ST 12345"
columns={[
{
title: "Explore", items: [
{ label: "About Us", href: "#about" },
{ label: "Our Menu", href: "#products" },
{ label: "Testimonials", href: "#testimonials" },
{ label: "FAQ", href: "#faq" }
]
},
{
title: "Visit", items: [
{ label: "Hours", href: "#" },
{ label: "Location", href: "#" },
{ label: "Parking", href: "#" },
{ label: "Catering", href: "#" }
]
},
{
title: "Connect", items: [
{ label: "Instagram", href: "#" },
{ label: "Facebook", href: "#" },
{ label: "Email", href: "mailto:hello@brewhaven.com" },
{ label: "Contact", href: "#contact" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}