Switch to version 1: remove src/pages/HomePage/sections/About.tsx
This commit is contained in:
@@ -1,73 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Wheat, Heart, Truck } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import Tag from "@/components/ui/Tag";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
const [timeLeft, setTimeLeft] = useState(300);
|
||||
|
||||
useEffect(() => {
|
||||
if (timeLeft <= 0) return;
|
||||
const timerId = setInterval(() => {
|
||||
setTimeLeft(prev => prev - 1);
|
||||
}, 1000);
|
||||
return () => clearInterval(timerId);
|
||||
}, [timeLeft]);
|
||||
|
||||
const minutes = Math.floor(timeLeft / 60);
|
||||
const seconds = timeLeft % 60;
|
||||
|
||||
return (
|
||||
<div id="about" data-webild-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<section className="py-24 bg-background">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<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-16 items-center">
|
||||
<div className="space-y-6">
|
||||
<div className="bg-card p-6 rounded-2xl">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-xl bg-primary-cta flex items-center justify-center mb-4">
|
||||
<Wheat className="w-5 h-5 text-primary-cta-text" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">Premium Ingredients</h3>
|
||||
<p className="text-muted-foreground">Sourced locally and globally for the finest quality and flavor.</p>
|
||||
</div>
|
||||
<div className="bg-card p-6 rounded-2xl">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-xl bg-primary-cta flex items-center justify-center mb-4">
|
||||
<Heart className="w-5 h-5 text-primary-cta-text" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">Handcrafted with Love</h3>
|
||||
<p className="text-muted-foreground">Each item is carefully prepared by our skilled bakers.</p>
|
||||
</div>
|
||||
<div className="bg-card p-6 rounded-2xl">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-xl bg-primary-cta flex items-center justify-center mb-4">
|
||||
<Truck className="w-5 h-5 text-primary-cta-text" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">Convenient Delivery</h3>
|
||||
<p className="text-muted-foreground">Freshness brought directly to your home or office.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="relative rounded-2xl overflow-hidden aspect-[4/3]">
|
||||
<ImageOrVideo
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-baker-hands-kneading-dough_23-2148302953.jpg"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute top-4 right-4 bg-primary-cta text-primary-cta-text px-4 py-2 rounded-lg shadow-lg flex flex-col items-center">
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wider mb-1 opacity-80">Discount Ends In</span>
|
||||
<span className="text-xl font-bold font-mono">
|
||||
{String(minutes).padStart(2, '0')}:{String(seconds).padStart(2, '0')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user