Terminal

1export interface TerminalProps {
2  brand: string;
3  title: string;
4  caption?: string;
5  logo?: string;
6}
7 
8export const Terminal = ({ brand, title, caption, logo }: TerminalProps) => (
9  <div
10    style={{
11      backgroundColor: "#0a0a0a",
12      color: "#fafafa",
13      display: "flex",
14      flexDirection: "column",
15      height: "100%",
16      justifyContent: "space-between",
17      padding: "80px",
18      width: "100%",
19    }}
20  >
21    <div style={{ alignItems: "center", display: "flex", gap: "16px" }}>
22      {logo ? (
23        <img
24          alt=""
25          height={44}
26          src={logo}
27          width={44}
28          style={{
29            borderRadius: "8px",
30            objectFit: "contain",
31          }}
32        />
33      ) : (
34        <div
35          style={{
36            alignItems: "center",
37            backgroundColor: "#22c55e",
38            borderRadius: "8px",
39            color: "#ffffff",
40            display: "flex",
41            fontSize: "20px",
42            fontWeight: 700,
43            height: "44px",
44            justifyContent: "center",
45            width: "44px",
46          }}
47        />
48      )}
49      <div style={{ display: "flex", fontSize: "34px", fontWeight: 700 }}>
50        {brand}
51      </div>
52    </div>
53 
54    <div style={{ display: "flex", flexDirection: "column" }}>
55      <div
56        style={{
57          display: "flex",
58          fontSize: title.length > 28 ? 84 : 104,
59          fontWeight: 800,
60          letterSpacing: "-0.02em",
61          lineHeight: 1,
62          textTransform: "uppercase",
63        }}
64      >
65        {title}
66      </div>
67      {caption ? (
68        <div
69          style={{
70            alignSelf: "flex-start",
71            backgroundColor: "rgba(250,250,250,0.06)",
72            border: "1px solid rgba(250,250,250,0.12)",
73            borderRadius: "10px",
74            color: "#22c55e",
75            display: "flex",
76            fontSize: "30px",
77            fontWeight: 600,
78            marginTop: "36px",
79            padding: "12px 24px",
80          }}
81        >
82          {caption}
83        </div>
84      ) : null}
85    </div>
86  </div>
87);