- Enhanced homepage with modern design and better visual hierarchy - Improved login page with centered layout and better UX - Updated admin page with cleaner interface - Refined sidebar navigation and layout components - Updated Tailwind config and global styles - Fixed protected route component
77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import { Layout } from '../components/layout/Layout';
|
|
import { BookOpen, FileText, Video, Cloud } from 'lucide-react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
function Home() {
|
|
const features = [
|
|
{
|
|
name: 'Riječi',
|
|
description: 'Browse and search Croatian sign language dictionary',
|
|
icon: BookOpen,
|
|
href: '/dictionary',
|
|
color: 'bg-indigo-600',
|
|
},
|
|
{
|
|
name: 'Znakopis',
|
|
description: 'Build sentences using sign language',
|
|
icon: FileText,
|
|
href: '/znakopis',
|
|
color: 'bg-gray-400',
|
|
},
|
|
{
|
|
name: 'Video rečenica',
|
|
description: 'Watch and learn from video sentences',
|
|
icon: Video,
|
|
href: '/video-sentence',
|
|
color: 'bg-orange-600',
|
|
},
|
|
{
|
|
name: 'Oblak',
|
|
description: 'Save and manage your documents in the cloud',
|
|
icon: Cloud,
|
|
href: '/cloud',
|
|
color: 'bg-indigo-600',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="space-y-8">
|
|
<div className="text-center">
|
|
<h1 className="text-4xl font-bold text-foreground mb-4">
|
|
Tvoj put u svijet znakovnog jezika
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground">
|
|
Hrvatski znakovni jezik - platforma za učenje i komunikaciju
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
|
|
{features.map((feature) => (
|
|
<Link
|
|
key={feature.name}
|
|
to={feature.href}
|
|
className="block p-6 bg-white rounded-lg shadow hover:shadow-lg transition-shadow"
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className={`p-3 rounded-lg ${feature.color}`}>
|
|
<feature.icon className="h-8 w-8 text-white" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-foreground">
|
|
{feature.name}
|
|
</h3>
|
|
<p className="text-muted-foreground mt-1">{feature.description}</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export default Home;
|
|
|