183 lines
7.8 KiB
TypeScript
183 lines
7.8 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl'
|
|
import { Header } from '@/components/layout/Header'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Zap, Target, Layers, BarChart3, Check } from 'lucide-react'
|
|
|
|
export default function Home() {
|
|
const t = useTranslations('home')
|
|
const tPricing = useTranslations('pricing')
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
<Header />
|
|
|
|
{/* Hero Section */}
|
|
<section className="bg-gradient-to-b from-muted/50 to-background">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24">
|
|
<div className="text-center">
|
|
<h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6">
|
|
{t('hero.title')}
|
|
</h1>
|
|
<p className="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
|
|
{t('hero.subtitle')}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button size="lg" onClick={() => window.location.href = '/studio'}>
|
|
{t('hero.getStarted')}
|
|
</Button>
|
|
<Button variant="outline" size="lg">
|
|
{t('hero.learnMore')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Section */}
|
|
<section id="features" className="py-24 bg-muted/30">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl font-bold text-foreground mb-4">
|
|
{t('features.title')}
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground">
|
|
Professional tools for prompt engineering and management
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<div className="bg-card p-6 rounded-lg shadow-sm border">
|
|
<Target className="h-12 w-12 text-primary mb-4" />
|
|
<h3 className="text-lg font-semibold text-card-foreground mb-2">
|
|
{t('features.promptManager.title')}
|
|
</h3>
|
|
<p className="text-muted-foreground">
|
|
{t('features.promptManager.description')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-card p-6 rounded-lg shadow-sm border">
|
|
<Layers className="h-12 w-12 text-primary mb-4" />
|
|
<h3 className="text-lg font-semibold text-card-foreground mb-2">
|
|
{t('features.versionControl.title')}
|
|
</h3>
|
|
<p className="text-muted-foreground">
|
|
{t('features.versionControl.description')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-card p-6 rounded-lg shadow-sm border">
|
|
<BarChart3 className="h-12 w-12 text-primary mb-4" />
|
|
<h3 className="text-lg font-semibold text-card-foreground mb-2">
|
|
{t('features.testing.title')}
|
|
</h3>
|
|
<p className="text-muted-foreground">
|
|
{t('features.testing.description')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-card p-6 rounded-lg shadow-sm border">
|
|
<Zap className="h-12 w-12 text-primary mb-4" />
|
|
<h3 className="text-lg font-semibold text-card-foreground mb-2">
|
|
Team Collaboration
|
|
</h3>
|
|
<p className="text-muted-foreground">
|
|
Share prompts, collaborate with team members, and maintain quality standards.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Pricing Section */}
|
|
<section id="pricing" className="py-24">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl font-bold text-foreground mb-4">
|
|
{tPricing('title')}
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground">
|
|
Choose the plan that fits your needs
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
|
<div className="bg-card p-8 rounded-lg shadow-sm border">
|
|
<div className="text-center mb-6">
|
|
<h3 className="text-2xl font-bold text-card-foreground mb-2">{tPricing('free.title')}</h3>
|
|
<div className="text-4xl font-bold text-card-foreground mb-2">{tPricing('free.price')}</div>
|
|
<p className="text-muted-foreground">Perfect for getting started</p>
|
|
</div>
|
|
<ul className="space-y-3 mb-8">
|
|
<li className="flex items-center">
|
|
<Check className="h-5 w-5 text-green-500 mr-3" />
|
|
<span className="text-card-foreground">20 Prompt Limit</span>
|
|
</li>
|
|
<li className="flex items-center">
|
|
<Check className="h-5 w-5 text-green-500 mr-3" />
|
|
<span className="text-card-foreground">3 Versions per Prompt</span>
|
|
</li>
|
|
<li className="flex items-center">
|
|
<Check className="h-5 w-5 text-green-500 mr-3" />
|
|
<span className="text-card-foreground">$5 AI Credit Monthly</span>
|
|
</li>
|
|
</ul>
|
|
<Button className="w-full" onClick={() => window.location.href = '/signup'}>
|
|
Get Started Free
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="bg-primary p-8 rounded-lg shadow-sm text-primary-foreground relative">
|
|
<div className="absolute top-4 right-4 bg-primary-foreground text-primary px-3 py-1 rounded-full text-xs font-semibold">
|
|
Popular
|
|
</div>
|
|
<div className="text-center mb-6">
|
|
<h3 className="text-2xl font-bold mb-2">{tPricing('pro.title')}</h3>
|
|
<div className="text-4xl font-bold mb-2">{tPricing('pro.price')}</div>
|
|
<p className="text-primary-foreground/80">per month</p>
|
|
</div>
|
|
<ul className="space-y-3 mb-8">
|
|
<li className="flex items-center">
|
|
<Check className="h-5 w-5 text-primary-foreground/80 mr-3" />
|
|
<span>500 Prompt Limit</span>
|
|
</li>
|
|
<li className="flex items-center">
|
|
<Check className="h-5 w-5 text-primary-foreground/80 mr-3" />
|
|
<span>10 Versions per Prompt</span>
|
|
</li>
|
|
<li className="flex items-center">
|
|
<Check className="h-5 w-5 text-primary-foreground/80 mr-3" />
|
|
<span>$20 AI Credit Monthly</span>
|
|
</li>
|
|
<li className="flex items-center">
|
|
<Check className="h-5 w-5 text-primary-foreground/80 mr-3" />
|
|
<span>Priority Support</span>
|
|
</li>
|
|
</ul>
|
|
<Button variant="outline" className="w-full bg-primary-foreground text-primary hover:bg-primary-foreground/90" onClick={() => window.location.href = '/signup'}>
|
|
Start Pro Trial
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t py-12">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex flex-col md:flex-row justify-between items-center">
|
|
<div className="flex items-center mb-4 md:mb-0">
|
|
<Zap className="h-8 w-8 text-primary" />
|
|
<span className="ml-2 text-xl font-bold text-foreground">Prmbr</span>
|
|
</div>
|
|
<div className="text-muted-foreground text-sm">
|
|
© 2024 Prmbr. All rights reserved.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
} |