'use client'; import { useEffect, useState } from 'react'; // Target Date: December 31, 2026 const targetDate = new Date('2026-12-31T23:59:59').getTime(); const SpecialOffer = () => { const [timeRemaining, setTimeRemaining] = useState(targetDate - new Date().getTime()); // useEffect for the time interval useEffect(() => { const intervalId = setInterval(() => { const difference = targetDate - new Date().getTime(); setTimeRemaining(difference); if (difference < 1000) clearInterval(intervalId); }, 1000); return () => clearInterval(intervalId); }, []); // Helper function to format the time const formatTime = (ms: number) => { const absMs = Math.abs(ms); const isNegative = ms < 0; if (absMs < 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }; const totalSeconds = Math.floor(absMs / 1000); const days = Math.floor(totalSeconds / (3600 * 24)); const hours = Math.floor((totalSeconds % (3600 * 24)) / 3600); const minutes = Math.floor((totalSeconds % 3600) / 60); const seconds = Math.floor(totalSeconds % 60); return { days, hours, minutes, seconds, isNegative }; }; const time = formatTime(timeRemaining); // Stop if complete if (timeRemaining <= 0) { return (

🥳 Sale Ended!

); } return (

{/* Left Content Section */}

Limited Time Offer

Cyber Sale Offer

Get{' '} 30% OFF {' '} when you use promo code{' '} CBRLAYOUT {' '} - limited time only!

{/* Countdown Timer Section */}

{/* Promo Code Box */}

Promo Code

CBRLAYOUT

{/*

*/}

); }; // Time Segment Component const TimeSegment = ({ value, label, isHighlighted = false, isFlipping = false, }: { value: number; label: string; isHighlighted?: boolean; isFlipping?: boolean; }) => { const displayValue = value.toString().padStart(2, '0'); const boxClasses = ` w-16 h-16 2xl:w-24 2xl:h-24 xl:w-20 sm:h-20 h-16 rounded-md flex justify-center items-center relative shadow-lg transition-all duration-300 font-mono ${isFlipping ? 'flip-animate' : ''} ${ isHighlighted ? 'bg-linear-to-b from-orange-600 to-orange-700 border-2 border-orange-400/70 shadow-[0_0_15px_rgba(255, 113, 31, 0.6)]' : 'bg-linear-to-b from-slate-800 to-slate-900 border-2 border-blue-500/50 shadow-[0_0_15px_rgba(25, 105, 255, 0.3)]' } `; const digitClasses = ` text-3xl 2xl:text-5xl xl:text-3xl font-bold leading-none font-mono ${ isHighlighted ? 'text-white drop-shadow-[0_0_10px_rgba(255,113,31,0.8)]' : 'text-blue-200 drop-shadow-[0_0_10px_rgba(25,105,255,0.6)]' } `; return (

{displayValue}

{label}

); }; // Separator Component (the colons) const Separator = () => (

); export default SpecialOffer;