Create app/page.tsx

app/page.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+export default async function HomePage() {
+  // Fetch from your API
+  const res = await fetch('https://darkvibe314-silent-movies-api.hf.space/api/search?query=2024');
+  const data = await res.json();
+  const movies = data.results || [];
+  const hero = movies[0];
+
+  return (
+    <div style={{ backgroundColor: '#0f172a', minHeight: '100vh', color: 'white', fontFamily: 'sans-serif' }}>
+      {/* Navbar */}
+      <nav style={{ padding: '20px 40px', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(10px)', position: 'fixed', width: '100%', zIndex: 100 }}>
+        <h1 style={{ color: '#e50914', fontSize: '24px', fontWeight: 'bold', margin: 0 }}>SILENT<span style={{color: 'white'}}>STREAM</span></h1>
+      </nav>
+
+      {/* Hero */}
+      {hero && (
+        <div style={{ height: '80vh', position: 'relative', display: 'flex', alignItems: 'flex-end', padding: '100px 40px', backgroundImage: `url(${hero.cover?.url})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, #0f172a 0%, transparent 100%)' }}></div>
+          <div style={{ position: 'relative', zIndex: 10 }}>
+            <h2 style={{ fontSize: '60px', fontWeight: 'bold', margin: '0 0 10px 0' }}>{hero.title}</h2>
+            <p style={{ fontSize: '20px', marginBottom: '20px' }}>⭐ {hero.imdbRatingValue} | {hero.genre}</p>
+            <a href={`/watch/${hero.subjectId}`} style={{ background: 'white', color: 'black', padding: '15px 30px', borderRadius: '5px', textDecoration: 'none', fontWeight: 'bold', fontSize: '18px' }}>▶ Play Now</a>
+          </div>
+        </div>
+      )}
+      
+      {/* Movie Row */}
+      <div style={{ padding: '0 40px', marginTop: '-50px', position: 'relative', zIndex: 20 }}>
+        <h3 style={{ fontSize: '24px', borderLeft: '4px solid #e50914', paddingLeft: '10px' }}>Trending Movies</h3>
+        <div style={{ display: 'flex', overflowX: 'auto', gap: '20px', padding: '20px 0' }}>
+          {movies.map(m => (
+            <a key={m.subjectId} href={`/watch/${m.subjectId}`} style={{ minWidth: '200px', display: 'block', borderRadius: '10px', overflow: 'hidden', transition: 'transform 0.3s' }}>
+              <img src={m.cover?.url} style={{ width: '100%', height: '300px', objectFit: 'cover' }} />
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}