Added a industry insider and podcaste section on the website

src/app/page.js

@@ -22,6 +22,8 @@ import { events } from '@/data/events';
 import { projects } from '@/data/projects';
 import { sponsors } from '@/data/sponsors';
 import styles from './page.module.css';
+import PodcastCard from '@/components/PodcastCard';
+import { podcasts } from '@/data/podcasts';
 
 export default function Home() {
   const [activeFilter, setActiveFilter] = useState('All');
@@ -43,6 +45,20 @@ export default function Home() {
     }
   };
 
+  const podcastScrollRef = useRef(null);
+
+  const scrollPodcastLeft = () => {
+  if (podcastScrollRef.current) {
+    podcastScrollRef.current.scrollBy({ left: -350, behavior: 'smooth' });
+  }
+};
+
+const scrollPodcastRight = () => {
+  if (podcastScrollRef.current) {
+    podcastScrollRef.current.scrollBy({ left: 350, behavior: 'smooth' });
+  }
+};
+
   const howItWorks = [
     { icon: <UserPlus size={28} />, title: 'Create Profile', desc: 'Sign up and build your hacker profile' },
     { icon: <Search size={28} />, title: 'Discover Hackathons', desc: 'Browse and filter from 500+ events' },
@@ -196,7 +212,32 @@ export default function Home() {
 
 
 
-
+      {/* ━━ INDUSTRY INSIDER PODCAST ━━ */}
+      <AnimatedSection>
+        <section className={`section ${styles.howSection}`}>
+          <div className="container">
+            <SectionHeading label="Podcast" title="Industry Insider" subtitle="Real conversations with builders, founders and industry leaders" />
+            <div className={styles.hackathonCarouselWrapper}>
+              <button className={`${styles.carouselBtn} ${styles.prevBtn}`} onClick={scrollPodcastLeft} aria-label="Previous episodes">
+                <ChevronLeft size={24} />
+              </button>
+              <div className={styles.podcastScroll} ref={podcastScrollRef}>
+                {podcasts.map((p) => (
+                  <PodcastCard key={p.id} podcast={p} />
+                ))}
+              </div>
+              <button className={`${styles.carouselBtn} ${styles.nextBtn}`} onClick={scrollPodcastRight} aria-label="Next episodes">
+                <ChevronRight size={24} />
+              </button>
+            </div>
+            <div className={styles.viewAll}>
+              <Link href="/podcasts" className="btn btn-ghost">
+  View All Episodes <ChevronRight size={16} />
+</Link>
+            </div>
+          </div>
+        </section>
+      </AnimatedSection>
 
 
 

src/app/page.module.css

@@ -341,6 +341,23 @@
   gap: var(--space-6);
 }
 
+.podcastScroll {
+  display: flex;
+  gap: var(--space-6);
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  padding-bottom: var(--space-4);
+  scrollbar-width: none;
+}
+
+.podcastScroll::-webkit-scrollbar { display: none; }
+
+.podcastScroll > * {
+  flex: 0 0 320px;
+  scroll-snap-align: start;
+}
+
 /* ━━ EVENTS SCROLL ━━ */
 .eventsScroll {
   display: flex;

src/app/podcasts/page.js

@@ -0,0 +1,84 @@
+import SectionHeading from '@/components/SectionHeading';
+import AnimatedSection from '@/components/AnimatedSection';
+import { podcasts } from '@/data/podcasts';
+import styles from './podcasts.module.css';
+
+export const metadata = {
+  title: "Industry Insider Podcast — Hacker's Unity",
+  description: "Real conversations with builders, founders and industry leaders.",
+};
+
+const YTIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+  </svg>
+);
+
+export default function PodcastsPage() {
+  return (
+    <>
+      <section className={styles.hero}>
+        <div className="container">
+          <AnimatedSection>
+            <SectionHeading
+              label="Podcast"
+              title="Industry Insider"
+              subtitle="Real conversations with builders, founders and industry leaders"
+            />
+            <div className={styles.ytLink}>
+              <a
+                href="https://www.youtube.com/@hackerunity"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn btn-primary"
+              >
+                <YTIcon /> Visit our YouTube Channel
+              </a>
+            </div>
+          </AnimatedSection>
+        </div>
+      </section>
+
+      <section className="section">
+        <div className="container">
+          <AnimatedSection>
+            <div className={styles.grid}>
+              {podcasts.map((p) => (
+                <div key={p.id} className={styles.card}>
+                  <div className={styles.thumbnail}>
+                    {p.thumbnail ? (
+                      <img src={p.thumbnail} alt={p.title} className={styles.thumbnailImg} />
+                    ) : (
+                      <div className={styles.thumbnailPlaceholder}>
+                        <span className={styles.placeholderIcon}>🎙️</span>
+                      </div>
+                    )}
+                  </div>
+                  <div className={styles.body}>
+                    <div className={styles.guest}>
+                      <div className={styles.episodePill}>{p.episode}</div>
+                      <div>
+                        <div className={styles.guestName}>{p.guest}</div>
+                        <div className={styles.guestDesig}>{p.designation}</div>
+                      </div>
+                    </div>
+                    <h3 className={styles.title}>{p.title}</h3>
+                    <p className={styles.summary}>{p.summary}</p>
+                    <a
+                      href={p.youtubeUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={styles.ytBtn}
+                    >
+                      <YTIcon /> Watch on YouTube
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </AnimatedSection>
+        </div>
+      </section>
+    </>
+  );
+  }

src/app/podcasts/podcasts.module.css

@@ -0,0 +1,138 @@
+.hero {
+  padding: var(--space-20) 0 var(--space-10);
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.ytLink {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--space-6);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--space-6);
+}
+
+.card {
+  background: var(--glass-bg);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: all var(--transition-base);
+  display: flex;
+  flex-direction: column;
+}
+
+.card:hover {
+  border-color: rgba(255,106,0,0.25);
+  transform: translateY(-4px);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+}
+
+.thumbnail {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.thumbnailImg {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: var(--bg-surface);
+}
+
+.thumbnailPlaceholder {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, rgba(255,106,0,0.15), rgba(0,136,255,0.15));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.placeholderIcon { font-size: 56px; opacity: 0.4; }
+
+.body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+}
+
+.guest {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.episodePill {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--gradient-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-heading);
+  font-weight: 800;
+  font-size: 10px;
+  color: white;
+  flex-shrink: 0;
+  text-align: center;
+  line-height: 1.2;
+}
+
+.guestName {
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.guestDesig {
+  font-size: 12px;
+  color: var(--accent-secondary-light);
+}
+
+.title {
+  font-family: var(--font-heading);
+  font-weight: 700;
+  font-size: 16px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.summary {
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+
+.ytBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px;
+  background: var(--gradient-primary);
+  color: white;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  transition: opacity 0.2s, transform 0.2s;
+  margin-top: auto;
+}
+
+.ytBtn:hover { opacity: 0.9; transform: translateY(-1px); }
+
+@media (max-width: 640px) {
+  .grid { grid-template-columns: 1fr; }
+}

src/components/Navbar.jsx

@@ -10,6 +10,7 @@ const navLinks = [
   { label: 'Community', href: '/community' },
   { label: 'Projects', href: '/projects' },
   // { label: 'Events', href: '/events' },
+  { label: 'Podcast', href: '/podcasts' },
   { label: 'Sponsors', href: '/sponsors' },
 ];
 

src/components/PodcastCard.jsx

@@ -0,0 +1,39 @@
+import styles from './PodcastCard.module.css';
+
+export default function PodcastCard({ podcast }) {
+  return (
+    <div className={styles.card}>
+      <div className={styles.thumbnail}>
+        {podcast.thumbnail ? (
+          <img src={podcast.thumbnail} alt={podcast.title} className={styles.thumbnailImg} />
+        ) : (
+          <div className={styles.thumbnailPlaceholder}>
+            <span className={styles.placeholderIcon}>🎙️</span>
+          </div>
+        )}
+      </div>
+      <div className={styles.body}>
+        <div className={styles.guest}>
+          <div className={styles.episodePill}>{podcast.episode}</div>
+          <div>
+            <div className={styles.guestName}>{podcast.guest}</div>
+            <div className={styles.guestDesig}>{podcast.designation}</div>
+          </div>
+        </div>
+        <h3 className={styles.title}>{podcast.title}</h3>
+        <p className={styles.summary}>{podcast.summary}</p>
+        <a
+          href={podcast.youtubeUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.ytBtn}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+          </svg>
+          Watch on YouTube
+        </a>
+      </div>
+    </div>
+  );
+}