3D Interactive Lanyard ID

1"use client";
2 
3import { useTheme } from "next-themes";
4import LanyardBadge from "@/components/ui/lanyard-badge";
5 
6export function HeroLanyardDemo() {
7  const { resolvedTheme } = useTheme();
8  const isDark = resolvedTheme === "dark";
9 
10  return (
11    <div className="relative w-full h-[560px] flex justify-center overflow-hidden bg-[#F8FAFC] dark:bg-[#060B11]">
12      {/* Soft Teal Halo */}
13      <div
14        aria-hidden="true"
15        className="pointer-events-none absolute top-[62px] w-[410px] h-[410px] translate-x-[44px] rounded-full bg-[#14B8A6]/[0.086] dark:bg-[#2DD4BF]/[0.10]"
16      />
17 
18      {/* Secondary Architectural Ghost Card */}
19      <div
20        aria-hidden="true"
21        className="pointer-events-none absolute top-[146px] w-[205px] h-[304px] translate-x-[94px] rotate-[7.5deg] rounded-[18px] overflow-hidden border border-[#E2E8F0] dark:border-[#1E293B] shadow-[0_16px_32px_rgba(15,23,42,0.10)] dark:shadow-[0_16px_32px_rgba(0,0,0,0.40)] opacity-[0.42] dark:opacity-[0.45]"
22      >
23        <img
24          src={
25            isDark
26              ? "/assets/id-card-back-architectural-dark.png"
27              : "/assets/id-card-back-architectural.png"
28          }
29          alt=""
30          className="w-full h-full object-cover"
31        />
32      </div>
33 
34      {/* Physics Lanyard Badge */}
35      <div className="relative z-20 w-full h-full">
36        <LanyardBadge
37          cardWidth={264}
38          anchorTop={-140}
39          clampY={104}
40          strapColor={isDark ? "#0B121C" : "#0F172A"}
41          inkColor="#2DD4BF"
42          metalTone={isDark ? "silver" : "warm"}
43          flipButton={false}
44          front={
45            <div className="w-full h-full relative overflow-hidden rounded-[18px] bg-white dark:bg-[#060B11] border border-[#E2E8F0] dark:border-[#2DD4BF]/25 shadow-2xl">
46              <img
47                src={
48                  isDark
49                    ? "/assets/id-card-front-v1-glasses-dark.png"
50                    : "/assets/id-card-front-v1-glasses.png"
51                }
52                alt="Nor Azwan - ID Card Front"
53                className="w-full h-full object-cover pointer-events-none select-none"
54                draggable={false}
55              />
56            </div>
57          }
58          back={
59            <div className="w-full h-full relative overflow-hidden rounded-[18px] bg-[#0F172A] dark:bg-[#060B11] border border-[#334155] dark:border-[#2DD4BF]/25 shadow-2xl">
60              <img
61                src={
62                  isDark
63                    ? "/assets/id-card-back-architectural-dark.png"
64                    : "/assets/id-card-back-architectural.png"
65                }
66                alt="Nor Azwan - ID Card Back"
67                className="w-full h-full object-cover pointer-events-none select-none"
68                draggable={false}
69              />
70            </div>
71          }
72        />
73      </div>
74    </div>
75  );
76}
77