feat: add trending podcasts discovery page with genre filtering and subscription support

frontend/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Podcastic - Stream your favorite podcasts" />
     <meta name="theme-color" content="#020617" />

frontend/public/favicon.svg

@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#6366f1" />
+      <stop offset="100%" style="stop-color:#f43f5e" />
+    </linearGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
+      <feOffset dx="1" dy="1" result="offsetblur"/>
+      <feComponentTransfer>
+        <feFuncA type="linear" slope="0.3"/>
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  <!-- Background with premium gradient -->
+  <rect width="100" height="100" rx="30" fill="url(#grad)" />
+  
+  <!-- Microphone Icon -->
+  <g filter="url(#shadow)">
+    <!-- Mic Body -->
+    <rect x="42" y="25" width="16" height="30" rx="8" fill="white" />
+    <!-- Mic Stand/Ring -->
+    <path d="M35 50c0 8.3 6.7 15 15 15s15-6.7 15-15" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" />
+    <!-- Stand Neck -->
+    <line x1="50" y1="65" x2="50" y2="75" stroke="white" stroke-width="4" stroke-linecap="round" />
+    <!-- Stand Base -->
+    <line x1="40" y1="75" x2="60" y2="75" stroke="white" stroke-width="4" stroke-linecap="round" />
+  </g>
+</svg>

frontend/src/pages/Trending.tsx

@@ -165,7 +165,7 @@ export default function Trending() {
           </div>
 
           {/* Genre Pills with Scroll Indicators */}
-          <div className="relative w-full min-w-0 group/genres mb-14">
+          <div className="relative flex-1 min-w-0 group/genres mb-14">
             {/* Fade effect left */}
             <div className="absolute left-0 top-0 bottom-4 w-12 bg-gradient-to-r from-[var(--bg-primary)] to-transparent z-10 pointer-events-none opacity-100 sm:hidden" />