93 lines
2.9 KiB
TypeScript
93 lines
2.9 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from '@gib/ui/card';
|
|
|
|
const features = [
|
|
{
|
|
title: 'Turborepo',
|
|
description:
|
|
'Efficient build system with intelligent caching. Share code between web and mobile apps seamlessly.',
|
|
icon: '⚡',
|
|
},
|
|
{
|
|
title: 'Self-Hosted Convex',
|
|
description:
|
|
'Complete control over your data with self-hosted Convex backend. No vendor lock-in, deploy anywhere.',
|
|
icon: '🏠',
|
|
},
|
|
{
|
|
title: 'Next.js 16 + Expo',
|
|
description:
|
|
'Modern Next.js 16 with App Router for web, Expo 54 for mobile. One codebase, multiple platforms.',
|
|
icon: '📱',
|
|
},
|
|
{
|
|
title: 'Type-Safe Backend',
|
|
description:
|
|
'Fully type-safe queries and mutations with Convex. Auto-generated TypeScript types for the entire API.',
|
|
icon: '🔒',
|
|
},
|
|
{
|
|
title: 'Authentication Included',
|
|
description:
|
|
'OAuth with Authentik + custom password auth with email verification. Production-ready auth out of the box.',
|
|
icon: '🔐',
|
|
},
|
|
{
|
|
title: 'Real-time Updates',
|
|
description:
|
|
'Built-in real-time subscriptions with Convex reactive queries. No WebSocket configuration needed.',
|
|
icon: '⚡',
|
|
},
|
|
{
|
|
title: 'shadcn/ui Components',
|
|
description:
|
|
'Beautiful, accessible components from shadcn/ui. Customizable with Tailwind CSS v4.',
|
|
icon: '🎨',
|
|
},
|
|
{
|
|
title: 'Docker Ready',
|
|
description:
|
|
'Production Docker setup included. Deploy to any server with docker-compose up.',
|
|
icon: '🐳',
|
|
},
|
|
{
|
|
title: 'Developer Experience',
|
|
description:
|
|
'Hot reload, TypeScript strict mode, ESLint, Prettier, and Bun for blazing fast installs.',
|
|
icon: '⚙️',
|
|
},
|
|
];
|
|
|
|
export function Features() {
|
|
return (
|
|
<section id="features" className="container mx-auto px-4 py-24">
|
|
<div className="mx-auto max-w-6xl">
|
|
{/* Section Header */}
|
|
<div className="mb-16 text-center">
|
|
<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
|
|
Everything You Need to Ship Fast
|
|
</h2>
|
|
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">
|
|
A complete monorepo template with all the tools and patterns you
|
|
need for production-ready applications.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Features Grid */}
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{features.map((feature) => (
|
|
<Card key={feature.title} className="border-border/40">
|
|
<CardHeader className='flex items-center gap-2'>
|
|
<div className="mb-2 text-3xl">{feature.icon}</div>
|
|
<CardTitle className="text-xl">{feature.title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-muted-foreground">{feature.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|