feat: major rewrite

the application is now rewritten in next.js. this commit also adds the ability to see trailers, did you know, more like this, etc. on title page.

BREAKING CHANGE: the whole application is rewritten from scratch.

src/styles/abstracts/_index.scss

@@ -0,0 +1 @@
+@forward './mixins';

src/styles/abstracts/_mixins.scss

@@ -0,0 +1,80 @@
+@use 'sass:map';
+@use './variables' as v;
+
+////////////////////////////////////////////////////////////////
+//                      ROOT MIXINS
+////////////////////////////////////////////////////////////////
+// MIXINS TO TURN SCSS VARIABLES INTO CSS VARIABLES:
+@mixin typescale($mode) {
+  // getting appropriate type scale
+  $type-scale: map.get(v.$font-sizes, $mode);
+  // making variables out of it
+  @each $key, $value in $type-scale {
+    --fs-#{$key}: #{$value};
+  }
+}
+
+@mixin typography {
+  $other-vars: v.$misc;
+  @each $key, $value in $other-vars {
+    --#{$key}: #{$value};
+  }
+}
+
+@mixin spacers {
+  @each $var, $value in v.$space {
+    --spacer-#{$var}: #{$value};
+  }
+}
+
+@mixin colors($color: 'light') {
+  $color-map: map-get(v.$themes, $color);
+
+  @each $prop, $val in $color-map {
+    --clr-#{$prop}: #{$val};
+  }
+}
+
+////////////////////////////////////////////////////////////////
+//                      REUSABLE MIXINS
+////////////////////////////////////////////////////////////////
+// 1. mixin to handle known and unknown breakpoints:
+@mixin bp($given-breakpoint, $min: false) {
+  // just assigning the given value to a new variable since we're going to change it conditionally;
+  $breakpoint: $given-breakpoint;
+  // if $breakpoints map contains the given variable then getting it's value
+  @if map.has-key(v.$breakpoints, $breakpoint) {
+    $breakpoint: map.get(v.$breakpoints, $breakpoint);
+  }
+  // and then using it for media query. This will also work for straight out values(50em or 800px, for example)
+  $expr: 'max-width: #{$breakpoint}';
+  @if ($min) {
+    $expr: 'min-width: #{$breakpoint}';
+  }
+
+  @media screen and ($expr) {
+    @content;
+  }
+}
+
+// 2. for prettifying links
+@mixin prettify-link($clr: currentColor, $clr-line: $clr, $animate: true) {
+  $height: 0.1em;
+
+  text-decoration: none;
+  color: $clr;
+  background: linear-gradient(to left, $clr-line, $clr-line) no-repeat right
+    bottom;
+
+  @if ($animate) {
+    background-size: 0 $height;
+    transition: background-size 200ms ease;
+
+    &:where(:hover, :focus-visible) {
+      background-size: 100% $height;
+      background-position-x: left;
+    }
+  } @else {
+    background-size: 100% $height;
+  }
+}

src/styles/abstracts/variables/_index.scss

@@ -0,0 +1,3 @@
+@forward './misc';
+@forward './typography';
+@forward './themes';

src/styles/abstracts/variables/_misc.scss

@@ -0,0 +1,28 @@
+// 8 pt spacer
+$space: (
+  0: 0.4rem,
+  1: 0.8rem,
+  2: 1.6rem,
+  3: 2.4rem,
+  4: 3.2rem,
+  5: 4rem,
+  6: 4.8rem,
+  7: 5.6rem,
+  8: 6.4rem,
+  9: 7.2rem,
+  10: 8rem,
+);
+
+$breakpoints: (
+  'bp-1200': 75em,
+  'bp-900': 56.25em,
+  'bp-700': 43.75em,
+  'bp-450': 28.125em,
+);
+
+// 1. colors
+$clr-primary: hsl(240, 31%, 25%);
+$clr-secondary: hsl(344, 79%, 40%);
+$clr-tertiary: hsl(176, 43%, 46%);
+$clr-quatenary: hsl(204, 4%, 23%);
+$clr-quintenary: hsl(0, 0%, 100%);

src/styles/abstracts/variables/_themes.scss

