feat: add clickable navigation to market cards

- HeroCard and NewsPredictionCard accept optional href prop
- Cards link to /markets/[id] for full market detail view
- Homepage hero + trending cards, explore page cards all linked
- Hover states added for visual feedback

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: magicnight

newspredict/src/app/explore/page.tsx

@@ -26,6 +26,7 @@ export default function ExplorePage() {
     yesPercent: Math.round((m.yesPrice || 0.5) * 100),
     noPercent: Math.round((m.noPrice || 0.5) * 100),
     isHot: m.volume > 100,
+    href: `/markets/${m.id}`,
   }));
 
   return (

newspredict/src/app/page.tsx

@@ -60,6 +60,7 @@ export default async function HomePage() {
     yesPercent: Math.round((m.yesPrice || 0.5) * 100),
     noPercent: Math.round((m.noPrice || 0.5) * 100),
     isHot: m.volume > 100,
+    href: `/markets/${m.id}`,
   }));
   const quickPoll = markets[1] || markets[0] || null;
   const resolvedCard = resolved[0] || null;
@@ -87,6 +88,7 @@ export default async function HomePage() {
             noPercent={Math.round((hero.noPrice || 0.5) * 100)}
             volume={hero.volume > 0 ? `$${hero.volume}` : '$0'}
             isLive={hero.status === 'open'}
+            href={`/markets/${hero.id}`}
           />
         ) : (
           <div className="rounded-xl border border-[var(--border)] p-6 text-center text-[var(--muted)] text-sm">

newspredict/src/components/cards/hero-card.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import Link from 'next/link';
+
 interface HeroCardProps {
   title: string;
   category: string;
@@ -9,6 +11,7 @@ interface HeroCardProps {
   isLive?: boolean;
   viewerCount?: string;
   imageUrl?: string;
+  href?: string;
 }
 
 export function HeroCard({
@@ -20,9 +23,12 @@ export function HeroCard({
   isLive,
   viewerCount,
   imageUrl,
+  href,
 }: HeroCardProps) {
+  const Wrapper = href ? Link : 'div';
+  const wrapperProps = href ? { href } : {};
   return (
-    <div className="rounded-2xl overflow-hidden bg-[var(--card)]">
+    <Wrapper {...wrapperProps as any} className="block rounded-2xl overflow-hidden bg-[var(--card)] hover:ring-1 hover:ring-[var(--accent)]/30 transition-all">
       <div
         className="relative h-40 flex items-end p-4"
         style={{
@@ -60,6 +66,6 @@ export function HeroCard({
           <span>${volume} vol</span>
         </div>
       </div>
-    </div>
+    </Wrapper>
   );
 }

newspredict/src/components/cards/news-prediction-card.tsx

@@ -1,12 +1,15 @@
 'use client';
 
+import Link from 'next/link';
+
 interface NewsPredictionCardProps {
   title: string;
   category: string;
   yesPercent: number;
   noPercent: number;
   isHot?: boolean;
   imageUrl?: string;
+  href?: string;
 }
 
 export function NewsPredictionCard({
@@ -16,9 +19,12 @@ export function NewsPredictionCard({
   noPercent,
   isHot,
   imageUrl,
+  href,
 }: NewsPredictionCardProps) {
+  const Wrapper = href ? Link : 'div';
+  const wrapperProps = href ? { href } : {};
   return (
-    <div className="flex gap-3 bg-[var(--card)] rounded-xl p-3">
+    <Wrapper {...wrapperProps as any} className="flex gap-3 bg-[var(--card)] rounded-xl p-3 hover:bg-[var(--card-hover)] transition-colors block">
       <div
         className="w-[72px] h-[72px] rounded-lg shrink-0"
         style={{
@@ -39,6 +45,6 @@ export function NewsPredictionCard({
           {isHot && <span className="text-xs ml-auto">Hot</span>}
         </div>
       </div>
-    </div>
+    </Wrapper>
   );
 }