Grid

1export interface GridProps {
2  title: string;
3  description: string;
4  brand: string;
5  logo?: string;
6}
7 
8export const Grid = ({ title, description, brand, logo = "" }: GridProps) => (
9  <div
10    style={{
11      backgroundColor: "#0a0a0a",
12      color: "#ffffff",
13      display: "flex",
14      height: "100%",
15      position: "relative",
16      width: "100%",
17    }}
18  >
19    <div
20      style={{
21        borderLeft: "1px dashed #44403c",
22        bottom: 0,
23        left: "64px",
24        position: "absolute",
25        top: 0,
26        width: "1px",
27      }}
28    />
29    <div
30      style={{
31        borderLeft: "1px dashed #44403c",
32        bottom: 0,
33        position: "absolute",
34        right: "64px",
35        top: 0,
36        width: "1px",
37      }}
38    />
39    <div
40      style={{
41        borderTop: "1px dashed #44403c",
42        height: "1px",
43        left: 0,
44        position: "absolute",
45        right: 0,
46        top: "64px",
47      }}
48    />
49    <div
50      style={{
51        borderTop: "1px dashed #44403c",
52        bottom: "64px",
53        height: "1px",
54        left: 0,
55        position: "absolute",
56        right: 0,
57      }}
58    />
59 
60    <div
61      style={{
62        bottom: "128px",
63        display: "flex",
64        flexDirection: "column",
65        justifyContent: "center",
66        left: "128px",
67        position: "absolute",
68        right: "128px",
69        top: "128px",
70        width: "896px",
71      }}
72    >
73      <div
74        style={{
75          display: "flex",
76          flexGrow: 1,
77          fontSize: title && title.length > 20 ? 64 : 80,
78          fontWeight: 600,
79          letterSpacing: "-0.04em",
80          lineHeight: 1.1,
81          textWrap: "balance",
82        }}
83      >
84        {title}
85      </div>
86      <div
87        style={{
88          color: "#a8a29e",
89          display: "flex",
90          flexGrow: 1,
91          fontSize: "40px",
92          fontWeight: 500,
93          lineHeight: 1.5,
94          marginTop: "24px",
95          textWrap: "balance",
96        }}
97      >
98        {description}
99      </div>
100    </div>
101 
102    <div
103      style={{
104        alignItems: "center",
105        bottom: "96px",
106        display: "flex",
107        gap: "14px",
108        position: "absolute",
109        right: "96px",
110      }}
111    >
112      {logo ? (
113        <img
114          alt=""
115          height={48}
116          src={logo}
117          width={48}
118          style={{
119            borderRadius: "12px",
120            objectFit: "contain",
121          }}
122        />
123      ) : (
124        <div
125          style={{
126// … truncated