1import { YANTRA_THEMES, yantraSvg } from "./yantra";
2
3export const OG_DEFAULT_W = 1200;
4export const OG_DEFAULT_H = 630;
5
6export function OgDefault() {
7 const { stroke, bg } = YANTRA_THEMES.light;
8 return (
9 <div
10 style={{
11 width: OG_DEFAULT_W,
12 height: OG_DEFAULT_H,
13 position: "relative",
14 background: bg,
15 color: "#2a2620",
16 fontFamily: "'Source Serif 4'",
17 }}
18 >
19 <div
20 style={{
21 position: "absolute",
22 inset: 24,
23 border: `1px solid ${stroke}`,
24 opacity: 0.18,
25 }}
26 />
27 <img
28 src={yantraSvg({ size: 512, theme: "light", output: "url" })}
29 width={260}
30 height={260}
31 style={{ position: "absolute", left: 470, top: 48 }}
32 />
33 <div
34 style={{
35 position: "absolute",
36 top: 300,
37 width: "100%",
38 textAlign: "center",
39 fontSize: 112,
40 lineHeight: 1,
41 fontStyle: "italic",
42 fontWeight: 500,
43 fontVariationSettings: "'opsz' 60",
44 letterSpacing: -2,
45 }}
46 >
47 Alchemy
48 </div>
49 <div
50 style={{
51 position: "absolute",
52 top: 442,
53 width: "100%",
54 textAlign: "center",
55 fontFamily: "'JetBrains Mono'",
56 fontSize: 18,
57 color: stroke,
58 letterSpacing: 4,
59 }}
60 >
61 {"ZERO -> PRODUCTION"}
62 </div>
63 <div
64 style={{
65 position: "absolute",
66 top: 484,
67 width: "100%",
68 textAlign: "center",
69 fontSize: 22,
70 fontWeight: 600,
71 color: "#85714f",
72 letterSpacing: 0.5,
73 }}
74 >
75 Infrastructure as Effects
76 </div>
77 <div
78 style={{
79 position: "absolute",
80 right: 48,
81 bottom: 48,
82 fontFamily: "'JetBrains Mono'",
83 fontSize: 18,
84 color: "#85714f",
85 }}
86 >
87 alchemy.run
88 </div>
89 </div>
90 );
91}