Skip to content

feat: landing page redesign #16

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
vitabaks merged 29 commits into from
Jun 29, 2026
Merged

feat: landing page redesign #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
a86c969
feat: landing page redesign
Jun 28, 2026
7e45fcb
Add landing page theme and navbar/footer logic
vitabaks Jun 28, 2026
13f0594
Remove ClickEffect from Root
vitabaks Jun 28, 2026
b80077b
Remove conditional SideNavbar from Root
vitabaks Jun 28, 2026
ec3c4d8
Update styles
vitabaks Jun 28, 2026
4322157
Update HeroSection messaging and simplify cursor animation
vitabaks Jun 28, 2026
829f395
Autobase Platform
vitabaks Jun 28, 2026
ac1e2fc
Update the schema
vitabaks Jun 28, 2026
eac5ede
Update schema styles
vitabaks Jun 28, 2026
8dce84a
Developers
vitabaks Jun 28, 2026
05d1393
Consolidate footer legal text and add responsive font sizing
vitabaks Jun 28, 2026
6a44da6
Update index.js
vitabaks Jun 28, 2026
4362529
Simplify ContactSection layout and styles
vitabaks Jun 28, 2026
2311c11
Add TrustedBy Carousel in HeroSection
vitabaks Jun 29, 2026
298dd5a
Update index.js
vitabaks Jun 29, 2026
c8c3c71
Add Scaling
vitabaks Jun 29, 2026
6974fe6
Update styles.module.css
vitabaks Jun 29, 2026
d04a1d0
update texts
vitabaks Jun 29, 2026
e736ac7
Improve ProductHighlightsSection responsiveness
vitabaks Jun 29, 2026
2b4b19e
Update SocialProofSection styles
vitabaks Jun 29, 2026
b41798f
Update CTAs: Platform download and demo info
vitabaks Jun 29, 2026
ca3ba22
Unify CTA styles and hover transitions
vitabaks Jun 29, 2026
6a66f76
Update index.js
vitabaks Jun 29, 2026
f9ac25e
fix: trustedBy layout — flex column, left-aligned, 2rem top margin
Jun 29, 2026
ad04c12
Update icons
vitabaks Jun 29, 2026
503b368
Update index.js
vitabaks Jun 29, 2026
1bf5fc5
fix styles
vitabaks Jun 29, 2026
3822f83
update styles
vitabaks Jun 29, 2026
dc7f8c4
Remve Fullscreen terminal
vitabaks Jun 29, 2026
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
205 changes: 205 additions & 0 deletions src/components/ArchDiagramSection/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
import React from 'react';
import styles from './styles.module.css';

function ArrowDown() {
return (
<svg className={styles.arrowDown} width="16" height="48" viewBox="0 0 16 48" fill="none" aria-hidden="true">
<line x1="8" y1="0" x2="8" y2="40" stroke="currentColor" strokeWidth="2"/>
<polyline points="3,32 8,44 13,32" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
</svg>
);
}

function ClusterConnectors() {
return (
<svg className={styles.clusterConnectors} viewBox="0 0 800 72" fill="none" aria-hidden="true" preserveAspectRatio="none">
<path d="M400 0V24H133V56" stroke="currentColor" strokeWidth="2"/>
<path d="M400 24V56" stroke="currentColor" strokeWidth="2"/>
<path d="M400 24H667V56" stroke="currentColor" strokeWidth="2"/>
<polyline points="126,48 133,64 140,48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
<polyline points="393,48 400,64 407,48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
<polyline points="660,48 667,64 674,48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
</svg>
);
}

function StorageConnectors() {
return (
<svg className={styles.storageConnectors} viewBox="0 0 800 72" fill="none" aria-hidden="true" preserveAspectRatio="none">
<path d="M133 0V24H667V0" stroke="currentColor" strokeWidth="2"/>
<path d="M400 0V56" stroke="currentColor" strokeWidth="2"/>
<polyline points="393,48 400,64 407,48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
</svg>
);
}

function DatabaseIcon() {
return (
<svg className={styles.diagramIcon} width="44" height="44" viewBox="0 0 44 44" fill="none" aria-hidden="true">
<ellipse cx="22" cy="11" rx="16" ry="6" stroke="currentColor" strokeWidth="1.5"/>
<path d="M6 11v11c0 3.31 7.16 6 16 6s16-2.69 16-6V11" stroke="currentColor" strokeWidth="1.5"/>
<path d="M6 22v11c0 3.31 7.16 6 16 6s16-2.69 16-6V22" stroke="currentColor" strokeWidth="1.5"/>
</svg>
);
}

function StorageIcon() {
return (
<svg className={styles.diagramIcon} width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true">
<rect x="3" y="4" width="30" height="12" rx="1" stroke="currentColor" strokeWidth="1.5"/>
<rect x="3" y="20" width="30" height="12" rx="1" stroke="currentColor" strokeWidth="1.5"/>
<circle cx="29" cy="10" r="2" fill="currentColor"/>
<circle cx="29" cy="26" r="2" fill="currentColor"/>
</svg>
);
}

