eny.space Landingpage
feat(cta): add cta section
+62
-6
+1
-5
app/actions/components/site-header.tsx
app/components/site-header/site-header.tsx
+1
-5
app/actions/components/site-header.tsx
app/components/site-header/site-header.tsx
···
23
23
return (
24
24
<header className="sticky top-0 z-50 w-full border-b border-white/10 bg-neutral-950">
25
25
<div className="mx-auto flex h-14 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6">
26
-
{/* Logo */}
27
26
<Link
28
27
href="/"
29
28
className="flex items-center gap-2 font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-950"
···
39
38
<span className="text-lg">eny.space</span>
40
39
</Link>
41
40
42
-
{/* Desktop nav */}
43
41
<nav className="hidden flex-1 justify-center gap-1 md:flex">
44
42
<Link href="/" className={navLinkClass}>
45
43
Home
···
54
52
</Link>
55
53
</nav>
56
54
57
-
{/* Desktop actions */}
58
55
<div className="hidden items-center gap-2 md:flex">
59
56
{user ? (
60
57
<form action={signOut}>
···
91
88
)}
92
89
</div>
93
90
94
-
{/* Mobile menu toggle */}
95
91
<button
96
92
type="button"
97
93
aria-label="Toggle navigation"
···
106
102
</button>
107
103
</div>
108
104
109
-
{/* Mobile menu panel */}
110
105
{mobileOpen && (
111
106
<div className="border-t border-white/10 bg-neutral-950 px-4 pb-4 pt-3 md:hidden">
112
107
<nav className="flex flex-col gap-2">
···
177
172
</header>
178
173
);
179
174
}
175
+
+54
app/components/cta/cta-section.tsx
+54
app/components/cta/cta-section.tsx
···
1
+
import Image from "next/image";
2
+
import { ButtonLink } from "@/components/button-link";
3
+
import { Heading } from "@/components/heading";
4
+
import { Paragraph } from "@/components/paragraph";
5
+
import { ArrowRightIcon } from "lucide-react";
6
+
7
+
export function CTASection() {
8
+
return (
9
+
<section className="relative w-full bg-neutral-950 px-4 py-16 sm:px-6 sm:py-20">
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
+
<Heading
24
+
as="h2"
25
+
className="text-2xl font-semibold tracking-tight text-white sm:text-3xl md:text-4xl"
26
+
>
27
+
Try eny.space for Free - No Strings Attached.
28
+
</Heading>
29
+
<Paragraph className="max-w-2xl text-sm text-white/70 sm:text-base">
30
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
31
+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Deploy
32
+
your first app or website in just a few minutes.
33
+
</Paragraph>
34
+
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
+
Placeholder
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(190,242,100,0.45)] bg-lime-400 hover:bg-lime-300"
46
+
endIcon={<ArrowRightIcon className="size-4" aria-hidden />}
47
+
>
48
+
Start free trial
49
+
</ButtonLink>
50
+
</div>
51
+
</div>
52
+
</section>
53
+
);
54
+
}
+1
-1
app/layout.tsx
+1
-1
app/layout.tsx
···
2
2
import { SpeedInsights } from "@vercel/speed-insights/next";
3
3
import { Analytics } from "@vercel/analytics/next";
4
4
import { createClient } from "@/lib/supabase/server";
5
-
import { SiteHeader } from "@/actions/components/site-header";
5
+
import { SiteHeader } from "@/components/site-header";
6
6
7
7
import "./globals.css";
8
8
import { Noto_Sans } from "next/font/google";
+2
app/page.tsx
+2
app/page.tsx
···
4
4
import { PricingSection } from "@/components/pricing";
5
5
import { TestimonialsSection } from "@/components/testimonials";
6
6
import { FAQSection } from "@/components/faq";
7
+
import { CTASection } from "@/components/cta";
7
8
8
9
export default function Page() {
9
10
return (
···
14
15
<PricingSection />
15
16
<TestimonialsSection />
16
17
<FAQSection />
18
+
<CTASection />
17
19
</>
18
20
);
19
21
}