diff --git a/public/podcasts/ep1.jpg b/public/podcasts/ep1.jpg new file mode 100644 index 0000000..bdf5d50 Binary files /dev/null and b/public/podcasts/ep1.jpg differ diff --git a/public/podcasts/ep2.jpg b/public/podcasts/ep2.jpg new file mode 100644 index 0000000..d48525d Binary files /dev/null and b/public/podcasts/ep2.jpg differ diff --git a/public/podcasts/ep3.jpg b/public/podcasts/ep3.jpg new file mode 100644 index 0000000..cd066ce Binary files /dev/null and b/public/podcasts/ep3.jpg differ diff --git a/public/podcasts/ep4.jpg b/public/podcasts/ep4.jpg new file mode 100644 index 0000000..3e947f1 Binary files /dev/null and b/public/podcasts/ep4.jpg differ diff --git a/public/podcasts/ep5.jpg b/public/podcasts/ep5.jpg new file mode 100644 index 0000000..2807bb9 Binary files /dev/null and b/public/podcasts/ep5.jpg differ diff --git a/public/podcasts/ep6.jpg b/public/podcasts/ep6.jpg new file mode 100644 index 0000000..087d797 Binary files /dev/null and b/public/podcasts/ep6.jpg differ diff --git a/public/podcasts/ep7.jpg b/public/podcasts/ep7.jpg new file mode 100644 index 0000000..d547638 Binary files /dev/null and b/public/podcasts/ep7.jpg differ diff --git a/public/podcasts/ep8.jpg b/public/podcasts/ep8.jpg new file mode 100644 index 0000000..9ef1b42 Binary files /dev/null and b/public/podcasts/ep8.jpg differ diff --git a/src/app/page.js b/src/app/page.js index bda1e8c..7fde368 100644 --- a/src/app/page.js +++ b/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: , title: 'Create Profile', desc: 'Sign up and build your hacker profile' }, { icon: , title: 'Discover Hackathons', desc: 'Browse and filter from 500+ events' }, @@ -196,7 +212,32 @@ export default function Home() { - + {/* ━━ INDUSTRY INSIDER PODCAST ━━ */} + +
+
+ +
+ +
+ {podcasts.map((p) => ( + + ))} +
+ +
+
+ + View All Episodes + +
+
+
+ diff --git a/src/app/page.module.css b/src/app/page.module.css index ac476be..7260246 100644 --- a/src/app/page.module.css +++ b/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; diff --git a/src/app/podcasts/page.js b/src/app/podcasts/page.js new file mode 100644 index 0000000..09b250b --- /dev/null +++ b/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 = () => ( + + + +); + +export default function PodcastsPage() { + return ( + <> +
+
+ + + + +
+
+ +
+
+ +
+ {podcasts.map((p) => ( +
+
+ {p.thumbnail ? ( + {p.title} + ) : ( +
+ 🎙️ +
+ )} +
+
+
+
{p.episode}
+
+
{p.guest}
+
{p.designation}
+
+
+

{p.title}

+

{p.summary}

+ + Watch on YouTube + +
+
+ ))} +
+ +
+
+ + ); + } diff --git a/src/app/podcasts/podcasts.module.css b/src/app/podcasts/podcasts.module.css new file mode 100644 index 0000000..92d544f --- /dev/null +++ b/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; } +} diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index b4c5a12..b2aff8c 100644 --- a/src/components/Navbar.jsx +++ b/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' }, ]; diff --git a/src/components/PodcastCard.jsx b/src/components/PodcastCard.jsx new file mode 100644 index 0000000..9e31227 --- /dev/null +++ b/src/components/PodcastCard.jsx @@ -0,0 +1,39 @@ +import styles from './PodcastCard.module.css'; + +export default function PodcastCard({ podcast }) { + return ( +
+
+ {podcast.thumbnail ? ( + {podcast.title} + ) : ( +
+ 🎙️ +
+ )} +
+
+
+
{podcast.episode}
+
+
{podcast.guest}
+
{podcast.designation}
+
+
+

{podcast.title}

+

{podcast.summary}