const features = [
{
label: 'High Availability',
description: 'Automatic Failover & Self-Healing',
icon: (
<svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
<rect x="8" y="11" width="32" height="26" stroke="currentColor" strokeWidth="2" strokeDasharray="5 4"/>
<path d="M16 25l6 6 12-14" stroke="currentColor" strokeWidth="3" strokeLinecap="square" strokeLinejoin="miter"/>
</svg>
),
},
{
label: 'Backups',
description: 'Continuous Backups',
icon: (
<svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
<ellipse cx="24" cy="14" rx="12" ry="5" stroke="currentColor" strokeWidth="2"/>
<path d="M12 14v10c0 2.8 5.4 5 12 5s12-2.2 12-5V14" stroke="currentColor" strokeWidth="2"/>
<path d="M12 24v10c0 2.8 5.4 5 12 5s12-2.2 12-5V24" stroke="currentColor" strokeWidth="2"/>
</svg>
),
},
{
label: 'PITR',
description: 'Point-in-Time Recovery',
icon: (
<svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
<path d="M7 17v14M41 17v14" stroke="currentColor" strokeWidth="2"/>
<path d="M11 24h7M30 24h7" stroke="currentColor" strokeWidth="2" strokeDasharray="5 4"/>
<circle cx="24" cy="24" r="4" fill="currentColor"/>
</svg>
),
},
{
label: 'Monitoring',
description: 'Built-in Metrics & Alerting',
icon: (
<svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
<rect x="7" y="10" width="34" height="26" stroke="currentColor" strokeWidth="2" strokeDasharray="5 4"/>
<path d="M13 31l7-10 6 7 9-14" stroke="currentColor" strokeWidth="3" strokeLinecap="square" strokeLinejoin="miter"/>
</svg>
),
},
{
label: 'Upgrades',
description: 'Zero-Downtime Upgrades',
icon: (
<svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
<rect x="7" y="10" width="34" height="26" stroke="currentColor" strokeWidth="2" strokeDasharray="5 4"/>
<path d="M24 32V16M17 23l7-7 7 7" stroke="currentColor" strokeWidth="3" strokeLinecap="square" strokeLinejoin="miter"/>
</svg>
),
},
{
label: 'Scaling',
description: 'Cluster Scaling with read replicas',
icon: (
<svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
<rect x="9" y="21" width="10" height="10" stroke="currentColor" strokeWidth="2"/>
<rect x="29" y="9" width="10" height="10" stroke="currentColor" strokeWidth="2"/>
<rect x="29" y="29" width="10" height="10" stroke="currentColor" strokeWidth="2"/>
<path d="M19 26h5V14h5M24 26v8h5" stroke="currentColor" strokeWidth="2" strokeLinecap="square" strokeLinejoin="miter"/>
</svg>
),
},
];

/* ── Reusable diagram JSX ────────────────────────────────────────────── */
function DiagramInner() {
return (
<div className={styles.diagram}>
<div className={styles.row}>
<div className={`${styles.box} ${styles.usersBox}`}>
<div className={styles.usersTitle}>Users</div>
<div className={styles.userRoles}>
<span>Developers</span>
<span className={styles.sep}>|</span>
<span>SRE</span>
<span className={styles.sep}>|</span>
<span>DBA</span>
</div>
</div>
</div>
<div className={styles.arrowRow}><ArrowDown /></div>
<div className={styles.row}>
<div className={`${styles.box} ${styles.platform}`}>
<div className={styles.cpHeader}>
<img src="/img/navbar/logo-icon.svg" alt="" width={28} height={25} />
<span className={styles.cpTitle}>Autobase Platform</span>
</div>
<div className={styles.cpPills}>
<span>Provisioning</span>
<span className={styles.sep}>|</span>
<span>Maintenance</span>
<span className={styles.sep}>|</span>
<span>Scaling</span>
</div>
</div>
</div>
<ClusterConnectors />
<div className={styles.mobileConnector}><ArrowDown /></div>
<div className={styles.clustersRow}>
<div className={styles.clusterBox}><DatabaseIcon /><span>PostgreSQL<br />Cluster 1</span></div>
<div className={styles.clusterBox}><DatabaseIcon /><span>PostgreSQL<br />Cluster 2</span></div>
<div className={`${styles.clusterBox} ${styles.clusterBoxOptional}`}><DatabaseIcon /><span>PostgreSQL<br />Cluster N</span></div>
</div>
<StorageConnectors />
<div className={styles.mobileConnector}><ArrowDown /></div>
<div className={styles.row}>
<div className={styles.box}>
<div className={styles.storageRow}>
<StorageIcon />
<div>
<div className={styles.storageTitle}>Database Storage / Backup Storage</div>
<div className={styles.storageSub}>Local NVMe, SSD, EBS for data / S3, MinIO, etc. for backups</div>
</div>
</div>
</div>
</div>
</div>
);
}

export default function ArchDiagramSection() {
return (
<section className={styles.section}>
<div className={styles.inner}>

{/* ── Architecture Diagram ── */}
<DiagramInner />

{/* ── Divider ── */}
<hr className={styles.divider} />

{/* ── Features Grid ── */}
<div className={styles.featuresGrid}>
{features.map((f) => (
<div key={f.label} className={styles.featureCard}>
<div className={styles.featureIcon}>{f.icon}</div>
<div className={styles.featureLabel}>{f.label}</div>
<div className={styles.featureDesc}>{f.description}</div>
</div>
))}
</div>

</div>
</section>
);
}
Loading