eny.space Landingpage
feat(landing): prelaunch gating, content fixes and UI tweaks
+38
-51
+19
-29
app/components/cta/cta-section.tsx
+19
-29
app/components/cta/cta-section.tsx
···
1
-
import Image from "next/image";
2
1
import { ButtonLink } from "@/components/button-link";
3
2
import { Heading } from "@/components/heading";
4
3
import { Paragraph } from "@/components/paragraph";
5
4
import { ArrowRightIcon } from "lucide-react";
5
+
import { prelaunch } from "@/lib/prelaunch";
6
6
7
7
export function CTASection() {
8
8
return (
9
9
<section className="relative w-full px-4 py-16 sm:px-6 sm:py-20">
10
10
<div className="mx-auto flex max-w-5xl flex-col items-center gap-6 text-center sm:gap-7">
11
-
<div className="flex items-center gap-2 text-white/80">
12
-
<Image
13
-
src="/logo.svg"
14
-
alt="eny.space"
15
-
width={40}
16
-
height={40}
17
-
className="shrink-0"
18
-
/>
19
-
<Paragraph className="text-xs font-semibold uppercase tracking-[0.2em]">
20
-
eny.space
21
-
</Paragraph>
22
-
</div>
23
11
<Heading
24
12
as="h2"
25
13
className="text-2xl font-semibold tracking-tight text-white sm:text-3xl md:text-4xl"
···
32
20
JSON—then upgrade to dedicated hosting when you're ready.
33
21
</Paragraph>
34
22
35
-
<div className="mt-2 flex flex-wrap items-center justify-center gap-3">
36
-
<ButtonLink
37
-
href="/demo"
38
-
className="border border-white/30 bg-transparent px-6 text-xs font-semibold uppercase tracking-wide text-white hover:border-white hover:bg-white/10"
39
-
endIcon={<ArrowRightIcon className="size-4" aria-hidden />}
40
-
>
41
-
Open PDS UI demo
42
-
</ButtonLink>
43
-
<ButtonLink
44
-
href="/signup"
45
-
className="px-6 text-xs font-semibold uppercase tracking-wide text-neutral-950 shadow-[0_0_40px_rgba(232,121,249,0.45)] bg-fuchsia-400 hover:bg-fuchsia-300"
46
-
endIcon={<ArrowRightIcon className="size-4" aria-hidden />}
47
-
>
48
-
Start free trial
49
-
</ButtonLink>
50
-
</div>
23
+
{!prelaunch && (
24
+
<div className="mt-2 flex flex-wrap items-center justify-center gap-3">
25
+
<ButtonLink
26
+
href="/demo"
27
+
className="border border-white/30 bg-transparent px-6 text-xs font-semibold uppercase tracking-wide text-white hover:border-white hover:bg-white/10"
28
+
endIcon={<ArrowRightIcon className="size-4" aria-hidden />}
29
+
>
30
+
Open PDS UI demo
31
+
</ButtonLink>
32
+
<ButtonLink
33
+
href="/signup"
34
+
className="px-6 text-xs font-semibold uppercase tracking-wide text-neutral-950 shadow-[0_0_40px_rgba(232,121,249,0.45)] bg-fuchsia-400 hover:bg-fuchsia-300"
35
+
endIcon={<ArrowRightIcon className="size-4" aria-hidden />}
36
+
>
37
+
Start free trial
38
+
</ButtonLink>
39
+
</div>
40
+
)}
51
41
</div>
52
42
</section>
53
43
);
+2
-2
app/components/faq/faq-section.tsx
+2
-2
app/components/faq/faq-section.tsx
···
63
63
Answers to the most common questions about managed PDS hosting and the
64
64
eny.space PDS browser. If you can't find what you're looking for, feel
65
65
free to{" "}
66
-
<span className="font-semibold text-white">
66
+
<a href="mailto:hello@krekeny.com" className="font-semibold text-white underline underline-offset-2 hover:text-white/80">
67
67
reach out to our friendly team
68
-
</span>
68
+
</a>
69
69
.
70
70
</Paragraph>
71
71
</div>
+8
-12
app/components/pricing/pricing-section.tsx
+8
-12
app/components/pricing/pricing-section.tsx
···
116
116
as="h2"
117
117
className="text-2xl font-semibold tracking-tight text-white sm:text-3xl md:text-4xl"
118
118
>
119
-
Flexible Pricing for Every Stage of Growth.
119
+
Simple Pricing for Individuals, Developers and Communities.
120
120
</Heading>
121
121
<Paragraph className="mt-4 text-sm text-white/70 sm:text-base">
122
-
From startups to enterprises, choose a plan that fits your needs. Pay
123
-
only for what you use and scale effortlessly.
122
+
Whether you're an indie developer, a power user, or running a
123
+
community.
124
+
<br />
125
+
Pick a plan that fits and own your data without managing
126
+
infrastructure.
124
127
</Paragraph>
125
128
</div>
126
129
···
159
162
</div>
160
163
<div className="mt-4 flex items-baseline gap-2">
161
164
<span className="text-4xl font-semibold sm:text-5xl text-white">
162
-
{(() => {
163
-
const key = plan.key as PlanKey;
164
-
const fromStripe = formatStripePrice(
165
-
stripeAmounts[key]?.unitAmount ?? null,
166
-
stripeAmounts[key]?.currency ?? null,
167
-
);
168
-
return fromStripe ?? plan.price;
169
-
})()}
165
+
?€
170
166
</span>
171
167
<span className="text-sm font-medium opacity-80 text-white">
172
168
{plan.period}
···
219
215
</CardContent>
220
216
</Card>
221
217
);
222
-
})(),
218
+
})()
223
219
)}
224
220
</div>
225
221
</section>
+3
-3
app/components/site-header/site-header.tsx
+3
-3
app/components/site-header/site-header.tsx
···
76
76
<div className="mx-auto flex h-14 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6">
77
77
<Link
78
78
href="/"
79
-
className="flex items-center gap-2 font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30"
79
+
className="flex items-center gap-2 text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30"
80
80
onClick={() => setMobileOpen(false)}
81
81
>
82
82
<Image
83
83
src="/logo.svg"
84
84
alt=""
85
-
width={40}
86
-
height={40}
85
+
width={32}
86
+
height={32}
87
87
className="shrink-0"
88
88
/>
89
89
-2
app/page.tsx
-2
app/page.tsx
···
2
2
import { LogoBar } from "@/components/logo-bar";
3
3
import { FeaturesSection } from "@/components/features";
4
4
import { PricingSection } from "@/components/pricing";
5
-
import { TestimonialsSection } from "@/components/testimonials";
6
5
import { FAQSection } from "@/components/faq";
7
6
import { CTASection } from "@/components/cta";
8
7
···
13
12
<LogoBar />
14
13
<FeaturesSection />
15
14
<PricingSection />
16
-
<TestimonialsSection />
17
15
<FAQSection />
18
16
<CTASection />
19
17
</>