eny.space Landingpage
feat(app): update branding to eny.space, enhance layout and styling, and temporary homepage content
+81
-43
+3
-1
README.md
+3
-1
README.md
+11
-5
app/layout.tsx
+11
-5
app/layout.tsx
···
1
1
import type { Metadata } from "next";
2
2
import { SpeedInsights } from "@vercel/speed-insights/next";
3
+
import { Space_Grotesk } from "next/font/google";
3
4
4
5
import "../styles.css";
5
6
7
+
const fontSans = Space_Grotesk({
8
+
subsets: ["latin"],
9
+
weight: ["400", "500", "600", "700"],
10
+
});
11
+
6
12
interface LayoutProps {
7
13
children: React.ReactNode;
8
14
}
9
15
10
16
export const metadata: Metadata = {
11
17
title: {
12
-
default: "Easy PDS",
13
-
template: "%s | Easy PDS",
18
+
default: "eny.space",
19
+
template: "%s | eny.space",
14
20
},
15
21
twitter: {
16
22
card: "summary_large_image",
17
-
description: "Easy PDS - Hosting service platform.",
23
+
description: "eny.space – your data, your space, use it enywhere.",
18
24
},
19
25
};
20
26
21
27
export default function RootLayout({ children }: LayoutProps) {
22
28
return (
23
29
<html lang="en">
24
-
<body>
30
+
<body className={fontSans.className}>
25
31
<div className="container">
26
32
<header>
27
33
<div className="header-content">
28
-
<h1>Easy PDS</h1>
34
+
<h1>eny.space</h1>
29
35
</div>
30
36
</header>
31
37
{children}
+41
-9
app/page.tsx
+41
-9
app/page.tsx
···
3
3
import Link from "next/link";
4
4
5
5
export const metadata: Metadata = {
6
-
title: "Home",
6
+
title: "eny.space – your data, your space, use it enywhere",
7
7
};
8
8
9
9
export default function IndexPage(): JSX.Element {
10
10
return (
11
-
<ul className="card-list">
12
-
<li>
13
-
<Link href="/checkout" className="card checkout-style-background">
14
-
<h2 className="bottom">Purchase Hosting</h2>
15
-
<img src="/checkout-one-time-payments.svg" />
16
-
</Link>
17
-
</li>
18
-
</ul>
11
+
<main className="page-container">
12
+
<h1>Your own custom PDS in seconds</h1>
13
+
<h2>One-click ATProto hosting with eny.space</h2>
14
+
<p>
15
+
We're building a managed ATProto Personal Data Server (PDS)
16
+
platform so you can focus on your product while we handle the
17
+
infrastructure, scaling, and compliance.
18
+
</p>
19
+
20
+
<h3>What's coming soon</h3>
21
+
<ul>
22
+
<li>One-click provisioning of dedicated ATProto PDS instances</li>
23
+
<li>Automatic backups and seamless upgrades</li>
24
+
<li>Usage-based pricing with clear, predictable costs</li>
25
+
</ul>
26
+
27
+
<h3>Be the first to know</h3>
28
+
<p>
29
+
We're onboarding early adopters now. If you're building on
30
+
ATProto and want reliable managed hosting, we'd love to hear from
31
+
you.
32
+
</p>
33
+
34
+
<Link
35
+
href="mailto:hello@eny.space?subject=I%27d%20like%20early%20access%20to%20eny.space%20PDS"
36
+
style={{
37
+
display: "inline-block",
38
+
padding: "12px 24px",
39
+
borderRadius: 6,
40
+
marginTop: 16,
41
+
backgroundColor: "#000000",
42
+
color: "#ffffff",
43
+
border: "1px solid #ffffff",
44
+
textDecoration: "none",
45
+
fontWeight: 600,
46
+
}}
47
+
>
48
+
Request early access
49
+
</Link>
50
+
</main>
19
51
);
20
52
}
+26
-28
styles.css
+26
-28
styles.css
···
1
1
/* Variables */
2
2
:root {
3
-
--body-color: #fcfdfe;
3
+
--body-color: #050505;
4
+
--body-text-color: #f5f5f5;
4
5
--checkout-color: #8f6ed5;
5
-
--elements-color: #6772e5;
6
-
--body-font-family:
7
-
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
8
-
--h1-color: #1a1f36;
9
-
--h2-color: #7b818a;
10
-
--h3-color: #a3acb9;
6
+
--elements-color: #7c7cff;
7
+
--h1-color: #f9fafb;
8
+
--h2-color: #e5e7eb;
9
+
--h3-color: #9ca3af;
11
10
--radius: 6px;
12
11
--container-width-max: 1280px;
13
12
--page-width-max: 600px;
···
18
17
margin: 0;
19
18
padding: 0;
20
19
background: var(--body-color);
20
+
color: var(--body-text-color);
21
21
overflow-y: scroll;
22
22
}
23
23
24
24
* {
25
25
box-sizing: border-box;
26
-
font-family: var(--body-font-family);
27
-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
26
+
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
28
27
}
29
28
30
29
#__next {
···
68
67
}
69
68
70
69
a {
71
-
color: var(--checkout-color);
70
+
color: #ffffff;
72
71
text-decoration: none;
73
72
}
74
73
···
113
112
width: 33%;
114
113
margin: 0 20px 20px 0;
115
114
text-decoration: none;
116
-
box-shadow:
117
-
-20px 20px 60px #abacad,
118
-
20px -20px 60px #ffffff;
115
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6),
116
+
0 0 0 1px rgba(255, 255, 255, 0.08);
117
+
background: #0b0b0f;
119
118
}
120
119
.card h2 {
121
120
color: #fff;
···
144
143
border-radius: var(--radius);
145
144
padding: 5px 12px;
146
145
width: 100%;
147
-
background: #fff;
146
+
background: #111827;
147
+
color: var(--body-text-color);
148
148
appearance: none;
149
149
font-size: 16px;
150
150
margin-top: 10px;
···
182
182
transition: box-shadow var(--transition-duration);
183
183
}
184
184
.card.elements-style-background:hover {
185
-
box-shadow:
186
-
20px 20px 60px #464e9c,
187
-
-20px -20px 60px #8896ff;
185
+
box-shadow: 20px 20px 60px #464e9c, -20px -20px 60px #8896ff;
188
186
}
189
187
.checkout-style {
190
188
color: var(--checkout-color);
191
189
border: 1px solid var(--checkout-color);
192
190
}
193
191
.checkout-style-background {
194
-
background: var(--checkout-color);
195
-
transition: box-shadow var(--transition-duration);
192
+
background: #000000;
193
+
color: #ffffff;
194
+
border: 1px solid #ffffff;
195
+
transition: box-shadow var(--transition-duration), transform 0.15s ease;
196
196
}
197
197
.card.checkout-style-background:hover {
198
-
box-shadow:
199
-
20px 20px 60px #614b91,
200
-
-20px -20px 60px #bd91ff;
198
+
box-shadow: 0 0 0 2px #ffffff;
199
+
transform: translateY(-2px);
201
200
}
202
201
203
202
/* Test card number */
···
225
224
pre {
226
225
font-family: "SF Mono", "IBM Plex Mono", "Menlo", monospace;
227
226
font-size: 12px;
228
-
background: rgba(0, 0, 0, 0.03);
227
+
background: rgba(255, 255, 255, 0.04);
229
228
padding: 12px;
230
229
border-radius: var(--radius);
231
230
max-height: 500px;
···
237
236
max-width: 825px;
238
237
margin: 0 auto;
239
238
font-size: 14px;
240
-
background: var(--body-color);
241
-
color: #6a7c94;
239
+
background: #111827;
240
+
color: #e5e7eb;
242
241
border-radius: 50px;
243
-
box-shadow:
244
-
-20px 20px 60px #abacad,
245
-
20px -20px 60px #ffffff;
242
+
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8),
243
+
0 0 0 1px rgba(255, 255, 255, 0.08);
246
244
display: flex;
247
245
align-items: center;
248
246
box-sizing: border-box;