From ca80d1ae0e0d168967228bbaaec3b88d2039ed42 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 7 Jun 2026 19:02:06 +0000
Subject: [PATCH] Switch to version 2: added
 src/pages/HomePage/sections/About.tsx

---
 src/pages/HomePage/sections/About.tsx | 66 +++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/pages/HomePage/sections/About.tsx

diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
new file mode 100644
index 0000000..e239202
--- /dev/null
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Wheat, Droplet, Flame } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import Button from "@/components/ui/Button";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import Tag from "@/components/ui/Tag";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-webild-section="about" className="py-24 bg-background">
+      <SectionErrorBoundary name="about">
+        <div className="max-w-content-width mx-auto px-6">
+          <div className="flex justify-center mb-12">
+            <Tag text="Our Story" />
+          </div>
+          
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch">
+            <div className="bg-card rounded-3xl p-8 md:p-12 flex flex-col justify-center">
+              <div className="flex flex-col">
+                <div className="flex flex-col gap-4 border-b border-border pb-8 mb-8">
+                  <div className="w-12 h-12 rounded-full bg-primary-cta flex items-center justify-center text-primary-cta-text">
+                    <Wheat className="w-6 h-6" />
+                  </div>
+                  <div>
+                    <h3 className="text-xl font-bold text-foreground mb-2">Artisan Dough</h3>
+                    <p className="text-muted-foreground mb-4">Hand-kneaded daily for the perfect crust.</p>
+                    <Button text="Learn more" variant="secondary" className="w-fit" />
+                  </div>
+                </div>
+
+                <div className="flex flex-col gap-4 border-b border-border pb-8 mb-8">
+                  <div className="w-12 h-12 rounded-full bg-primary-cta flex items-center justify-center text-primary-cta-text">
+                    <Droplet className="w-6 h-6" />
+                  </div>
+                  <div>
+                    <h3 className="text-xl font-bold text-foreground mb-2">Fresh Ingredients</h3>
+                    <p className="text-muted-foreground mb-4">Locally sourced vegetables and premium meats.</p>
+                    <Button text="Learn more" variant="secondary" className="w-fit" />
+                  </div>
+                </div>
+
+                <div className="flex flex-col gap-4">
+                  <div className="w-12 h-12 rounded-full bg-primary-cta flex items-center justify-center text-primary-cta-text">
+                    <Flame className="w-6 h-6" />
+                  </div>
+                  <div>
+                    <h3 className="text-xl font-bold text-foreground mb-2">Brick Oven Baked</h3>
+                    <p className="text-muted-foreground mb-4">For that irresistible smoky flavor and crispy finish.</p>
+                    <Button text="Learn more" variant="secondary" className="w-fit" />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="h-full min-h-[400px] lg:min-h-[600px] rounded-3xl overflow-hidden">
+              <ImageOrVideo 
+                imageSrc="http://img.b2bpic.net/free-photo/baked-firewood-pizza-cooked-rustic-oven-generated-by-ai_188544-14066.jpg"
+                className="w-full h-full object-cover"
+              />
+            </div>
+          </div>
+        </div>
+      </SectionErrorBoundary>
+    </div>
+  );
+}