@@ -0,0 +1,62 @@
+$_light: (
+  // 1. text
+  // 1.1 for headings
+  text-accent: hsl(240, 31%, 25%),
+  // 1.2 for base text
+  text: hsl(0, 0%, 24%),
+  // 1.3 for subtle text like metadata
+  text-muted: hsl(204, 4%, 35%),
+  // 2. bg
+  // 2.1 for cards, headers, footers,
+  bg-accent: hsl(339, 100%, 97%),
+  // 2.2 for base bg
+  bg: hsl(0, 0%, 100%),
+  // 2.3 for hover state of cards
+  bg-muted: rgb(255, 229, 239),
+  // 3. links
+  // 3.1 the default one.
+  link: hsl(219, 100%, 20%),
+  link-muted: hsl(344, 79%, 40%),
+  // 4. for icons, borders
+  fill: hsl(339, 100%, 36%),
+  // 4.2 for borders, primarily
+  fill-muted: hsl(0, 0%, 80%),
+  // shadows on cards
+  shadow: 0 0 1rem hsla(0, 0%, 0%, 0.2),
+  // keyboard, focus hightlight
+  highlight: hsl(176, 43%, 46%),
+  // for gradient behind hero text on about page.
+  gradient:
+    (
+      radial-gradient(
+        at 23% 32%,
+        hsla(344, 79%, 40%, 0.15) 0px,
+        transparent 70%
+      ),
+      radial-gradient(at 72% 55%, hsla(344, 79%, 40%, 0.2) 0px, transparent 50%)
+    )
+);
+
+$_dark: (
+  text-accent: hsl(0, 0%, 100%),
+  text: hsl(0, 0%, 96%),
+  text-muted: hsl(0, 0%, 80%),
+  bg-accent: hsl(221, 39%, 15%),
+  bg: hsl(221, 39%, 11%),
+  bg-muted: rgb(20, 28, 46),
+  link: hsl(339, 95%, 80%),
+  link-muted: hsl(344, 79%, 80%),
+  fill: hsl(339, 75%, 64%),
+  fill-muted: hsl(0, 0, 35%),
+  shadow: hsla(0, 0%, 0%, 1),
+  highlight: hsl(176, 43%, 46%),
+  gradient: (
+    radial-gradient(at 23% 32%, hsla(344, 79%, 40%, 0.04) 0px, transparent 70%),
+    radial-gradient(at 72% 55%, hsla(344, 79%, 40%, 0.05) 0px, transparent 50%),
+  ),
+);
+
+$themes: (
+  light: $_light,
+  dark: $_dark,
+);

src/styles/abstracts/variables/_typography.scss

@@ -0,0 +1,56 @@
+////////////////////////////////////////////////////////////////
+//                      RAW VARIABLES
+////////////////////////////////////////////////////////////////
+
+// 1. type scale
+// see more at https://type-scale.com/
+// 1.33
+$_perfect-fourth: (
+  0: 6rem,
+  1: 5rem,
+  2: 3.8rem,
+  3: 2.8rem,
+  4: 2.1rem,
+  5: 1.6rem,
+  // 6:  1.2rem,
+);
+// 1.25
+$_major-third: (
+  0: 4.9rem,
+  1: 3.9rem,
+  2: 3.1rem,
+  3: 2.5rem,
+  4: 2rem,
+  5: 1.6rem,
+  // 6: 1.3rem,
+);
+
+// 2 font families
+$_ff-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
+  helvetica neue, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+$_ff-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman,
+  Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji,
+  Segoe UI Symbol;
+$_ff-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+
+////////////////////////////////////////////////////////////////
+//                         TO EXPORT
+////////////////////////////////////////////////////////////////
+
+$font-sizes: (
+  desktop: $_perfect-fourth,
+  mobile: $_major-third,
+);
+
+$misc: (
+  ff-base: $_ff-sans,
+  ff-accent: (
+    'RedHat Display',
+    $_ff-sans,
+  ),
+  fw-thin: 300,
+  fw-base: 400,
+  fw-medium: 500,
+  fw-bold: 700,
+  fw-black: 900,
+);

src/styles/base/_base.scss

