Bob AI: Added floating discount timer pill to Layout

This commit is contained in:
kudinDmitriyUp
2026-06-07 23:46:31 +00:00
parent 6de80254f8
commit ceda0d84a4

View File

@@ -4,6 +4,40 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import { Outlet } from 'react-router-dom';
import { StyleProvider } from "@/components/ui/StyleProvider";
import { useState, useEffect } from 'react';
import { Timer } from 'lucide-react';
import Button from '@/components/ui/Button';
function FloatingDiscount() {
const [timeLeft, setTimeLeft] = useState(300);
useEffect(() => {
if (timeLeft <= 0) return;
const timer = setInterval(() => setTimeLeft(t => t - 1), 1000);
return () => clearInterval(timer);
}, [timeLeft]);
const mins = Math.floor(timeLeft / 60);
const secs = timeLeft % 60;
if (timeLeft <= 0) return null;
return (
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 animate-in slide-in-from-bottom-10 fade-in duration-500">
<div className="bg-primary-cta text-primary-cta-text px-4 py-2 md:px-6 md:py-3 rounded-full shadow-2xl flex items-center gap-3 md:gap-4 border border-white/20 backdrop-blur-md whitespace-nowrap">
<div className="flex items-center gap-2 font-medium text-sm md:text-base">
<Timer className="w-4 h-4 md:w-5 md:h-5" />
<span className="hidden sm:inline">Claim 20% Off Today!</span>
<span className="sm:hidden">20% Off!</span>
</div>
<div className="bg-background/20 px-2 py-1 md:px-3 md:py-1 rounded-md font-mono font-bold tracking-wider text-sm md:text-base">
{mins}:{secs.toString().padStart(2, '0')}
</div>
<Button text="Opt In" variant="secondary" className="!py-1 !px-3 md:!py-1.5 md:!px-4 text-xs md:text-sm" />
</div>
</div>
);
}
export default function Layout() {
const navItems = [
@@ -52,6 +86,7 @@ export default function Layout() {
<main className="flex-grow">
<Outlet />
</main>
<FloatingDiscount />
<SectionErrorBoundary name="footer">
<FooterBasic
columns={[