Add blog section with navigation and blog post component (#129)

Co-authored-by: Rajat Rajdeep <rajatrajdeep@outlook.com>
Co-authored-by: Rajat Rajdeep <46029666+RajatRajdeep@users.noreply.github.com>

Author: bhansa

data/navItems.js

@@ -39,6 +39,11 @@ export const NAV_ITEMS = [
     path: '/tickets',
     target: '_self',
   },
+  {
+    name: 'Blog',
+    path: '/blogs',
+    target: '_self',
+  },
   {
     name: 'Jobs',
     children: [

pages-content/welcomeGuide.mdx

@@ -1,5 +1,3 @@
-import Link from 'next/link';
-
 We're thrilled to have you join us for the 5th edition of PyConf Hyderabad! Get ready for two days of insightful talks, hands-on workshops, and networking with fellow Python enthusiasts. Whether you're a first-time attendee or a returning participant, we can't wait to make this experience memorable for you.
 
 We have listed some essential things you should know before attending. Please take some time to go through the below details to make the most out of the event.
@@ -95,7 +93,6 @@ Follow us on social media for live updates! Share your experience using #PyConfH
 
 - Conference Day at T-Hub: 040-66396639, 09581474545
 
-
 ## Code of Conduct
 
 All participants and speakers are expected to adhere to the **Code of Conduct of PyConf Hyderabad 2025**. Please take a moment to review it here: [Code Of Conduct](/code-of-conduct)

src/app/blogs/page.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BLOGS } from '@/blogs';
+import BlogPostItem from '@/components/BlogPostItem';
+import Link from 'next/link';
+import { Heading } from '@/components/Typography';
+
+const BlogList = () => {
+  return (
+    <section className="flex flex-col items-center py-6 w-11/12 lg:w-5/6 mx-auto">
+      <Heading
+        tagLevel={1}
+        level={1}
+        className="text-center my-8 text-secondary-600 dark:text-secondary-400"
+      >
+        Blog
+      </Heading>
+      <ul className='w-full lg:w-8/12'>
+        {BLOGS.map((blog) => (
+          <Link key={blog.id} href={`/blogs/${blog.slug}`}>
+            <li>
+              <BlogPostItem blog={blog} />
+            </li>
+          </Link>
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+export default BlogList;

src/components/BlogPostItem.jsx

@@ -0,0 +1,33 @@
+import Icon from '@/components/Icon';
+import { Span, Heading, Paragraph } from '@/components/Typography';
+
+const BlogPostItem = ({ blog }) => {
+  return (
+    <article className="flex flex-col gap-2 p-6 my-6 bg-gray-50 rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
+      <div className="flex flex-wrap gap-2 justify-between items-center mb-2 text-gray-500">
+        <Span className="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800">
+          <Icon name="Announcement" size={16} className="mr-2" />
+          {blog.category || 'Announcement'}
+        </Span>
+        <Span className="text-gray-600 dark:text-gray-100">
+          {new Date(blog.publishedAt).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          })}
+        </Span>
+      </div>
+      <Heading level={4} tagLevel={2} className="text-secondary-600 dark:text-secondary-400">
+        {blog.title}
+      </Heading>
+      <Span className="font-medium dark:text-gray-50">
+          Author: {blog.author}
+        </Span>
+      <Span className="font-medium text-primary-600 dark:text-primary-500 hover:underline">
+          Read more
+        </Span>
+    </article>
+  );
+};
+
+export default BlogPostItem;

src/components/Icon.jsx

@@ -15,6 +15,7 @@ import {
   FaLocationDot,
   FaGlobe,
   FaYoutube,
+  FaVolumeLow,
 } from 'react-icons/fa6';
 import { FaExternalLinkAlt, FaArrowCircleRight } from 'react-icons/fa';
 import { MdLightMode, MdDarkMode } from 'react-icons/md';
@@ -45,6 +46,7 @@ const icons = {
   Youtube: FaYoutube,
   ExternalLink: FaExternalLinkAlt,
   ArrowCircleRight: FaArrowCircleRight,
+  Announcement: FaVolumeLow,
 };
 
 export const Icon = ({ name, size = 36, className = '', padding = 0 }) => {