103 lines
4.1 KiB
TypeScript
103 lines
4.1 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
import { Calendar, Clock, User } from 'lucide-react';
|
|||
|
|
import { useLanguage } from '../context/LanguageContext';
|
|||
|
|
import { Link } from 'react-router-dom';
|
|||
|
|
import { blogPostsList, BlogPostContent } from '../locales/blogContent'; // blogPostsList ve BlogPostContent interface'ini import et
|
|||
|
|
|
|||
|
|
const Blog: React.FC = () => {
|
|||
|
|
const { t } = useLanguage();
|
|||
|
|
|
|||
|
|
// Basit slug oluşturma fonksiyonu
|
|||
|
|
const createSlug = (title: string) => {
|
|||
|
|
return title
|
|||
|
|
.toLowerCase()
|
|||
|
|
.replace(/ /g, '-')
|
|||
|
|
.replace(/[^\w-]+/g, '');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="min-h-screen bg-gray-50">
|
|||
|
|
{/* Hero Section */}
|
|||
|
|
<div className="relative bg-blue-900 text-white py-24">
|
|||
|
|
<div className="absolute inset-0 opacity-20" style={{
|
|||
|
|
backgroundImage: 'url("https://images.pexels.com/photos/3183160/pexels-photo-3183160.jpeg?auto=compress&cs=tinysrgb&w=1920")',
|
|||
|
|
backgroundSize: 'cover',
|
|||
|
|
backgroundPosition: 'center',
|
|||
|
|
}}></div>
|
|||
|
|
<div className="container mx-auto pt-16 px-4 relative">
|
|||
|
|
<h1 className="text-5xl font-bold mb-6">{t('blog.title')}</h1>
|
|||
|
|
<p className="text-xl max-w-3xl">
|
|||
|
|
{t('blog.subtitle')}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Blog Posts Grid */}
|
|||
|
|
<div className="container mx-auto px-4 py-16">
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|||
|
|
{blogPostsList.map((post, index) => (
|
|||
|
|
<Link to={`/blog/${post.slug}`} key={index} className="block">
|
|||
|
|
<article className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
|
|||
|
|
<div className="aspect-w-16 aspect-h-9 relative">
|
|||
|
|
<img
|
|||
|
|
src={post.image} // Görsel bilgisi doğrudan post objesinden alınıyor
|
|||
|
|
alt={t(post.title)}
|
|||
|
|
className="object-cover w-full h-48"
|
|||
|
|
/>
|
|||
|
|
<div className="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm">
|
|||
|
|
{t(post.category)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-6">
|
|||
|
|
<h2 className="text-xl font-bold text-gray-900 mb-3 hover:text-blue-600 transition-colors">
|
|||
|
|
{t(post.title)}
|
|||
|
|
</h2>
|
|||
|
|
<p className="text-gray-600 mb-4">
|
|||
|
|
{t(post.excerpt)}
|
|||
|
|
</p>
|
|||
|
|
<div className="flex items-center text-sm text-gray-500 space-x-4">
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
<User size={16} className="mr-1" />
|
|||
|
|
{post.author} {/* Yazar bilgisi doğrudan post objesinden alınıyor */}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
<Calendar size={16} className="mr-1" />
|
|||
|
|
{t(post.date)}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
<Clock size={16} className="mr-1" />
|
|||
|
|
{post.readTime}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</article>
|
|||
|
|
</Link>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Newsletter Section */}
|
|||
|
|
<div className="bg-white py-16">
|
|||
|
|
<div className="container mx-auto px-4 text-center">
|
|||
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">{t('blog.subscribe')}</h2>
|
|||
|
|
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
|
|||
|
|
{t('blog.subscribe.desc')}
|
|||
|
|
</p>
|
|||
|
|
<div className="max-w-md mx-auto flex gap-4">
|
|||
|
|
<input
|
|||
|
|
type="email"
|
|||
|
|
placeholder={t('common.email')}
|
|||
|
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|||
|
|
/>
|
|||
|
|
<button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
|
|||
|
|
{t('common.subscribe')}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default Blog;
|