الاستجابة والوضع الداكن والحالات

function BlogPage() {
  const posts = [
    { id: 1, title: "Intro to Tailwind", excerpt: "Learn Tailwind CSS basics", image: "/post1.jpg", date: "Jan 15", tag: "Tailwind" },
    { id: 2, title: "Responsive Design", excerpt: "Build for all devices", image: "/post2.jpg", date: "Jan 12", tag: "CSS" },
    { id: 3, title: "Dark Mode in React", excerpt: "Implement dark mode", image: "/post3.jpg", date: "Jan 10", tag: "React" },
  ];

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <nav className="bg-white dark:bg-gray-800 shadow-md">
        <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
          <span className="text-xl font-bold text-indigo-600">MyBlog</span>
          <div className="hidden md:flex items-center gap-6">
            <a href="#" className="text-gray-700 dark:text-gray-300 hover:text-indigo-600 transition-colors">Home</a>
            <a href="#" className="text-gray-700 dark:text-gray-300 hover:text-indigo-600 transition-colors">Articles</a>
            <a href="#" className="text-gray-700 dark:text-gray-300 hover:text-indigo-600 transition-colors">About</a>
          </div>
          <button className="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">Menu</button>
        </div>
      </nav>
      <main className="max-w-7xl mx-auto px-4 py-12">
        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-8">Latest Articles</h1>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {posts.map((post) => (
            <a key={post.id} href="#" className="group block bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 hover:scale-[1.02] focus-visible:ring-4 focus-visible:ring-indigo-300 focus-visible:outline-none">
              <div className="overflow-hidden h-48">
                <img src={post.image} alt={post.title} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
              </div>
              <div className="p-5">
                <span className="text-xs font-medium px-2.5 py-1 rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 mb-3 inline-block">{post.tag}</span>
                <h2 className="text-lg font-bold text-gray-900 dark:text-white group-hover:text-indigo-600 transition-colors mb-2">{post.title}</h2>
                <p className="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">{post.excerpt}</p>
                <span className="text-xs text-gray-500 dark:text-gray-500">{post.date}</span>
              </div>
            </a>
          ))}
        </div>
      </main>
    </div>
  );
}