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