Logo

1export interface LogoProps {
2  brand: string;
3  tagline?: string;
4  monogram?: string;
5  background: string;
6  logo?: string;
7}
8 
9export const Logo = ({
10  brand,
11  tagline,
12  monogram,
13  background,
14  logo = "",
15}: LogoProps) => {
16  const isColor = background.startsWith("#");
17 
18  return (
19    <div
20      style={{
21        alignItems: "center",
22        backgroundColor: isColor ? background : "#09090b",
23        backgroundImage: isColor
24          ? `radial-gradient(circle at 50% 50%, rgba(124,58,237,0.2), transparent 60%)`
25          : background,
26        color: "#fafafa",
27        display: "flex",
28        flexDirection: "column",
29        height: "100%",
30        justifyContent: "center",
31        width: "100%",
32      }}
33    >
34      {logo ? (
35        <img
36          alt=""
37          height={140}
38          src={logo}
39          width={140}
40          style={{
41            borderRadius: "28px",
42            objectFit: "contain",
43          }}
44        />
45      ) : (
46        <div
47          style={{
48            alignItems: "center",
49            backgroundColor: "#7c3aed",
50            borderRadius: "28px",
51            boxShadow: "0 24px 80px rgba(124,58,237,0.33)",
52            color: "#ffffff",
53            display: "flex",
54            fontSize: "72px",
55            fontWeight: 800,
56            height: "140px",
57            justifyContent: "center",
58            width: "140px",
59          }}
60        >
61          {monogram}
62        </div>
63      )}
64 
65      <div
66        style={{
67          display: "flex",
68          fontSize: "96px",
69          fontWeight: 800,
70          letterSpacing: "-0.04em",
71          marginTop: "44px",
72        }}
73      >
74        {brand}
75      </div>
76 
77      {tagline ? (
78        <div
79          style={{
80            color: "#a1a1aa",
81            display: "flex",
82            fontSize: "32px",
83            marginTop: "16px",
84          }}
85        >
86          {tagline}
87        </div>
88      ) : null}
89    </div>
90  );
91};