+ + + + + Watch on YouTube + +
+
+ ); +} diff --git a/src/components/PodcastCard.module.css b/src/components/PodcastCard.module.css new file mode 100644 index 0000000..869c12d --- /dev/null +++ b/src/components/PodcastCard.module.css @@ -0,0 +1,126 @@ +.card { + flex: 0 0 320px; + background: var(--glass-bg); + border: 1px solid var(--border-subtle); + border-radius: var(--radius-lg); + overflow: hidden; + transition: all var(--transition-base); + scroll-snap-align: start; + 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: 180px; + flex-shrink: 0; + overflow: hidden; + border-bottom: 1px solid var(--border-subtle); +} + +.thumbnailImg { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + transition: transform var(--transition-slow); +} + +.card:hover .thumbnailImg { transform: scale(1.05); } + +.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: 48px; 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: 15px; + color: var(--text-primary); + line-height: 1.4; + flex: 1; +} + +.summary { + font-size: 13px; + color: var(--text-muted); + line-height: 1.6; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.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); } diff --git a/src/data/podcasts.js b/src/data/podcasts.js new file mode 100644 index 0000000..765bc58 --- /dev/null +++ b/src/data/podcasts.js @@ -0,0 +1,90 @@ +export const podcasts = [ + { + id: 1, + episode: 'EP 01', + guest: 'Mihir Shelar', + designation: 'Technical Manager at Amazon', + guestPhoto: '/podcasts/mihirsir.jpg', + title: 'Career Secrets from Amazon Technical Manager', + summary: 'Discover how to build resilient, scalable systems with Amazon Technical Manager Mihir Shelar. This episode offers essential career advice, engineering insights, and practical strategies for staying competitive and focused in the modern, AI-driven tech landscape.', + thumbnail: '/podcasts/ep1.jpg', + youtubeUrl: 'https://youtu.be/-A9QjJcd32k', + }, + { + id: 2, + episode: 'EP 02', + guest: 'Abhijit Roy', + designation: 'Solution Architect at TCS', + guestPhoto: '/podcasts/abhijitsir.jpg', + title: 'Navigating Tech Careers: Cloud, AI, and Innovation', + summary: 'Join Abhijit Roy, a seasoned Solution Architect, as he explores the future of cloud computing, the rise of AI, and essential career strategies for students looking to excel in today’s competitive IT landscape.', + thumbnail: '/podcasts/ep2.jpg', + youtubeUrl: 'https://youtu.be/pdqg4f1ijYM', + }, + { + id: 3, + episode: 'EP 03', + guest: 'Ratna Kumar Bonagiri', + designation: 'Staff Engineer at Macys', + guestPhoto: '/podcasts/ratnasir.jpg', + title: 'Engineering Success: Lessons from Ratna Bonagiri', + summary: 'Unlock the secrets of professional growth with IEEE leader Ratna Kumar Bonagiri. Discover invaluable insights on navigating tech challenges, the power of community-driven learning, and how to build a resilient career in today’s rapidly evolving industry.', + thumbnail: '/podcasts/ep3.jpg', + youtubeUrl: 'https://youtu.be/Ka_9ZWvTJjU', + }, + { + id: 4, + episode: 'EP 04', + guest: 'Krishna Kishor Tirupati ', + designation: 'Senior Software Engineer at Microsoft ', + guestPhoto: '/podcasts/krishnasir.jpg', + title: 'From Campus to Microsoft: Expert Career Insights', + summary: 'Join a Microsoft Software Engineer Lead as he decodes the future of AI, shares essential career roadmaps for students, and provides actionable advice on mastering emerging technologies like quantum computing to land your dream role in big tech.', + thumbnail: '/podcasts/ep4.jpg', + youtubeUrl: 'https://youtu.be/cS_8kLIzpHk', + }, + { + id: 5, + episode: 'EP 05', + guest: 'Ankur Bhatnagar', + designation: 'NA', + guestPhoto: '/podcasts/ankursir.jpg', + title: 'NA', + summary: 'NA', + thumbnail: '/podcasts/ep5.jpg', + youtubeUrl: 'NA', + }, + { + id: 6, + episode: 'EP 06', + guest: 'Surya Rao Rayarao', + designation: 'Lead Software Engineer at SS&C Technologies ', + guestPhoto: '/podcasts/suryasir.jpg', + title: 'Mastering Engineering Leadership in the AI Era', + summary: 'Join Surya Rao R, Lead Software Engineer, as he shares 17+ years of industry wisdom. Discover how to transition from academic success to professional excellence, leverage AI effectively, and build a resilient, long-term career in tech.', + thumbnail: '/podcasts/ep6.jpg', + youtubeUrl: 'https://youtu.be/KMftFbyMrJc', + }, + { + id: 7, + episode: 'EP 07', + guest: 'Pratik Khedekar', + designation: 'Data Scientist at Coca-Cola South Beverages, Building DSBOOTCAMP', + guestPhoto: '/podcasts/pratiksir.jpg', + title: 'Mastering Data Science: Career & AI Trends', + summary: 'Discover the roadmap to becoming a successful data scientist. Pratik Khedekar shares expert advice on building portfolios, leveraging AI trends, and bridging the gap between technical machine learning models and impactful business decision-making.', + thumbnail: '/podcasts/ep7.jpg', + youtubeUrl: 'https://youtu.be/zCx4zvcXK6o', + }, + { + id: 8, + episode: 'EP 08', + guest: 'Eshaan Jain', + designation: 'Senior Product Manager at Mphasis Silverline (T-Mobile), Former Senior Technical Product Manager at Amazon', + guestPhoto: '/podcasts/ankursir.jpg', + title: 'Inside Product Management: Secrets to Success', + summary: 'Discover the realities of product management with industry expert Eshaan Jain. This episode explores career-defining strategies, AI-driven transformations, and essential skills every aspiring PM needs to navigate the tech industry successfully.', + thumbnail: '/podcasts/ep8.jpg', + youtubeUrl: 'https://youtu.be/dMZYpdd7XHI', + }, +];