69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import { Layout } from '@/components/Layout';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useBranding } from '@/hooks/useBranding';
|
|
import { TestimonialsSection } from '@/components/reviews/TestimonialsSection';
|
|
import { ArrowRight, BookOpen, Video, Users, Star, Award, Target, Zap, Heart, Shield, Rocket } from 'lucide-react';
|
|
|
|
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
|
Users,
|
|
Video,
|
|
BookOpen,
|
|
Star,
|
|
Award,
|
|
Target,
|
|
Zap,
|
|
Heart,
|
|
Shield,
|
|
Rocket,
|
|
};
|
|
|
|
export default function Index() {
|
|
const branding = useBranding();
|
|
|
|
return (
|
|
<Layout>
|
|
<section className="container mx-auto px-4 py-16 text-center">
|
|
<h1 className="text-5xl md:text-6xl font-bold mb-6">
|
|
{branding.homepage_headline}
|
|
</h1>
|
|
<p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
|
|
{branding.homepage_description}
|
|
</p>
|
|
<div className="flex gap-4 justify-center">
|
|
<Link to="/products">
|
|
<Button size="lg" className="shadow-sm">
|
|
Browse Products
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
|
</Button>
|
|
</Link>
|
|
<Link to="/auth">
|
|
<Button size="lg" variant="outline" className="border-2">
|
|
Get Started
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="container mx-auto px-4 py-16">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{branding.homepage_features.map((feature, index) => {
|
|
const IconComponent = iconMap[feature.icon] || Users;
|
|
return (
|
|
<div key={index} className="border-2 border-border p-8 shadow-sm">
|
|
<IconComponent className="w-12 h-12 mb-4" />
|
|
<h3 className="text-2xl font-bold mb-2">{feature.title}</h3>
|
|
<p className="text-muted-foreground">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
<TestimonialsSection />
|
|
</Layout>
|
|
);
|
|
}
|