From e1811acf5a3d1b94d4c78e90f8e2d253fed933cd Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 05:06:06 +0000
Subject: [PATCH] Add src/app/about/page.tsx

---
 src/app/about/page.tsx | 200 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 src/app/about/page.tsx

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..0c40515
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { MapPin, Clock, Utensils, CreditCard, ParkingSquare, Accessibility } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="Le Artisan Boulangerie"
+          navItems={[
+            { name: "Signature Collection", id: "signature" },
+            { name: "Ambiance", id: "ambiance" },
+            { name: "Reviews", id: "testimonials" },
+            { name: "About", id: "/about" },
+          ]}
+          button={{
+            text: "Reserve a Table",            href: "#contact"
+          }}
+          animateOnLoad={true}
+          className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-11/12 md:w-auto"
+          navItemClassName="text-sm font-medium transition-colors hover:text-primary-cta"
+          buttonClassName="px-6 py-2 rounded-full text-sm font-medium transition-all hover:shadow-lg"
+          buttonTextClassName="font-semibold tracking-tight"
+        />
+      </div>
+
+      <div id="about" data-section="about" className="pt-32">
+        <InlineImageSplitTextAbout
+          heading={[
+            { type: "text", content: "About Le Artisan Boulangerie" },
+          ]}
+          useInvertedBackground={false}
+          containerClassName="max-w-6xl mx-auto px-4 md:px-6 py-16"
+          headingClassName="text-4xl md:text-5xl font-light tracking-tight mb-8 text-center"
+        />
+
+        <div className="max-w-4xl mx-auto px-4 md:px-6 mb-16">
+          <p className="text-lg md:text-xl text-foreground/80 leading-relaxed mb-6">
+            Le Artisan Boulangerie is a quaint, light-filled sanctuary dedicated to the art of baking and the joy of lingering. We offer classic pastries and global eats in a laid-back atmosphere where every detail has been thoughtfully curated. Whether you're seeking a quiet moment alone, a gathering with friends, or a destination for your morning coffee ritual, LAB welcomes you.
+          </p>
+          <p className="text-lg md:text-xl text-foreground/80 leading-relaxed">
+            Our commitment is simple: handcrafted excellence, curated elegance, and a space that celebrates the beauty of slowing down.
+          </p>
+        </div>
+      </div>
+
+      <div id="experience" data-section="experience">
+        <FeatureCardEight
+          title="How to Experience LAB"
+          description="We've designed every aspect of our service to make your visit seamless and enjoyable, with multiple ways to enjoy our offerings and comprehensive facilities."
+          tag="Visiting LAB"
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          features={[
+            {
+              id: 1,
+              title: "Service Options",              description: "Enjoy our pastries and dishes through delivery to your home, on-site dining at our cozy tables, or quick takeaway service when you're on the go.",              imageSrc: "http://img.b2bpic.net/free-photo/delivery-woman-smiling-with-box_23-2148622175.jpg"
+            },
+            {
+              id: 2,
+              title: "Our Offerings",              description: "Premium coffee that rivals the finest cafés, paired with our signature pastries and global dishes. Breakfast specialties available throughout the day for those who believe breakfast is the best meal.",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-coffee-cup-with-chocolate_23-2148311996.jpg"
+            },
+            {
+              id: 3,
+              title: "Accessibility & Convenience",              description: "Our wheelchair-accessible entrance ensures everyone can enjoy the LAB experience. Free street parking is available, making your visit easy and convenient.",              imageSrc: "http://img.b2bpic.net/free-photo/handicap-parking-sign_23-2148521547.jpg"
+            },
+            {
+              id: 4,
+              title: "Flexible Payments",              description: "We accept credit cards, debit cards, and NFC mobile payments for your convenience. Choose your preferred payment method—we've got you covered.",              imageSrc: "http://img.b2bpic.net/free-photo/contactless-payment-method_23-2148650862.jpg"
+            },
+          ]}
+          containerClassName="max-w-7xl mx-auto px-4 md:px-6"
+          textBoxTitleClassName="text-3xl md:text-4xl font-light tracking-tight mb-4"
+          textBoxDescriptionClassName="text-base md:text-lg text-foreground/70 max-w-3xl mb-12"
+          cardClassName="rounded-lg bg-card/50 border border-accent/20 p-6 hover:border-accent/40 transition-all duration-300 hover:shadow-md cursor-pointer"
+          cardTitleClassName="text-xl font-semibold text-foreground mb-3 flex items-center gap-3"
+          stepNumberClassName="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary-cta/10 text-primary-cta font-semibold text-sm"
+          cardDescriptionClassName="text-sm text-foreground/70 leading-relaxed"
+          mediaContainerClassName="h-64 rounded-lg overflow-hidden mb-6"
+          mediaClassName="w-full h-full object-cover"
+        />
+      </div>
+
+      <div id="details" data-section="details" className="py-16">
+        <div className="max-w-6xl mx-auto px-4 md:px-6">
+          <h2 className="text-3xl md:text-4xl font-light tracking-tight mb-12 text-center">Quick Reference Guide</h2>
+          
+          <div className="grid md:grid-cols-2 gap-8">
+            <div className="bg-card border border-accent/20 rounded-lg p-8">
+              <div className="flex items-start gap-4 mb-6">
+                <div className="w-10 h-10 rounded-full bg-primary-cta/10 flex items-center justify-center flex-shrink-0">
+                  <Accessibility className="w-5 h-5 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold text-foreground mb-2">Accessibility</h3>
+                  <p className="text-foreground/70">Wheelchair-accessible entrance for all guests</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-card border border-accent/20 rounded-lg p-8">
+              <div className="flex items-start gap-4 mb-6">
+                <div className="w-10 h-10 rounded-full bg-primary-cta/10 flex items-center justify-center flex-shrink-0">
+                  <Utensils className="w-5 h-5 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold text-foreground mb-2">Service Options</h3>
+                  <p className="text-foreground/70">Delivery • On-site Dining • Takeaway • Dine-in</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-card border border-accent/20 rounded-lg p-8">
+              <div className="flex items-start gap-4 mb-6">
+                <div className="w-10 h-10 rounded-full bg-primary-cta/10 flex items-center justify-center flex-shrink-0">
+                  <Clock className="w-5 h-5 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold text-foreground mb-2">Offerings & Timing</h3>
+                  <p className="text-foreground/70">Premium Coffee • Artisan Pastries • Global Dishes • Breakfast Specialties</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-card border border-accent/20 rounded-lg p-8">
+              <div className="flex items-start gap-4 mb-6">
+                <div className="w-10 h-10 rounded-full bg-primary-cta/10 flex items-center justify-center flex-shrink-0">
+                  <CreditCard className="w-5 h-5 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold text-foreground mb-2">Payment Methods</h3>
+                  <p className="text-foreground/70">Credit Cards • Debit Cards • NFC Mobile Payments</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-card border border-accent/20 rounded-lg p-8">
+              <div className="flex items-start gap-4 mb-6">
+                <div className="w-10 h-10 rounded-full bg-primary-cta/10 flex items-center justify-center flex-shrink-0">
+                  <ParkingSquare className="w-5 h-5 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold text-foreground mb-2">Parking</h3>
+                  <p className="text-foreground/70">Free street parking available</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-card border border-accent/20 rounded-lg p-8">
+              <div className="flex items-start gap-4 mb-6">
+                <div className="w-10 h-10 rounded-full bg-primary-cta/10 flex items-center justify-center flex-shrink-0">
+                  <MapPin className="w-5 h-5 text-primary-cta" />
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold text-foreground mb-2">Perfect For</h3>
+                  <p className="text-foreground/70">Quick visits, leisurely morning coffee, intimate gatherings, or solo escapes</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Le Artisan Boulangerie"
+          leftLink={{
+            text: "Privacy Policy",            href: "#"
+          }}
+          rightLink={{
+            text: "© 2025 All Rights Reserved",            href: "#"
+          }}
+          ariaLabel="Site footer"
+          wrapperClassName="relative w-full"
+          containerClassName="flex items-center justify-center gap-8 px-4 py-12 text-foreground/60 text-sm"
+          logoClassName="text-2xl font-light tracking-wide text-foreground"
+          linkClassName="hover:text-foreground transition-colors"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}