eny.space Landingpage
feat(pricing): add pricing section
+170
+166
app/components/pricing/pricing-section.tsx
+166
app/components/pricing/pricing-section.tsx
···
1
+
import {
2
+
Card,
3
+
CardContent,
4
+
CardHeader,
5
+
CardTitle,
6
+
} from "@/actions/components/ui/card";
7
+
import { ButtonLink } from "@/components/button-link";
8
+
import { Heading } from "@/components/heading";
9
+
import { Paragraph } from "@/components/paragraph";
10
+
11
+
type PricingPlan = {
12
+
name: string;
13
+
price: string;
14
+
period: string;
15
+
badge?: string;
16
+
description: string;
17
+
highlight?: boolean;
18
+
features: string[];
19
+
};
20
+
21
+
const PLANS: PricingPlan[] = [
22
+
{
23
+
name: "Starter plan",
24
+
price: "$19",
25
+
period: "per month",
26
+
description: "Perfect for small projects.",
27
+
features: [
28
+
"1 GB storage",
29
+
"5 app deployments",
30
+
"Basic security protocols",
31
+
"24/7 support access",
32
+
],
33
+
},
34
+
{
35
+
name: "Growth plan",
36
+
price: "$49",
37
+
period: "per month",
38
+
badge: "Popular",
39
+
description: "Scale without limits.",
40
+
highlight: true,
41
+
features: [
42
+
"10 GB storage",
43
+
"Unlimited app deployments",
44
+
"Advanced security and encryption",
45
+
"Priority support with dedicated manager",
46
+
],
47
+
},
48
+
{
49
+
name: "Pro plan",
50
+
price: "$99",
51
+
period: "per month",
52
+
description: "Enterprise‑level performance.",
53
+
features: [
54
+
"Unlimited storage",
55
+
"Custom domain support",
56
+
"Dedicated node hosting",
57
+
"Real‑time monitoring and analytics",
58
+
"Premium 24/7 support with SLA",
59
+
],
60
+
},
61
+
];
62
+
63
+
export function PricingSection() {
64
+
return (
65
+
<section className="relative w-full bg-neutral-950 px-4 py-20 sm:px-6 sm:py-24">
66
+
<div className="mx-auto max-w-5xl text-center">
67
+
<Heading
68
+
as="h2"
69
+
className="text-2xl font-semibold tracking-tight text-white sm:text-3xl md:text-4xl"
70
+
>
71
+
Flexible Pricing for Every Stage of Growth.
72
+
</Heading>
73
+
<Paragraph className="mt-4 text-sm text-white/70 sm:text-base">
74
+
From startups to enterprises, choose a plan that fits your needs. Pay
75
+
only for what you use and scale effortlessly.
76
+
</Paragraph>
77
+
</div>
78
+
79
+
<div className="mx-auto mt-12 grid max-w-6xl gap-6 md:grid-cols-3">
80
+
{PLANS.map((plan) => (
81
+
<Card
82
+
key={plan.name}
83
+
className={[
84
+
"flex h-full flex-col justify-between rounded-3xl border-none bg-gradient-to-b from-neutral-800/90 to-neutral-900/90 p-6 text-white shadow-xl/30",
85
+
plan.highlight
86
+
? "relative bg-gradient-to-b from-lime-400/90 via-lime-400/80 to-lime-500/90 text-neutral-950 shadow-[0_0_40px_rgba(190,242,100,0.4)]"
87
+
: "",
88
+
]
89
+
.filter(Boolean)
90
+
.join(" ")}
91
+
>
92
+
<CardHeader className="flex flex-col gap-2 px-0">
93
+
<div className="flex items-center justify-between gap-3">
94
+
<CardTitle className="text-sm font-semibold uppercase tracking-wide">
95
+
{plan.name}
96
+
</CardTitle>
97
+
{plan.badge ? (
98
+
<span className="rounded-full bg-neutral-900/80 px-3 py-1 text-xs font-medium uppercase tracking-wide text-lime-300 md:text-[11px]">
99
+
{plan.badge}
100
+
</span>
101
+
) : null}
102
+
</div>
103
+
<div className="mt-4 flex items-baseline gap-2">
104
+
<span className="text-4xl font-semibold sm:text-5xl">
105
+
{plan.price}
106
+
</span>
107
+
<span className="text-sm font-medium opacity-80">
108
+
{plan.period}
109
+
</span>
110
+
</div>
111
+
<Paragraph
112
+
className={[
113
+
"mt-3 text-sm",
114
+
plan.highlight ? "text-neutral-900/80" : "text-white/70",
115
+
].join(" ")}
116
+
>
117
+
{plan.description}
118
+
</Paragraph>
119
+
</CardHeader>
120
+
121
+
<CardContent className="mt-6 flex flex-1 flex-col gap-6 px-0">
122
+
<ButtonLink
123
+
href="/signup"
124
+
className={[
125
+
"w-full rounded-full px-4 py-3 text-center text-sm font-semibold uppercase tracking-wide transition",
126
+
plan.highlight
127
+
? "bg-neutral-950 text-lime-300 hover:bg-neutral-900"
128
+
: "bg-white text-neutral-950 hover:bg-neutral-200",
129
+
].join(" ")}
130
+
>
131
+
Get started
132
+
</ButtonLink>
133
+
134
+
<div className="pt-2 text-left">
135
+
<Paragraph
136
+
className={[
137
+
"text-xs font-semibold uppercase tracking-[0.18em]",
138
+
plan.highlight ? "text-neutral-900/70" : "text-white/60",
139
+
].join(" ")}
140
+
>
141
+
Key features on {plan.name.split(" ")[0]}
142
+
</Paragraph>
143
+
<ul className="mt-4 space-y-2 text-sm">
144
+
{plan.features.map((feature) => (
145
+
<li
146
+
key={feature}
147
+
className={[
148
+
"flex items-start gap-2",
149
+
plan.highlight
150
+
? "text-neutral-900/80"
151
+
: "text-white/75",
152
+
].join(" ")}
153
+
>
154
+
<span className="mt-1 inline-block size-1.5 rounded-full bg-lime-400" />
155
+
<span>{feature}</span>
156
+
</li>
157
+
))}
158
+
</ul>
159
+
</div>
160
+
</CardContent>
161
+
</Card>
162
+
))}
163
+
</div>
164
+
</section>
165
+
);
166
+
}
+2
app/page.tsx
+2
app/page.tsx
···
1
1
import { Hero } from "@/components/hero/hero";
2
2
import { LogoBar } from "@/components/logo-bar";
3
3
import { FeaturesSection } from "@/components/features";
4
+
import { PricingSection } from "@/components/pricing";
4
5
5
6
export default function Page() {
6
7
return (
···
8
9
<Hero />
9
10
<LogoBar />
10
11
<FeaturesSection />
12
+
<PricingSection />
11
13
</>
12
14
);
13
15
}