Editorial

1export interface EditorialProps {
2  kicker: string;
3  title: string;
4  meta: string;
5  ghost?: string;
6  brand: string;
7  logo?: string;
8}
9 
10export const Editorial = ({
11  kicker,
12  title,
13  meta,
14  ghost,
15  brand,
16  logo,
17}: EditorialProps) => (
18  <div
19    style={{
20      backgroundColor: "#f5f1e9",
21      color: "#0a0a0a",
22      display: "flex",
23      flexDirection: "column",
24      height: "100%",
25      justifyContent: "space-between",
26      overflow: "hidden",
27      padding: "80px",
28      position: "relative",
29      width: "100%",
30    }}
31  >
32    <div
33      style={{
34        bottom: "-60px",
35        color: "rgba(10,10,10,0.05)",
36        display: "flex",
37        fontSize: "420px",
38        fontWeight: 800,
39        letterSpacing: "-0.04em",
40        lineHeight: 1,
41        position: "absolute",
42        right: "-20px",
43      }}
44    >
45      {ghost ?? title.split(" ")[0]}
46    </div>
47 
48    <div
49      style={{
50        alignItems: "center",
51        alignSelf: "flex-start",
52        backgroundColor: "rgba(225,29,72,0.15)",
53        borderRadius: "999px",
54        color: "#e11d48",
55        display: "flex",
56        fontSize: "26px",
57        fontWeight: 700,
58        letterSpacing: "0.04em",
59        padding: "10px 24px",
60        textTransform: "uppercase",
61      }}
62    >
63      {kicker}
64    </div>
65 
66    <div
67      style={{
68        display: "flex",
69        fontSize: title.length > 36 ? 96 : 120,
70        fontWeight: 800,
71        letterSpacing: "-0.04em",
72        lineHeight: 0.98,
73        maxWidth: "1000px",
74      }}
75    >
76      {title}
77    </div>
78 
79    <div
80      style={{
81        alignItems: "center",
82        borderTop: "2px solid rgba(10,10,10,0.15)",
83        display: "flex",
84        justifyContent: "space-between",
85        paddingTop: "28px",
86      }}
87    >
88      <div style={{ alignItems: "center", display: "flex", gap: "12px" }}>
89        {logo ? (
90          <img
91            alt=""
92            height={32}
93            src={logo}
94            width={32}
95            style={{
96              borderRadius: "6px",
97              objectFit: "contain",
98            }}
99          />
100        ) : (
101          <div
102            style={{
103              alignItems: "center",
104              backgroundColor: "#e11d48",
105              borderRadius: "6px",
106              color: "#ffffff",
107              display: "flex",
108              fontSize: "16px",
109              fontWeight: 700,
110              height: "32px",
111              justifyContent: "center",
112              width: "32px",
113            }}
114          />
115// … truncated