Owner

1export interface OwnerProps {
2  eyebrow: string;
3  title: string;
4  brand: string;
5  images: string[];
6  logo?: string;
7}
8 
9export const Owner = ({ eyebrow, title, brand, images, logo }: OwnerProps) => (
10  <div
11    style={{
12      backgroundColor: "#f5f5f5",
13      color: "#1a1a1a",
14      display: "flex",
15      flexDirection: "column",
16      height: "100%",
17      padding: "8px",
18      width: "100%",
19    }}
20  >
21    <div
22      style={{
23        backgroundColor: "#ffffff",
24        borderRadius: "56px",
25        display: "flex",
26        flexDirection: "column",
27        height: "100%",
28        overflow: "hidden",
29        padding: "48px",
30        position: "relative",
31        width: "100%",
32      }}
33    >
34      <div
35        style={{
36          color: "#a3a3a3",
37          display: "flex",
38          fontSize: "64px",
39          fontWeight: 600,
40          letterSpacing: "-0.03em",
41          lineHeight: 1.05,
42        }}
43      >
44        {eyebrow}
45      </div>
46 
47      <div
48        style={{
49          display: "flex",
50          fontSize: "64px",
51          fontWeight: 600,
52          letterSpacing: "-0.03em",
53          lineHeight: 1.05,
54          maxWidth: "800px",
55        }}
56      >
57        {title}
58      </div>
59 
60      <div
61        style={{
62          alignItems: "flex-end",
63          bottom: "0px",
64          display: "flex",
65          gap: "16px",
66          left: "48px",
67          position: "absolute",
68          right: "48px",
69        }}
70      >
71        {images.map((src, i) => (
72          <div
73            key={i}
74            style={{
75              borderRadius: "24px 24px 0 0",
76              display: "flex",
77              flex: 1,
78              height: i === 1 ? "300px" : "260px",
79              overflow: "hidden",
80            }}
81          >
82            <img
83              alt=""
84              src={src}
85              style={{
86                borderRadius: "24px 24px 0 0",
87                height: "100%",
88                objectFit: "cover",
89                width: "100%",
90              }}
91            />
92          </div>
93        ))}
94      </div>
95 
96      <div
97        style={{
98          alignItems: "center",
99          display: "flex",
100          gap: "8px",
101          position: "absolute",
102          right: "36px",
103          top: "36px",
104        }}
105      >
106        {logo ? (
107          <img
108            alt=""
109            height={32}
110            src={logo}
111            width={32}
112            style={{
113              borderRadius: "8px",
114              objectFit: "contain",
115            }}
116// … truncated