added MOVIES support. SERIES support coming soon!

5 files changed, 273 insertions, 0 deletions

diff --git a/src/app/movies/styles/info.module.css b/src/app/movies/styles/info.module.css
new file mode 100644
index 0000000..6b7d8e6
--- /dev/null
+++ b/src/app/movies/styles/info.module.css
@@ -0,0 +1,119 @@
+.Main {
+	margin-top: 60px;
+	color: white;
+}
+
+.MovieInfoSection {
+	background-color: #1f1f1fcc;
+	backdrop-filter: blur(10px);
+}
+
+.MovieInfo {
+	max-width: 60%;
+	margin: 0 auto;
+}
+
+.HeroSection {
+	display: flex;
+	align-items: center;
+}
+
+.HeroSection img {
+	border-radius: 0.5rem;
+}
+
+.HeroTitle {
+	display: flex;
+	flex-direction: column;
+	margin-left: 1rem;
+	padding: 0.5rem;
+}
+
+.HeroTitle h2 {
+	font-size: 28px;
+	margin: 0;
+}
+
+.tagline {
+	margin: 0.2rem 0 0 0;
+	font-size: 12px;
+}
+
+.tagline span {
+	background-color: #12121286;
+	padding: 0.2rem;
+	border-radius: 0.5rem;
+}
+
+.MovieDescription {
+	font-size: 18px;
+	margin: 0.2rem 0 0 0;
+}
+
+.OtherInfo {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin: 1rem 0 0 0;
+	background-color: #12121286;
+	padding: 1rem;
+	border-radius: 0.5rem;
+}
+
+.Ratings {
+	display: flex;
+}
+
+.divider {
+	margin: 0 0.5rem 0 0.5rem;
+}
+
+.Ratings span {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.Ratings p {
+	margin: 0 0 0 0.4rem;
+}
+
+.Money {
+	margin: 0.5rem 0 0 0;
+	display: flex;
+}
+
+.Money p {
+	margin: 0 0 0 0.4rem;
+}
+
+.Money span {
+	display: flex;
+	align-items: center;
+}
+
+.Genre {
+	display: flex;
+}
+
+.Genre p {
+	background-color: #12121257;
+	margin: 0.5rem 0.2rem 0 0.2rem;
+	padding: 0.3rem;
+	border-radius: 0.5rem;
+}
+
+@media screen and (max-width: 768px) {
+	.MovieInfo {
+		max-width: 100%;
+	}
+
+	.VideoPlayer {
+		width: 98%;
+		margin: 1rem auto;
+	}
+
+	.VideoPlayer iframe {
+		height: 250px;
+	}
+}
diff --git a/src/app/movies/styles/page.module.css b/src/app/movies/styles/page.module.css
new file mode 100644
index 0000000..5cba0a1
--- /dev/null
+++ b/src/app/movies/styles/page.module.css
@@ -0,0 +1,3 @@
+.MovieMain {
+	margin-top: 65px;
+}
diff --git a/src/app/movies/styles/pop_trend.module.css b/src/app/movies/styles/pop_trend.module.css
new file mode 100644
index 0000000..f9581c4
--- /dev/null
+++ b/src/app/movies/styles/pop_trend.module.css
@@ -0,0 +1,69 @@
+.Main {
+	color: white;
+	margin-left: 0.2rem;
+	margin-right: 0.2rem;
+}
+
+.Main h1 {
+	margin: 0 0 0.5rem 0;
+	text-align: center;
+	color: transparent;
+	background: linear-gradient(
+		90deg,
+		var(--neon-green) 40%,
+		var(--light-green) 60%,
+		var(--neon-yellow) 80%,
+		var(--soft-purple) 100%
+	);
+	background-size: 60% 50%;
+	background-clip: text;
+}
+
+.MovieContainer {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+	grid-gap: 0.5rem;
+	align-items: center;
+}
+
+.MovieContainer::-webkit-scrollbar {
+    height: 0;
+}
+
+.MovieEntry {
+	background-color: #1f1f1fb2;
+	padding: 0.5rem;
+	/* border-radius: 0.5rem; */
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	cursor: pointer;
+	backdrop-filter: blur(5px);
+}
+
+.MovieEntry img {
+	border-radius: 0.5rem;
+}
+
+.MovieEntry p {
+	width: 190px;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-align: center;
+	margin: 0.3rem 0 0 0;
+}
+
+@media screen and (max-width: 768px) {
+	.Main h1 {
+		font-size: 24px;
+		text-align: start;
+	}
+
+	.MovieContainer {
+		display: flex;
+		overflow-x: auto;
+		overflow-y: hidden;
+	}
+}
diff --git a/src/app/movies/styles/search.module.css b/src/app/movies/styles/search.module.css
new file mode 100644
index 0000000..e5ed3ee
--- /dev/null
+++ b/src/app/movies/styles/search.module.css
@@ -0,0 +1,57 @@
+.Main {
+	margin: 0 0.2rem 0 0.2rem;
+}
+
+.InputContainer {
+	display: flex;
+	align-items: center;
+	background-color: #121212;
+	padding: 0.2rem;
+	width: 40vw;
+	border-radius: 0.5rem;
+}
+
+.SearchIcon {
+	margin-left: 0.4rem;
+}
+
+.InputContainer input {
+	background-color: transparent;
+	outline: none;
+	border: none;
+	padding: 0.4rem;
+	font-family: "Lexend Deca", serif;
+	margin-left: 0.2rem;
+	font-size: large;
+	color: white;
+	width: 100%;
+}
+
+/* Search Results */
+
+.MovieSearchResultsContainer {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+	grid-gap: 0.5rem;
+	align-items: center;
+	margin: 0.2rem 0.2rem 0 0.2rem;
+}
+
+.MovieEntry {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	color: white;
+	backdrop-filter: blur(10px);
+	padding: 0.4rem;
+	background-color: #1212129f;
+}
+
+.MovieEntry img {
+	border-radius: 0.5rem;
+}
+
+.MovieEntry p {
+	margin: 0 0.2rem 0 0;
+	font-size: 18px;
+}
diff --git a/src/app/movies/styles/video_player.module.css b/src/app/movies/styles/video_player.module.css
new file mode 100644
index 0000000..aa65b07
--- /dev/null
+++ b/src/app/movies/styles/video_player.module.css
@@ -0,0 +1,25 @@
+.VideoContainer {
+    margin: 0.5rem 0 0 0;
+}
+
+.VideoContainer button {
+	font-family: "Lexend Deca", serif;
+	outline: none;
+	border: none;
+	background-color: #121212be;
+
+	color: white;
+	margin-right: 0.2rem;
+	padding: 0.5rem;
+	border-radius: 0.5rem;
+	cursor: pointer;
+}
+
+.VideoPlayer {
+	width: 100%;
+	aspect-ratio: "16/9";
+	border: none;
+	outline: none;
+	border-radius: 0.5rem;
+	margin: 0.5rem 0 0 0;
+}