Simple

1export interface SimpleProps {
2  label: string;
3  title: string;
4  description: string;
5  brand: string;
6  logo?: string;
7}
8 
9export const Simple = ({
10  label,
11  title,
12  description,
13  brand,
14  logo,
15}: SimpleProps) => (
16  <div
17    style={{
18      alignItems: "center",
19      backgroundColor: "#09090b",
20      backgroundImage:
21        "radial-gradient(circle at 50% 0%, rgba(124,58,237,0.18), transparent 55%)",
22      color: "#fafafa",
23      display: "flex",
24      flexDirection: "column",
25      height: "100%",
26      justifyContent: "center",
27      padding: "96px",
28      width: "100%",
29    }}
30  >
31    <div
32      style={{
33        alignItems: "center",
34        backgroundColor: "rgba(250,250,250,0.04)",
35        border: "1px solid rgba(250,250,250,0.12)",
36        borderRadius: "999px",
37        color: "#d4d4d8",
38        display: "flex",
39        fontSize: "24px",
40        fontWeight: 500,
41        gap: "12px",
42        letterSpacing: "0.04em",
43        padding: "8px 18px",
44        textTransform: "uppercase",
45      }}
46    >
47      <div
48        style={{
49          backgroundColor: "#7c3aed",
50          borderRadius: "999px",
51          height: "10px",
52          width: "10px",
53        }}
54      />
55      {label}
56    </div>
57 
58    <div
59      style={{
60        display: "flex",
61        fontSize: title.length > 40 ? 64 : 76,
62        fontWeight: 700,
63        letterSpacing: "-0.03em",
64        lineHeight: 1.05,
65        marginTop: "40px",
66        maxWidth: "900px",
67        textAlign: "center",
68      }}
69    >
70      {title}
71    </div>
72 
73    <div
74      style={{
75        color: "#a1a1aa",
76        display: "flex",
77        fontSize: "32px",
78        lineHeight: 1.4,
79        marginTop: "28px",
80        maxWidth: "760px",
81        textAlign: "center",
82      }}
83    >
84      {description}
85    </div>
86 
87    <div
88      style={{
89        alignItems: "center",
90        bottom: "56px",
91        color: "#fafafa",
92        display: "flex",
93        fontSize: "26px",
94        fontWeight: 600,
95        gap: "12px",
96        position: "absolute",
97      }}
98    >
99      {logo ? (
100        <img
101          alt=""
102          height={28}
103          src={logo}
104          width={28}
105          style={{
106            borderRadius: "6px",
107            objectFit: "contain",
108          }}
109        />
110      ) : (
111        <div
112          style={{
113            backgroundColor: "#7c3aed",
114            borderRadius: "8px",
115            height: "28px",
116            width: "28px",
117          }}
118        />
119      )}
120      {brand}
121    </div>
122  </div>
123);