Switch to version 1: remove src/pages/HomePage/sections/About.tsx
This commit is contained in:
@@ -1,95 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user