development
tsx 366 lines 15.8 KB
Raw
1 import type { Metadata } from "next";
2 import Link from "next/link";
3 import { StructuredData } from "@/components/structured-data";
4 import { absoluteUrl, genPageMetadata } from "../seo";
5
6 const comparisonRows = [
7 {
8 label: "What it is",
9 smbcloud:
10 "A data layer service managed inside your smbCloud project, alongside Deploy, Auth, and Mail.",
11 planetscale:
12 "A MySQL-compatible serverless database platform with a Git-like schema branching workflow.",
13 },
14 {
15 label: "Best fit",
16 smbcloud:
17 "Teams that want database management without a separate platform or schema branch workflow.",
18 planetscale:
19 "Teams that need a highly scalable MySQL-compatible database with developer-friendly schema migrations.",
20 },
21 {
22 label: "Schema workflow",
23 smbcloud:
24 "Standard migration tooling that comes with your app framework. No separate branching required.",
25 planetscale:
26 "Branch-based schema changes with non-blocking migrations as a core feature.",
27 },
28 {
29 label: "Platform scope",
30 smbcloud:
31 "Narrow. The data layer is one service in a broader stack, not a standalone product.",
32 planetscale:
33 "Database-first. Deep investment in schema management, analytics, and scaling features.",
34 },
35 {
36 label: "Why teams pick it",
37 smbcloud:
38 "Because they want less tooling to learn and a database that fits naturally into one platform.",
39 planetscale:
40 "Because they want best-in-class MySQL scalability and a thoughtful schema branching story.",
41 },
42 ];
43
44 const smbcloudFits = [
45 "You want database management inside the same platform you use for deploys and auth.",
46 "You do not need MySQL-specific features or PlanetScale's branching workflow.",
47 "You prefer fewer specialised tools and a smaller operational footprint.",
48 "Your app uses PostgreSQL or a standard relational setup.",
49 ];
50
51 const planetscaleStillFits = [
52 "You need MySQL-compatible databases at serious scale.",
53 "Your team relies on schema branching and non-blocking migrations.",
54 "You want a database-first platform with deep analytics and insight tooling.",
55 "You are already using PlanetScale's SDK or Serverless Driver for edge deployments.",
56 ];
57
58 const faqs = [
59 {
60 question: "Is smbCloud GresIQ a PlanetScale replacement?",
61 answer:
62 "For teams that want a simpler data layer without MySQL or schema branching, it can be. If you only used PlanetScale as a managed relational database and never leaned on its branching model, GresIQ is worth evaluating.",
63 },
64 {
65 question: "Does GresIQ support MySQL?",
66 answer:
67 "GresIQ is focused on relational database management and is built to work alongside the smbCloud stack. It is not a MySQL-specific platform the way PlanetScale is.",
68 },
69 {
70 question: "What happens to my schema migrations with GresIQ?",
71 answer:
72 "You use your framework's standard migration tooling. GresIQ handles connection and service management. It does not add a new migration layer on top of your existing workflow.",
73 },
74 {
75 question: "Who should consider switching from PlanetScale to GresIQ?",
76 answer:
77 "Teams using PlanetScale mainly as a hosted relational database who do not depend on its branching model and would prefer to consolidate tooling under one platform.",
78 },
79 ];
80
81 export const metadata: Metadata = {
82 ...genPageMetadata({
83 title: "PlanetScale alternative for teams that want less tooling",
84 description:
85 "Looking for a PlanetScale alternative? smbCloud GresIQ manages the data layer inside the same platform as your app, auth, and mail, with no schema branching workflow required.",
86 path: "/planetscale-alternative",
87 keywords: [
88 "PlanetScale alternative",
89 "PlanetScale replacement",
90 "managed database service",
91 "GresIQ database",
92 "smbCloud GresIQ",
93 "database without branching",
94 "relational database platform",
95 ],
96 }),
97 };
98
99 const structuredData = {
100 "@context": "https://schema.org",
101 "@graph": [
102 {
103 "@type": "WebPage",
104 "@id": absoluteUrl("/planetscale-alternative#webpage"),
105 url: absoluteUrl("/planetscale-alternative"),
106 name: "PlanetScale alternative for teams that want less tooling",
107 description:
108 "Compare smbCloud GresIQ and PlanetScale for teams that want a simpler data layer without branch-based schema management.",
109 isPartOf: {
110 "@id": absoluteUrl("/#website"),
111 },
112 },
113 {
114 "@type": "BreadcrumbList",
115 itemListElement: [
116 {
117 "@type": "ListItem",
118 position: 1,
119 name: "Home",
120 item: absoluteUrl("/"),
121 },
122 {
123 "@type": "ListItem",
124 position: 2,
125 name: "PlanetScale alternative",
126 item: absoluteUrl("/planetscale-alternative"),
127 },
128 ],
129 },
130 {
131 "@type": "FAQPage",
132 mainEntity: faqs.map((faq) => ({
133 "@type": "Question",
134 name: faq.question,
135 acceptedAnswer: {
136 "@type": "Answer",
137 text: faq.answer,
138 },
139 })),
140 },
141 ],
142 };
143
144 export default function PlanetScaleAlternativePage() {
145 return (
146 <div>
147 <StructuredData data={structuredData} />
148
149 <section className="relative overflow-hidden px-6 pt-24 pb-16 sm:pt-32 sm:pb-20 lg:px-8">
150 <div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[520px] bg-[radial-gradient(ellipse_75%_50%_at_50%_0%,rgba(99,102,241,0.18),transparent)] dark:bg-[radial-gradient(ellipse_75%_50%_at_50%_0%,rgba(99,102,241,0.12),transparent)]" />
151
152 <div className="mx-auto max-w-4xl">
153 <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50 px-4 py-1.5 dark:border-indigo-500/30 dark:bg-indigo-500/10">
154 <span className="h-1.5 w-1.5 rounded-full bg-indigo-500" />
155 <span className="text-xs font-semibold uppercase tracking-widest text-indigo-700 dark:text-indigo-400">
156 GresIQ comparison
157 </span>
158 </div>
159
160 <h1 className="max-w-3xl text-4xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-6xl leading-[1.05]">
161 Looking for a PlanetScale alternative?
162 </h1>
163
164 <p className="mt-6 max-w-3xl text-lg leading-8 text-slate-600 dark:text-slate-400">
165 PlanetScale is a serious platform for teams that need MySQL at
166 scale. But most teams do not need branch-based schema management.
167 smbCloud GresIQ manages the data layer inside the same platform as
168 your app, auth, and mail, with your normal migration workflow and
169 nothing extra to learn.
170 </p>
171
172 <div className="mt-8 flex flex-col gap-4 sm:flex-row">
173 <Link
174 href="https://console.smbcloud.xyz"
175 target="_blank"
176 rel="noopener noreferrer"
177 className="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-8 py-3.5 text-sm font-semibold text-white shadow-lg shadow-indigo-500/20 transition-all hover:bg-indigo-500 hover:shadow-indigo-500/30 active:scale-[0.98]"
178 >
179 Try smbCloud GresIQ
180 </Link>
181 <Link
182 href="/services"
183 className="inline-flex items-center justify-center rounded-lg border border-slate-300 px-8 py-3.5 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-white/[0.12] dark:text-slate-200 dark:hover:bg-white/[0.04]"
184 >
185 See all services
186 </Link>
187 </div>
188 </div>
189 </section>
190
191 <section className="px-6 pb-24 lg:px-8">
192 <div className="mx-auto max-w-5xl grid gap-8 lg:grid-cols-[0.95fr_1.05fr]">
193 <div>
194 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
195 Why teams look beyond PlanetScale
196 </p>
197 <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
198 Usually they needed a managed database. The branching came along
199 for the ride.
200 </h2>
201 <p className="mt-5 text-base leading-8 text-slate-600 dark:text-slate-400">
202 PlanetScale built something genuinely impressive around schema
203 branching. But for most small teams shipping Rails, Node.js, or
204 Vapor apps, standard migrations already work fine. GresIQ skips
205 the extra model and keeps the database close to the rest of your
206 stack.
207 </p>
208 </div>
209
210 <div className="rounded-2xl border border-slate-200 bg-slate-50 p-8 dark:border-white/[0.06] dark:bg-white/[0.02]">
211 <p className="text-sm font-semibold text-slate-900 dark:text-white">
212 What GresIQ does well
213 </p>
214 <ul className="mt-5 space-y-4 text-sm leading-7 text-slate-600 dark:text-slate-400">
215 <li className="flex gap-3">
216 <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
217 <span>Database service management inside the same platform as your app and auth.</span>
218 </li>
219 <li className="flex gap-3">
220 <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
221 <span>No new migration model. Use the tooling that ships with your framework.</span>
222 </li>
223 <li className="flex gap-3">
224 <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
225 <span>Smaller surface area and fewer accounts to manage.</span>
226 </li>
227 </ul>
228 </div>
229 </div>
230 </section>
231
232 <section className="border-t border-slate-200 px-6 py-24 dark:border-white/[0.06] lg:px-8">
233 <div className="mx-auto max-w-5xl">
234 <div className="mb-12 max-w-3xl">
235 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
236 smbCloud GresIQ vs PlanetScale
237 </p>
238 <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
239 Here is the trade, without the usual sales fog.
240 </h2>
241 </div>
242
243 <div className="overflow-hidden rounded-2xl border border-slate-200 dark:border-white/[0.06]">
244 <div className="grid grid-cols-[0.8fr_1fr_1fr] bg-slate-50 text-sm font-semibold text-slate-900 dark:bg-white/[0.03] dark:text-white">
245 <div className="border-b border-slate-200 px-5 py-4 dark:border-white/[0.06]">
246 Area
247 </div>
248 <div className="border-b border-l border-slate-200 px-5 py-4 dark:border-white/[0.06]">
249 smbCloud GresIQ
250 </div>
251 <div className="border-b border-l border-slate-200 px-5 py-4 dark:border-white/[0.06]">
252 PlanetScale
253 </div>
254 </div>
255 {comparisonRows.map((row) => (
256 <div
257 key={row.label}
258 className="grid grid-cols-[0.8fr_1fr_1fr] text-sm leading-7 text-slate-600 dark:text-slate-400"
259 >
260 <div className="border-b border-slate-200 bg-white px-5 py-5 font-semibold text-slate-900 dark:border-white/[0.06] dark:bg-white/[0.02] dark:text-white">
261 {row.label}
262 </div>
263 <div className="border-b border-l border-slate-200 bg-white px-5 py-5 dark:border-white/[0.06] dark:bg-white/[0.02]">
264 {row.smbcloud}
265 </div>
266 <div className="border-b border-l border-slate-200 bg-white px-5 py-5 dark:border-white/[0.06] dark:bg-white/[0.02]">
267 {row.planetscale}
268 </div>
269 </div>
270 ))}
271 </div>
272 </div>
273 </section>
274
275 <section className="px-6 py-24 lg:px-8">
276 <div className="mx-auto grid max-w-5xl gap-6 lg:grid-cols-2">
277 <div className="rounded-2xl border border-slate-200 bg-white p-8 dark:border-white/[0.06] dark:bg-white/[0.02]">
278 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
279 Pick smbCloud GresIQ if
280 </p>
281 <ul className="mt-6 space-y-4 text-sm leading-7 text-slate-600 dark:text-slate-400">
282 {smbcloudFits.map((item) => (
283 <li key={item} className="flex gap-3">
284 <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
285 <span>{item}</span>
286 </li>
287 ))}
288 </ul>
289 </div>
290
291 <div className="rounded-2xl border border-slate-200 bg-slate-50 p-8 dark:border-white/[0.06] dark:bg-white/[0.02]">
292 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
293 Stay on PlanetScale if
294 </p>
295 <ul className="mt-6 space-y-4 text-sm leading-7 text-slate-600 dark:text-slate-400">
296 {planetscaleStillFits.map((item) => (
297 <li key={item} className="flex gap-3">
298 <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-slate-400" />
299 <span>{item}</span>
300 </li>
301 ))}
302 </ul>
303 </div>
304 </div>
305 </section>
306
307 <section className="px-6 pb-24 lg:px-8">
308 <div className="mx-auto max-w-3xl">
309 <div className="mb-10">
310 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
311 FAQ
312 </p>
313 <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
314 Common questions
315 </h2>
316 </div>
317 <div className="space-y-4">
318 {faqs.map((faq) => (
319 <div
320 key={faq.question}
321 className="rounded-2xl border border-slate-200 bg-white p-6 dark:border-white/[0.06] dark:bg-white/[0.02]"
322 >
323 <h3 className="text-lg font-semibold text-slate-900 dark:text-white">
324 {faq.question}
325 </h3>
326 <p className="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-400">
327 {faq.answer}
328 </p>
329 </div>
330 ))}
331 </div>
332 </div>
333 </section>
334
335 <section className="px-6 pb-20 lg:px-8">
336 <div className="mx-auto max-w-3xl">
337 <div className="relative overflow-hidden rounded-2xl bg-indigo-600 px-8 py-14 text-center shadow-2xl shadow-indigo-500/20">
338 <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.1),transparent)]" />
339 <h2 className="relative text-3xl font-bold tracking-tight text-white">
340 If PlanetScale feels like more than you need, try GresIQ.
341 </h2>
342 <p className="relative mt-4 text-indigo-200">
343 Run it on one project. That is usually enough to know.
344 </p>
345 <div className="relative mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
346 <Link
347 href="https://console.smbcloud.xyz"
348 target="_blank"
349 rel="noopener noreferrer"
350 className="inline-flex rounded-lg bg-white px-8 py-3.5 text-sm font-semibold text-indigo-700 shadow-sm transition-colors hover:bg-indigo-50"
351 >
352 Start with smbCloud
353 </Link>
354 <Link
355 href="/neon-alternative"
356 className="inline-flex rounded-lg border border-white/20 px-8 py-3.5 text-sm font-semibold text-white transition-colors hover:bg-white/10"
357 >
358 Compare Neon alternative
359 </Link>
360 </div>
361 </div>
362 </div>
363 </section>
364 </div>
365 );
366 }