eny.space Landingpage
fix(pricing-section): adjust badge position
+74
-72
+74
-72
app/components/pricing/pricing-section.tsx
+74
-72
app/components/pricing/pricing-section.tsx
···
88
88
</div>
89
89
90
90
<div className="mx-auto mt-12 grid max-w-6xl gap-6 md:grid-cols-3">
91
-
{PLANS.map((plan) => (
91
+
{PLANS.map((plan) =>
92
92
(() => {
93
93
const params = new URLSearchParams({
94
94
auto_checkout: "1",
···
98
98
const signupHref = `/signup?${params.toString()}`;
99
99
100
100
return (
101
-
<Card
102
-
key={plan.name}
103
-
className={[
104
-
"flex h-full flex-col justify-between rounded-3xl border-none bg-gradient-to-b from-slate-900/65 to-slate-950/75 p-6 text-white shadow-xl/30",
105
-
plan.highlight
106
-
? "relative bg-gradient-to-b from-fuchsia-500/65 via-fuchsia-500/55 to-fuchsia-600/70 text-white shadow-[0_0_36px_rgba(232,121,249,0.3)]"
107
-
: "",
108
-
]
109
-
.filter(Boolean)
110
-
.join(" ")}
111
-
>
112
-
<CardHeader className="flex flex-col gap-2 px-0">
113
-
<div className="flex items-center justify-between gap-3">
114
-
<CardTitle className="text-sm font-semibold uppercase tracking-wide text-white">
115
-
{plan.name}
116
-
</CardTitle>
117
-
{plan.badge ? (
118
-
<span className="rounded-full bg-neutral-900/80 px-3 py-1 text-xs font-medium uppercase tracking-wide text-fuchsia-300 md:text-[11px]">
119
-
{plan.badge}
120
-
</span>
121
-
) : null}
122
-
</div>
123
-
<div className="mt-4 flex items-baseline gap-2">
124
-
<span className="text-4xl font-semibold sm:text-5xl text-white">
125
-
{plan.price}
126
-
</span>
127
-
<span className="text-sm font-medium opacity-80 text-white">
128
-
{plan.period}
129
-
</span>
130
-
</div>
131
-
<Paragraph className={["mt-3 text-sm text-white/70"].join(" ")}>
132
-
{plan.description}
133
-
</Paragraph>
134
-
</CardHeader>
135
-
136
-
<CardContent className="mt-6 flex flex-1 flex-col gap-6 px-0">
137
-
<ButtonLink
138
-
href={signupHref}
101
+
<Card
102
+
key={plan.name}
139
103
className={[
140
-
"w-full rounded-full px-4 py-3 text-center text-sm font-semibold uppercase tracking-wide transition",
104
+
"flex h-full flex-col justify-between rounded-3xl border-none bg-gradient-to-b from-slate-900/65 to-slate-950/75 p-6 text-white shadow-xl/30",
141
105
plan.highlight
142
-
? "bg-neutral-950 text-fuchsia-200 hover:bg-neutral-900"
143
-
: "bg-white text-neutral-950 hover:bg-neutral-200",
144
-
].join(" ")}
106
+
? "relative bg-gradient-to-b from-fuchsia-500/65 via-fuchsia-500/55 to-fuchsia-600/70 text-white shadow-[0_0_36px_rgba(232,121,249,0.3)]"
107
+
: "",
108
+
]
109
+
.filter(Boolean)
110
+
.join(" ")}
145
111
>
146
-
Get started
147
-
</ButtonLink>
112
+
<CardHeader className="flex flex-col gap-2 px-0">
113
+
<div className="flex items-center justify-between gap-3">
114
+
<CardTitle className="text-sm font-semibold uppercase tracking-wide text-white">
115
+
{plan.name}
116
+
</CardTitle>
117
+
{plan.badge ? (
118
+
<span className="absolute right-[7%] rounded-full bg-neutral-900/80 px-3 py-1 text-xs font-medium uppercase tracking-wide text-fuchsia-300 md:text-[11px]">
119
+
{plan.badge}
120
+
</span>
121
+
) : null}
122
+
</div>
123
+
<div className="mt-4 flex items-baseline gap-2">
124
+
<span className="text-4xl font-semibold sm:text-5xl text-white">
125
+
{plan.price}
126
+
</span>
127
+
<span className="text-sm font-medium opacity-80 text-white">
128
+
{plan.period}
129
+
</span>
130
+
</div>
131
+
<Paragraph
132
+
className={["mt-3 text-sm text-white/70"].join(" ")}
133
+
>
134
+
{plan.description}
135
+
</Paragraph>
136
+
</CardHeader>
137
+
138
+
<CardContent className="mt-6 flex flex-1 flex-col gap-6 px-0">
139
+
<ButtonLink
140
+
href={signupHref}
141
+
className={[
142
+
"w-full rounded-full px-4 py-3 text-center text-sm font-semibold uppercase tracking-wide transition",
143
+
plan.highlight
144
+
? "bg-neutral-950 text-fuchsia-200 hover:bg-neutral-900"
145
+
: "bg-white text-neutral-950 hover:bg-neutral-200",
146
+
].join(" ")}
147
+
>
148
+
Get started
149
+
</ButtonLink>
148
150
149
-
<div className="pt-2 text-left">
150
-
<Paragraph
151
-
className={[
152
-
"text-xs font-semibold uppercase tracking-[0.18em] text-white/60",
153
-
].join(" ")}
154
-
>
155
-
Key features on {plan.name.split(" ")[0]}
156
-
</Paragraph>
157
-
<ul className="mt-4 space-y-2 text-sm">
158
-
{plan.features.map((feature) => (
159
-
<li
160
-
key={feature}
161
-
className={["flex items-start gap-2 text-white/75"].join(
162
-
" ",
163
-
)}
151
+
<div className="pt-2 text-left">
152
+
<Paragraph
153
+
className={[
154
+
"text-xs font-semibold uppercase tracking-[0.18em] text-white/60",
155
+
].join(" ")}
164
156
>
165
-
<div className="inline-flex items-center gap-2">
166
-
<span className="inline-block size-1.5 rounded-full bg-fuchsia-400" />
167
-
<span>{feature}</span>
168
-
</div>
169
-
</li>
170
-
))}
171
-
</ul>
172
-
</div>
173
-
</CardContent>
174
-
</Card>
157
+
Key features on {plan.name.split(" ")[0]}
158
+
</Paragraph>
159
+
<ul className="mt-4 space-y-2 text-sm">
160
+
{plan.features.map((feature) => (
161
+
<li
162
+
key={feature}
163
+
className={[
164
+
"flex items-start gap-2 text-white/75",
165
+
].join(" ")}
166
+
>
167
+
<div className="inline-flex items-center gap-2">
168
+
<span className="inline-block size-1.5 rounded-full bg-fuchsia-400" />
169
+
<span>{feature}</span>
170
+
</div>
171
+
</li>
172
+
))}
173
+
</ul>
174
+
</div>
175
+
</CardContent>
176
+
</Card>
175
177
);
176
-
})()
177
-
))}
178
+
})(),
179
+
)}
178
180
</div>
179
181
</section>
180
182
);