Skip to content

feat(databases): redesign page to match homepage #304

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yangchuansheng merged 1 commit into from
Jul 10, 2026
Merged

feat(databases): redesign page to match homepage #304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions .planning/STATE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ milestone: v1.2
milestone_name: React and Node.js Tutorial Expansion
status: executing
stopped_at: Phase 16 planned
last_updated: "2026-06-28T18:08:27.510Z"
last_activity: 2026-06-29 — Phase 16 planned
last_updated: "2026-07-09T09:24:28Z"
last_activity: 2026-07-09 - Shipped quick tasks 260708-q6y and 260709-n35 in PR #304
progress:
total_phases: 5
completed_phases: 0
Expand Down Expand Up @@ -64,7 +64,7 @@ Node.js Tutorial Expansion.
Phase: 16 — Tutorial Template Baseline and Expansion Map
Plan: 2 plans ready
Status: Ready to execute
Last activity: 2026-06-29 — Phase 16 planned
Last activity: 2026-07-09 - Shipped quick tasks 260708-q6y and 260709-n35 in PR #304

## Next Action

Expand All @@ -82,8 +82,10 @@ Resume file: .planning/phases/16-tutorial-template-baseline-and-expansion-map/16
|---|-------------|------|--------|-----------|
| 260617-kgc | update deployment workflows to refresh App Store templates before build | 2026-06-17 | acb429d | [260617-kgc-update-deployment-workflows-to-refresh-a](./quick/260617-kgc-update-deployment-workflows-to-refresh-a/) |
| 260617-kt3 | fix GHCR Docker image build failure | 2026-06-17 | fe42f4d | [260617-kt3-fix-ghcr-docker-image-build-failure](./quick/260617-kt3-fix-ghcr-docker-image-build-failure/) |
| 260708-q6y | Redesign /products/databases to match the current homepage style, keep existing copy except Kafka removal, and validate mobile usability | 2026-07-08 | PR #304 | [260708-q6y-redesign-products-databases-to-match-the](./quick/260708-q6y-redesign-products-databases-to-match-the/) |
| 260709-n35 | Fix /products/databases footer bottom Sealos word to match homepage | 2026-07-09 | PR #304 | [260709-n35-fix-products-databases-footer-bottom-sea](./quick/260709-n35-fix-products-databases-footer-bottom-sea/) |

Last activity: 2026-06-17 - Completed quick task 260617-kt3: fix GHCR Docker image build failure.
Last activity: 2026-07-09 - Shipped quick tasks 260708-q6y and 260709-n35 in PR #304.

---
*Initialized: 2026-06-16*
Expand Down
79 changes: 26 additions & 53 deletions app/[lang]/products/databases/components/databases.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ const databases = [
'Advanced Indexes',
'Extensions',
],
gradient: 'from-blue-50/70 to-indigo-50/70',
deployUrl: `${appDomain + dbAppSlug}`,
},
{
Expand All @@ -41,7 +40,6 @@ const databases = [
'Partitioning',
'Full-text Search',
],
gradient: 'from-blue-50/70 to-indigo-50/70',
deployUrl: `${appDomain + dbAppSlug}`,
},
{
Expand All @@ -60,7 +58,6 @@ const databases = [
'Aggregation Pipeline',
'GridFS',
],
gradient: 'from-blue-50/70 to-indigo-50/70',
deployUrl: `${appDomain + dbAppSlug}`,
},
{
Expand All @@ -79,27 +76,6 @@ const databases = [
'Pub/Sub',
'Lua Scripting',
],
gradient: 'from-blue-50/70 to-indigo-50/70',
deployUrl: `${appDomain + dbAppSlug}`,
},
{
name: 'Apache Kafka',
description:
'Distributed event streaming platform for high-throughput data',
iconPath: '/images/database/kafka.svg',
useCases: [
'Event Streaming',
'Log Aggregation',
'Real-time Pipelines',
'Microservices',
],
features: [
'High Throughput',
'Fault Tolerance',
'Stream Processing',
'Exactly-once Semantics',
],
gradient: 'from-blue-50/70 to-indigo-50/70',
deployUrl: `${appDomain + dbAppSlug}`,
},
{
Expand All @@ -118,79 +94,76 @@ const databases = [
'Hybrid Search',
'Multi-tenancy',
],
gradient: 'from-blue-50/70 to-indigo-50/70',
deployUrl: `${appDomain + dbAppSlug}`,
},
];

