Showcase

1export interface ShowcaseProps {
2  title: string;
3  subtitle: string;
4  url: string;
5  accent?: string;
6}
7 
8export const Showcase = ({ title, subtitle, url, accent }: ShowcaseProps) => (
9  <div
10    style={{
11      alignItems: "center",
12      backgroundColor: "#09090b",
13      backgroundImage:
14        "radial-gradient(circle at 50% 0%, rgba(99,102,241,0.2), transparent 55%)",
15      color: "#fafafa",
16      display: "flex",
17      flexDirection: "column",
18      height: "100%",
19      overflow: "hidden",
20      paddingTop: "64px",
21      width: "100%",
22    }}
23  >
24    <div
25      style={{
26        display: "flex",
27        fontSize: "60px",
28        fontWeight: 700,
29        letterSpacing: "-0.03em",
30        textAlign: "center",
31      }}
32    >
33      {title}
34    </div>
35    <div
36      style={{
37        color: "#a1a1aa",
38        display: "flex",
39        fontSize: "28px",
40        marginTop: "14px",
41        maxWidth: "760px",
42        textAlign: "center",
43      }}
44    >
45      {subtitle}
46    </div>
47 
48    <div
49      style={{
50        backgroundColor: "#0a0a0a",
51        border: "1px solid rgba(250,250,250,0.12)",
52        borderRadius: "20px 20px 0 0",
53        boxShadow: "0 -10px 80px rgba(99,102,241,0.25)",
54        display: "flex",
55        flexDirection: "column",
56        height: "360px",
57        marginTop: "48px",
58        width: "1000px",
59      }}
60    >
61      <div
62        style={{
63          alignItems: "center",
64          borderBottom: "1px solid rgba(250,250,250,0.08)",
65          display: "flex",
66          gap: "10px",
67          padding: "20px 24px",
68        }}
69      >
70        <div
71          style={{
72            backgroundColor: "#ef4444",
73            borderRadius: "999px",
74            height: "14px",
75            width: "14px",
76          }}
77        />
78        <div
79          style={{
80            backgroundColor: "#f59e0b",
81            borderRadius: "999px",
82            height: "14px",
83            width: "14px",
84          }}
85        />
86        <div
87          style={{
88            backgroundColor: "#22c55e",
89            borderRadius: "999px",
90            height: "14px",
91            width: "14px",
92          }}
93        />
94        <div
95          style={{
96            backgroundColor: "rgba(250,250,250,0.06)",
97            borderRadius: "8px",
98            color: "#71717a",
99            display: "flex",
100            fontSize: "20px",
101            marginLeft: "20px",
102            padding: "8px 20px",
103          }}
104        >
105          {url}
106        </div>
107      </div>
108 
109// … truncated