Shiori

1export interface ShioriProps {
2  background: string;
3  brand: string;
4  brandColor: string;
5  logo: string;
6  title: string;
7  titleColor: string;
8}
9 
10export const Shiori = ({
11  title,
12  background,
13  titleColor,
14  logo,
15  brand,
16  brandColor,
17}: ShioriProps) => (
18  <div
19    style={{
20      backgroundColor: background,
21      display: "flex",
22      flexDirection: "column",
23      height: "100%",
24      padding: "60px",
25      position: "relative",
26      width: "100%",
27    }}
28  >
29    <img
30      alt=""
31      height={96}
32      src={logo}
33      width={96}
34      style={{
35        borderRadius: "50%",
36        objectFit: "contain",
37      }}
38    />
39 
40    <div
41      style={{
42        bottom: "60px",
43        display: "flex",
44        justifyContent: "space-between",
45        left: "60px",
46        position: "absolute",
47        right: "60px",
48      }}
49    >
50      <div
51        style={{
52          color: brandColor,
53          flex: 0.25,
54          fontSize: "64px",
55          fontWeight: 600,
56          letterSpacing: "-0.03em",
57          lineHeight: 1.3,
58        }}
59      >
60        {brand}
61      </div>
62 
63      <div
64        style={{
65          color: titleColor,
66          flex: 0.6,
67          fontSize: "64px",
68          fontWeight: 600,
69          letterSpacing: "-0.03em",
70          lineHeight: 1.3,
71        }}
72      >
73        {title}
74      </div>
75 
76      <div style={{ flex: 0.25 }} />
77    </div>
78  </div>
79);