৪.৪: ব্লগ পেজ তৈরি করা

mkdir -p app/blog

import Image from 'next/image'
import Link from 'next/link'

export default function BlogPage() {
  // ডামি ব্লগ পোস্ট ডাটা
  const blogPosts = [
    {
      id: 1,
      title: 'Next.js দিয়ে মডার্ন ওয়েবসাইট তৈরি করার সেরা পদ্ধতি',
      excerpt: 'Next.js হল একটি React ফ্রেমওয়ার্ক যা মডার্ন ওয়েবসাইট তৈরি করার জন্য ব্যবহার করা হয়। এই পোস্টে আমরা Next.js দিয়ে ওয়েবসাইট তৈরি করার সেরা পদ্ধতি সম্পর্কে আলোচনা করব।',
      date: '১০ জুন, ২০২৩',
      author: 'রাকিব হাসান',
      category: 'ওয়েব ডেভেলপমেন্ট',
      image: '/placeholder.svg?height=300&width=600'
    },
    {
      id: 2,
      title: 'UI/UX ডিজাইনের ৫টি গুরুত্বপূর্ণ নীতি',
      excerpt: 'UI/UX ডিজাইন একটি ওয়েবসাইট বা অ্যাপের সাফল্যের জন্য খুবই গুরুত্বপূর্ণ। এই পোস্টে আমরা UI/UX ডিজাইনের ৫টি গুরুত্বপূর্ণ নীতি সম্পর্কে আলোচনা করব।',
      date: '৫ জুন, ২০২৩',
      author: 'নাজমুল হাসান',
      category: 'UI/UX ডিজাইন',
      image: '/placeholder.svg?height=300&width=600'
    },
    {
      id: 3,
      title: 'React Native দিয়ে মোবাইল অ্যাপ তৈরি করার সুবিধা',
      excerpt: 'React Native হল একটি ক্রস-প্ল্যাটফর্ম মোবাইল অ্যাপ ডেভেলপমেন্ট ফ্রেমওয়ার্ক। এই পোস্টে আমরা React Native দিয়ে মোবাইল অ্যাপ তৈরি করার সুবিধা সম্পর্কে আলোচনা করব।',
      date: '১ জুন, ২০২৩',
      author: 'আবদুল করিম',
      category: 'মোবাইল অ্যাপ ডেভেলপমেন্ট',
      image: '/placeholder.svg?height=300&width=600'
    },
    {
      id: 4,
      title: 'ওয়েবসাইটের পারফরম্যান্স অপটিমাইজেশন টিপস',
      excerpt: 'ওয়েবসাইটের পারফরম্যান্স ইউজার এক্সপেরিয়েন্স এবং SEO এর জন্য খুবই গুরুত্বপূর্ণ। এই পোস্টে আমরা ওয়েবসাইটের পারফরম্যান্স অপটিমাইজেশন টিপস সম্পর্কে আলোচনা করব।',
      date: '২৫ মে, ২০২৩',
      author: 'রাকিব হাসান',
      category: 'ওয়েব ডেভেলপমেন্ট',
      image: '/placeholder.svg?height=300&width=600'
    },
    {
      id: 5,
      title: 'ই-কমার্স ওয়েবসাইট তৈরির ৭টি গুরুত্বপূর্ণ বিষয়',
      excerpt: 'ই-কমার্স ওয়েবসাইট তৈরি করার সময় কিছু গুরুত্বপূর্ণ বিষয় মাথায় রাখতে হয়। এই পোস্টে আমরা ই-কমার্স ওয়েবসাইট তৈরির ৭টি গুরুত্বপূর্ণ বিষয় সম্পর্কে আলোচনা করব।',
      date: '২০ মে, ২০২৩',
      author: 'ফারহানা আক্তার',
      category: 'ই-কমার্স',
      image: '/placeholder.svg?height=300&width=600'
    },
    {
      id: 6,
      title: 'সোশ্যাল মিডিয়া মার্কেটিং: একটি বিস্তারিত গাইড',
      excerpt: 'সোশ্যাল মিডিয়া মার্কেটিং আজকের ডিজিটাল যুগে ব্যবসার প্রচারের জন্য খুবই গুরুত্বপূর্ণ। এই পোস্টে আমরা সোশ্যাল মিডিয়া মার্কেটিং সম্পর্কে বিস্তারিত আলোচনা করব।',
      date: '১৫ মে, ২০২৩',
      author: 'ফারহানা আক্তার',
      category: 'ডিজিটাল মার্কেটিং',
      image: '/placeholder.svg?height=300&width=600'
    },
  ]
  
  return (
    <div>
      {/* হেডার সেকশন */}
      <section className="bg-gray-100 py-16">
        <div className="container-custom">
          <div className="text-center">
            <h1 className="text-4xl font-bold mb-6">আমাদের ব্লগ</h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              ওয়েব ডেভেলপমেন্ট, UI/UX ডিজাইন, মোবাইল অ্যাপ ডেভেলপমেন্ট এবং ডিজিটাল মার্কেটিং সম্পর্কে আমাদের সর্বশেষ আর্টিকেল পড়ুন।
            </p>
          </div>
        </div>
      </section>
      
      {/* ফিচার্ড পোস্ট */}
      <section className="py-12">
        <div className="container-custom">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="grid grid-cols-1 md:grid-cols-2">
              <div className="relative h-64 md:h-auto">
                <Image 
                  src={blogPosts[0].image || "/placeholder.svg"}
                  alt={blogPosts[0].title}
                  fill
                  className="object-cover"
                />
              </div>
              <div className="p-8">
                <div className="flex items-center text-sm text-gray-500 mb-2">
                  <span>{blogPosts[0].date}</span>
                  <span className="mx-2">•</span>
                  <span>{blogPosts[0].category}</span>
                </div>
                <h2 className="text-2xl font-bold mb-4">{blogPosts[0].title}</h2>
                <p className="text-gray-600 mb-6">{blogPosts[0].excerpt}</p>
                <div className="flex items-center mb-6">
                  <div className="w-10 h-10 bg-gray-300 rounded-full mr-3"></div>
                  <span className="text-gray-700">{blogPosts[0].author}</span>
                </div>
                <Link href={`/blog/${blogPosts[0].id}`} className="btn-primary inline-block">
                  পুরো পোস্ট পড়ুন
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* সব পোস্ট */}
      <section className="py-12 bg-gray-50">
        <div className="container-custom">
          <h2 className="text-3xl font-bold mb-8">সব পোস্ট</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {blogPosts.slice(1).map(post => (
              <div key={post.id} className="bg-white rounded-lg shadow-md overflow-hidden">
                <div className="relative h-48">
                  <Image 
                    src={post.image || "/placeholder.svg"}
                    alt={post.title}
                    fill
                    className="object-cover"
                  />
                </div>
                <div className="p-6">
                  <div className="flex items-center text-sm text-gray-500 mb-2">
                    <span>{post.date}</span>
                    <span className="mx-2">•</span>
                    <span>{post.category}</span>
                  </div>
                  <h3 className="text-xl font-bold mb-3">{post.title}</h3>
                  <p className="text-gray-600 mb-4">{post.excerpt.substring(0, 120)}...</p>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center">
                      <div className="w-8 h-8 bg-gray-300 rounded-full mr-2"></div>
                      <span className="text-sm text-gray-700">{post.author}</span>
                    </div>
                    <Link href={`/blog/${post.id}`} className="text-blue-600 hover:underline text-sm">
                      পড়ুন →
                    </Link>
                  </div>
                </div>
              </div>
            ))}
          </div>
          
          {/* পেজিনেশন */}
          <div className="flex justify-center mt-12">
            <div className="flex space-x-2">
              <button className="px-4 py-2 border rounded bg-white">পূর্ববর্তী</button>
              <button className="px-4 py-2 border rounded bg-blue-600 text-white">১</button>
              <button className="px-4 py-2 border rounded bg-white">২</button>
              <button className="px-4 py-2 border rounded bg-white">৩</button>
              <button className="px-4 py-2 border rounded bg-white">পরবর্তী</button>
            </div>
          </div>
        </div>
      </section>
      
      {/* নিউজলেটার সেকশন */}
      <section className="py-16 bg-blue-600 text-white">
        <div className="container-custom">
          <div className="max-w-2xl mx-auto text-center">
            <h2 className="text-3xl font-bold mb-6">আমাদের নিউজলেটার সাবস্ক্রাইব করুন</h2>
            <p className="text-xl mb-8">
              আমাদের সর্বশেষ আর্টিকেল এবং আপডেট পেতে আমাদের নিউজলেটার সাবস্ক্রাইব করুন।
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <input 
                type="email" 
                placeholder="আপনার ইমেইল এড্রেস" 
                className="flex-grow px-4 py-3 rounded-lg text-gray-900"
              />
              <button className="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors">
                সাবস্ক্রাইব
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}