@@ -0,0 +1,24 @@
+@use '../abstracts' as helper;
+
+#__next,
+html,
+body {
+  min-height: 100vh;
+}
+
+#__next {
+  display: grid;
+  grid-template-rows: min-content 1fr min-content;
+}
+
+body {
+  color: var(--clr-text);
+  background-color: var(--clr-bg);
+}
+
+// restricting to 1600px width
+.main {
+  --max-width: 160rem;
+  width: min(100%, var(--max-width));
+  margin-inline: auto;
+}

src/styles/base/_fonts.scss

@@ -0,0 +1,5 @@
+@font-face {
+  font-family: 'RedHat Display';
+  src: url('../../../public/fonts/RedHatDisplay-VariableFont_wght.ttf');
+  font-display: swap;
+}

src/styles/base/_helpers.scss

@@ -0,0 +1,27 @@
+/**
+ * Hide text while making it readable for screen readers
+ * 1. Needed in WebKit-based browsers because of an implementation bug;
+ *    See: https://code.google.com/p/chromium/issues/detail?id=457146
+ */
+.hide-text {
+  overflow: hidden;
+  padding: 0; /* 1 */
+  text-indent: 101%;
+  white-space: nowrap;
+}
+
+/**
+ * Hide element while making it readable for screen readers
+ * Shamelessly borrowed from HTML5Boilerplate:
+ * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
+ */
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

src/styles/base/_index.scss

@@ -0,0 +1,6 @@
+@forward './reset';
+// @forward './helpers';
+@forward './root';
+@forward './base';
+@forward './fonts';
+@forward './typography';

src/styles/base/_reset.scss

