mirror of
https://github.com/Rohithgilla12/data-peek
synced 2026-04-21 12:57:16 +00:00
ui: remove comparison table
This commit is contained in:
Rohith Gilla
parent
82058dc7a7
commit
a03cce9845
5 changed files with 18 additions and 193 deletions
|
|
@ -22,37 +22,37 @@
|
|||
--color-warning: #fbbf24;
|
||||
--color-error: #f87171;
|
||||
|
||||
/* Fonts */
|
||||
--font-display: "Space Grotesk", system-ui, sans-serif;
|
||||
--font-body: "IBM Plex Sans", system-ui, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "Fira Code", monospace;
|
||||
/* Fonts - Geist Mono everywhere for consistency with desktop app */
|
||||
--font-display: "Geist Mono", monospace;
|
||||
--font-body: "Geist Mono", monospace;
|
||||
--font-mono: "Geist Mono", monospace;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Space Grotesk";
|
||||
src: url("https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2") format("woff2");
|
||||
font-weight: 300 700;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url("https://fonts.gstatic.com/s/ibmplexsans/v19/zYXgKVElMYYaJe8bpLHnCwDKhdHeFQ.woff2") format("woff2");
|
||||
font-family: "Geist Mono";
|
||||
src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Regular.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url("https://fonts.gstatic.com/s/ibmplexsans/v19/zYX9KVElMYYaJe8bpLHnCwDKjSL9AIFsdA.woff2") format("woff2");
|
||||
font-family: "Geist Mono";
|
||||
src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Medium.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjPVmUsaaDhw.woff2") format("woff2");
|
||||
font-weight: 400 700;
|
||||
font-family: "Geist Mono";
|
||||
src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-SemiBold.woff2") format("woff2");
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Geist Mono";
|
||||
src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Bold.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { Header } from '@/components/marketing/header'
|
|||
import { Hero } from '@/components/marketing/hero'
|
||||
import { Features } from '@/components/marketing/features'
|
||||
import { Pricing } from '@/components/marketing/pricing'
|
||||
import { Comparison } from '@/components/marketing/comparison'
|
||||
import { FAQ } from '@/components/marketing/faq'
|
||||
import { CTA } from '@/components/marketing/cta'
|
||||
import { Footer } from '@/components/marketing/footer'
|
||||
|
|
@ -15,7 +14,6 @@ export default function Home() {
|
|||
<Hero />
|
||||
<Features />
|
||||
<Pricing />
|
||||
<Comparison />
|
||||
<FAQ />
|
||||
<CTA />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,171 +0,0 @@
|
|||
import { Check, X, Minus } from 'lucide-react'
|
||||
|
||||
const tools = ['data-peek', 'pgAdmin', 'DBeaver', 'TablePlus']
|
||||
|
||||
const comparisons = [
|
||||
{
|
||||
category: 'Performance',
|
||||
features: [
|
||||
{ name: 'Startup Time', values: ['< 2s', '5-10s', '10-15s', '2-3s'] },
|
||||
{ name: 'Memory Usage', values: ['Low', 'High', 'Very High', 'Low'] },
|
||||
{ name: 'Native Performance', values: [true, false, false, true] },
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Features',
|
||||
features: [
|
||||
{ name: 'Query Editor', values: [true, true, true, true] },
|
||||
{ name: 'ER Diagrams', values: [true, true, true, true] },
|
||||
{ name: 'Inline Editing', values: [true, true, true, true] },
|
||||
{ name: 'Query Plans', values: [true, true, true, 'Limited'] },
|
||||
{ name: 'Dark Mode', values: [true, false, true, true] },
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Experience',
|
||||
features: [
|
||||
{ name: 'Learning Curve', values: ['Minimal', 'Steep', 'Steep', 'Minimal'] },
|
||||
{ name: 'Modern UI', values: [true, false, false, true] },
|
||||
{ name: 'Keyboard-First', values: [true, false, false, true] },
|
||||
{ name: 'PostgreSQL Focus', values: [true, true, false, false] },
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Pricing',
|
||||
features: [
|
||||
{ name: 'Price', values: ['$29', 'Free', 'Free/$199', '$69'] },
|
||||
{ name: 'One-time Purchase', values: [true, 'N/A', false, true] },
|
||||
{ name: 'No Subscription', values: [true, true, false, true] },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
function CellValue({ value }: { value: boolean | string }) {
|
||||
if (typeof value === 'boolean') {
|
||||
return value ? (
|
||||
<div className="w-6 h-6 rounded-full bg-[--color-success]/10 flex items-center justify-center">
|
||||
<Check className="w-3.5 h-3.5 text-[--color-success]" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-6 h-6 rounded-full bg-[--color-error]/10 flex items-center justify-center">
|
||||
<X className="w-3.5 h-3.5 text-[--color-error]" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (value === 'N/A' || value === 'Limited') {
|
||||
return (
|
||||
<span className="text-sm text-[--color-text-muted]">{value}</span>
|
||||
)
|
||||
}
|
||||
|
||||
return <span className="text-sm text-[--color-text-primary]">{value}</span>
|
||||
}
|
||||
|
||||
export function Comparison() {
|
||||
return (
|
||||
<section id="comparison" className="relative py-32 overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 grid-pattern opacity-30" />
|
||||
|
||||
<div className="relative z-10 max-w-6xl mx-auto px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<p
|
||||
className="text-xs uppercase tracking-[0.2em] text-[--color-accent] mb-4"
|
||||
style={{ fontFamily: 'var(--font-mono)' }}
|
||||
>
|
||||
Comparison
|
||||
</p>
|
||||
<h2
|
||||
className="text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight mb-6"
|
||||
style={{ fontFamily: 'var(--font-display)' }}
|
||||
>
|
||||
How we stack up.
|
||||
</h2>
|
||||
<p
|
||||
className="text-lg text-[--color-text-secondary] max-w-xl mx-auto"
|
||||
style={{ fontFamily: 'var(--font-body)' }}
|
||||
>
|
||||
Honest comparison with popular alternatives.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Comparison Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
{/* Header */}
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-left p-4 border-b border-[--color-border]" />
|
||||
{tools.map((tool, index) => (
|
||||
<th
|
||||
key={tool}
|
||||
className={`p-4 text-center border-b border-[--color-border] ${
|
||||
index === 0
|
||||
? 'bg-[--color-accent]/5 border-x border-[--color-accent]/20'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`text-sm font-medium ${
|
||||
index === 0 ? 'text-[--color-accent]' : 'text-[--color-text-primary]'
|
||||
}`}
|
||||
style={{ fontFamily: 'var(--font-display)' }}
|
||||
>
|
||||
{tool}
|
||||
</span>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{/* Body */}
|
||||
<tbody>
|
||||
{comparisons.map((section) => (
|
||||
<>
|
||||
{/* Category Row */}
|
||||
<tr key={`cat-${section.category}`}>
|
||||
<td
|
||||
colSpan={5}
|
||||
className="p-4 pt-8 text-xs uppercase tracking-[0.15em] text-[--color-text-muted] border-b border-[--color-border-subtle]"
|
||||
style={{ fontFamily: 'var(--font-mono)' }}
|
||||
>
|
||||
{section.category}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* Feature Rows */}
|
||||
{section.features.map((feature) => (
|
||||
<tr
|
||||
key={feature.name}
|
||||
className="group hover:bg-[--color-surface]/50 transition-colors"
|
||||
>
|
||||
<td className="p-4 text-sm text-[--color-text-secondary] border-b border-[--color-border-subtle]">
|
||||
{feature.name}
|
||||
</td>
|
||||
{feature.values.map((value, index) => (
|
||||
<td
|
||||
key={index}
|
||||
className={`p-4 text-center border-b border-[--color-border-subtle] ${
|
||||
index === 0
|
||||
? 'bg-[--color-accent]/5 border-x border-[--color-accent]/10'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-center">
|
||||
<CellValue value={value} />
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -8,7 +8,6 @@ import { Database, Menu, X } from 'lucide-react'
|
|||
const navLinks = [
|
||||
{ href: '#features', label: 'Features' },
|
||||
{ href: '#pricing', label: 'Pricing' },
|
||||
{ href: '#comparison', label: 'Compare' },
|
||||
{ href: '#faq', label: 'FAQ' },
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ export { Header } from './header'
|
|||
export { Hero } from './hero'
|
||||
export { Features } from './features'
|
||||
export { Pricing } from './pricing'
|
||||
export { Comparison } from './comparison'
|
||||
export { FAQ } from './faq'
|
||||
export { CTA } from './cta'
|
||||
export { Footer } from './footer'
|
||||
|
|
|
|||
Loading…
Reference in a new issue