Shadcn Registry 3

1export interface ShadcnRegistry3Props {
2  title: string;
3  credit?: string;
4  ghost?: string;
5  logo?: string;
6}
7 
8export const ShadcnRegistry3 = ({
9  title,
10  credit = "",
11  ghost = "",
12  logo = "",
13}: ShadcnRegistry3Props) => (
14  <div
15    style={{
16      backgroundColor: "#0a0a0a",
17      color: "#fafafa",
18      display: "flex",
19      flexDirection: "column",
20      height: "100%",
21      overflow: "hidden",
22      padding: "80px",
23      position: "relative",
24      width: "100%",
25    }}
26  >
27    {/* Ghost Watermark */}
28    <div
29      style={{
30        bottom: "-80px",
31        color: "rgba(255,255,255,0.04)",
32        display: "flex",
33        fontSize: "320px",
34        fontWeight: 800,
35        left: "40px",
36        letterSpacing: "-0.04em",
37        lineHeight: 0.85,
38        position: "absolute",
39        userSelect: "none",
40      }}
41    >
42      {ghost || title.split(" ")[0]}
43    </div>
44 
45    {/* Title + Badge */}
46    <div
47      style={{
48        alignItems: "flex-start",
49        display: "flex",
50        justifyContent: "space-between",
51        position: "relative",
52      }}
53    >
54      {/* Title */}
55      <div
56        style={{
57          display: "flex",
58          flexDirection: "column",
59          fontSize: title.length > 60 ? 52 : 64,
60          fontWeight: 700,
61          letterSpacing: "-0.03em",
62          lineHeight: 1.1,
63          maxWidth: "800px",
64          textWrap: "balance",
65        }}
66      >
67        {title}
68        {credit ? (
69          <div
70            style={{
71              color: "#52525b",
72              fontSize: "24px",
73              fontWeight: 400,
74              marginTop: "24px",
75            }}
76          >
77            {credit}
78          </div>
79        ) : null}
80      </div>
81 
82      {/* Badge/Logo */}
83      <div
84        style={{
85          alignItems: "center",
86          border: "3px solid rgba(255,255,255,0.2)",
87          borderRadius: "999px",
88          display: "flex",
89          flexShrink: 0,
90          height: "160px",
91          justifyContent: "center",
92          marginLeft: "40px",
93          overflow: "hidden",
94          width: "160px",
95        }}
96      >
97        {logo ? (
98          <img
99            height={140}
100            src={logo}
101            width={140}
102            style={{ borderRadius: "999px", objectFit: "cover" }}
103          />
104        ) : (
105          <div
106            style={{
107              background: "linear-gradient(135deg, #60EFFF, #0061FF)",
108              borderRadius: "999px",
109              height: "140px",
110// … truncated