New

CouponBanner

Promotional banner with gradient background, coupon code, expiry countdown, and shop button

E-commercecouponpromotionsale

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add buttonnpx shadcn@latest add badge

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Button } from '@/components/ui/button';
4import { Card, CardContent } from '@/components/ui/card';
5import { Badge } from '@/components/ui/badge';
6import { Copy } from 'lucide-react';
7
8export default function CouponBanner() {
9  return (
10    <Card className="bg-gradient-to-r from-amber-500 to-orange-500 border-0 overflow-hidden">
11      <CardContent className="p-8">
12        <div className="flex flex-col lg:flex-row items-center justify-between gap-6">
13          <div className="text-center lg:text-left space-y-2">
14            <Badge className="bg-white/20 text-white border-white/30 mb-2">
15              Limited Time
16            </Badge>
17            <h2 className="text-4xl lg:text-5xl font-bold text-white">
18              FLASH SALE
19            </h2>
20            <p className="text-xl text-white/90">
21              Save 30% on all items
22            </p>
23            <p className="text-white/70">
24              Limited time offer • While supplies last
25            </p>
26          </div>
27          
28          <div className="flex flex-col items-center gap-3">
29            <div className="bg-white/10 backdrop-blur-sm border-2 border-dashed border-white/40 rounded-xl px-6 py-4">
30              <p className="text-white/70 text-sm mb-1">Coupon Code</p>
31              <div className="flex items-center gap-3">
32                <span className="text-2xl font-bold text-white tracking-wider">SAVE30</span>
33                <Button
34                  variant="ghost"
35                  size="icon"
36                  className="text-white hover:bg-white/20"
37                >
38                  <Copy className="h-5 w-5" />
39                </Button>
40              </div>
41            </div>
42            
43            <div className="flex items-center gap-2 text-white/90">
44              <span className="text-2xl font-bold">2d 14h 32m</span>
45              <span className="text-sm">remaining</span>
46            </div>
47          </div>
48          
49          <div>
50            <Button className="bg-slate-900 hover:bg-slate-800 text-white px-8 py-6 text-lg font-semibold shadow-xl">
51              Shop Now
52            </Button>
53          </div>
54        </div>
55      </CardContent>
56    </Card>
57  );
58}