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