Skip to content

Commit 54700fc

Browse files
AdwaitbytesAdwaitbytes
committed
Update metadata and social sharing images
1 parent 36da4d2 commit 54700fc

5 files changed

Lines changed: 557 additions & 11 deletions

File tree

‎.claude/settings.local.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,10 @@
2929
"Bash(git -C /c/Users/adwai/Stellar-new-project log --oneline)",
3030
"Bash(find:*)",
3131
"Bash(npm test:*)",
32-
"Bash(npm run lint:*)"
32+
"Bash(npm run lint:*)",
33+
"Bash(tree:*)",
34+
"Bash(node scripts/init-db.js:*)",
35+
"Bash(timeout:*)"
3336
]
3437
}
3538
}

‎demo/next.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ const nextConfig = {
1919
protocol: 'https',
2020
hostname: 'lh3.googleusercontent.com',
2121
},
22+
{
23+
protocol: 'https',
24+
hostname: 'randomuser.me',
25+
},
2226
],
2327
},
2428

‎demo/src/app/layout.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -65,21 +65,12 @@ export const metadata: Metadata = {
6565
siteName: "STELLARAY",
6666
title: "STELLARAY - Prove Everything. Reveal Nothing.",
6767
description: "Create a Stellar blockchain wallet instantly with your Google account. Prove Everything. Reveal Nothing. Powered by zkLogin & X-Ray Protocol.",
68-
images: [
69-
{
70-
url: "/opengraph-image.svg",
71-
width: 1200,
72-
height: 630,
73-
alt: "Stellaray - ZK Wallet for Stellar",
74-
},
75-
],
7668
},
7769
twitter: {
7870
card: "summary_large_image",
7971
title: "STELLARAY - Prove Everything. Reveal Nothing.",
8072
description: "ZK-powered Stellar wallet. Prove Everything. Reveal Nothing. Powered by zkLogin & X-Ray Protocol.",
81-
images: ["/opengraph-image.svg"],
82-
creator: "@stellaray",
73+
creator: "@stellaraydotfun",
8374
},
8475
robots: {
8576
index: true,

‎demo/src/app/opengraph-image.tsx‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
import { ImageResponse } from "next/og";
2+
3+
export const runtime = "edge";
4+
5+
export const alt = "STELLARAY - Prove Everything. Reveal Nothing.";
6+
export const size = {
7+
width: 1200,
8+
height: 630,
9+
};
10+
export const contentType = "image/png";
11+
12+
export default async function Image() {
13+
return new ImageResponse(
14+
(
15+
<div
16+
style={{
17+
height: "100%",
18+
width: "100%",
19+
display: "flex",
20+
flexDirection: "column",
21+
alignItems: "center",
22+
justifyContent: "center",
23+
backgroundColor: "#0A0A0A",
24+
position: "relative",
25+
}}
26+
>
27+
{/* Background grid pattern */}
28+
<div
29+
style={{
30+
position: "absolute",
31+
inset: 0,
32+
backgroundImage:
33+
"linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px)",
34+
backgroundSize: "60px 60px",
35+
}}
36+
/>
37+
38+
{/* Gradient overlay */}
39+
<div
40+
style={{
41+
position: "absolute",
42+
inset: 0,
43+
background:
44+
"linear-gradient(to bottom, rgba(0, 102, 255, 0.1) 0%, transparent 50%, rgba(0, 212, 255, 0.1) 100%)",
45+
}}
46+
/>
47+
48+
{/* Corner accents - Top Left */}
49+
<div
50+
style={{
51+
position: "absolute",
52+
top: 40,
53+
left: 40,
54+
width: 80,
55+
height: 3,
56+
backgroundColor: "#0066FF",
57+
}}
58+
/>
59+
<div
60+
style={{
61+
position: "absolute",
62+
top: 40,
63+
left: 40,
64+
width: 3,
65+
height: 80,
66+
backgroundColor: "#0066FF",
67+
}}
68+
/>
69+
70+
{/* Corner accents - Top Right */}
71+
<div
72+
style={{
73+
position: "absolute",
74+
top: 40,
75+
right: 40,
76+
width: 80,
77+
height: 3,
78+
backgroundColor: "#00D4FF",
79+
}}
80+
/>
81+
<div
82+
style={{
83+
position: "absolute",
84+
top: 40,
85+
right: 40,
86+
width: 3,
87+
height: 80,
88+
backgroundColor: "#00D4FF",
89+
}}
90+
/>
91+
92+
{/* Corner accents - Bottom Left */}
93+
<div
94+
style={{
95+
position: "absolute",
96+
bottom: 40,
97+
left: 40,
98+
width: 80,
99+
height: 3,
100+
backgroundColor: "#00D4FF",
101+
}}
102+
/>
103+
<div
104+
style={{
105+
position: "absolute",
106+
bottom: 40,
107+
left: 40,
108+
width: 3,
109+
height: 80,
110+
backgroundColor: "#00D4FF",
111+
}}
112+
/>
113+
114+
{/* Corner accents - Bottom Right */}
115+
<div
116+
style={{
117+
position: "absolute",
118+
bottom: 40,
119+
right: 40,
120+
width: 80,
121+
height: 3,
122+
backgroundColor: "#0066FF",
123+
}}
124+
/>
125+
<div
126+
style={{
127+
position: "absolute",
128+
bottom: 40,
129+
right: 40,
130+
width: 3,
131+
height: 80,
132+
backgroundColor: "#0066FF",
133+
}}
134+
/>
135+
136+
{/* Content */}
137+
<div
138+
style={{
139+
display: "flex",
140+
flexDirection: "column",
141+
alignItems: "center",
142+
justifyContent: "center",
143+
zIndex: 10,
144+
}}
145+
>
146+
{/* Logo */}
147+
<div
148+
style={{
149+
display: "flex",
150+
alignItems: "center",
151+
gap: 16,
152+
marginBottom: 40,
153+
}}
154+
>
155+
<div
156+
style={{
157+
width: 64,
158+
height: 64,
159+
backgroundColor: "#0066FF",
160+
borderRadius: 12,
161+
display: "flex",
162+
alignItems: "center",
163+
justifyContent: "center",
164+
}}
165+
>
166+
<svg width="36" height="36" viewBox="0 0 24 24">
167+
<line
168+
x1="4"
169+
y1="4"
170+
x2="20"
171+
y2="20"
172+
stroke="white"
173+
strokeWidth="2.5"
174+
/>
175+
<line
176+
x1="20"
177+
y1="4"
178+
x2="4"
179+
y2="20"
180+
stroke="#00D4FF"
181+
strokeWidth="2.5"
182+
/>
183+
<circle cx="12" cy="12" r="2.5" fill="white" />
184+
</svg>
185+
</div>
186+
<span
187+
style={{
188+
fontSize: 48,
189+
fontWeight: 700,
190+
color: "white",
191+
letterSpacing: "-0.02em",
192+
}}
193+
>
194+
STELLA
195+
<span style={{ color: "#0066FF" }}>RAY</span>
196+
</span>
197+
</div>
198+
199+
{/* Main headline */}
200+
<h1
201+
style={{
202+
fontSize: 72,
203+
fontWeight: 700,
204+
color: "white",
205+
textAlign: "center",
206+
marginBottom: 16,
207+
letterSpacing: "-0.02em",
208+
lineHeight: 1.1,
209+
}}
210+
>
211+
Prove Everything.
212+
<br />
213+
<span
214+
style={{
215+
background: "linear-gradient(90deg, #0066FF, #00D4FF)",
216+
backgroundClip: "text",
217+
color: "transparent",
218+
}}
219+
>
220+
Reveal Nothing.
221+
</span>
222+
</h1>
223+
224+
{/* Tagline */}
225+
<p
226+
style={{
227+
fontSize: 28,
228+
color: "rgba(255, 255, 255, 0.6)",
229+
textAlign: "center",
230+
maxWidth: 800,
231+
}}
232+
>
233+
ZK-powered Stellar wallet. Sign in with Google. No seed phrases.
234+
</p>
235+
236+
{/* Badge */}
237+
<div
238+
style={{
239+
display: "flex",
240+
alignItems: "center",
241+
gap: 8,
242+
marginTop: 40,
243+
padding: "12px 24px",
244+
backgroundColor: "rgba(0, 102, 255, 0.15)",
245+
border: "1px solid rgba(0, 102, 255, 0.3)",
246+
borderRadius: 100,
247+
}}
248+
>
249+
<div
250+
style={{
251+
width: 10,
252+
height: 10,
253+
borderRadius: "50%",
254+
backgroundColor: "#0066FF",
255+
}}
256+
/>
257+
<span
258+
style={{
259+
fontSize: 20,
260+
color: "#0066FF",
261+
fontWeight: 600,
262+
}}
263+
>
264+
stellaray.fun
265+
</span>
266+
</div>
267+
</div>
268+
</div>
269+
),
270+
{
271+
...size,
272+
}
273+
);
274+
}

0 commit comments

Comments
 (0)