feat: add responsive styling and dark mode support for Blogs section

Author: abhishekkalme

src/pages/blogs/Blogs.css

@@ -0,0 +1,84 @@
+.blogs-section {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  padding: 2rem 1rem;
+  min-height: 100vh;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+:root {
+  --bg-color: #ffffff;
+  --text-color: #111827;
+}
+
+html[data-theme='dark'] {
+  --bg-color: #1a1a1a;
+  --text-color: #d1d5db;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
+.blogs-description {
+  font-size: 1.125rem; 
+  color: var(--muted-text);
+  line-height: 1.6;
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+:root {
+  --muted-text: #374151; 
+}
+
+html[data-theme='dark'] {
+  --muted-text: #d1d5db; 
+}
+
+
+.blog-card {
+  background-color: var(--blog-card-bg);
+  color: var(--blog-text-primary);
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.blog-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--blog-text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.blog-desc {
+  font-size: 0.95rem;
+  color: var(--blog-text-muted);
+  margin-bottom: 1rem;
+}
+
+.read-more {
+  font-weight: 600;
+  text-decoration: none;
+  transition: color 0.3s;
+}
+
+.light-link {
+  color: #3b82f6; 
+}
+
+.dark-link {
+  color: #93c5fd;
+}
+
+:root {
+  --blog-card-bg: #ffffff;
+  --blog-text-primary: #111827;
+  --blog-text-muted: #6b7280;
+}
+
+html[data-theme="dark"] {
+  --blog-card-bg: #1a1a1a;
+  --blog-text-primary: #f3f4f6;
+  --blog-text-muted: #9ca3af;
+}

src/pages/blogs/index.tsx

@@ -4,6 +4,8 @@ import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import blogs from "../../database/blogs";
 import Head from "@docusaurus/Head";
+import { useColorMode } from "@docusaurus/theme-common";
+import "./Blogs.css"; // Make sure this path is correct
 
 export default function Blogs(): React.JSX.Element {
   const { siteConfig } = useDocusaurusContext();
@@ -20,15 +22,16 @@ export default function Blogs(): React.JSX.Element {
           src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"
         />
       </Head>
-      <section className="m-4 my-10">
+      <section className="blogs-section">
         <div className="text-center mb-8">
           <h1 className="text-4xl font-bold gradient-text">
             Welcome to RecodeHive Blogs
           </h1>
-          <p className="text-lg text-gray-700 dark:text-gray-300">
+          <p className="blogs-description">
             Discover web development articles ranging from HTML and CSS to
             JavaScript, React, Node.js, DSA, and much more.
           </p>
+
         </div>
         <div className="grid gap-6 grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
           {blogs.map((blog) => (
@@ -40,10 +43,11 @@ export default function Blogs(): React.JSX.Element {
   );
 }
 
-
 const BlogCard = ({ blog }) => {
+  const { colorMode } = useColorMode();
+
   return (
-    <div className="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
+    <div className="blog-card shadow-lg rounded-lg overflow-hidden">
       <Link to={`/blog/${blog.slug}`}>
         <img
           src={blog.image}
@@ -52,17 +56,15 @@ const BlogCard = ({ blog }) => {
         />
       </Link>
       <div className="p-4">
-        <h2 className="text-xl font-semibold text-white">{blog.title}</h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-4">
-          {blog.description}
-        </p>
+        <h2 className="blog-title">{blog.title}</h2>
+        <p className="blog-desc">{blog.description}</p>
         <Link
           to={`/blog/${blog.slug}`}
-          className="text-blue-600 dark:text-blue-400 hover:underline"
+          className={`read-more ${colorMode === "dark" ? "dark-link" : "light-link"}`}
         >
-          Read More
+          Read More →
         </Link>
       </div>
     </div>
   );
-};
+};