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/context/theme-context.tsx

@@ -0,0 +1,55 @@
+import React, { useState, createContext, ReactNode } from 'react';
+
+const getInitialTheme = () => {
+  // for server-side rendering, as window isn't availabe there
+  if (typeof window === 'undefined') return 'light';
+
+  const userPrefersTheme = window.localStorage.getItem('theme') || null;
+  const browserPrefersDarkTheme = window.matchMedia(
+    '(prefers-color-scheme: dark)'
+  ).matches;
+
+  if (userPrefersTheme) return userPrefersTheme;
+  else if (browserPrefersDarkTheme) return 'dark';
+  else return 'light';
+};
+
+const updateMetaTheme = () => {
+  const meta = document.querySelector(
+    'meta[name="theme-color"]'
+  ) as HTMLMetaElement;
+  const footerClr = window.getComputedStyle(document.body).backgroundColor;
+
+  meta.content = footerClr;
+};
+
+const initialContext = {
+  theme: '',
+  setTheme: (theme: string) => {},
+};
+
+export const themeContext = createContext(initialContext);
+
+const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  const [curTheme, setCurTheme] = useState(getInitialTheme);
+
+  const setTheme = (theme: string) => {
+    setCurTheme(theme);
+    window.localStorage.setItem('theme', theme);
+    document.documentElement.dataset.theme = theme;
+    updateMetaTheme();
+  };
+
+  const providerValue = {
+    theme: curTheme,
+    setTheme: setTheme,
+  };
+
+  return (
+    <themeContext.Provider value={providerValue}>
+      {children}
+    </themeContext.Provider>
+  );
+};
+
+export default ThemeProvider;