| import Head from "next/head"; | |
| import HeroSection from "@/components/HeroSection"; | |
| const HomePage = () => { | |
| return ( | |
| <> | |
| <Head> | |
| <title>Home Page</title> | |
| <meta | |
| name="description" | |
| content="Home page for the streaming service" | |
| /> | |
| <link rel="icon" href="/favicon.ico" /> | |
| </Head> | |
| <div style={styles.container}> | |
| <HeroSection /> | |
| <h2 style={styles.sectionTitle}>Popular TV Shows</h2> | |
| <div style={styles.gridContainer}> | |
| {[ | |
| "https://cdn.usegalileo.ai/stability/687bdd7d-7a06-425e-b527-7e18f4fe2201.png", | |
| "https://cdn.usegalileo.ai/stability/acb62b11-0501-4e27-b6ba-83eed9b83e95.png", | |
| "https://cdn.usegalileo.ai/stability/78f55a19-d0fa-4986-a7cb-60190a3fa76f.png", | |
| "https://cdn.usegalileo.ai/stability/05bd1020-2f24-4a82-9b8f-2680fa920751.png", | |
| "https://cdn.usegalileo.ai/stability/912a274b-dd29-4b40-9140-1c1dcd76bd07.png", | |
| "https://cdn.usegalileo.ai/sdxl10/a9cf44f2-a00c-4aaa-8350-7c70cfaa4dd0.png", | |
| "https://cdn.usegalileo.ai/stability/0eee4644-0e4c-4549-8c6a-c445b3903d3c.png", | |
| "https://cdn.usegalileo.ai/sdxl10/089b78f9-0a0a-4f17-a7a1-4684c3b5efb1.png", | |
| "https://cdn.usegalileo.ai/sdxl10/f4aa01e0-cfe0-4a32-a419-9ef37149b620.png", | |
| "https://cdn.usegalileo.ai/stability/95bccea1-1d96-4395-bd11-feb0d7650b30.png", | |
| "https://cdn.usegalileo.ai/stability/4a3482f4-899f-4dc9-9806-03025979894b.png", | |
| "https://images.unsplash.com/photo-1639452127871-8c6ea78d2b11?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTI0NDl8MHwxfHNlYXJjaHw0fHxkYXJrJTIwdGhlbWV8ZW58MXx8fHwxNzI0NDkwMjIyfDA&ixlib=rb-4.0.3&q=80&w=1080", | |
| ].map((url, index) => ( | |
| <div key={index} style={styles.imageWrapper}> | |
| <div | |
| style={{ ...styles.image, backgroundImage: `url(${url})` }} | |
| /> | |
| </div> | |
| ))} | |
| </div> | |
| <h2 style={styles.sectionTitle}>Trending Movies</h2> | |
| <div style={styles.gridContainer}> | |
| {[ | |
| "https://cdn.usegalileo.ai/sdxl10/e410f67a-8111-44e4-8370-99ffbfeeb7f1.png", | |
| "https://cdn.usegalileo.ai/stability/953f8b85-e6b9-4906-8e47-c9d12bf6c9e6.png", | |
| "https://cdn.usegalileo.ai/stability/58480847-a20d-4ad8-8ef7-aebf592bc4fb.png", | |
| "https://cdn.usegalileo.ai/stability/e354bd6d-aa67-44be-be97-28be6bc058f0.png", | |
| "https://cdn.usegalileo.ai/sdxl10/d251f08e-3da4-4d05-937d-1cbb318ca2e4.png", | |
| "https://cdn.usegalileo.ai/stability/f870c303-f081-4ce7-b89a-5c7336dce39e.png", | |
| "https://cdn.usegalileo.ai/stability/6fad613e-3db5-436f-a4d0-e5f4651a6fe0.png", | |
| "https://cdn.usegalileo.ai/sdxl10/4b19f651-702b-4474-8800-e81184b43539.png", | |
| "https://cdn.usegalileo.ai/stability/89022a7e-44c9-42d5-b671-2d10fe48ad07.png", | |
| "https://cdn.usegalileo.ai/stability/a6873021-6f80-47de-bf2c-f4facf9a7eb7.png", | |
| "https://cdn.usegalileo.ai/stability/a49b740a-d6ae-42da-a446-5877abf5c63d.png", | |
| "https://cdn.usegalileo.ai/stability/2e6bd747-164e-4f5e-baf7-91fa3af15f25.png", | |
| ].map((url, index) => ( | |
| <div key={index} style={styles.imageWrapper}> | |
| <div | |
| style={{ ...styles.image, backgroundImage: `url(${url})` }} | |
| /> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </> | |
| ); | |
| }; | |
| const styles = { | |
| container: { | |
| display: "flex", | |
| flexDirection: "column", | |
| maxWidth: "960px", | |
| margin: "0 auto", | |
| flex: 1, | |
| }, | |
| heroSection: { | |
| display: "flex", | |
| minHeight: "400px", | |
| flexDirection: "column", | |
| justifyContent: "flex-end", | |
| backgroundImage: | |
| 'linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), url("https://cdn.usegalileo.ai/sdxl10/5e86a222-949b-4c84-b77b-bec08e557e36.png")', | |
| backgroundSize: "cover", | |
| backgroundPosition: "center", | |
| padding: "0 16px 40px", | |
| borderRadius: "16px", | |
| color: "#ffffff", | |
| textAlign: "left", | |
| }, | |
| heroContent: { | |
| display: "flex", | |
| flexDirection: "column", | |
| gap: "16px", | |
| }, | |
| heroTitle: { | |
| fontSize: "2.5rem", | |
| fontWeight: "bold", | |
| lineHeight: "1.2", | |
| }, | |
| heroSubtitle: { | |
| fontSize: "1rem", | |
| fontWeight: "normal", | |
| lineHeight: "1.4", | |
| }, | |
| playButton: { | |
| display: "flex", | |
| alignItems: "center", | |
| justifyContent: "center", | |
| width: "auto", | |
| height: "40px", | |
| padding: "0 16px", | |
| borderRadius: "8px", | |
| backgroundColor: "#695ffa", | |
| color: "#ffffff", | |
| fontSize: "1rem", | |
| fontWeight: "bold", | |
| cursor: "pointer", | |
| }, | |
| sectionTitle: { | |
| color: "#ffffff", | |
| fontSize: "1.4rem", | |
| fontWeight: "bold", | |
| margin: "16px 0", | |
| paddingLeft: "16px", | |
| }, | |
| gridContainer: { | |
| display: "grid", | |
| gridTemplateColumns: "repeat(auto-fit, minmax(158px, 1fr))", | |
| gap: "16px", | |
| padding: "0 16px", | |
| }, | |
| imageWrapper: { | |
| display: "flex", | |
| flexDirection: "column", | |
| gap: "8px", | |
| }, | |
| image: { | |
| width: "100%", | |
| backgroundSize: "cover", | |
| backgroundPosition: "center", | |
| aspectRatio: "16/9", | |
| borderRadius: "16px", | |
| height: "100%", | |
| }, | |
| }; | |
| export default HomePage; | |