@@ -0,0 +1,54 @@
+html {
+  scroll-behavior: smooth;
+  font-size: 62.5%;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+  // font: inherit;
+}
+
+body {
+  box-sizing: border-box;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture,
+svg {
+  max-width: 100%;
+  display: block;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

src/styles/base/_root.scss

@@ -0,0 +1,27 @@
+@use '../abstracts' as helper;
+
+:root {
+  @include helper.typography;
+  @include helper.typescale('desktop');
+  @include helper.spacers;
+  @include helper.colors('light');
+
+  // dark themed vars when root has an attribute of theme set to 'dark'
+  &[data-theme='dark'] {
+    @include helper.colors('dark');
+  }
+
+  // styles to be applied when js is disabled
+  &:not([data-js]) {
+    // if the user prefers dark theme
+    @media (prefers-color-scheme: dark) {
+      // using dark theme instead of default one
+      @include helper.colors('dark');
+    }
+  }
+
+  // change typescale for small screens
+  @include helper.bp('bp-700') {
+    @include helper.typescale('mobile');
+  }
+}

src/styles/base/_typography.scss

@@ -0,0 +1,22 @@
+body {
+  font-family: var(--ff-base);
+  font-size: var(--fs-5);
+}
+
+.heading {
+  color: var(--clr-text-accent);
+  font-family: var(--ff-accent);
+  font-weight: var(--fw-medium);
+
+  &__primary {
+    font-size: var(--fs-1);
+  }
+
+  &__secondary {
+    font-size: var(--fs-2);
+  }
+
+  &__tertiary {
+    font-size: var(--fs-3);
+  }
+}

src/styles/components/_index.scss

@@ -0,0 +1 @@
+@forward './links';

src/styles/components/_links.scss

@@ -0,0 +1,6 @@
+@use '../abstracts' as helper;
+
+.link,
+.ipc-md-link {
+  @include helper.prettify-link(var(--clr-link));
+}

src/styles/main.scss

@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+@use './base';
+@use './components';

src/styles/modules/components/buttons/themeToggler.module.scss

@@ -0,0 +1,13 @@
+.button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.icon {
+  // we'll get --dimension var from header.module.scss
+  height: var(--dimension, 4rem);
+  width: var(--dimension, 4rem);
+
+  fill: var(--clr-fill);
+}

src/styles/modules/components/error/error-info.module.scss

@@ -0,0 +1,33 @@
+@use '../../../abstracts/' as helper;
+
+.error {
+  --doc-whitespace: var(--spacer-8);
+  --comp-whitespace: var(--spacer-5);
+
+  padding: var(--doc-whitespace);
+  display: grid;
+  justify-content: center;
+  justify-items: center;
+  gap: var(--spacer-1);
+
+  @include helper.bp('bp-700') {
+    --doc-whitespace: var(--spacer-5);
+    --comp-whitespace: var(--spacer-3);
+  }
+  @include helper.bp('bp-450') {
+    padding: var(--spacer-3);
+  }
+}
+
+.gnu {
+  --dim: 30rem;
+
+  height: var(--dim);
+  width: var(--dim);
+  fill: var(--clr-fill);
+}
+
+.heading {
+  // justify-self: center;
+  text-align: center;
+}

src/styles/modules/components/loaders/progress-bar.module.scss

@@ -0,0 +1,24 @@
+.progress {
+  position: fixed;
+  z-index: 1;
+  inset-inline: 0;
+  inset-block-start: 0;
+  height: 4px;
+  width: 100%;
+  background: var(--clr-fill);
+  transform: translateX(-100%);
+  box-shadow: 2px 0 5px var(--clr-fill);
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+
+  animation: prograte 60s ease-out forwards;
+}
+
+@keyframes prograte {
+  5% {
+    transform: translateX(-40%);
+  }
+  100% {
+    transform: translateX(-3%);
+  }
+}

src/styles/modules/components/title/basic.module.scss

@@ -0,0 +1,172 @@
+@use '../../../abstracts' as helper;
+
+.container {
+  margin-inline: auto;
+  background: var(--clr-bg-accent);
+  box-shadow: var(--clr-shadow);
+  border-radius: 5px;
+  overflow: hidden; // for background image
+  display: grid;
+
+  grid-template-columns: minmax(25rem, 30rem) 1fr;
+
+  @include helper.bp('bp-900') {
+    grid-template-columns: none;
+    grid-template-rows: 30rem min-content;
+  }
+
+  @include helper.bp('bp-700') {
+    grid-template-rows: 25rem min-content;
+  }
+}
+
+.imageContainer {
+  display: flex; // for bringing out image__NA out of blur
+
+  position: relative;
+  height: auto;
+  width: auto;
+  overflow: hidden;
+
+  background-size: cover;
+  background-position: top;
+  place-items: center;
+
+  @include helper.bp('bp-900') {
+    padding: var(--spacer-2);
+    isolation: isolate;
+
+    // for adding layer of color on top of background image
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        to top,
+        var(--clr-bg-accent) 10%,
+        transparent
+      );
+      backdrop-filter: blur(8px);
+    }
+  }
+}
+
+.image {
+  object-fit: cover;
+  object-position: center;
+
+  @include helper.bp('bp-900') {
+    z-index: 1;
+    object-fit: contain;
+
+    outline: 3px solid var(--clr-fill);
+    outline-offset: 5px;
+
+    max-height: 100%;
+    margin: auto;
+
+    // overrriding nex/future/image defaults
+    height: initial !important;
+    width: initial !important;
+    position: relative !important;
+  }
+
+  &__NA {
+    z-index: 1;
+    fill: var(--clr-fill-muted);
+  }
+}
+
+.info {
+  padding: var(--spacer-2) var(--spacer-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacer-2);
+
+  @include helper.bp('bp-900') {
+    text-align: center;
+    align-items: center;
+  }
+  @include helper.bp('bp-450') {
+    gap: var(--spacer-1);
+  }
+}
+
+.title {
+  line-height: 1;
+}
+
+.meta {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+
+  & * + *::before {
+    content: '\00b7';
+    padding-inline: var(--spacer-0);
+    font-weight: 900;
+    line-height: 0;
+    font-size: var(--fs-5);
+  }
+
+  @include helper.bp('bp-900') {
+    justify-content: center;
+  }
+}
+
+.ratings {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacer-0) var(--spacer-3);
+
+  @include helper.bp('bp-900') {
+    justify-content: center;
+  }
+}
+
+.rating {
+  font-size: var(--fs-5);
+
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+  place-items: center;
+  gap: 0 var(--spacer-0);
+
+  &__num {
+    grid-column: 1 / 2;
+    font-size: 1.8em;
+    font-weight: var(--fw-medium);
+    // line-height: 1;
+  }
+
+  &__icon {
+    --dim: 1.8em;
+    grid-column: -2 / -1;
+    line-height: 1;
+    height: var(--dim);
+    width: var(--dim);
+    display: grid;
+    place-content: center;
+    fill: var(--clr-fill);
+  }
+
+  &__text {
+    grid-column: 1 / -1;
+    font-size: 0.9em;
+    line-height: 1;
+
+    color: var(--clr-text-muted);
+  }
+}
+
+.link {
+  @include helper.prettify-link(var(--clr-link));
+}
+
+.genres,
+.overview,
+.crewType {
+  &__heading {
+    font-weight: var(--fw-bold);
+  }
+}

