101 lines
3.5 KiB
JavaScript
101 lines
3.5 KiB
JavaScript
"use client";
|
|
import React, { useState, useEffect } from "react";
|
|
|
|
const CountdownUnit = ({ value, label }) => (
|
|
<div className="flex flex-col items-center mr-2 sm:mr-4">
|
|
<div className="text-2xl sm:text-xl md:text-xl font-bold mb-1 sm:mb-2 w-[50px] flex justify-center px-2 sm:px-4 py-1 sm:py-2 rounded bg-gradient-to-r from-[#96724f] to-yellow-700">
|
|
{value !== undefined ? value : "0"}{" "}
|
|
{/* Display '0' if value is undefined */}
|
|
</div>
|
|
<div className="text-xs sm:text-sm uppercase">{label}</div>
|
|
</div>
|
|
);
|
|
|
|
const Countdown = ({ targetDate }) => {
|
|
const [timeLeft, setTimeLeft] = useState(null); // Start with null
|
|
|
|
useEffect(() => {
|
|
const calculateTimeLeft = () => {
|
|
const difference = +new Date(targetDate) - +new Date();
|
|
let timeLeft = {};
|
|
|
|
if (difference > 0) {
|
|
timeLeft = {
|
|
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
|
|
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
|
|
minutes: Math.floor((difference / 1000 / 60) % 60),
|
|
seconds: Math.floor((difference / 1000) % 60),
|
|
};
|
|
}
|
|
|
|
return timeLeft;
|
|
};
|
|
|
|
const timer = setInterval(() => {
|
|
setTimeLeft(calculateTimeLeft());
|
|
}, 1000);
|
|
|
|
// Initial calculation
|
|
setTimeLeft(calculateTimeLeft());
|
|
|
|
return () => clearInterval(timer);
|
|
}, [targetDate]);
|
|
|
|
const timeUnits = [
|
|
{ key: "days", label: "Days" },
|
|
{ key: "hours", label: "Hours" },
|
|
{ key: "minutes", label: "Min" },
|
|
{ key: "seconds", label: "Sec" },
|
|
];
|
|
|
|
return (
|
|
<div className="flex text-white">
|
|
{timeLeft &&
|
|
timeUnits.map(({ key, label }) => (
|
|
<CountdownUnit key={key} value={timeLeft[key]} label={label} />
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const HeroTwo = () => {
|
|
return (
|
|
<div className="w-full h-[70vh] mx-auto relative flex justify-center items-center sm:my-14 my-9">
|
|
<div
|
|
className="mx-auto h-[90%] max-w-7xl bg-cover bg-center bg-no-repeat flex flex-col sm:flex-row justify-center sm:justify-end items-center relative"
|
|
style={{ backgroundImage: `url('/diwali.jpg')` }}
|
|
>
|
|
<div className="absolute inset-0 bg-black opacity-20"></div>
|
|
<div className="flex flex-col sm:flex-row justify-between items-center w-full relative z-10 px-4 sm:px-8">
|
|
{/* left count down */}
|
|
<div className="w-full sm:w-1/2 flex flex-col items-center sm:items-start mb-8 sm:mb-0">
|
|
<h1 className="text-xl sm:text-2xl text-white mb-2 sm:mb-4">
|
|
SHOP BEFORE
|
|
</h1>
|
|
<Countdown targetDate="2024-30-26T00:00:00" />
|
|
</div>
|
|
{/* right banner text content */}
|
|
<div className="w-full sm:w-[45%] text-zinc-50 p-4 rounded text-center sm:text-left">
|
|
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white my-3">
|
|
Celebrate Diwali with Early Access
|
|
</h1>
|
|
<p className="my-4 text-sm sm:text-base md:text-lg">
|
|
Place your orders by September 26th to receive your items in time
|
|
for Navaratri. Dive into the festive season with our exclusive
|
|
products!
|
|
</p>
|
|
<h2 className="mb-3 text-sm sm:text-base">
|
|
GUARANTEED DELIVERY BEFORE NAVARATRI
|
|
</h2>
|
|
<button className="px-3 py-2 text-lg sm:text-xl bg-gradient-to-r from-[#96724f] to-yellow-700">
|
|
Shop Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HeroTwo;
|