Files
znakovni.hr/packages/frontend/src/pages/Home.tsx
johnny2211 d20be4f868 Update frontend UI with improved layout and styling
- 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
2026-01-17 15:18:08 +01:00

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;