Product

1export interface ProductProps {
2  brand: string;
3  title: string;
4  description: string;
5  price: string;
6  image?: string;
7  logo?: string;
8}
9 
10export const Product = ({
11  brand,
12  title,
13  description,
14  price,
15  image,
16  logo,
17}: ProductProps) => (
18  <div
19    style={{
20      backgroundColor: "#09090b",
21      color: "#fafafa",
22      display: "flex",
23      height: "100%",
24      padding: "72px",
25      width: "100%",
26    }}
27  >
28    <div
29      style={{
30        display: "flex",
31        flex: 1,
32        flexDirection: "column",
33        justifyContent: "space-between",
34        paddingRight: "56px",
35      }}
36    >
37      <div style={{ alignItems: "center", display: "flex", gap: "14px" }}>
38        {logo ? (
39          <img
40            alt=""
41            height={32}
42            src={logo}
43            width={32}
44            style={{
45              borderRadius: "10px",
46              objectFit: "contain",
47            }}
48          />
49        ) : (
50          <div
51            style={{
52              backgroundColor: "#6366f1",
53              borderRadius: "10px",
54              height: "32px",
55              width: "32px",
56            }}
57          />
58        )}
59        <div style={{ display: "flex", fontSize: "28px", fontWeight: 600 }}>
60          {brand}
61        </div>
62      </div>
63 
64      <div style={{ display: "flex", flexDirection: "column" }}>
65        <div
66          style={{
67            display: "flex",
68            fontSize: title.length > 28 ? 64 : 76,
69            fontWeight: 700,
70            letterSpacing: "-0.03em",
71            lineHeight: 1.05,
72            maxWidth: "560px",
73          }}
74        >
75          {title}
76        </div>
77        <div
78          style={{
79            color: "#a1a1aa",
80            display: "flex",
81            fontSize: "30px",
82            lineHeight: 1.4,
83            marginTop: "24px",
84            maxWidth: "520px",
85          }}
86        >
87          {description}
88        </div>
89      </div>
90 
91      <div
92        style={{
93          alignItems: "center",
94          alignSelf: "flex-start",
95          backgroundColor: "#6366f1",
96          borderRadius: "999px",
97          color: "#ffffff",
98          display: "flex",
99          fontSize: "32px",
100          fontWeight: 700,
101          padding: "14px 32px",
102        }}
103      >
104        {price}
105      </div>
106    </div>
107 
108    <div
109      style={{
110        alignItems: "center",
111        backgroundColor: "#18181b",
112        backgroundImage: image
113          ? `url(${image})`
114// … truncated