Files
fa8ef8bf-e078-475b-b5cb-57e…/src/app/about/page.tsx
2026-03-09 23:19:29 +00:00

108 lines
4.7 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Heart, Leaf, Users } from "lucide-react";
export default function AboutPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Menu", id: "/menu" },
{ name: "Reviews", id: "/reviews" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="smallMedium"
sizing="largeSmallSizeMediumTitles"
background="grid"
cardStyle="soft-shadow"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Catherine's Canteen"
navItems={navItems}
button={{
text: "Call Now", href: "tel:+1234567890"}}
/>
</div>
<div id="about-values" data-section="about-values" className="mx-auto px-4 md:px-6">
<FeatureCardTwentyFive
title="About Catherine's Canteen"
description="Our story is one of passion, quality, and community"
tag="Our Values"
tagAnimation="slide-up"
features={[
{
title: "Passion for Quality", description: "Every crepe, donut, and cup of coffee is crafted with love and attention to detail", icon: Heart,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/eat-strawberry-waffle-delicious-gourmet_1203-4129.jpg?_wi=2", imageAlt: "Fresh crepes with berries and cream"},
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-donuts-with-frosting_23-2148468161.jpg?_wi=2", imageAlt: "Colorful fresh donuts display"},
],
},
{
title: "Sustainable Practices", description: "We source ingredients responsibly and support local suppliers whenever possible", icon: Leaf,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/man-preparing-salad-with-fresh-vegetables-wooden-table-cooking-tasty-healthy-food-black-background-vegetarian-food-healthy-cooking-concept-close-up_639032-431.jpg?_wi=2", imageAlt: "Fresh ingredients preparation"},
{
imageSrc: "http://img.b2bpic.net/free-photo/natural-background-with-different-wild-berries-macro-shot_169016-24362.jpg?_wi=2", imageAlt: "Close-up of quality ingredients"},
],
},
{
title: "Community First", description: "We believe in building genuine connections with our customers and neighbors", icon: Users,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/happy-business-people-posing-indoors_1262-20190.jpg?_wi=2", imageAlt: "Smiling staff members"},
{
imageSrc: "http://img.b2bpic.net/free-photo/person-paying-using-nfc-technology_23-2149893754.jpg?_wi=2", imageAlt: "Staff helping customer"},
],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="visit-us" data-section="visit-us" className="mx-auto px-4 md:px-6">
<ContactText
text="Visit us today and experience the warmth and flavor that makes Catherine's Canteen special."
animationType="entrance-slide"
buttons={[
{
text: "Get Directions", href: "https://maps.google.com"},
]}
background={{
variant: "plain"}}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Catherine's Canteen"
leftLink={{
text: "Privacy Policy", href: "#"}}
rightLink={{
text: "Terms of Service", href: "#"}}
/>
</div>
</ThemeProvider>
);
}