src/styles/modules/components/title/cast.module.scss

@@ -0,0 +1,76 @@
+@use '../../../abstracts' as helper;
+
+.container {
+  display: grid;
+  gap: var(--comp-whitespace);
+  margin-inline: auto; // for when cast members are so few that the container doesn't scroll
+}
+
+.cast {
+  --max-width: 15rem;
+  --min-height: 35rem;
+  list-style: none;
+  overflow-x: auto;
+
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--spacer-4);
+  padding: 0 var(--spacer-2) var(--spacer-3) var(--spacer-2);
+
+  grid-auto-columns: var(--max-width);
+  min-height: var(--min-height);
+
+  @include helper.bp('bp-700') {
+    --min-height: 30rem;
+  }
+}
+
+.member {
+  height: 100%;
+  display: grid;
+  grid-template-rows: minmax(auto, 70%) min-content auto;
+  justify-items: center;
+  text-align: center;
+  font-size: var(--fs-5);
+
+  overflow: hidden;
+  border-radius: 5px;
+  box-shadow: var(--clr-shadow);
+  background-color: var(--clr-bg-accent);
+
+  &__imgContainer {
+    justify-self: stretch;
+    position: relative;
+
+    // for icon when image is unavailable
+    display: grid;
+    place-items: center;
+  }
+  &__img {
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &__imgNA {
+    fill: var(--clr-fill-muted);
+    height: 40%;
+  }
+
+  &__textContainer {
+    display: grid;
+    gap: var(--spacer-0);
+    padding: var(--spacer-0);
+    // place-content: center;
+    text-align: center;
+    justify-items: center;
+    align-content: start;
+  }
+
+  &__name {
+    @include helper.prettify-link(var(--clr-link));
+  }
+
+  &__role {
+    font-size: 0.9em;
+  }
+}

src/styles/modules/components/title/did-you-know.module.scss

@@ -0,0 +1,9 @@
+.didYouKnow {
+  display: grid;
+  gap: var(--comp-whitespace);
+}
+
+.container {
+  display: grid;
+  gap: var(--comp-whitespace);
+}

src/styles/modules/components/title/info.module.scss

@@ -0,0 +1,35 @@
+.info {
+  display: grid;
+
+  gap: var(--doc-whitespace);
+}
+
+.episodeInfo,
+.seriesInfo,
+.accolades,
+.keywords,
+.details,
+.boxoffice,
+.technical {
+  display: grid;
+  gap: var(--comp-whitespace);
+
+  &__container {
+    display: grid;
+    gap: var(--spacer-0);
+
+    // for span elements like these: 'release date:'
+    & > p > span:first-of-type {
+      font-weight: var(--fw-bold);
+    }
+  }
+}
+
+.keywords {
+  &__container {
+    display: flex;
+    list-style: none;
+    flex-wrap: wrap;
+    column-gap: var(--spacer-2);
+  }
+}

src/styles/modules/components/title/media.module.scss

@@ -0,0 +1,101 @@
+@use '../../../abstracts' as helper;
+
+// grid is better than flexbox, as in flexbox, you specifically have to specify height.
+
+.media {
+  --min-height: 30rem;
+  --max-width: 50rem;
+
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: var(--doc-whitespace); // declared in title.module.scss
+
+  @include helper.bp('bp-1200') {
+    grid-auto-flow: row;
+    grid-auto-columns: initial;
+  }
+
+  @include helper.bp('bp-700') {
+    --min-height: 20rem;
+    --max-width: 30rem;
+  }
+
+  @include helper.bp('bp-450') {
+    // --min-height: 15rem;
+    --max-width: 95%;
+  }
+}
+
+// section
+.images,
+.videos {
+  display: grid;
+  grid-template-rows: min-content;
+  gap: var(--comp-whitespace); // declared in title.module.scss
+
+  &__container {
+    overflow-x: auto;
+    display: grid;
+    grid-auto-flow: column;
+    gap: var(--spacer-2);
+    padding: 0 var(--spacer-2) var(--spacer-3) var(--spacer-2);
+
+    grid-auto-columns: var(--max-width);
+    min-height: var(--min-height);
+  }
+}
+
+%cardify {
+  overflow: hidden;
+  border-radius: 5px;
+  box-shadow: var(--clr-shadow);
+}
+
+// child of .videos
+.trailer {
+  @extend %cardify;
+
+  &__video {
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+  }
+}
+
+// since it is wrapped in a tag
+.video {
+  text-decoration: none;
+}
+
+.video,
+.image {
+  @extend %cardify;
+  position: relative;
+
+  &__caption {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    padding: var(--spacer-0);
+
+    font-size: 0.9em;
+    color: var(--clr-text);
+    background: var(--clr-bg);
+
+    // hovering effect only for desktop/stylus users
+    @media (any-hover: hover) and (any-pointer: fine) {
+      transform: translateY(100%);
+      transition: transform 500ms ease-in-out;
+    }
+  }
+
+  &__img {
+    object-position: top;
+    object-fit: cover;
+  }
+
+  &:hover &__caption {
+    transform: translateY(1%); // 0% is leaving some gap from bottom
+  }
+}

src/styles/modules/components/title/more-like-this.module.scss

@@ -0,0 +1,105 @@
+@use '../../../abstracts' as helper;
+
+.morelikethis {
+  display: grid;
+  gap: var(--comp-whitespace);
+}
+
+.container {
+  --max-width: 20rem;
+  --min-height: 50rem;
+
+  list-style: none;
+  overflow-x: auto;
+
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--spacer-4);
+  padding: 0 var(--spacer-2) var(--spacer-3) var(--spacer-2);
+
+  grid-auto-columns: 20rem;
+  min-height: 50rem;
+
+  > li {
+    list-style: none;
+  }
+
+  @include helper.bp('bp-700') {
+    grid-auto-columns: 17rem;
+    min-height: 37rem;
+  }
+}
+
+.item {
+  overflow: hidden;
+  border-radius: 5px;
+  box-shadow: var(--clr-shadow);
+
+  height: 100%;
+  display: grid;
+  grid-template-rows: minmax(auto, 70%) auto;
+
+  background-color: var(--clr-bg-accent);
+  text-decoration: none;
+  color: currentColor;
+
+  &__imgContainer {
+    justify-self: stretch;
+    position: relative;
+
+    // for icon when image is unavailable
+    display: grid;
+    place-items: center;
+  }
+  &__textContainer {
+    display: grid;
+    gap: var(--spacer-1);
+    padding: var(--spacer-1);
+    // place-content: center;
+    text-align: center;
+    justify-items: center;
+    align-content: start;
+  }
+
+  &__img {
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &__imgNA {
+    fill: var(--clr-fill-muted);
+    height: 40%;
+    // vertical-align: center;
+  }
+
+  &__heading {
+  }
+
+  &__genres {
+  }
+
+  &__rating {
+    // font-size: 0.9em;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-0);
+    line-height: 1;
+
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  &__ratingNum {
+  }
+
+  &__ratingIcon {
+    --dim: 1em;
+    height: var(--dim);
+    width: var(--dim);
+    fill: var(--clr-fill);
+  }
+
+  &:hover {
+    background-color: var(--clr-bg-muted);
+  }
+}

src/styles/modules/components/title/reviews.module.scss

@@ -0,0 +1,26 @@
+.reviews {
+  display: grid;
+  gap: var(--comp-whitespace);
+
+  &__reviewContainer {
+    // background-color: antiquewhite;
+  }
+
+  &__stats {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacer-2);
+  }
+}
+
+.review {
+  &__summary {
+    font-size: calc(var(--fs-5) * 1.1);
+    cursor: pointer;
+  }
+
+  &__text,
+  &__metadata {
+    padding-top: var(--spacer-2);
+  }
+}

src/styles/modules/layout/footer.module.scss

@@ -0,0 +1,37 @@
+@use '../../abstracts' as helper;
+
+.footer {
+  background: var(--clr-bg-muted);
+  padding: var(--spacer-4);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-small);
+  font-size: var(--fs-5);
+}
+
+.nav {
+  .list {
+    list-style: none;
+    display: flex;
+    gap: var(--spacer-2) var(--spacer-4);
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+  }
+  &__item {
+  }
+
+  &__link {
+    @include helper.prettify-link(var(--clr-link));
+  }
+
+  &__linkActive {
+    @include helper.prettify-link(var(--clr-link), $animate: false);
+  }
+}
+
+.licence {
+  margin-top: var(--spacer-1);
+  align-self: center;
+  text-align: center;
+}

