From a0829ea77e3f05dc569921eb2b4ba7749c6ea4a0 Mon Sep 17 00:00:00 2001 From: Stephanie-ib Date: Thu, 4 Sep 2025 12:47:45 +0100 Subject: [PATCH 1/2] Initial UI commit --- .DS_Store | Bin 0 -> 6148 bytes frontend/package-lock.json | 10 ++ frontend/package.json | 1 + frontend/src/App.jsx | 194 +++++++++++++++++++++- frontend/src/components/ContentCard.jsx | 30 ++++ frontend/src/components/SectionHeader.jsx | 10 ++ 6 files changed, 244 insertions(+), 1 deletion(-) create mode 100644 .DS_Store create mode 100644 frontend/src/components/ContentCard.jsx create mode 100644 frontend/src/components/SectionHeader.jsx diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..1561cf3d4c369187fe937e84b9b112a21b296c60 GIT binary patch literal 6148 zcmeHK%}T>S5Z-O8-BN@c6nb3nTClaXC|*LXFJMFuDzzb1gE3p$)Er77XMG``#OHBl zcLSE@;7P>Jz~-BspWU4gvOkP5-k%3;#vI0&fQHCXDG)Rlx=J<}k?S!MHfAvk{B$-c z80asWaP5LUuqjip@^9<+Bjtnd!=FUqENQhqd8u64+OCSKsEa%ANu^#gO6IfvXnKRa zOQj+|*GK+UI8KMo?wN{{Q5cV>Iw1_k5ORAR#(_%vY90qOo$DEgsEOLpX)G4q_Hk2o zj(W?cT$~)XnzGyJEtfU1w|{VYF?^0*V)bUo2KCkfAG|)Jzk-MYI=&?krA60b zW)M6e+@u1URBoRb+@ynD+Bnx@X3(TFu4jgE?9BP&h3nbDE_FELu0i?|1H`~817*{7 z@cciAU#9SpznVflVt^R-VQKtNx)1V9J(k%o2} czeFA4T#K1O90lz<9gr>pnh^RB1HZt)7ur2d9RL6T literal 0 HcmV?d00001 diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 1473d4c..23f6041 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "axios": "^1.11.0", + "lucide-react": "^0.542.0", "react": "^19.1.1", "react-dom": "^19.1.1" }, @@ -2981,6 +2982,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.542.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.542.0.tgz", + "integrity": "sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 3bf3790..6f52452 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "axios": "^1.11.0", + "lucide-react": "^0.542.0", "react": "^19.1.1", "react-dom": "^19.1.1" }, diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index b5078f6..d99cd07 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,5 +1,196 @@ import { useState } from 'react' +import SectionHeader from './components/SectionHeader'; +import ContentCard from './components/ContentCard'; +const App = () => { + + const tvShows = [ + { + id: 1, + title: "Platonic", + genre: "Comedy", + image: "https://is1-ssl.mzstatic.com/image/thumb/rBI93Qq60YpBP60maTBNbg/680x382.webp" + }, + { + id: 2, + title: "Invasion", + genre: "Sci-Fi", + image: "https://is1-ssl.mzstatic.com/image/thumb/hH3rVWDItz3USIX5bBSEcw/680x382.webp" + }, + { + id: 3, + title: "Chief of War", + genre: "Drama", + image: "https://is1-ssl.mzstatic.com/image/thumb/twLCcLLXmcLBqEf3Af3vww/680x382.webp" + }, + { + id: 4, + title: "Foundation", + genre: "Sci-Fi", + image: "https://is1-ssl.mzstatic.com/image/thumb/Xye2zsX5gxLetoLRdTgNLA/680x382.webp" + }, + { + id: 5, + title: "Ted Lasso", + genre: "Comedy", + image: "https://is1-ssl.mzstatic.com/image/thumb/ageP1PYyLi7UlNiWMva32Q/680x382.webp" + }, + { + id: 6, + title: "Acapulco", + genre: "Comdey", + image: "https://is1-ssl.mzstatic.com/image/thumb/Ec4GedDwtKAxOrCp_VOF-g/680x382.webp" + }, + { + id: 7, + title: "Severance", + genre: "Thriller", + image: "https://is1-ssl.mzstatic.com/image/thumb/EUeDAPovZrBtOcrP2Da5Lw/680x382.webp" + }, + { + id: 8, + title: "Slow Horses", + genre: "Thriller", + image: "https://is1-ssl.mzstatic.com/image/thumb/S2T1FMcov5a0GzmninlU4Q/680x382.webp" + }, + { + id: 9, + title: "Shrinking", + genre: "Comedy", + image: "https://is1-ssl.mzstatic.com/image/thumb/C34jADlGtR5wObjPAMbW4w/680x382.webp" + }, + { + id: 10, + title: "Stick", + genre: "Comdey", + image: "https://is1-ssl.mzstatic.com/image/thumb/Axf6fFibiK2puSTzKXvgpA/680x382.webp" + } + ]; + + const movies = [ + { + id: 1, + title: "The Gorge", + year: "2025", + genre: "Thriller", + image: "https://is1-ssl.mzstatic.com/image/thumb/3pfG0GJkoI0OFlPiIDdvUQ/680x382.webp" + }, + { + id: 2, + title: "Fountain of Youth", + year: "2025", + genre: "Action", + image: "https://is1-ssl.mzstatic.com/image/thumb/4UEcdeb6Xoc40fhFSAr3Og/680x382.webp" + }, + { + id: 3, + title: "Echo Valley", + year: "2025", + genre: "Thriller", + image: "https://is1-ssl.mzstatic.com/image/thumb/gy_-HeK7Awo48x2fPuAy_w/680x382.webp" + }, + { + id: 4, + title: "Greyhound", + year: "2020", + genre: "Action", + image: "https://is1-ssl.mzstatic.com/image/thumb/oANBVngpEJDvHRhdyozySA/680x382.webp" + }, + { + id: 5, + title: "Wolfs", + year: "2024", + genre: "Action", + image: "https://is1-ssl.mzstatic.com/image/thumb/2eBqvT3JXPbdzHWj6HM5_w/680x382.webp" + }, + { + id: 6, + title: "The Family Plan", + year: "2023", + genre: "Comdey", + image: "https://is1-ssl.mzstatic.com/image/thumb/tPJwMGtsAr_psAVlyf2Rzg/680x382.webp" + }, + { + id: 7, + title: "Killers of the Moon", + year: "2023", + genre: "Crime", + image: "https://is1-ssl.mzstatic.com/image/thumb/rss8pF-klNy76S-NWFue-A/680x382.webp" + }, + { + id: 8, + title: "Ghosted", + year: "2023", + genre: "Action", + image: "https://is1-ssl.mzstatic.com/image/thumb/Ze8uZ-TWJ2JMbqmtcz8_BA/680x382.webp" + }, + { + id: 9, + title: "A Summer Musical", + year: "2025", + genre: "Animation", + image: "https://is1-ssl.mzstatic.com/image/thumb/qnArJ6qO8I8hoZv2OhnO5A/680x382.webp" + }, + { + id: 10, + title: "Luck", + year: "2022", + genre: "Animation", + image: "https://is1-ssl.mzstatic.com/image/thumb/gHMoyFnOUJLH6d0rSgyIbg/680x382.webp" + } + ]; + + return ( +
+
+ {/* TV Shows Section */} +
+ +
+ {tvShows.map((show, index) => ( + + ))} +
+
+ + {/* Movies Section */} +
+ +
+ {movies.map((movie, index) => ( + + ))} +
+
+
+ + +
+ ); +}; + +export default App; + + +{/** function App() { const [count, setCount] = useState(0) @@ -39,4 +230,5 @@ function App() { ) } -export default App \ No newline at end of file +export default App +*/} \ No newline at end of file diff --git a/frontend/src/components/ContentCard.jsx b/frontend/src/components/ContentCard.jsx new file mode 100644 index 0000000..b5fd743 --- /dev/null +++ b/frontend/src/components/ContentCard.jsx @@ -0,0 +1,30 @@ +const ContentCard = ({ item, index, isMovie = false }) => ( +
+
+ {item.title} + +
+
+
+
+
+
+
+
+ {index} +
+
+

{item.title}

+

+ {isMovie ? `${item.year} ยท ${item.genre}` : item.genre} +

+
+
+
+ ); + +export default ContentCard; \ No newline at end of file diff --git a/frontend/src/components/SectionHeader.jsx b/frontend/src/components/SectionHeader.jsx new file mode 100644 index 0000000..6da9ce8 --- /dev/null +++ b/frontend/src/components/SectionHeader.jsx @@ -0,0 +1,10 @@ +import { ChevronRight } from 'lucide-react'; + +const SectionHeader = ({ title }) => ( +
+

{title}

+ +
+ ); + +export default SectionHeader; \ No newline at end of file From 7e6ecb543f677ad448decafa84734918ea896d68 Mon Sep 17 00:00:00 2001 From: Stephanie-ib Date: Thu, 4 Sep 2025 20:02:26 +0100 Subject: [PATCH 2/2] make comoponents, data file and added Must-See Hits section --- frontend/package-lock.json | 56 ++++- frontend/package.json | 3 +- frontend/src/App.jsx | 260 +++++++--------------- frontend/src/components/ContentCard.jsx | 2 +- frontend/src/components/FullListPage.jsx | 21 ++ frontend/src/components/SectionHeader.jsx | 11 +- frontend/src/data.js | 157 +++++++++++++ 7 files changed, 322 insertions(+), 188 deletions(-) create mode 100644 frontend/src/components/FullListPage.jsx create mode 100644 frontend/src/data.js diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 23f6041..1c0028b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,7 +11,8 @@ "axios": "^1.11.0", "lucide-react": "^0.542.0", "react": "^19.1.1", - "react-dom": "^19.1.1" + "react-dom": "^19.1.1", + "react-router-dom": "^7.8.2" }, "devDependencies": { "@eslint/js": "^9.33.0", @@ -1893,6 +1894,15 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -3549,6 +3559,44 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.8.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.2.tgz", + "integrity": "sha512-7M2fR1JbIZ/jFWqelpvSZx+7vd7UlBTfdZqf6OSdF9g6+sfdqJDAWcak6ervbHph200ePlu+7G8LdoiC3ReyAQ==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.8.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.2.tgz", + "integrity": "sha512-Z4VM5mKDipal2jQ385H6UBhiiEDlnJPx6jyWsTYoZQdl5TrjxEV2a9yl3Fi60NBJxYzOTGTTHXPi0pdizvTwow==", + "license": "MIT", + "dependencies": { + "react-router": "7.8.2" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -3694,6 +3742,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 6f52452..da01403 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,7 +13,8 @@ "axios": "^1.11.0", "lucide-react": "^0.542.0", "react": "^19.1.1", - "react-dom": "^19.1.1" + "react-dom": "^19.1.1", + "react-router-dom": "^7.8.2" }, "devDependencies": { "@eslint/js": "^9.33.0", diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index d99cd07..95879a8 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,196 +1,91 @@ -import { useState } from 'react' -import SectionHeader from './components/SectionHeader'; -import ContentCard from './components/ContentCard'; +import { tvShows, movies, mustSeeHits } from "./data"; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import SectionHeader from "./components/SectionHeader"; +import ContentCard from "./components/ContentCard"; +import FullListPage from "./components/FullListPage"; const App = () => { + + + return ( + +
+
+ - const tvShows = [ - { - id: 1, - title: "Platonic", - genre: "Comedy", - image: "https://is1-ssl.mzstatic.com/image/thumb/rBI93Qq60YpBP60maTBNbg/680x382.webp" - }, - { - id: 2, - title: "Invasion", - genre: "Sci-Fi", - image: "https://is1-ssl.mzstatic.com/image/thumb/hH3rVWDItz3USIX5bBSEcw/680x382.webp" - }, - { - id: 3, - title: "Chief of War", - genre: "Drama", - image: "https://is1-ssl.mzstatic.com/image/thumb/twLCcLLXmcLBqEf3Af3vww/680x382.webp" - }, - { - id: 4, - title: "Foundation", - genre: "Sci-Fi", - image: "https://is1-ssl.mzstatic.com/image/thumb/Xye2zsX5gxLetoLRdTgNLA/680x382.webp" - }, - { - id: 5, - title: "Ted Lasso", - genre: "Comedy", - image: "https://is1-ssl.mzstatic.com/image/thumb/ageP1PYyLi7UlNiWMva32Q/680x382.webp" - }, - { - id: 6, - title: "Acapulco", - genre: "Comdey", - image: "https://is1-ssl.mzstatic.com/image/thumb/Ec4GedDwtKAxOrCp_VOF-g/680x382.webp" - }, - { - id: 7, - title: "Severance", - genre: "Thriller", - image: "https://is1-ssl.mzstatic.com/image/thumb/EUeDAPovZrBtOcrP2Da5Lw/680x382.webp" - }, - { - id: 8, - title: "Slow Horses", - genre: "Thriller", - image: "https://is1-ssl.mzstatic.com/image/thumb/S2T1FMcov5a0GzmninlU4Q/680x382.webp" - }, - { - id: 9, - title: "Shrinking", - genre: "Comedy", - image: "https://is1-ssl.mzstatic.com/image/thumb/C34jADlGtR5wObjPAMbW4w/680x382.webp" - }, - { - id: 10, - title: "Stick", - genre: "Comdey", - image: "https://is1-ssl.mzstatic.com/image/thumb/Axf6fFibiK2puSTzKXvgpA/680x382.webp" - } - ]; - - const movies = [ - { - id: 1, - title: "The Gorge", - year: "2025", - genre: "Thriller", - image: "https://is1-ssl.mzstatic.com/image/thumb/3pfG0GJkoI0OFlPiIDdvUQ/680x382.webp" - }, - { - id: 2, - title: "Fountain of Youth", - year: "2025", - genre: "Action", - image: "https://is1-ssl.mzstatic.com/image/thumb/4UEcdeb6Xoc40fhFSAr3Og/680x382.webp" - }, - { - id: 3, - title: "Echo Valley", - year: "2025", - genre: "Thriller", - image: "https://is1-ssl.mzstatic.com/image/thumb/gy_-HeK7Awo48x2fPuAy_w/680x382.webp" - }, - { - id: 4, - title: "Greyhound", - year: "2020", - genre: "Action", - image: "https://is1-ssl.mzstatic.com/image/thumb/oANBVngpEJDvHRhdyozySA/680x382.webp" - }, - { - id: 5, - title: "Wolfs", - year: "2024", - genre: "Action", - image: "https://is1-ssl.mzstatic.com/image/thumb/2eBqvT3JXPbdzHWj6HM5_w/680x382.webp" - }, - { - id: 6, - title: "The Family Plan", - year: "2023", - genre: "Comdey", - image: "https://is1-ssl.mzstatic.com/image/thumb/tPJwMGtsAr_psAVlyf2Rzg/680x382.webp" - }, - { - id: 7, - title: "Killers of the Moon", - year: "2023", - genre: "Crime", - image: "https://is1-ssl.mzstatic.com/image/thumb/rss8pF-klNy76S-NWFue-A/680x382.webp" - }, - { - id: 8, - title: "Ghosted", - year: "2023", - genre: "Action", - image: "https://is1-ssl.mzstatic.com/image/thumb/Ze8uZ-TWJ2JMbqmtcz8_BA/680x382.webp" - }, - { - id: 9, - title: "A Summer Musical", - year: "2025", - genre: "Animation", - image: "https://is1-ssl.mzstatic.com/image/thumb/qnArJ6qO8I8hoZv2OhnO5A/680x382.webp" - }, - { - id: 10, - title: "Luck", - year: "2022", - genre: "Animation", - image: "https://is1-ssl.mzstatic.com/image/thumb/gHMoyFnOUJLH6d0rSgyIbg/680x382.webp" - } - ]; + {/* TV Shows Section */} + +
+ +
+ {tvShows.map((show, index) => ( + + ))} +
+
- return ( -
-
- {/* TV Shows Section */} -
- -
- {tvShows.map((show, index) => ( - - ))} -
-
+ {/* Movies Section */} +
+ +
+ {movies.map((movie, index) => ( + + ))} +
+
- {/* Movies Section */} -
- -
- {movies.map((movie, index) => ( - - ))} + {/* Must-See Hits */} +
+ +
+ {mustSeeHits.map((item, index) => ( + + ))} +
+
+ + } + /> + {/* Full lists */} + } /> + } /> + } /> +
-
+
- - -
+ ); }; export default App; - -{/** +{ + /** function App() { const [count, setCount] = useState(0) @@ -231,4 +126,5 @@ function App() { } export default App -*/} \ No newline at end of file +*/ +} diff --git a/frontend/src/components/ContentCard.jsx b/frontend/src/components/ContentCard.jsx index b5fd743..57e9aab 100644 --- a/frontend/src/components/ContentCard.jsx +++ b/frontend/src/components/ContentCard.jsx @@ -14,7 +14,7 @@ const ContentCard = ({ item, index, isMovie = false }) => (
-
+
{index}
diff --git a/frontend/src/components/FullListPage.jsx b/frontend/src/components/FullListPage.jsx new file mode 100644 index 0000000..9550014 --- /dev/null +++ b/frontend/src/components/FullListPage.jsx @@ -0,0 +1,21 @@ +import ContentCard from "../components/ContentCard"; + +const FullListPage = ({ title, items }) => { + return ( +
+

{title}

+
+ {items.map((item, index) => ( + + ))} +
+
+ ); +}; + +export default FullListPage; diff --git a/frontend/src/components/SectionHeader.jsx b/frontend/src/components/SectionHeader.jsx index 6da9ce8..81a21da 100644 --- a/frontend/src/components/SectionHeader.jsx +++ b/frontend/src/components/SectionHeader.jsx @@ -1,9 +1,14 @@ -import { ChevronRight } from 'lucide-react'; +import { ChevronRight } from "lucide-react"; +import { Link } from "react-router-dom"; -const SectionHeader = ({ title }) => ( +const SectionHeader = ({ title, to }) => (

{title}

- + {to && ( + + + + )}
); diff --git a/frontend/src/data.js b/frontend/src/data.js new file mode 100644 index 0000000..bdade06 --- /dev/null +++ b/frontend/src/data.js @@ -0,0 +1,157 @@ +export const tvShows = [ + { + id: 1, + title: "Platonic", + genre: "Comedy", + image: + "https://is1-ssl.mzstatic.com/image/thumb/rBI93Qq60YpBP60maTBNbg/680x382.webp", + }, + { + id: 2, + title: "Invasion", + genre: "Sci-Fi", + image: + "https://is1-ssl.mzstatic.com/image/thumb/hH3rVWDItz3USIX5bBSEcw/680x382.webp", + }, + { + id: 3, + title: "Chief of War", + genre: "Drama", + image: + "https://is1-ssl.mzstatic.com/image/thumb/twLCcLLXmcLBqEf3Af3vww/680x382.webp", + }, + { + id: 4, + title: "Foundation", + genre: "Sci-Fi", + image: + "https://is1-ssl.mzstatic.com/image/thumb/Xye2zsX5gxLetoLRdTgNLA/680x382.webp", + }, + { + id: 5, + title: "Ted Lasso", + genre: "Comedy", + image: + "https://is1-ssl.mzstatic.com/image/thumb/ageP1PYyLi7UlNiWMva32Q/680x382.webp", + }, + { + id: 6, + title: "Acapulco", + genre: "Comdey", + image: + "https://is1-ssl.mzstatic.com/image/thumb/Ec4GedDwtKAxOrCp_VOF-g/680x382.webp", + }, + { + id: 7, + title: "Severance", + genre: "Thriller", + image: + "https://is1-ssl.mzstatic.com/image/thumb/EUeDAPovZrBtOcrP2Da5Lw/680x382.webp", + }, + { + id: 8, + title: "Slow Horses", + genre: "Thriller", + image: + "https://is1-ssl.mzstatic.com/image/thumb/S2T1FMcov5a0GzmninlU4Q/680x382.webp", + }, + { + id: 9, + title: "Shrinking", + genre: "Comedy", + image: + "https://is1-ssl.mzstatic.com/image/thumb/C34jADlGtR5wObjPAMbW4w/680x382.webp", + }, + { + id: 10, + title: "Stick", + genre: "Comdey", + image: + "https://is1-ssl.mzstatic.com/image/thumb/Axf6fFibiK2puSTzKXvgpA/680x382.webp", + }, +]; + +export const movies = [ + { + id: 1, + title: "The Gorge", + year: "2025", + genre: "Thriller", + image: + "https://is1-ssl.mzstatic.com/image/thumb/3pfG0GJkoI0OFlPiIDdvUQ/680x382.webp", + }, + { + id: 2, + title: "Fountain of Youth", + year: "2025", + genre: "Action", + image: + "https://is1-ssl.mzstatic.com/image/thumb/4UEcdeb6Xoc40fhFSAr3Og/680x382.webp", + }, + { + id: 3, + title: "Echo Valley", + year: "2025", + genre: "Thriller", + image: + "https://is1-ssl.mzstatic.com/image/thumb/gy_-HeK7Awo48x2fPuAy_w/680x382.webp", + }, + { + id: 4, + title: "Greyhound", + year: "2020", + genre: "Action", + image: + "https://is1-ssl.mzstatic.com/image/thumb/oANBVngpEJDvHRhdyozySA/680x382.webp", + }, + { + id: 5, + title: "Wolfs", + year: "2024", + genre: "Action", + image: + "https://is1-ssl.mzstatic.com/image/thumb/2eBqvT3JXPbdzHWj6HM5_w/680x382.webp", + }, + { + id: 6, + title: "The Family Plan", + year: "2023", + genre: "Comdey", + image: + "https://is1-ssl.mzstatic.com/image/thumb/tPJwMGtsAr_psAVlyf2Rzg/680x382.webp", + }, + { + id: 7, + title: "Killers of the Moon", + year: "2023", + genre: "Crime", + image: + "https://is1-ssl.mzstatic.com/image/thumb/rss8pF-klNy76S-NWFue-A/680x382.webp", + }, + { + id: 8, + title: "Ghosted", + year: "2023", + genre: "Action", + image: + "https://is1-ssl.mzstatic.com/image/thumb/Ze8uZ-TWJ2JMbqmtcz8_BA/680x382.webp", + }, + { + id: 9, + title: "A Summer Musical", + year: "2025", + genre: "Animation", + image: + "https://is1-ssl.mzstatic.com/image/thumb/qnArJ6qO8I8hoZv2OhnO5A/680x382.webp", + }, + { + id: 10, + title: "Luck", + year: "2022", + genre: "Animation", + image: + "https://is1-ssl.mzstatic.com/image/thumb/gHMoyFnOUJLH6d0rSgyIbg/680x382.webp", + }, +]; + +export const mustSeeHits = [...tvShows, ...movies]; \ No newline at end of file