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/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);
+  }
+}