src/styles/modules/layout/header.module.scss

@@ -0,0 +1,91 @@
+@use '../../abstracts' as helper;
+
+.header {
+  --dimension: 1.5em; // will be used for icons
+
+  font-size: 1.1em;
+
+  display: grid;
+  background: (var(--clr-bg-muted));
+
+  &__about {
+    min-height: 100vh;
+    background: var(--clr-gradient);
+    grid-template-rows: max-content 1fr 0.15fr; // .15fr for centering the hero
+  }
+}
+
+.topbar {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns:
+    minmax(max-content, 0.3fr)
+    1fr minmax(max-content, 0.3fr);
+
+  align-items: center;
+  gap: var(--spacer-4);
+  padding: var(--spacer-4);
+
+  @include helper.bp('bp-700') {
+    padding: var(--spacer-3);
+  }
+}
+
+.logo {
+  justify-self: start;
+
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-1);
+
+  &__icon {
+    height: var(--dimension);
+    width: var(--dimension);
+    fill: var(--clr-fill);
+  }
+
+  &__text {
+    line-height: 1;
+    font-size: var(--fs-4);
+    color: var(--clr-fill);
+    font-weight: var(--fw-bold);
+    font-family: var(--ff-accent);
+  }
+}
+
+.nav {
+  justify-self: center;
+  &__list {
+    display: flex;
+    list-style: none;
+    gap: var(--spacer-4);
+  }
+
+  @include helper.bp('bp-700') {
+    display: none;
+  }
+}
+
+.themeToggler {
+  justify-self: end;
+  grid-column: -2 / -1;
+}
+
+.hero {
+  display: grid;
+  text-align: center;
+  place-content: center;
+  gap: var(--spacer-0);
+  padding-inline: var(--spacer-1);
+
+  &__text {
+    font-size: var(--fs-0);
+  }
+
+  @include helper.bp('bp-700') {
+    &__text {
+      font-size: var(--fs-1);
+    }
+  }
+}

