From c67d0d704b11cf7b5d89d85106ddf89ff4cee361 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 8 Jun 2026 10:29:37 +0000
Subject: [PATCH] Switch to version 3: added
 src/pages/HomePage/sections/About.tsx

---
 src/pages/HomePage/sections/About.tsx | 95 +++++++++++++++++++++++++++
 1 file changed, 95 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..be308ae
--- /dev/null
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+import { Wheat, Heart, Truck, Clock } from "lucide-react";
+import Tag from "@/components/ui/Tag";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+export default function AboutSection() {
+  const [timeLeft, setTimeLeft] = useState(5 * 60);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const minutes = Math.floor(timeLeft / 60);
+  const seconds = timeLeft % 60;
+
+  return (
+    <section id="about" data-webild-section="about" className="relative w-full py-24 bg-background">
+      <div className="max-w-6xl mx-auto px-6">
+        <div className="flex flex-col items-center mb-16">
+          <Tag text="Our Story" />
+        </div>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <ScrollReveal variant="slide-up" className="flex flex-col gap-8">
+            <div className="space-y-4">
+              <h2 className="text-3xl md:text-4xl font-bold text-foreground">
+                Crafting Joy, One Bake at a Time
+              </h2>
+              <p className="text-lg text-muted-foreground">
+                At Sweet Delights Bakery, we believe in the magic of fresh ingredients and traditional techniques. Every pastry, cake, and bread is baked with passion and precision, ensuring a delightful experience with every bite. From our family kitchen to your table, we bring you the taste of homemade perfection.
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-4">
+              {[
+                {
+                  icon: Wheat,
+                  title: "Premium Ingredients",
+                  description: "Sourced locally and globally for the finest quality and flavor."
+                },
+                {
+                  icon: Heart,
+                  title: "Handcrafted with Love",
+                  description: "Each item is carefully prepared by our skilled bakers."
+                },
+                {
+                  icon: Truck,
+                  title: "Convenient Delivery",
+                  description: "Freshness brought directly to your home or office."
+                }
+              ].map((item, idx) => (
+                <div key={idx} className="flex items-start gap-4 p-6 rounded-2xl bg-card">
+                  <div className="p-3 rounded-xl bg-foreground text-background shrink-0">
+                    <item.icon className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold text-foreground mb-1">{item.title}</h3>
+                    <p className="text-sm text-muted-foreground">{item.description}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ScrollReveal>
+
+          <ScrollReveal variant="slide-up" delay={0.2} className="relative h-full min-h-[500px]">
+            <div className="relative w-full h-full rounded-2xl overflow-hidden">
+              <ImageOrVideo 
+                imageSrc="http://img.b2bpic.net/free-photo/close-up-baker-hands-kneading-dough_23-2148302953.jpg"
+                className="w-full h-full object-cover absolute inset-0"
+              />
+              
+              {/* Countdown Timer Overlay */}
+              <div className="absolute top-4 right-4 bg-background/95 backdrop-blur-sm p-4 rounded-xl shadow-lg border border-border flex flex-col items-center gap-2 z-10">
+                <div className="flex items-center gap-2 text-foreground">
+                  <Clock className="w-4 h-4" />
+                  <span className="font-medium text-xs uppercase tracking-wider">Today's Offer Ends</span>
+                </div>
+                <div className="text-2xl font-bold text-foreground font-mono">
+                  {String(minutes).padStart(2, '0')}:{String(seconds).padStart(2, '0')}
+                </div>
+                <button className="mt-1 text-xs font-semibold bg-primary-cta text-primary-cta-text px-4 py-2 rounded-lg hover:opacity-90 transition-opacity w-full">
+                  Claim Discount
+                </button>
+              </div>
+            </div>
+          </ScrollReveal>
+        </div>
+      </div>
+    </section>
+  );
+}