export default function Databases() {
return (
<section className="py-20">
<div className="mb-16 text-center">
<h2 className="mb-4 text-4xl font-bold text-gray-900">
<section className="relative overflow-hidden">
<div className="mb-10 max-w-3xl sm:mb-16">
<h2 className="text-2xl leading-tight text-white sm:text-4xl md:text-[2.5rem]">
Choose Your Perfect Database
</h2>
<p className="mx-auto max-w-3xl text-xl text-gray-600">
From traditional SQL to modern NoSQL, streaming platforms to vector
databases - deploy any database with enterprise-grade management.
<p className="mt-3 text-sm leading-6 text-zinc-400 sm:text-base">
From traditional SQL to modern NoSQL and vector databases - deploy any
database with enterprise-grade management.
</p>
</div>

<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2 xl:grid-cols-3">
{databases.map((db, index) => (
<div
key={index}
className="group flex flex-col overflow-hidden rounded-2xl border border-blue-50 bg-white shadow-lg transition-all duration-300 hover:border-blue-100 hover:shadow-xl"
className="group flex min-h-[31rem] flex-col overflow-hidden rounded-xl border border-white/10 bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur transition-all duration-300 hover:border-white/25 hover:bg-white/[0.06]"
>
<div
className={`bg-gradient-to-r ${db.gradient} border-b border-blue-100/50 p-6 text-slate-700`}
>
<div className="border-b border-white/10 bg-white/[0.025] p-5 text-zinc-100 sm:p-6">
<div className="mb-4 flex items-center justify-between">
<div className="flex h-12 w-12 items-center justify-center rounded-xl border border-blue-100/30 bg-white/80 shadow-sm">
<div className="flex size-12 items-center justify-center rounded-xl border border-white/10 bg-white shadow-sm">
<img
src={db.iconPath}
alt={`${db.name} icon`}
className="h-8 w-8 object-contain"
/>
</div>
<div className="rounded-full border border-blue-100/30 bg-white/80 px-3 py-1">
<span className="text-sm font-medium text-slate-600">
<div className="rounded-full border border-white/10 bg-white/[0.05] px-3 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
<span className="text-sm font-medium text-zinc-300">
Managed
</span>
</div>
</div>
<h3 className="mb-2 text-2xl font-bold text-slate-800">
<h3 className="mb-2 text-2xl font-semibold text-white">
{db.name}
</h3>
<p className="text-sm leading-relaxed text-slate-600">
<p className="text-sm leading-6 text-zinc-400">
{db.description}
</p>
</div>

<div className="flex flex-1 flex-col p-6">
<div className="flex flex-1 flex-col p-5 sm:p-6">
<div className="mb-6 flex-1">
<h4 className="mb-3 font-semibold text-gray-900">
<h4 className="mb-3 font-semibold text-zinc-200">
Key Features
</h4>
<div className="grid grid-cols-2 gap-2">
{db.features.map((feature, i) => (
<div key={i} className="flex items-center">
<span className="mr-2 text-xs text-blue-400">●</span>
<span className="text-sm text-gray-600">{feature}</span>
<span className="mr-2 size-1.5 rounded-full bg-blue-400" />
<span className="text-sm text-zinc-400">{feature}</span>
</div>
))}
</div>
</div>

<div className="mb-6">
<h4 className="mb-3 font-semibold text-gray-900">
<h4 className="mb-3 font-semibold text-zinc-200">
Perfect For
</h4>
<div className="flex flex-wrap gap-2">
{db.useCases.map((useCase, i) => (
<span
key={i}
className="rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-700"
className="rounded-md border border-white/10 bg-white/[0.04] px-2 py-1 text-xs text-zinc-400"
>
{useCase}
</span>
Expand All @@ -200,7 +173,7 @@ export default function Databases() {

<CustomButton
title="Deploy Database"
className="mt-auto block w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-3 text-center font-medium text-white transition-all duration-300 hover:bg-blue-700 hover:shadow-lg"
className="mt-auto block w-full cursor-pointer rounded-full border border-white/15 bg-white px-4 py-3 text-center font-medium text-zinc-950 transition-all duration-300 hover:bg-zinc-200 hover:shadow-[0_12px_36px_rgba(255,255,255,0.16)]"
newWindow={true}
href={db.deployUrl}
location="databases-section"
Expand All @@ -213,19 +186,19 @@ export default function Databases() {
))}
</div>

<div className="mt-16 text-center">
<div className="rounded-2xl bg-gradient-to-r from-blue-50 to-indigo-50 p-8">
<h3 className="mb-4 text-2xl font-bold text-gray-900">
<div className="mt-10 text-center sm:mt-16">
<div className="rounded-xl border border-white/10 bg-white/[0.035] p-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur sm:p-8">
<h3 className="mb-4 text-2xl font-semibold text-white">
Need Help Choosing?
</h3>
<p className="mx-auto mb-6 max-w-2xl text-gray-600">
<p className="mx-auto mb-6 max-w-2xl text-sm leading-6 text-zinc-400 sm:text-base">
Our database selection guide helps you pick the perfect database for
your specific use case, considering factors like data structure,
scaling needs, and performance requirements.
</p>
<a
href="/blog/the-best-db-to-pick-on-sealos"
className="inline-flex items-center rounded-lg bg-blue-600 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-700"
className="inline-flex items-center rounded-full border border-white/15 bg-white/[0.06] px-6 py-3 font-medium text-white transition-colors hover:bg-white/[0.1]"
>
Read Our Database Guide
<span className="ml-2">→</span>
Expand Down
71 changes: 41 additions & 30 deletions app/[lang]/products/databases/components/feature.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,12 @@ const features = [
{
title: 'Multi-Database Support',
description:
'Choose from PostgreSQL, MySQL, MongoDB, Redis, Kafka, and Milvus for your specific use case.',
'Choose from PostgreSQL, MySQL, MongoDB, Redis, and Milvus for your specific use case.',
icon: <Database className="h-8 w-8" />,
benefits: [
'PostgreSQL for complex queries',
'MongoDB for flexible schemas',
'Redis for high-performance caching',
'Kafka for event streaming',
],
},
{
Expand Down Expand Up @@ -55,50 +54,62 @@ const features = [

export default function Feature() {
return (
<section className="py-20">
<div className="mb-16 text-center">
<h2 className="mb-4 text-4xl font-bold text-gray-900">
<section className="relative overflow-hidden pt-16 sm:pt-24">
<div
className="pointer-events-none absolute top-0 left-1/2 -z-10 h-96 w-screen -translate-x-1/2"
style={{
background:
'linear-gradient(to bottom, rgba(30, 30, 30, 0.62) 0%, rgba(20, 20, 20, 0.42) 42%, transparent 100%)',
}}
/>

<div className="mb-10 max-w-3xl sm:mb-16">
<h2 className="text-2xl leading-tight text-white sm:text-4xl md:text-[2.5rem]">
Managed Database Excellence
</h2>
<p className="mx-auto max-w-3xl text-xl text-gray-600">
<p className="mt-3 text-sm leading-6 text-zinc-400 sm:text-base">
Focus on building your application while Sealos handles database
operations, scaling, security, and maintenance for you.
</p>
</div>

<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4">
<div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2 xl:grid-cols-4">
{features.map((feature, index) => (
<div
key={index}
className="rounded-xl border border-gray-100 bg-white p-6 shadow-lg transition-shadow duration-300 hover:shadow-xl"
className="group flex h-full flex-col overflow-hidden rounded-xl border border-white/10 bg-white/[0.035] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur transition-all duration-300 hover:border-white/25 hover:bg-white/[0.06] sm:p-6"
>
<div className="mb-6">
<div className="flex flex-1 flex-col">
<div className="mb-4 flex items-start gap-3">
<div className="flex-shrink-0 text-blue-600">
<div className="flex size-11 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/[0.05] text-blue-300 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
{feature.icon}
</div>
<h3 className="text-lg leading-tight font-semibold text-gray-900">
{feature.title}
</h3>
<div>
<h3 className="text-lg leading-tight font-semibold text-zinc-100">
{feature.title}
</h3>
<p className="mt-2 text-sm leading-6 text-zinc-400">
{feature.description}
</p>
</div>
</div>
<p className="text-sm text-gray-600">{feature.description}</p>
</div>

<div className="space-y-3">
<h4 className="text-sm font-semibold text-gray-900">
Key Benefits:
</h4>
<ul className="space-y-2">
{feature.benefits.map((benefit, i) => (
<li
key={i}
className="flex items-center text-sm text-gray-700"
>
<span className="mr-2 text-green-500">✓</span>
{benefit}
</li>
))}
</ul>
<div className="mt-4 space-y-3 border-t border-white/10 pt-4">
<h4 className="text-sm font-semibold text-zinc-200">
Key Benefits:
</h4>
<ul className="space-y-2">
{feature.benefits.map((benefit, i) => (
<li
key={i}
className="flex items-center text-sm leading-5 text-zinc-400"
>
<span className="mr-2 size-1.5 rounded-full bg-blue-400" />
{benefit}
</li>
))}
</ul>
</div>
</div>
</div>
))}
Expand Down
Loading
Loading