src/styles/modules/pages/about/about.module.scss

@@ -0,0 +1,114 @@
+@use '../../../abstracts' as helper;
+
+.about {
+  display: grid;
+  --doc-whitespace: var(--spacer-8);
+  --comp-whitespace: var(--spacer-5);
+
+  padding: var(--doc-whitespace);
+  gap: var(--doc-whitespace);
+
+  @include helper.bp('bp-700') {
+    --doc-whitespace: var(--spacer-5);
+    // --comp-whitespace: var(--spacer-3);
+  }
+
+  @include helper.bp('bp-450') {
+    padding: var(--spacer-3);
+  }
+}
+
+.features {
+  display: grid;
+  gap: var(--comp-whitespace);
+
+  &__heading {
+    justify-self: center;
+  }
+
+  &__list {
+    list-style: none;
+    display: grid;
+    gap: var(--comp-whitespace);
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+
+    @include helper.bp('bp-900') {
+      grid-template-columns: none;
+    }
+  }
+}
+
+.feature {
+  display: grid;
+  gap: var(--spacer-1);
+  justify-content: center;
+  justify-items: center;
+  text-align: center;
+
+  &__icon {
+    --dim: var(--fs-1);
+
+    max-width: unset;
+    height: var(--dim);
+    width: var(--dim);
+    fill: var(--clr-fill);
+  }
+}
+
+.faqs {
+  display: grid;
+  gap: var(--comp-whitespace);
+  justify-items: center;
+
+  &__heading {
+    text-align: center;
+  }
+
+  &__list {
+    display: grid;
+    gap: var(--spacer-3);
+
+    margin-inline: auto;
+    width: min(100%, 120rem);
+  }
+
+  padding-block: var(--doc-whitespace);
+
+  @include helper.bp('bp-900') {
+    padding-block: var(--spacer-3);
+  }
+}
+
+.faq {
+  border: 1px solid var(--clr-fill-muted);
+
+  &__summary {
+    list-style: none;
+    padding: var(--spacer-2);
+    font-size: 1.05em;
+
+    cursor: pointer;
+
+    // for icon
+    display: flex;
+    justify-content: space-between;
+    &::after {
+      content: '+';
+      font-weight: bold;
+    }
+  }
+
+  &__description {
+    padding: var(--spacer-2);
+    padding-top: 0;
+  }
+
+  &[open] {
+    border-color: var(--clr-fill);
+  }
+
+  &[open] &__summary::after {
+    content: '\2212'; // minus sign
+    color: var(--clr-fill);
+  }
+}

