3D Layered Card Demo

1import { Badge } from "@/components/ui/badge";
2import { Clock } from "lucide-react";
3import ThreeDLayeredCard from "../ui/3d-layered-card";
4 
5function ThreeDLayeredCardDemo() {
6  return (
7    <div className="flex items-center justify-center relative z-1 max-w-4xl mx-auto overflow-hidden">
8      <div className="overflow-hidden flex flex-col items-center justify-center gap-3 relative py-24 px-4">
9        <div className="flex flex-col md:flex-row  gap-3">
10          <ThreeDLayeredCard
11            logo="/assets/images/3d-layered-card/snaplogo.svg"
12            logoSize={32}
13            mainImage="/assets/images/3d-layered-card/snap.png"
14            borderColor="#ffffff"
15            borderWidth="1px"
16            title="Snapchat"
17            backgroundColor="bg-gradient-to-b from-[#FF9901] via-[#FF9901] to-[#9b600b]"
18            shineIntensity={0.6}
19          >
20            <div className="flex flex-col items-center justify-center gap-1 px-4">
21              <Badge
22                variant="secondary"
23                className="bg-yellow-900/40 backdrop-blur-3xl text-gray-200 border-yellow-500/30 py-[1px] relative"
24              >
25                REVENUE
26              </Badge>
27              <h1 className="text-white text-[17px] font-semibold tracking-wide leading-tight text-center max-w-sm">
28                The addictive habbit of sending snaps.
29              </h1>
30              <div className="flex items-center justify-center gap-2">
31                <Clock className="h-2.5 w-2.5 text-gray-100" />
32                <span className="text-gray-100 text-xs">4 min</span>
33              </div>
34            </div>
35          </ThreeDLayeredCard>
36 
37          <ThreeDLayeredCard
38            logo="/assets/images/3d-layered-card/macdlogo.svg"
39            logoSize={44}
40            mainImage="/assets/images/3d-layered-card/macd.png"
41            borderColor="#ffffff"
42            borderWidth="1px"
43            title="McDonald's"
44            backgroundColor="bg-gradient-to-b from-red-600 to-red-500"
45            shineIntensity={0.6}
46          >
47            <div className="flex flex-col items-center justify-center gap-1 px-4">
48              <Badge
49                variant="secondary"
50                className="bg-yellow-900/40 backdrop-blur-3xl text-gray-200 border-yellow-500/30 py-[1px] relative"
51              >
52                ONBOARDING
53              </Badge>
54              <h1 className="text-white text-[17px] font-semibold tracking-wide leading-tight text-center max-w-sm">
55// … truncated