src/styles/modules/pages/contact/contact.module.scss

@@ -0,0 +1,32 @@
+@use '../../../abstracts' as helper;
+
+.contact {
+  // to make text more readable for large screen users
+  margin: auto;
+  width: min(100%, 100rem);
+
+  display: grid;
+  --doc-whitespace: var(--spacer-8);
+  --comp-whitespace: var(--spacer-3);
+
+  padding: var(--doc-whitespace);
+  place-content: center;
+
+  &__heading {
+    text-align: center;
+  }
+
+  @include helper.bp('bp-700') {
+    --doc-whitespace: var(--spacer-5);
+  }
+  @include helper.bp('bp-450') {
+    --doc-whitespace: var(--spacer-3);
+  }
+}
+
+.list {
+  padding-block: var(--comp-whitespace);
+
+  display: grid;
+  gap: var(--comp-whitespace);
+}

src/styles/modules/pages/privacy/privacy.module.scss

@@ -0,0 +1,36 @@
+@use '../../../abstracts' as helper;
+
+.policy {
+  // to make text more readable for large screen users
+  margin-inline: auto;
+  width: min(100%, 100rem);
+
+  display: grid;
+  --doc-whitespace: var(--spacer-8);
+  --comp-whitespace: var(--spacer-5);
+
+  padding: var(--doc-whitespace);
+
+  &__heading {
+    text-align: center;
+  }
+
+  @include helper.bp('bp-700') {
+    --doc-whitespace: var(--spacer-5);
+    --comp-whitespace: var(--spacer-3);
+  }
+  @include helper.bp('bp-450') {
+    padding: var(--spacer-3);
+  }
+}
+
+.list {
+  padding-block: var(--doc-whitespace);
+
+  display: grid;
+  gap: var(--comp-whitespace);
+
+  @include helper.bp('bp-900') {
+    padding-block: var(--spacer-3);
+  }
+}

src/styles/modules/pages/title/title.module.scss

@@ -0,0 +1,71 @@
+@use '../../../abstracts' as helper;
+
+.title {
+  // major whitespace properties used on title page
+  --doc-whitespace: var(--spacer-8);
+  --comp-whitespace: var(--spacer-3);
+
+  display: grid;
+
+  gap: var(--doc-whitespace);
+  padding: var(--doc-whitespace);
+  align-items: start;
+
+  grid-template-columns: repeat(8, 1fr);
+  grid-template-areas:
+    'basic   basic   basic   basic   basic   basic   basic   basic'
+    'media   media   media   media   media   media   media   media'
+    'cast    cast    cast    cast    cast    cast    cast    cast'
+    'text    text    text    text    text    info    info    info'
+    'related related related related related related related related';
+
+  @include helper.bp('bp-1200') {
+    grid-template-columns: none;
+    grid-template-areas:
+      'basic'
+      'media'
+      'cast'
+      'text'
+      'info'
+      'related';
+  }
+
+  @include helper.bp('bp-700') {
+    --doc-whitespace: var(--spacer-5);
+  }
+
+  @include helper.bp('bp-450') {
+    padding: var(--spacer-3);
+  }
+}
+
+.basic {
+  grid-area: basic;
+}
+
+.media {
+  grid-area: media;
+}
+
+.cast {
+  grid-area: cast;
+}
+
+.textarea {
+  grid-area: text;
+  display: grid;
+
+  gap: var(--doc-whitespace);
+}
+
+.infoarea {
+  grid-area: info;
+}
+
+.related {
+  grid-area: related;
+}
+
+.morelikethis {
+  grid-area: related;
+}