213 changed files with 4829 additions and 11657 deletions
--- a/.env.local.example
+++ b/.env.local.example
@ -1,43 +0,0 @@
-################################################################################
-### PLEASE FILL/ENABLE REQUIRED VARS AT LEAST BEFORE RUNNING THE APPLICATION ###
-################################################################################
-
-################################################################################
-### 1. REQUIRED VARS(site may not work as expected without these).
-################################################################################
-## used for meta tags. e.g: 'https://libremdb.iket.me'. don't add end slash.
-NEXT_PUBLIC_URL=
-## used when fetching data from IMDb. not adding these could result in not getting any response.
-## example useragent header: 'Mozilla/5.0 (X11; Linux x86_64; rv:108.0) Gecko/20100101 Firefox/108.0'
-AXIOS_USERAGENT=
-## example accept header: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8'
-AXIOS_ACCEPT=
-
-################################################################################
-### 2. OPTIONAL VARS(enabling these is encouraged)
-################################################################################
-## for forcing a certain language for data we get from imdb. Useful when you don't want your IP to determine the preferred language.
-# AXIOS_LANGUAGE='en-US,en;q=0.5'
-## comment it out if you wish to enable nextjs stats collection. more at https://nextjs.org/telemetry
-NEXT_TELEMETRY_DISABLED=1
-
-################################################################################
-### 3. REDIS CONFIG(optional if you don't need redis)
-################################################################################
-## enables caching of api routes as well as media
-# USE_REDIS=true
-## in case you don't want to cache media but only api routes
-# USE_REDIS_FOR_API_ONLY=true
-## ttl for media and api
-# REDIS_CACHE_TTL_API=3600
-# REDIS_CACHE_TTL_MEDIA=3600
-## for docker, just set the domain to the container name, default is 'libremdb_redis'
-# REDIS_URL=localhost:6379
-
-################################################################################
-### 4. INSTANCE META FIELDS(not required but good to have)
-################################################################################
-## example: 'https://iket.me'. 
-NEXT_PUBLIC_INSTANCE_MAIN_URL=
-## eg: 'zyachel'
-NEXT_PUBLIC_INSTANCE_NAME=
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,7 +0,0 @@
-{
-  "extends": "next/core-web-vitals",
-  "rules": {
-    "react/no-unescaped-entities": "off",
-    "@next/next/no-page-custom-font": "off"
-  }
-}
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -0,0 +1,28 @@
+name: release
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  changelog-and-release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: generate changelog and bump version
+        id: changelog
+        uses: TriPSs/conventional-changelog-action@v3
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: create release
+        uses: actions/create-release@v1
+        if: ${{ steps.changelog.outputs.skipped == 'false' }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ steps.changelog.outputs.tag }}
+          release_name: ${{ steps.changelog.outputs.tag }}
+          body: ${{ steps.changelog.outputs.clean_changelog }}
--- a/.gitignore
+++ b/.gitignore
@ -1,42 +1,21 @@
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
+#big stuff
+node_modules/
+.cache/
+.parcel-cache/

-# testing
-/coverage
+# env variables
+*.env

-# next.js
-/.next/
-/out/
+# CSS files
+public/css/*.css
+public/css/*.css.map

-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# local env files
-.env*.local
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-
-#just dev stuff
-dev/*
-
-# other lockfiles 
-yarn.lock
-package-lock.json
-
-# docker
-docker-compose.yml
-dump.rdb
+#misc stuff
+fetchers/*
+!fetchers/movie.js
+controllers/movieControllers.js
+routes/movieRoutes.js
+views/pug/homepage.pug
+views/pug/movies.pug
+views/pug/_card.pug
+utils/constants.js
--- a/.prettierrc
+++ b/.prettierrc
@ -1,9 +0,0 @@
-{
-  "trailingComma": "es5",
-  "tabWidth": 2,
-  "arrowParens": "avoid",
-  "semi": true,
-  "singleQuote": true,
-  "jsxSingleQuote": true,
-  "printWidth": 100
-}
--- a/.versionrc
+++ b/.versionrc
@ -1,36 +0,0 @@
-{
-  "types": [
-    {
-      "type": "feat",
-      "section": "Features"
-    },
-    {
-      "type": "fix",
-      "section": "Bug Fixes"
-    },
-    {
-      "type": "chore",
-      "hidden": true
-    },
-    {
-      "type": "docs",
-      "hidden": true
-    },
-    {
-      "type": "style",
-      "hidden": true
-    },
-    {
-      "type": "refactor",
-      "hidden": true
-    },
-    {
-      "type": "perf",
-      "hidden": true
-    },
-    {
-      "type": "test",
-      "hidden": true
-    }
-  ]
-}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,105 +1,9 @@
-# Changelog
-
-All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
-
-## [3.2.0](https://github.com/zyachel/libremdb/compare/v3.1.1...v3.2.0) (2023-10-28)
+# 0.1.0 (2022-05-21)


 ### Features

-* **list:** add list route ([97f1432](https://github.com/zyachel/libremdb/commit/97f1432ac5d23206229d806b7cb3e04af6dec36f))
-
-## [3.1.1](https://github.com/zyachel/libremdb/compare/v3.1.0...v3.1.1) (2023-10-14)
-
-
-### Bug Fixes
-
-* **card:** fix long attributes in cards under 'Known For' section ([736d680](https://github.com/zyachel/libremdb/commit/736d6802430a3f4f364915f3df93fc548a51ebf1))
-* **error:** fix incorrect 'view on IMDb' link on error page ([0aea2f4](https://github.com/zyachel/libremdb/commit/0aea2f47dad6eb78e319ea1abd8c444f2cba4424))
-* **media proxy:** fix 304 response code with body error ([c610ef4](https://github.com/zyachel/libremdb/commit/c610ef4d1be39c122715a0eb200155537e7d6abf))
-* **name:** fix name route crash ([38ed0c6](https://github.com/zyachel/libremdb/commit/38ed0c62177532b93f61af4172ffa6e5b9995bdc))
-* **name:** fix route crash for some ids ([e91c313](https://github.com/zyachel/libremdb/commit/e91c313f127632f1bd44d190af71bc841bbe87b7))
-* **title:** fix a crash in title route ([21a1c83](https://github.com/zyachel/libremdb/commit/21a1c83d95b703fa08cdb96c206626f22d5366c9))
-
-## [3.1.0](https://github.com/zyachel/libremdb/compare/v3.0.0...v3.1.0) (2023-05-21)
-
-
-### Features
-
-* **cache:** implement caching of routes ([c53c88d](https://github.com/zyachel/libremdb/commit/c53c88db9bf98258547e2ca512f864800821cb1f))
-
-
-### Bug Fixes
-
-* **form:** fix hydration error ([8599ae2](https://github.com/zyachel/libremdb/commit/8599ae2c5ac11f2818f56c9f7de7666a38b4386c))
-* **name:** fix a couple of crashes in name and title route ([8d9b663](https://github.com/zyachel/libremdb/commit/8d9b6630a576b7e8331eb5431cd90d02733b4917))
-
-## [3.0.0](https://github.com/zyachel/libremdb/compare/v2.4.0...v3.0.0) (2023-04-15)
-
-
-### ⚠ BREAKING CHANGES
-
-* **title:** older versions won't work, at least for title route
-
-### Features
-
-* add info related to the current instance ([2c5d2f8](https://github.com/zyachel/libremdb/commit/2c5d2f86e46a52223f07d573b152bad5174ee2d9))
-* **route:** add name route ([75732e0](https://github.com/zyachel/libremdb/commit/75732e00869f9777e87e767a48648996345f02f7))
-
-
-### Bug Fixes
-
-* **title:** fix title page crash ([8ce02d0](https://github.com/zyachel/libremdb/commit/8ce02d02364c8e1f03a8b16594bc20ee6766a8c6))
-
-# [2.4.0](https://github.com/zyachel/libremdb/compare/v2.3.1...v2.4.0) (2023-01-22)
-
-
-### Bug Fixes
-
-* fix app crash ([71d1d5b](https://github.com/zyachel/libremdb/commit/71d1d5b34e2866729ae0c96c59ea51e8d1a3dcca))
-
-
-### Features
-
-* add error boundary ([5cc2ef0](https://github.com/zyachel/libremdb/commit/5cc2ef02cec0b31c5d449e189a054fbef5801f60))
+* add review section ([30dac07](https://github.com/zyachel/libremdb/commit/30dac07ba33dbe4331a5c9fa6cd2c332100868df))



-## [2.3.1](https://github.com/zyachel/libremdb/compare/v2.3.0...v2.3.1) (2023-01-15)
-
-
-### Bug Fixes
-
-* fix unseekable videos on webkit-based browsers ([a32785c](https://github.com/zyachel/libremdb/commit/a32785ce00b638e9079f0924fd9b00f98c077348))
-
-
-
-# [2.3.0](https://github.com/zyachel/libremdb/compare/v2.2.2...v2.3.0) (2022-12-31)
-
-
-### Bug Fixes
-
-* couple css improvements for webkit-based browsers ([81eaf2f](https://github.com/zyachel/libremdb/commit/81eaf2fd5e5980c0c4d59a8805cf541fa8fe51f9))
-
-
-### Features
-
-* **search:** add basic search functionality ([0cff34a](https://github.com/zyachel/libremdb/commit/0cff34a766b09ba17be2a89f6290889dbf225436))
-
-
-
-## [2.2.2](https://github.com/zyachel/libremdb/compare/v2.2.1...v2.2.2) (2022-12-10)
-
-
-### Bug Fixes
-
-* app crash on qutebrowser ([78b14ec](https://github.com/zyachel/libremdb/commit/78b14ec07955d29403b8b5ae0d449f38eea2bbc5))
-
-
-
-## [2.2.1](https://github.com/zyachel/libremdb/compare/v2.2.0...v2.2.1) (2022-12-01)
-
-
-### Bug Fixes
-
-* **title:** fix site crash ([dd75df0](https://github.com/zyachel/libremdb/commit/dd75df01eb7c03d8945a8bd20ed231a66bd88b8f))
--- a/35
+++ b/35
@ -1,35 +0,0 @@
-# Thanks @yordis on Github! https://github.com/vercel/next.js/discussions/16995#discussioncomment-132339
-
-# Install dependencies only when needed
-FROM node:lts-alpine AS deps
-
-WORKDIR /opt/app
-COPY package.json pnpm-lock.yaml ./
-RUN npm install -g pnpm
-RUN pnpm install --frozen-lockfile
-
-# Rebuild the source code only when needed
-# This is where because may be the case that you would try
-# to build the app based on some `X_TAG` in my case (Git commit hash)
-# but the code hasn't changed.
-FROM node:lts-alpine AS builder
-
-ENV NODE_ENV=production
-WORKDIR /opt/app
-RUN npm install -g pnpm
-COPY . .
-COPY --from=deps /opt/app/node_modules ./node_modules
-RUN pnpm build
-
-# Production image, copy all the files and run next
-FROM gcr.io/distroless/nodejs18-debian11 AS runner
-ARG X_TAG
-WORKDIR /opt/app
-ENV NODE_ENV=production
-COPY --from=builder /opt/app/next.config.mjs ./
-COPY --from=builder /opt/app/public ./public
-COPY --from=builder /opt/app/.next ./.next
-COPY --from=builder /opt/app/node_modules ./node_modules
-ENV HOST=0.0.0.0
-ENV PORT=3000
-CMD ["./node_modules/next/dist/bin/next", "start"]
--- a/README.md
+++ b/README.md
@ -1,186 +1,108 @@
 # libremdb

-A free & open source IMDb front-end.
+A FOSS alternative front-end to IMDb.

 Inspired by projects like [teddit](https://codeberg.org/teddit/teddit), [nitter](https://github.com/zedeus/nitter) and [many others](#similar-projects).

-|                                                                                                          |                                                                                                        |
-| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| <img src="./public/img/misc/preview.jpg" title="screenshot (desktop screen, light mode)" width="1500" /> | <img src="./public/img/misc/preview2.jpg" title="screenshot (mobile screen, dark mode)" width="400" /> |
+<br/>
+<img src="./public/img/misc/preview.png" title="image showing matrix movie info on libremdb" width="1000" />

 ---

-## Some Features
+## Features

 - No ads or tracking  
  Browse any movie info without being tracked or bombarded by annoying ads.
+- No connection to IMDb  
+  All requests go through the backend; client never talks to IMDb except for a bunch of requests to `m.media-amazon.com` for images.
+- No JavaScript required  
+  Just a few linesof code(~30) to save theme preference, which itself is optional.
 - Modern interface  
  Modern interface with curated colors supporting both dark and light themes.
 - Responsive design  
  Be it your small mobile or big computer screen, it's fully responsive.
 - Lightweight  
  _[Up movie page](https://imdb.com/title/tt1049413/)_  
-  (tested on Firefox v104; without scroll; simulated regular 4g)
-
-  | Network tab stats        | libremdb | IMDb   |
-  | ------------------------ | -------- | ------ |
-  | no. of requests          | 22       | 180    |
-  | data transfered(gzipped) | 468KB    | 1.88MB |
-  | load event fired in      | 6.22s    | 10.01s |
+  | | libremdb | IMDb |
+  | --------------- | -------- | ------ |
+  | no. of requests | ~35 | ~280 |
+  | data consumed | 1.35MB | 7.75MB |

 ---

-## Instances
-
-<!-- prettier-ignore -->
-| Instance URL | Region | Notes |
-| ------------ | ------ | ----- |
-| 1. Clearnet | | |
-| [libremdb.iket.me](https://libremdb.iket.me) | Canada  | Operated by me |
-| [libremdb.pussthecat.org](https://libremdb.pussthecat.org) | Germany | Operated by [PussTheCat.org](https://pussthecat.org/) |
-| [ld.vern.cc](https://ld.vern.cc) | US | Operated by [~vern](https://vern.cc) |
-| [binge.whatever.social](https://binge.whatever.social) | US & Germany | Operated by [Whatever Social](https://whatever.social) |
-| [libremdb.lunar.icu](https://libremdb.lunar.icu) | Germany (Cloudflare) | Operated by [lunar.icu](https://lunar.icu/) |
-| [libremdb.jeikobu.net](https://libremdb.jeikobu.net) | Germany (Cloudflare) | Operated by [shindouj](https://github.com/shindouj) |
-| [lmdb.hostux.net](https://lmdb.hostux.net) | France | Operated by [Hostux.net](https://hostux.net) |
-| [binge.whateveritworks.org](https://binge.whateveritworks.org) | Germany (Cloudflare) | Operated by [WhateverItWorks](https://github.com/WhateverItWorks) |
-| [libremdb.nerdyfam.tech](https://libremdb.nerdyfam.tech) | US | Operated by [Nerdyfam.tech](https://nerdyfam.tech/) |
-| [libremdb.tux.pizza](https://libremdb.tux.pizza) | US | Operated by [tux.pizza](https://tux.pizza) |
-| [libremdb.frontendfriendly.xyz](https://libremdb.frontendfriendly.xyz) | &mdash; | Operated by [frontendfriendly.xyz](https://frontendfriendly.xyz) |
-[d.opnxng.com](https://d.opnxng.com) | Singapore | Operated by [Opnxng](https://about.opnxng.com/)
-[libremdb.catsarch.com](https://libremdb.catsarch.com) | US | Operated by [Butter Cat](https://catsarch.com/)
-[mdb.sudovanilla.com](https://mdb.sudovanilla.com) | US (Cloudflare) | Operated by [SudoVanilla](https://sudovanilla.com/)
-| 2. Onion | | |
-| [ld.vernccvbvyi5qhfzyqengccj7lkove6bjot2xhh5kajhwvidqafczrad.onion](http://ld.vernccvbvyi5qhfzyqengccj7lkove6bjot2xhh5kajhwvidqafczrad.onion) | US | Operated by [~vern](https://vern.cc) |
-| 3. I2P | | |
-| [vernz3ubrntql4wrgyrssd6u3qzi36zrhz2agbo6vibzbs5olk2q.b32.i2p](http://vernz3ubrntql4wrgyrssd6u3qzi36zrhz2agbo6vibzbs5olk2q.b32.i2p) | US | Operated by [~vern](https://vern.cc) |
-
---
-
-## Questions you might have
-
- How do I use it?  
-  Replace `imdb.com` in any IMDb URL with any of the instances. For example: '[imdb.com/title/tt1049413](https://imdb.com/title/tt1049413/)' to '[libremdb.iket.me/title/tt1049413](https://libremdb.iket.me/title/tt1049413/)'.  
-  To avoid changing the URLs manually, you can use [extensions](#automatic-redirection).
+## FAQs

 - Why is it so slow?  
  Whenever you request info about a movie/show on libremdb, 4 trips are made(2 between your browser and libremdb's server, and 2 between libremdb's server and IMDb's server) instead of the usual 2 trips when you visit a website. For this reason there's a noticable delay. This is a bit of inconvenience you'll have to face should you wish to use this website.

 - It doesn't have all routes.  
-  I'll implement more with time :)
+  I think most of the people just check IMDb to get a quick glimpse of a movie/show. That's why there is just one route for now. However, I will try to implement other important routes if time allows. Keep an eye on [To-Do](#to-do) section.

- Is content served from third-parties, like Amazon?  
-  Nope, libremdb proxies all image and video requests through the instance to avoid exposing your IP address, browser information and other personally identifiable metadata ([Contributor](https://github.com/httpjamesm)).
+- Why is it connecting to `m.media-amazon.com`?  
+  For now, images are directly served from amazon. If I have enough time in the future, I'll implement a way to serve the images from libremdb instead.
+
+- Will amazon track me then?  
+  They may log your IP address. I'd recommend using a VPN for mitigating this risk.

 - Why not just use IMDb?  
-  Refer to the [features section](#some-features) above.
-
+  Refer to the [features section](#features) above.
 - Why didn't you use other databases like [TMDB](https://www.themoviedb.org/) or [OMDb](https://www.omdbapi.com/)?  
  IMDb simply has superior dataset compared to all other alternatives. With that being said, I'd encourage you to check out those alternatives too.
+- Why did you deploy it on heroku? Why not just buy your own domain name?  
+  It's just a proof-of-concept for now. However, if you'd like to do so, you are very welcome.

 ---

 ## Privacy

- Information collected:  
-  None.
+In short: libremdb doesn't collect any data at all.

- Information stored in your browser:  
-  A key named 'theme' is stored in Local Storage provided by your browser, if you ever override the default theme. To remove it, go to site data settings, and clear the data for this website. To permamently disable libremdb from storing your theme prefrences, either turn off JavaScript or disable access to Local Storage for libremdb.
-
- Information collected by other services:  
-  None. libremdb proxies images anonymously through the instance for maximum privacy ([Contributor](https://github.com/httpjamesm)).
+- Data you directly provide: None.
+- Data you passively provide: Heroku might log some things(like IP address). So, consider hosting your own instance or using a VPN.
+- Data stored in your browser: To remember theme preferences, the website stores a key named 'theme' in Local Storage provided by your browser. Apart from that, there is nothing stored in your browser.

 ---

 ## To-Do

+### soon
+
 - [ ] add advanced search route
- [x] add did you know and reviews on movie info page
- [x] add a way to see trailer and other videos
- [ ] implement movie specific routes like:
+- [ ] add did you know and reviews on movie info page
+- [ ] implement routes for reviews, quotes, goofs, trivia and crazy credits

-  - [ ] reviews(including critic reviews)
-  - [ ] video & image gallery
-  - [ ] sections under 'did you know'
-  - [ ] release info
-  - [ ] parental guide
+### at a later stage

- [ ] implement other routes like:
-
-  - [ ] lists
-  - [ ] moviemeter
-  - [x] person info(includes directors and actors)
-  - [ ] company info
-  - [ ] user info
-
- [X] use redis, or any other caching strategy
- [x] implement a better installation method
- [x] serve images and videos from libremdb itself
+- [ ] use redis
+- [ ] implement a better installation method
+- [ ] serve images from libremdb itself
+- [ ] add a way to see trailer and other videos
+- [ ] implement other trivial routes

 ---

 ## Installation

-As libremdb is made with Next.js, you can deploy it anywhere where Next.js is supported. Below are a few other methods:
-
-### Manual
-
 1. Install Node.js and Git.  
   for Node.js, visit [their website](https://nodejs.org/en/).  
-   for Git, run `sudo apt install git` if you're on a Debian-based distro. Else visit [their website](https://git-scm.com/).
+   for Git, run `sudo apt install git` if you're on a Debain-based distro. Else visit [their website](https://git-scm.com/).

-2. Install redis(optional).  
-   You can install redis from [here](https://redis.io).
-
-3. Clone and set up the repo.
+2. Clone and set up the repo.

   ```bash
-   git clone https://github.com/zyachel/libremdb.git # replace github.com with codeberg.org if you wish so.
+   git clone https://github.com/zyachel/libremdb.git
   cd libremdb
-   # change the configuration file to your liking.
-   cp .env.local.example .env.local
-   # replace 'pnpm' with yarn or npm if you use those.
+   cp config.env.template config.env # you can make necessary changes
+   # if you use npm, change 'pnpm' to 'npm run' here as well as in package.json
   pnpm install
-   pnpm build
   pnpm start
-   # optional: if you're using redis
-   redis-server
   ```

-libremdb will start running at http://localhost:3000.  
-To change port, modify the last command like this: `pnpm start -- -p <port-number>`.
+libremdb will start running at http://localhost:3000.

-### Docker (Local)
+---

-You can build the docker image using the provided Dockerfile(thanks to [@httpjamesm](https://github.com/httpjamesm)) and set it up using the [example docker-compose file](./docker-compose.example.yml).
-
-Change the docker-compose file to your liking and run `docker-compose up -d` to start the container, that's all!
-
-### Docker (Built)
-
-There's a [docker image](https://github.com/PussTheCat-org/docker-libremdb-quay) made by [@TheFrenchGhosty](https://github.com/TheFrenchGhosty) for [PussTheCat.org's instance](https://libremdb.pussthecat.org). You can use that as well.
-
-## Miscellaneous
-
-### Automatic redirection
-
- [Redirector](https://github.com/einaregilsson/Redirector)  
-  config:
-
-  ```
-  Description: redirect IMDb to libremdb
-  Example URL: https://www.imdb.com/title/tt0258463/?ref_=tt_sims_tt_t_4
-  Include pattern: https?:\/\/(www\.)?imdb\.com\/(.*)
-  Redirect to: https://libremdb.iket.me/$2
-  Pattern type: Regular Expression
-  ```
-
- [LibRedirect](https://github.com/libredirect/libredirect/)
-
- [Privacy Redirector](https://github.com/dybdeskarphet/privacy-redirector)
-
-### Similar projects
+## similar projects

 - [Teddit](https://codeberg.org/teddit/teddit)  
  Teddit is an alternative Reddit front-end focused on privacy.
@ -188,23 +110,27 @@ There's a [docker image](https://github.com/PussTheCat-org/docker-libremdb-quay)
  Nitter is a free and open source alternative Twitter front-end focused on privacy.
 - [Bibliogram](https://sr.ht/~cadence/bibliogram/)  
  Bibliogram is an alternative front-end for Instagram.
- [Invidious](https://invidious.io)  
+- [Invidious](https://invidious.org)  
  Invidious is an alternative front-end to YouTube.
 - [Libreddit](https://github.com/spikecodes/libreddit)  
  Libreddit is an alternative private front-end to Reddit.
 - [Scribe](https://git.sr.ht/~edwardloveall/scribe)  
  Scribe is an alternative Medium frontend.
- [full list &rarr;](https://github.com/digitalblossom/alternative-frontends)
+
+- [other cool projects &rarr;](https://github.com/mendel5/alternative-front-ends)

 ---

 ## Contact

-I'm availabe on [[matrix]](https://matrix.to/#/@ninal:matrix.org) and [email](mailto:aricla@protonmail.com) in case you wish to contact me personally.
+|                         \[matrix\]                         |                          email                           |
+| :--------------------------------------------------------: | :------------------------------------------------------: |
+| <img src="./public/img/contact/matrix.png" width="120" />  | <img src="./public/img/contact/email.png" width="120" /> |
+| [@ninal:matrix.org](https://matrix.to/#/@ninal:matrix.org) |  [aricla@protonmail.com](mailto:aricla@protonmail.com)   |

 ---

 ## License

 Licensed under GNU AGPLv3.  
-See [License](./LICENSE) for full legalese.
+Refer to [License](/LICENSE) for full legalese.
--- a/app.js
+++ b/app.js
@ -0,0 +1,58 @@
+const express = require('express');
+const path = require('path');
+const morgan = require('morgan');
+const helmet = require('helmet');
+const compression = require('compression');
+const app = express();
+// const movieRouter = require('./routes/movieRoutes');
+const viewRouter = require('./routes/viewRoutes');
+const globalErrorHandler = require('./controllers/errorControllers');
+const { AppError } = require('./utils/errorUtils');
+
+//-------------------------------------------------------------------------//
+//                            GLOBAL MIDDLEWARES
+//-------------------------------------------------------------------------//
+
+app.use(compression()); // for compressing response bodies
+app.use(
+  // for making the app more secure by setting some security headers(like CORS)
+  helmet({
+    contentSecurityPolicy: {
+      directives: {
+        // only allowing images from 'm.media-amazon.com' as crossorigin
+        'img-src': ["'self'", 'm.media-amazon.com'],
+      },
+    },
+    // 'crossorigin' attribute is needed in the img tag where images are fetched from 'm.media-amazon.com' if the policy below is set to true. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy for more details
+    crossOriginEmbedderPolicy: false,
+  })
+);
+
+app.set('view engine', 'pug'); // setting pug as a view engine
+app.set('views', path.join(__dirname, 'views/pug')); // directory from where html template will be sourced
+
+app.use(express.static(path.join(__dirname, 'public'))); // directory from where files like css, images, fonts, will be sourced
+
+if (process.env.NODE_ENV === 'development') app.use(morgan('dev')); // for logging requests
+// app.use(express.json({ limit: '3mb' })); // for parsing json
+
+//-------------------------------------------------------------------------//
+//                            ROUTER MIDDLEWARES
+//-------------------------------------------------------------------------//
+// app.use('/api/v1/movies', movieRouter); // sub-router for movie related endpoints
+app.use('/', viewRouter); // for html pages
+
+//-------------------------------------------------------------------------//
+//                         GLOBAL ERROR HANDLING
+//-------------------------------------------------------------------------//
+app.all('*', (req, res, next) => {
+  next(
+    new AppError(
+      `the route you requested(${req.originalUrl}) doesn't exist`,
+      404
+    )
+  );
+});
+app.use(globalErrorHandler); // handling errors in every middleware
+
+module.exports = app;
--- a/config.env.template
+++ b/config.env.template
@ -0,0 +1,8 @@
+# default port is 3000
+PORT=3000
+# url
+URL=http://localhost:3000
+# enviorment
+NODE_ENV=production
+# change image quality
+IMAGE_QUALITY=500
--- a/controllers/errorControllers.js
+++ b/controllers/errorControllers.js
@ -0,0 +1,94 @@
+const { AppError } = require('../utils/errorUtils');
+
+//----------------------------------------------------------------------------------------------------------//
+//                                  ERROR HANDLING FUNCTIONS ACC TO ENVIRONMENTS
+//----------------------------------------------------------------------------------------------------------//
+// for errors during development
+const devErrorHandler = (err, req, res) => {
+  req.originalUrl.startsWith('/api/')
+    ? //            1) FOR API
+      res.status(err.statusCode).json({
+        status: err.status,
+        message: err.message,
+        stack: err.stack,
+        err,
+      })
+    : //           2) FOR RENDERED PAGES
+      res.render('error', {
+        title: 'an error occured',
+        page: 'error',
+        message: err.message,
+        statusCode: err.statusCode,
+        stack: err.stack,
+      });
+};
+
+// for errors during production
+const prodErrorHandler = (err, req, res) => {
+  if (req.originalUrl.startsWith('/api/'))
+    //            1) FOR API
+    // for trusted, operational errors
+    err.isOperational
+      ? res
+          .status(err.statusCode)
+          .json({ status: err.status, message: err.message })
+      : // for untrusted errors sending a generic message
+        res
+          .status(500)
+          .json({ status: 'fail', message: 'something went wrong!' });
+
+  //           2) FOR RENDERED PAGES
+  err.isOperational
+    ? res.render('error', {
+        title: 'something went wrong',
+        page: 'error',
+        message: err.message,
+        statusCode: err.statusCode,
+      })
+    : res.render('error', {
+        title: 'an error occured',
+        page: 'error',
+        message: 'something went wrong!',
+        statusCode: 500,
+      });
+  // err;
+};
+
+//-------------------------------------------------------------------------------------------------------------//
+//                                 MAIN EXPRESS ERROR HANDLING MIDDLEWARE
+//-------------------------------------------------------------------------------------------------------------//
+const globalErrorHandler = (err, req, res, next) => {
+  // setting some defaults on the error in case they don't exist already
+  err.statusCode = err.statusCode || 500;
+  err.status = err.status || 'error';
+
+  // logging error to the console
+  console.log('\x1b[31m%s\x1b[0m', '🔴️ ERROR:', err); // with red color
+
+  // sending error to the client
+  // for dev environment
+  if (process.env.NODE_ENV === 'development') devErrorHandler(err, req, res);
+  // for prod environment
+  else if (process.env.NODE_ENV === 'production') {
+    let error = { ...err };
+
+    // marking some special errors as operational
+    // axios errors
+    if (err.isAxiosError) {
+      // if connection can't be established to imdb for some reason
+      if (err.code === 'ENETUNREACH' || err.code === 'ENOTFOUND')
+        error = new AppError(
+          'there was some problem fetching data from IMDb',
+          500
+        );
+
+      // in case the url is wrong(like bad title id)
+      if (err.response)
+        error = new AppError(err.response.statusText, err.response.status);
+    }
+
+    prodErrorHandler(error, req, res);
+  }
+};
+
+module.exports = globalErrorHandler;
--- a/controllers/viewControllers.js
+++ b/controllers/viewControllers.js
@ -0,0 +1,73 @@
+const { AppError, catchErrors } = require('../utils/errorUtils');
+// const { genres, popularGenres } = require('../utils/constants');
+const getMovie = require('../fetchers/movie');
+
+exports.overview = (req, res, next) => res.redirect(301, '/about');
+
+exports.about = catchErrors(async (req, res, next) => {
+  res.render('about', { title: 'About', page: 'About' });
+});
+
+exports.privacy = catchErrors(async (req, res, next) => {
+  res.render('privacy', { title: 'Privacy', page: 'Privacy' });
+});
+
+exports.contact = catchErrors(async (req, res, next) => {
+  res.render('contact', { title: 'Contact', page: 'Contact' });
+});
+
+exports.similarProjects = catchErrors(async (req, res, next) => {
+  res.render('similarProjects', {
+    title: 'Similar Projects',
+    page: 'Similar Projects',
+  });
+});
+
+exports.movie = catchErrors(async (req, res, next) => {
+  const movie = await getMovie(req.params.title, +process.env.IMAGE_QUALITY);
+  res.render('movie', {
+    movie,
+    title: movie.basic.name,
+    page: movie.basic.name,
+  });
+});
+
+/*
+exports.searchGenres = catchErrors(async (req, res, next) => {
+  // fetching top 10 rated movies to show in homepage
+  let movies;
+  const genresQueriedStr = req.query.genres;
+  const genresQueriedArr = genresQueriedStr?.split(',');
+
+  if (!genresQueriedArr) {
+    movies = await moviesDataFetcher('sci-fi,action');
+    return res.render('homepage', {
+      title: 'Home Page',
+      page: 'Home Page',
+      movies: movies.slice(-10),
+      genres,
+      popularGenres,
+    });
+  }
+
+  const numResults = +req.query.results || 10;
+  const numPage = +req.query.page || 1;
+  const resultsToskip = numResults * (numPage - 1);
+
+  movies = await moviesDataFetcher(genresQueriedStr);
+  movies = movies.slice(resultsToskip, resultsToskip + numResults);
+  const totalNumResults = movies.length;
+
+  if (!movies.length) return next(new AppError('no movies found', 404));
+
+  const [curPage, totalPages] = [numPage, totalNumResults / numResults];
+  res.render('movies', {
+    title: genresQueriedArr.join(', '),
+    page: 'Movies',
+    genres: genresQueriedArr,
+    movies,
+    curPage,
+    totalPages,
+  });
+});
+*/
--- a/docker-compose.example.yml
+++ b/docker-compose.example.yml
@ -1,47 +0,0 @@
-# docker-compose.yml
-
-version: '3'
-
-services:
-  libremdb:
-    container_name: libremdb
-    build:
-      context: .
-      dockerfile: Dockerfile
-    ports:
-      - "3000:3000"
-    env_file: .env.local.example
-    depends_on:
-      - libremdb-redis
-    restart: always
-    user: 65534:65534 # equivalent to the nobody user
-    read_only: true
-    tmpfs:
-      - /opt/app/.next/cache/:size=10M,mode=0770,uid=65534,gid=65534,noexec,nosuid,nodev
-    security_opt:
-      - no-new-privileges:true
-    cap_drop:
-      - ALL
-    networks:
-      - libremdb
-
-  libremdb-redis:
-    container_name: libremdb_redis
-    image: redis
-    # FOR DEBUGGING ONLY
-    # ports:
-    #   - "6379:6379"
-    restart: always
-    user: nobody
-    read_only: true
-    security_opt:
-      - no-new-privileges:true
-    tmpfs:
-      - /data:size=10M,mode=0770,uid=65534,gid=65534,noexec,nosuid,nodev
-    cap_drop:
-      - ALL
-    networks:
-      - libremdb
-
-networks:
-  libremdb:
--- a/fetchers/movie.js
+++ b/fetchers/movie.js
@ -0,0 +1,256 @@
+const cheerio = require('cheerio');
+const axiosInstance = require('../utils/axiosInstance');
+
+// cleans images links and adds custom quality(optional).
+const cleanLink = (link, quality = null) => {
+  if (!link) return '';
+  let cleanedLink = link.match(
+    /https:\/\/m\.media-amazon\.com\/images\/M\/[^.]*/gm
+  )?.[0];
+  if (!cleanedLink) return '';
+  cleanedLink += quality ? `.UX${quality}.jpeg` : '.jpeg';
+  return cleanedLink;
+};
+
+const getMovie = async (title, quality = null) => {
+  try {
+    const res = await axiosInstance(`/title/${title}`);
+
+    const $ = cheerio.load(res.data);
+
+    // basic info
+    const name = $('h1').text();
+    const metadata = $('ul[data-testid=hero-title-block__metadata] li')
+      .map((i, el) =>
+        $(el).children().length ? $(el).children().first().text() : $(el).text()
+      )
+      .toArray();
+    const rating = $('[data-testid=hero-rating-bar__aggregate-rating__score]')
+      .children()
+      .first()
+      .text();
+    const numVotes = $('[data-testid=hero-rating-bar__aggregate-rating__score]')
+      .siblings()
+      .last()
+      .text();
+    const popularity = $('[data-testid="hero-rating-bar__popularity__score"]')
+      .first()
+      .text();
+    const plotBrief = $('span[data-testid=plot-xl]').contents().first().text();
+    let poster = $('[data-testid="hero-media__poster"] img').attr('src');
+    poster = cleanLink(poster, quality);
+    const reviewScores = [];
+    $(
+      'ul[data-testid="reviewContent-all-reviews"] li a span.three-Elements'
+    ).each((i, el) =>
+      reviewScores.push([
+        $(el).children().first().text(),
+        $(el).children().last().text(),
+      ])
+    );
+
+    // media
+    const images = $('section[data-testid="Photos"] .ipc-photo img')
+      .map((i, el) => {
+        let image = $(el).attr('src');
+        return cleanLink(image, quality);
+      })
+      .toArray();
+    const imagesLinkExternal = $('[data-testid=photos-title]').attr('href');
+    const videoThumbnail = $('.ipc-slate__slate-image img').attr('src');
+    const videoLinkExternal = $('.hero-media__slate-overlay').attr('href');
+    const videosLinkExternal = $('[data-testid=videos-title]').attr('href');
+
+    // cast
+    const actors = $(
+      'section[data-testid="title-cast"] div[data-testid=title-cast-item]'
+    )
+      .map((i, el) => {
+        const name = $(el)
+          .find('a[data-testid="title-cast-item__actor"]')
+          .text();
+        let avatar = $(el).find('img').attr('src');
+        avatar = cleanLink(avatar, quality);
+        const characterName = $(el)
+          .find('a[data-testid=cast-item-characters-link] span')
+          .first()
+          .text();
+
+        return { name, avatar, characterName };
+      })
+      .toArray();
+    const directors = $(
+      'section[data-testid=title-cast] ul li:nth-of-type(1) li'
+    )
+      .map((i, el) => $(el).find('a').text())
+      .toArray();
+    const writers = $('section[data-testid=title-cast] ul li:nth-of-type(2) li')
+      .map((i, el) => $(el).find('a').text())
+      .toArray();
+
+    // storyline
+    const plotExpanded = $(
+      'section[data-testid="Storyline"] [data-testid=storyline-plot-summary]'
+    )
+      .contents()
+      .first()
+      .text();
+    const tagline = $(
+      'section[data-testid="Storyline"] [data-testid=storyline-taglines] li'
+    )
+      .first()
+      .text();
+    const genres = $(
+      'section[data-testid="Storyline"] [data-testid=storyline-genres] li'
+    )
+      .map((i, el) => $(el).text())
+      .toArray();
+    const parentalGuidance = $(
+      '[data-testid="storyline-certificate"] li'
+    ).text();
+
+    // reviews
+    const reviewSummary = $(
+      'section[data-testid="UserReviews"] span[data-testid="review-summary"]'
+    ).text();
+    const reviewRating = $(
+      'section[data-testid="UserReviews"] div[data-testid="review-featured-header"]'
+    )
+      .children()
+      .last()
+      .text();
+    const reviewComment = $(
+      'section[data-testid="UserReviews"] div[data-testid="review-overflow"]'
+    ).text();
+
+    // details
+    const releaseDate = $(
+      'section[data-testid="Details"] li[data-testid="title-details-releasedate"] li'
+    ).text();
+    const countries = $(
+      'section[data-testid="Details"] li[data-testid="title-details-origin"] li'
+    )
+      .map((i, el) => $(el).text())
+      .toArray();
+    const officialSite = $(
+      'section[data-testid="Details"] li[data-testid="title-details-officialsites"] li a'
+    )
+      .first()
+      .attr('href');
+    const languages = $(
+      'section[data-testid="Details"] li[data-testid="title-details-languages"] li'
+    )
+      .map((i, el) => $(el).text())
+      .toArray();
+    const alternateTitle = $(
+      'section[data-testid="Details"] li[data-testid="title-details-akas"] li'
+    )
+      .first()
+      .text();
+    const filmingLocations = $(
+      'section[data-testid="Details"] li[data-testid="title-details-filminglocations"] li'
+    )
+      .map((i, el) => $(el).text())
+      .toArray();
+    const companies = $(
+      'section[data-testid="Details"] li[data-testid="title-details-companies"] li'
+    )
+      .map((i, el) => $(el).text())
+      .toArray();
+
+    // technical specs
+    const runtime = $(
+      'section[data-testid="TechSpecs"] li[data-testid="title-techspec_runtime"] div'
+    ).text();
+    const color = $(
+      'section[data-testid="TechSpecs"] li[data-testid="title-techspec_color"] div'
+    ).text();
+    const aspectRatio = $(
+      'section[data-testid="TechSpecs"] li[data-testid="title-techspec_aspectratio"] div'
+    ).text();
+    const sound = $(
+      'section[data-testid="TechSpecs"] li[data-testid="title-techspec_soundmix"] li'
+    )
+      .map((i, el) => $(el).text())
+      .toArray();
+
+    // boxoffice
+    const budget = $(
+      'section[data-testid="BoxOffice"] [data-testid="title-boxoffice-section"] li[data-testid="title-boxoffice-budget"] li'
+    ).text();
+    const grossDomestic = $(
+      'section[data-testid="BoxOffice"] [data-testid="title-boxoffice-section"] li[data-testid="title-boxoffice-grossdomestic"] li'
+    ).text();
+    const openingWeekendDomestic = $(
+      'section[data-testid="BoxOffice"] [data-testid="title-boxoffice-section"] li[data-testid="title-boxoffice-openingweekenddomestic"] li'
+    )
+      .map((i, el) => $(el).text())
+      .toArray();
+    const grossWorldwide = $(
+      'section[data-testid="BoxOffice"] [data-testid="title-boxoffice-section"] li[data-testid="title-boxoffice-cumulativeworldwidegross"] li'
+    ).text();
+
+    // making data object
+    const data = {
+      basic: {
+        name,
+        poster,
+        metadata,
+        rating,
+        numVotes,
+        popularity,
+        genres,
+        plotBrief,
+        directors,
+        writers,
+      },
+      media: {
+        poster,
+        images,
+        imagesLinkExternal,
+        videoThumbnail,
+        videoLinkExternal,
+        videosLinkExternal,
+      },
+      topCast: { actors, directors, writers },
+      storyline: { plotExpanded, tagline, genres, parentalGuidance },
+      details: {
+        releaseDate,
+        countries,
+        officialSite,
+        languages,
+        alternateTitle,
+        filmingLocations,
+        companies,
+      },
+      technicalSpecs: {
+        runtime,
+        color,
+        aspectRatio,
+        sound,
+      },
+      boxoffice: {
+        budget,
+        openingWeekendDomestic,
+        grossDomestic,
+        grossWorldwide,
+      },
+      reviews: {
+        reviewScores,
+        review: {
+          reviewComment,
+          reviewSummary,
+          reviewRating,
+        },
+      },
+    };
+
+    // returning data
+    return data;
+  } catch (err) {
+    console.log(err.response);
+    throw err;
+  }
+};
+
+module.exports = getMovie;
--- a/next.config.mjs
+++ b/next.config.mjs
@ -1,26 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  swcMinify: true,
-  async redirects() {
-    return [
-      {
-        source: '/',
-        destination: '/find',
-        permanent: true,
-      },
-    ];
-  },
-  images: {
-    domains: ['m.media-amazon.com'],
-  },
-  experimental: {
-    images: {
-      allowFutureImage: true,
-    },
-    isrMemoryCacheSize: 20 * 1024 * 1024,
-  },
-  poweredByHeader: false,
-};
-
-export default nextConfig;
--- a/package.json
+++ b/package.json
@ -1,41 +1,42 @@
 {
  "name": "libremdb",
-  "version": "3.2.0",
-  "description": "a free & open source IMDb front-end",
-  "private": true,
-  "type": "module",
+  "version": "0.1.0",
+  "description": "a FOSS alternative front-end to IMDb",
+  "main": "server.js",
+  "scripts": {
+    "sass:watch": "sass views/sass/main.scss public/css/styles.css --watch",
+    "sass:build": "sass views/sass/main.scss public/css/styles.css --style=compressed",
+    "prod": " (nodemon server.js) & (pnpm sass:watch)",
+    "dev": " (NODE_ENV=development nodemon server.js) & (pnpm sass:watch)",
+    "start": "(mkdir -p public/css) && (npm run sass:build) && (node server.js)"
+  },
  "author": "libremdb-contributors",
  "license": "AGPL-3.0-or-later",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/zyachel/libremdb/"
-  },
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
  "dependencies": {
-    "axios": "^0.27.2",
-    "cheerio": "1.0.0-rc.12",
-    "ioredis": "^5.3.2",
-    "next": "12.2.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "sharp": "^0.31.3"
+    "axios": "^0.26.1",
+    "cheerio": "^1.0.0-rc.10",
+    "compression": "^1.7.4",
+    "dotenv": "^16.0.0",
+    "express": "^4.17.3",
+    "helmet": "^5.0.2",
+    "morgan": "^1.10.0",
+    "pug": "^3.0.2",
+    "sass": "^1.50.0"
  },
  "devDependencies": {
-    "@types/node": "18.7.3",
-    "@types/react": "18.0.17",
-    "@types/react-dom": "18.0.6",
-    "eslint": "8.22.0",
-    "eslint-config-next": "12.2.5",
-    "sass": "^1.62.1",
-    "typescript": "4.7.4"
+    "@types/express": "^4.17.13",
+    "@types/morgan": "^1.9.3",
+    "nodemon": "^2.0.15"
  },
-  "engines": {
-    "node": ">=16.5.0",
-    "pnpm": ">=8.0.0"
+  "nodemonConfig": {
+    "ignore": [
+      "node_modules/*",
+      "public/*"
+    ]
+  },
+  "pnpm": {
+    "overrides": {
+      "json-schema@<0.4.0": ">=0.4.0"
+    }
  }
-}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/android-chrome-192x192.png
+++ b/public/android-chrome-192x192.png
--- a/public/android-chrome-512x512.png
+++ b/public/android-chrome-512x512.png
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/browserconfig.xml
+++ b/public/browserconfig.xml
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#b91d47</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/font/Montserrat-Bold.woff2
+++ b/public/font/Montserrat-Bold.woff2
--- a/public/font/Montserrat-Italic.woff2
+++ b/public/font/Montserrat-Italic.woff2
--- a/public/font/Montserrat-Light.woff2
+++ b/public/font/Montserrat-Light.woff2
--- a/public/font/Montserrat-Regular.woff2
+++ b/public/font/Montserrat-Regular.woff2
--- a/public/font/Montserrat-SemiBold.woff2
+++ b/public/font/Montserrat-SemiBold.woff2
--- a/public/font/NunitoSans-Bold.woff2
+++ b/public/font/NunitoSans-Bold.woff2
--- a/public/font/NunitoSans-Italic.woff2
+++ b/public/font/NunitoSans-Italic.woff2
--- a/public/font/NunitoSans-Light.woff2
+++ b/public/font/NunitoSans-Light.woff2
--- a/public/font/NunitoSans-Regular.woff2
+++ b/public/font/NunitoSans-Regular.woff2
--- a/public/font/NunitoSans-SemiBold.woff2
+++ b/public/font/NunitoSans-SemiBold.woff2
--- a/public/fonts/RedHatDisplay-Italic-VariableFont_wght.ttf
+++ b/public/fonts/RedHatDisplay-Italic-VariableFont_wght.ttf
--- a/public/fonts/RedHatDisplay-VariableFont_wght.ttf
+++ b/public/fonts/RedHatDisplay-VariableFont_wght.ttf
--- a/public/icon-192.png
+++ b/public/icon-192.png
--- a/public/icon-512.png
+++ b/public/icon-512.png
--- a/public/icon.svg
+++ b/public/icon.svg
@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="85" height="85" version="1.1" viewBox="0 0 85 85" xmlns="http://www.w3.org/2000/svg">
- <style>
-  @media (prefers-color-scheme: dark) { .logo-icon { fill: #e85e8f }}
- </style>
- <g transform="matrix(.489 0 0 .489 -10.9 -57.8)" class="logo-icon" fill="#b80040">
-  <path d="m181 245-35.7 26.3c-4.68 3.46-10.5 5.37-16.5 5.37h-91.8c-2.31 0-4-1.92-4-4.23v-25.4c0-2.31 1.92-4.24 4-4.24l14.6 6e-3 12.3-9.99c5.32-4.26 12.5-6.94 19.6-6.94h42.1c5.16 0 9.23 4.6 8.37 9.89-0.695 4.17-4.6 7.04-8.83 7.04h-20.5c-2.31 0-4 1.92-4 4s1.92 4 4 4h31.9l31.7-23.3c4.71-3.49 11.3-2.47 14.8 2.24 3.7 5.18 2.69 11.8-2.02 15.3z"/>
-  <path d="m106 133a44.5 43.7 0 0 1 44.5 43.7 44.5 43.7 0 0 1-44.5 43.7 44.5 43.7 0 0 1-44.5-43.7 44.5 43.7 0 0 1 44.5-43.7m0 8.74a11.1 10.9 0 0 0-11.1 10.9 11.1 10.9 0 0 0 11.1 10.9 11.1 10.9 0 0 0 11.1-10.9 11.1 10.9 0 0 0-11.1-10.9m-33.8 24.2c-1.91 5.73 1.29 11.9 7.12 13.8 5.88 1.84 12.2-1.27 14-7.04 1.91-5.73-1.29-11.9-7.12-13.8-5.83-1.84-12.2 1.27-14 7.04m67.7-0.132c-1.91-5.64-8.19-8.74-14-6.91-5.88 1.84-9.08 8-7.17 13.8 1.91 5.73 8.19 8.87 14 6.99 5.83-1.84 9.04-8.04 7.17-13.9m-54.8 39.2c4.94 3.58 12 2.49 15.5-2.4 3.61-4.9 2.49-11.7-2.49-15.3-4.94-3.54-11.9-2.45-15.5 2.4-3.61 4.9-2.49 11.7 2.49 15.3m41.8 0c4.99-3.54 6.1-10.4 2.49-15.3-3.61-4.9-10.6-5.99-15.5-2.4-4.99 3.54-6.1 10.4-2.49 15.3 3.52 4.9 10.6 5.94 15.5 2.4m-20.9-34.8a6.68 6.56 0 0 0-6.68 6.56 6.68 6.56 0 0 0 6.68 6.56 6.68 6.56 0 0 0 6.68-6.56 6.68 6.56 0 0 0-6.68-6.56z"/>
- </g>
-</svg>
--- a/public/img/contact/email.png
+++ b/public/img/contact/email.png
--- a/public/img/contact/matrix.png
+++ b/public/img/contact/matrix.png
--- a/public/img/misc/preview.jpg
+++ b/public/img/misc/preview.jpg
--- a/public/img/misc/preview.png
+++ b/public/img/misc/preview.png
--- a/public/img/misc/preview2.jpg
+++ b/public/img/misc/preview2.jpg
--- a/public/img/misc/sprite.svg
+++ b/public/img/misc/sprite.svg
@ -0,0 +1,70 @@
+<svg width="0" height="0" class="hidden">
+  <!--main logo-->
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152.35 143.74" id="icon-logo">
+    <g transform="translate(-32.882 -133.08)">
+      <path d="m181.17 245.31-35.745 26.329c-4.6831 3.4634-10.478 5.3684-16.536 5.3684h-91.81c-2.3148 0-3.9952-1.9172-3.9952-4.2307v-25.397c0-2.3146 1.9182-4.2386 3.9952-4.2386l14.65 6e-3 12.303-9.9854c5.3181-4.2595 12.467-6.945 19.611-6.945h42.095c5.1594 0 9.226 4.5958 8.3661 9.8875-0.69453 4.1672-4.5958 7.0432-8.8292 7.0432h-20.463c-2.3148 0-3.9952 1.918-3.9952 3.9952 0 2.0772 1.9182 3.9952 3.9952 3.9952h31.909l31.671-23.328c4.7096-3.4898 11.327-2.4717 14.798 2.2402 3.6962 5.1803 2.6908 11.795-2.0188 15.261z"></path>
+      <path d="m106 133.08a44.526 43.709 0 0 1 44.526 43.709 44.526 43.709 0 0 1-44.526 43.709 44.526 43.709 0 0 1-44.526-43.709 44.526 43.709 0 0 1 44.526-43.709m0 8.7418a11.131 10.927 0 0 0-11.131 10.927 11.131 10.927 0 0 0 11.131 10.927 11.131 10.927 0 0 0 11.131-10.927 11.131 10.927 0 0 0-11.131-10.927m-33.84 24.171c-1.9146 5.7259 1.2908 11.889 7.1241 13.769 5.8774 1.8357 12.156-1.2671 14.026-7.0372 1.9146-5.726-1.2908-11.889-7.1241-13.769-5.833-1.8357-12.155 1.2671-14.026 7.0372m67.724-0.13216c-1.9146-5.6385-8.1927-8.7418-14.025-6.9061-5.8774 1.8359-9.0832 7.9989-7.1686 13.769 1.9146 5.7259 8.1927 8.8729 14.025 6.9934 5.833-1.8357 9.0388-8.0425 7.1686-13.856m-54.767 39.164c4.9424 3.5842 11.977 2.4914 15.539-2.404 3.6067-4.8954 2.4935-11.714-2.4933-15.255-4.9424-3.5404-11.933-2.4476-15.54 2.404-3.6065 4.8956-2.4935 11.714 2.4935 15.255m41.81 0c4.9868-3.5404 6.0999-10.359 2.4933-15.255-3.6066-4.8954-10.597-5.9882-15.539-2.404-4.987 3.5406-6.1 10.359-2.4935 15.255 3.5175 4.8954 10.597 5.9444 15.54 2.404m-20.927-34.793a6.6789 6.5564 0 0 0-6.6788 6.5563 6.6789 6.5564 0 0 0 6.6788 6.5565 6.6789 6.5564 0 0 0 6.6789-6.5565 6.6789 6.5564 0 0 0-6.6789-6.5563z"></path>
+    </g>
+  </symbol>
+
+<!--theme switcher icon-->
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-theme-switcher">
+    <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 448V64c105.9 0 192 86.13 192 192S361.9 448 256 448z"></path>
+  </symbol>
+
+<!--miscellaneous logos-->
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-cancel">
+    <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM64 256c0-41.4 13.3-79.68 35.68-111.1l267.4 267.4C335.7 434.7 297.4 448 256 448C150.1 448 64 361.9 64 256zM412.3 367.1L144.9 99.68C176.3 77.3 214.6 64 256 64c105.9 0 192 86.13 192 192C448 297.4 434.7 335.7 412.3 367.1z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" id="icon-code-document">
+    <path d="M162.1 257.8c-7.812-7.812-20.47-7.812-28.28 0l-48 48c-7.812 7.812-7.812 20.5 0 28.31l48 48C137.8 386.1 142.9 388 148 388s10.23-1.938 14.14-5.844c7.812-7.812 7.812-20.5 0-28.31L128.3 320l33.86-33.84C169.1 278.3 169.1 265.7 162.1 257.8zM365.3 93.38l-74.63-74.64C278.6 6.742 262.3 0 245.4 0H64C28.65 0 0 28.65 0 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6C384 121.7 377.3 105.4 365.3 93.38zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160L224 128c0 17.67 14.33 32 32 32h79.1V448zM221.9 257.8c-7.812 7.812-7.812 20.5 0 28.31L255.7 320l-33.86 33.84c-7.812 7.812-7.812 20.5 0 28.31C225.8 386.1 230.9 388 236 388s10.23-1.938 14.14-5.844l48-48c7.812-7.812 7.812-20.5 0-28.31l-48-48C242.3 250 229.7 250 221.9 257.8z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" id="icon-computer-home">
+    <path d="M218.3 8.486C230.6-2.829 249.4-2.829 261.7 8.486L469.7 200.5C476.4 206.7 480 215.2 480 224H336C316.9 224 299.7 232.4 288 245.7V208C288 199.2 280.8 192 272 192H208C199.2 192 192 199.2 192 208V272C192 280.8 199.2 288 208 288H271.1V416H112C85.49 416 64 394.5 64 368V256H32C18.83 256 6.996 247.9 2.198 235.7C-2.6 223.4 .6145 209.4 10.3 200.5L218.3 8.486zM336 256H560C577.7 256 592 270.3 592 288V448H624C632.8 448 640 455.2 640 464C640 490.5 618.5 512 592 512H303.1C277.5 512 255.1 490.5 255.1 464C255.1 455.2 263.2 448 271.1 448H303.1V288C303.1 270.3 318.3 256 336 256zM352 304V448H544V304H352z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" id="icon-link-slash">
+    <path d="M485.1 354.9l113.5-113.5c55.21-55.21 55.21-144.7 0-199.9C570.1 13.8 534.8 0 498.6 0s-72.36 13.8-99.96 41.41l-43.36 43.36c15.11 8.012 29.47 17.58 41.91 30.02c3.146 3.146 5.898 6.518 8.742 9.838l37.96-37.96C458.5 72.05 477.1 64 498.6 64s40.1 8.047 54.71 22.66c14.61 14.61 22.66 34.04 22.66 54.71s-8.049 40.1-22.66 54.71l-119 119l-30.09-23.59c21.49-51.28 12.12-112.4-29.63-154.1C346.1 109.8 310.8 96 274.6 96c-29.6 0-58.93 9.752-83.83 28.23L38.81 5.109C34.41 1.672 29.19 0 24.03 0c-7.125 0-14.19 3.156-18.91 9.187c-8.188 10.44-6.375 25.53 4.062 33.7l591.1 463.1c10.5 8.203 25.56 6.328 33.69-4.078c8.188-10.44 6.375-25.53-4.062-33.7L485.1 354.9zM350.8 249.6L244.3 166.2C253.8 162.2 264 160 274.6 160c20.67 0 40.1 8.049 54.71 22.66c14.62 14.61 22.66 34.04 22.66 54.71C352 241.5 351.4 245.6 350.8 249.6zM234 387.4l-37.96 37.96C181.5 439.1 162 448 141.4 448c-20.67 0-40.1-8.047-54.71-22.66c-14.61-14.61-22.66-34.04-22.66-54.71s8.049-40.1 22.66-54.71l84.83-84.83L120.7 191.3L41.41 270.7c-55.21 55.21-55.21 144.7 0 199.9C69.01 498.2 105.2 512 141.4 512c36.18 0 72.36-13.8 99.96-41.41l43.36-43.36c-15.11-8.012-29.47-17.58-41.91-30.02C239.6 394.1 236.9 390.7 234 387.4zM265.4 374.6C293 402.2 329.2 416 365.4 416c11.98 0 23.84-2.082 35.51-5.111L224.6 272.7C223.9 309.5 237.3 346.5 265.4 374.6z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" id="icon-eye-slash">
+    <path d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-feather">
+    <path d="M483.4 244.2L351.9 287.1h97.74c-9.874 10.62 3.75-3.125-46.24 46.87l-147.6 49.12h98.24c-74.99 73.12-194.6 70.62-246.8 54.1l-66.14 65.99c-9.374 9.374-24.6 9.374-33.98 0s-9.374-24.6 0-33.98l259.5-259.2c6.249-6.25 6.249-16.37 0-22.62c-6.249-6.249-16.37-6.249-22.62 0l-178.4 178.2C58.78 306.1 68.61 216.7 129.1 156.3l85.74-85.68c90.62-90.62 189.8-88.27 252.3-25.78C517.8 95.34 528.9 169.7 483.4 244.2z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-fast-forward">
+    <path d="M52.51 440.6l171.5-142.9V214.3L52.51 71.41C31.88 54.28 0 68.66 0 96.03v319.9C0 443.3 31.88 457.7 52.51 440.6zM308.5 440.6l192-159.1c15.25-12.87 15.25-36.37 0-49.24l-192-159.1c-20.63-17.12-52.51-2.749-52.51 24.62v319.9C256 443.3 287.9 457.7 308.5 440.6z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-graph-rising">
+    <path d="M472 432h-48a24 24 0 01-24-24V104a24 24 0 0124-24h48a24 24 0 0124 24v304a24 24 0 01-24 24zM344 432h-48a24 24 0 01-24-24V184a24 24 0 0124-24h48a24 24 0 0124 24v224a24 24 0 01-24 24zM216 432h-48a24 24 0 01-24-24V248a24 24 0 0124-24h48a24 24 0 0124 24v160a24 24 0 01-24 24zM88 432H40a24 24 0 01-24-24v-96a24 24 0 0124-24h48a24 24 0 0124 24v96a24 24 0 01-24 24z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" id="icon-rating">
+    <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-rewind">
+    <path d="M459.5 71.41l-171.5 142.9v83.45l171.5 142.9C480.1 457.7 512 443.3 512 415.1V96.03C512 68.66 480.1 54.28 459.5 71.41zM203.5 71.41L11.44 231.4c-15.25 12.87-15.25 36.37 0 49.24l192 159.1c20.63 17.12 52.51 2.749 52.51-24.62v-319.9C255.1 68.66 224.1 54.28 203.5 71.41z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-like-dislike">
+    <path d="M22.5,10H15.75C15.13,10 14.6,10.38 14.37,10.91L12.11,16.2C12.04,16.37 12,16.56 12,16.75V18A1,1 0 0,0 13,19H18.18L17.5,22.18V22.42C17.5,22.73 17.63,23 17.83,23.22L18.62,24L23.56,19.06C23.83,18.79 24,18.41 24,18V11.5A1.5,1.5 0 0,0 22.5,10M12,6A1,1 0 0,0 11,5H5.82L6.5,1.82V1.59C6.5,1.28 6.37,1 6.17,0.79L5.38,0L0.44,4.94C0.17,5.21 0,5.59 0,6V12.5A1.5,1.5 0 0,0 1.5,14H8.25C8.87,14 9.4,13.62 9.63,13.09L11.89,7.8C11.96,7.63 12,7.44 12,7.25V6Z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" id="icon-person-slash">
+    <path d="M95.1 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7c5.625 0 10.73-1.65 15.42-4.029L264.9 304.3C171.3 306.7 95.1 383.1 95.1 477.3zM630.8 469.1l-277.1-217.9c54.69-14.56 95.18-63.95 95.18-123.2C447.1 57.31 390.7 0 319.1 0C250.2 0 193.7 55.93 192.3 125.4l-153.4-120.3C34.41 1.672 29.19 0 24.03 0C16.91 0 9.845 3.156 5.127 9.187c-8.187 10.44-6.375 25.53 4.062 33.7L601.2 506.9c10.5 8.203 25.56 6.328 33.69-4.078C643.1 492.4 641.2 477.3 630.8 469.1z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" id="icon-image-slash">
+    <path d="M21 17.2L6.8 3H19C20.1 3 21 3.9 21 5V17.2M20.7 22L19.7 21H5C3.9 21 3 20.1 3 19V4.3L2 3.3L3.3 2L22 20.7L20.7 22M16.8 18L12.9 14.1L11 16.5L8.5 13.5L5 18H16.8Z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" id="icon-palette">
+    <path d="M2.53,19.65L3.87,20.21V11.18L1.44,17.04C1.03,18.06 1.5,19.23 2.53,19.65M22.03,15.95L17.07,4C16.76,3.23 16.03,2.77 15.26,2.75C15,2.75 14.73,2.79 14.47,2.9L7.1,5.95C6.35,6.26 5.89,7 5.87,7.75C5.86,8 5.91,8.29 6,8.55L11,20.5C11.29,21.28 12.03,21.74 12.81,21.75C13.07,21.75 13.33,21.7 13.58,21.6L20.94,18.55C21.96,18.13 22.45,16.96 22.03,15.95M7.88,8.75A1,1 0 0,1 6.88,7.75A1,1 0 0,1 7.88,6.75C8.43,6.75 8.88,7.2 8.88,7.75C8.88,8.3 8.43,8.75 7.88,8.75M5.88,19.75A2,2 0 0,0 7.88,21.75H9.33L5.88,13.41V19.75Z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" id="icon-responsive">
+    <path d="M4,6V16H9V12A2,2 0 0,1 11,10H16A2,2 0 0,1 18,12V16H20V6H4M0,20V18H4A2,2 0 0,1 2,16V6A2,2 0 0,1 4,4H20A2,2 0 0,1 22,6V16A2,2 0 0,1 20,18H24V20H18V20C18,21.11 17.1,22 16,22H11A2,2 0 0,1 9,20H9L0,20M11.5,20A0.5,0.5 0 0,0 11,20.5A0.5,0.5 0 0,0 11.5,21A0.5,0.5 0 0,0 12,20.5A0.5,0.5 0 0,0 11.5,20M15.5,20A0.5,0.5 0 0,0 15,20.5A0.5,0.5 0 0,0 15.5,21A0.5,0.5 0 0,0 16,20.5A0.5,0.5 0 0,0 15.5,20M13,20V21H14V20H13M11,12V19H16V12H11Z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" id="icon-legal">
+    <path d="M12,3C10.73,3 9.6,3.8 9.18,5H3V7H4.95L2,14C1.53,16 3,17 5.5,17C8,17 9.56,16 9,14L6.05,7H9.17C9.5,7.85 10.15,8.5 11,8.83V20H2V22H22V20H13V8.82C13.85,8.5 14.5,7.85 14.82,7H17.95L15,14C14.53,16 16,17 18.5,17C21,17 22.56,16 22,14L19.05,7H21V5H14.83C14.4,3.8 13.27,3 12,3M12,5A1,1 0 0,1 13,6A1,1 0 0,1 12,7A1,1 0 0,1 11,6A1,1 0 0,1 12,5M5.5,10.25L7,14H4L5.5,10.25M18.5,10.25L20,14H17L18.5,10.25Z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" id="icon-code-block">
+    <path d="M5,3H7V5H5V10A2,2 0 0,1 3,12A2,2 0 0,1 5,14V19H7V21H5C3.93,20.73 3,20.1 3,19V15A2,2 0 0,0 1,13H0V11H1A2,2 0 0,0 3,9V5A2,2 0 0,1 5,3M19,3A2,2 0 0,1 21,5V9A2,2 0 0,0 23,11H24V13H23A2,2 0 0,0 21,15V19A2,2 0 0,1 19,21H17V19H19V14A2,2 0 0,1 21,12A2,2 0 0,1 19,10V5H17V3H19M12,15A1,1 0 0,1 13,16A1,1 0 0,1 12,17A1,1 0 0,1 11,16A1,1 0 0,1 12,15M8,15A1,1 0 0,1 9,16A1,1 0 0,1 8,17A1,1 0 0,1 7,16A1,1 0 0,1 8,15M16,15A1,1 0 0,1 17,16A1,1 0 0,1 16,17A1,1 0 0,1 15,16A1,1 0 0,1 16,15Z"></path>
+  </symbol>
+  <symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" id="icon-ads-slash">
+    <path d="M12.2 9L10.2 7H13C14.1 7 15 7.9 15 9V11.8L13 9.8V9H12.2M23 9V7H19C17.9 7 17 7.9 17 9V11C17 12.1 17.9 13 19 13H21V15H18.2L20.2 17H21C22.1 17 23 16.1 23 15V13C23 11.9 22.1 11 21 11H19V9H23M22.1 21.5L20.8 22.8L14.4 16.4C14.1 16.7 13.6 17 13 17H9V10.9L7 8.9V17H5V13H3V17H1V9C1 7.9 1.9 7 3 7H5.1L1.1 3L2.4 1.7L22.1 21.5M5 9H3V11H5V9M13 14.9L11 12.9V15H13V14.9Z"></path>
+  </symbol>
+</svg>
--- a/public/js/index.js
+++ b/public/js/index.js
@ -0,0 +1,35 @@
+const rootEl = document.documentElement;
+const input = document.querySelector('.theme-switcher__input');
+
+// adding this property insures that the media query for dark mode in css won't be executed. We'll use media query from js instead. Toggle without this line would also work just fine. But then light would actually mean dark and vice-versa.
+rootEl.setAttribute('js', 'enabled');
+
+// function for adding or removing the theme(and checked state for checkbox) accordingly
+const toggleTheme = theme => {
+  if (theme === 'dark') {
+    rootEl.setAttribute('theme', 'dark');
+    input.setAttribute('checked', '');
+  } else if (theme === 'light') {
+    rootEl.removeAttribute('theme');
+    input.removeAttribute('checked');
+  }
+};
+
+// storing user and browser preferences
+const userPrefersTheme = typeof Storage ? localStorage.getItem('theme') : null;
+const browserPrefersDarkTheme = window.matchMedia(
+  '(prefers-color-scheme: dark)'
+).matches;
+
+// setting theme taking into account calculated preferences
+if (userPrefersTheme) toggleTheme(userPrefersTheme);
+else if (browserPrefersDarkTheme) toggleTheme('dark');
+
+// setting theme when user toggles the theme-switcher input(and storing the preference in localStorage)
+input.addEventListener('change', e => {
+  let theme = e.target.checked ? 'dark' : 'light';
+  toggleTheme(theme);
+  localStorage.setItem('theme', theme);
+});
+
+// localStorage.removeItem("theme");
--- a/public/mstile-150x150.png
+++ b/public/mstile-150x150.png
--- a/public/robots.txt
+++ b/public/robots.txt
@ -1,3 +1,3 @@
-User-agent: *
-Allow: /about
-Disallow: /
+user-agent: *
+disallow: /img/
+disallow: /contact
--- a/public/safari-pinned-tab.svg
+++ b/public/safari-pinned-tab.svg
@ -0,0 +1,61 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="576.000000pt" height="576.000000pt" viewBox="0 0 576.000000 576.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,576.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2600 5594 c-14 -3 -70 -11 -125 -20 -96 -15 -228 -49 -290 -75 -16
+-7 -36 -13 -42 -15 -25 -5 -204 -95 -270 -135 -176 -108 -350 -269 -481 -444
+-138 -184 -256 -466 -288 -685 -15 -109 -19 -164 -18 -300 1 -139 7 -189 39
+-355 3 -16 22 -77 41 -135 151 -452 499 -823 944 -1007 93 -39 232 -84 238
+-78 3 2 12 0 21 -4 9 -5 32 -12 51 -15 65 -11 95 -16 130 -22 55 -11 317 -12
+395 -3 115 14 143 19 223 40 42 11 84 22 92 24 69 16 330 129 338 148 2 4 8 7
+14 7 15 0 109 63 204 136 234 181 421 436 528 720 14 39 28 80 31 92 2 11 9
+30 15 41 6 12 9 21 6 21 -3 0 0 15 5 33 5 17 12 46 15 62 2 17 7 37 9 45 17
+65 25 344 12 460 -11 101 -25 172 -43 227 -7 23 -15 52 -18 65 -2 13 -15 52
+-29 88 -110 289 -279 522 -519 718 -42 34 -81 62 -87 62 -6 0 -11 4 -11 9 0 5
+-9 13 -20 16 -11 3 -26 13 -34 20 -28 28 -266 145 -326 160 -3 1 -18 7 -35 14
+-16 7 -73 23 -125 36 -87 22 -121 29 -205 41 -41 7 -354 13 -385 8z m255 -336
+c28 -6 77 -24 109 -41 184 -97 268 -320 192 -509 -111 -275 -463 -352 -681
+-150 -42 39 -95 113 -100 141 -2 9 -4 17 -4 19 -1 1 -1 5 -2 10 0 4 -5 12 -10
+18 -14 17 -18 125 -7 184 5 30 23 79 39 111 29 59 121 159 145 159 8 0 14 3
+14 8 0 8 74 40 109 47 13 2 26 6 28 8 8 9 120 6 168 -5z m-932 -622 c2 3 24 0
+48 -6 24 -6 52 -13 62 -15 49 -11 155 -94 202 -157 34 -46 67 -149 70 -223 4
+-78 -40 -213 -84 -256 -9 -10 -29 -31 -45 -48 -98 -108 -298 -147 -446 -87
+-105 43 -173 104 -220 201 -125 253 32 549 312 590 24 4 45 8 47 10 1 2 13 0
+26 -5 13 -5 25 -7 28 -4z m1769 -1 c211 -16 381 -206 372 -415 -2 -30 -5 -65
+-8 -77 -3 -13 -8 -31 -10 -41 -15 -68 -116 -191 -189 -231 -119 -66 -268 -72
+-391 -16 -93 42 -161 110 -203 201 -39 87 -47 160 -28 258 34 164 171 293 340
+320 21 4 41 9 43 11 3 2 8 2 13 -1 4 -2 32 -6 61 -9z m-834 -458 c7 -2 18 -9
+24 -15 7 -7 17 -12 24 -12 7 0 28 -19 48 -41 128 -150 41 -383 -152 -406 -26
+-3 -49 -6 -52 -6 -13 -2 -78 17 -103 30 -174 88 -176 346 -4 435 66 34 115 38
+215 15z m-548 -562 c90 -14 231 -113 270 -191 8 -16 21 -37 29 -46 8 -10 11
+-18 7 -18 -4 0 -2 -8 3 -18 9 -17 24 -101 24 -127 -3 -84 -37 -194 -72 -237
+-120 -144 -256 -200 -421 -174 -118 19 -241 107 -297 213 -37 68 -44 95 -48
+180 -6 116 34 220 117 302 50 50 151 107 200 113 15 2 29 6 32 9 6 6 104 2
+156 -6z m1095 1 c16 -3 59 -20 94 -37 146 -72 234 -219 226 -378 -4 -92 -4
+-92 -37 -163 -145 -313 -608 -318 -754 -8 -39 81 -42 96 -42 181 0 71 4 96 29
+154 27 65 77 130 137 177 84 67 225 97 347 74z"/>
+<path d="M5282 2084 c-74 -15 -167 -64 -228 -119 -6 -5 -22 -18 -35 -28 -85
+-62 -248 -181 -266 -195 -12 -9 -32 -25 -45 -34 -13 -9 -95 -70 -183 -134 -88
+-65 -162 -120 -165 -123 -3 -4 -23 -18 -45 -33 -22 -14 -51 -35 -65 -47 -14
+-11 -93 -69 -175 -130 l-151 -110 -625 2 -626 2 -36 28 c-45 34 -67 74 -67
+122 0 60 45 123 100 140 14 5 219 9 455 10 237 2 439 5 450 8 92 24 176 88
+220 168 27 49 30 63 30 144 -1 77 -5 97 -27 140 -34 65 -107 132 -171 158 -51
+20 -70 20 -915 21 -953 1 -978 0 -1158 -60 -120 -40 -302 -135 -360 -189 -6
+-5 -28 -23 -49 -40 -21 -16 -80 -64 -130 -105 -50 -41 -109 -88 -130 -105 -21
+-16 -43 -34 -49 -40 -6 -5 -36 -31 -67 -56 l-57 -45 -283 0 c-198 1 -293 -2
+-318 -11 -46 -16 -89 -65 -97 -112 -10 -49 -9 -1014 0 -1029 4 -7 4 -12 1 -12
+-3 0 4 -18 16 -39 44 -79 -136 -72 1939 -69 1020 2 1864 6 1875 10 11 3 40 11
+65 18 70 19 200 72 200 82 0 5 4 7 9 4 9 -6 103 55 246 161 55 41 111 82 123
+91 13 9 42 31 65 48 37 28 339 250 392 288 11 8 69 51 128 95 59 45 110 81
+113 81 2 0 13 8 23 18 10 9 44 35 75 57 31 22 74 54 95 70 22 17 84 63 138
+102 130 95 175 141 210 211 26 53 28 66 28 177 0 115 -1 123 -32 185 -85 173
+-259 261 -441 224z"/>
+</g>
+</svg>
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@ -3,18 +3,18 @@
  "short_name": "libremdb",
  "icons": [
    {
-      "src": "/icon-192.png",
+      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
-      "src": "/icon-512.png",
+      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
-  "theme_color": "#b80040",
-  "background_color": "#ffe5ef"
+  "theme_color": "#0f2c67",
+  "background_color": "#0f2c67"
 }
--- a/public/svg/sadgnu.svg
+++ b/public/svg/sadgnu.svg
--- a/public/svg/sprite.svg
+++ b/public/svg/sprite.svg
@ -1,46 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-
-<svg version="1.1">
-  <!--main logo-->
-  <symbol  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152.35 143.74" id="icon-logo">
-    <g transform="translate(-32.882 -133.08)">
-      <path d="m181.17 245.31-35.745 26.329c-4.6831 3.4634-10.478 5.3684-16.536 5.3684h-91.81c-2.3148 0-3.9952-1.9172-3.9952-4.2307v-25.397c0-2.3146 1.9182-4.2386 3.9952-4.2386l14.65 6e-3 12.303-9.9854c5.3181-4.2595 12.467-6.945 19.611-6.945h42.095c5.1594 0 9.226 4.5958 8.3661 9.8875-0.69453 4.1672-4.5958 7.0432-8.8292 7.0432h-20.463c-2.3148 0-3.9952 1.918-3.9952 3.9952 0 2.0772 1.9182 3.9952 3.9952 3.9952h31.909l31.671-23.328c4.7096-3.4898 11.327-2.4717 14.798 2.2402 3.6962 5.1803 2.6908 11.795-2.0188 15.261z"></path>
-      <path d="m106 133.08a44.526 43.709 0 0 1 44.526 43.709 44.526 43.709 0 0 1-44.526 43.709 44.526 43.709 0 0 1-44.526-43.709 44.526 43.709 0 0 1 44.526-43.709m0 8.7418a11.131 10.927 0 0 0-11.131 10.927 11.131 10.927 0 0 0 11.131 10.927 11.131 10.927 0 0 0 11.131-10.927 11.131 10.927 0 0 0-11.131-10.927m-33.84 24.171c-1.9146 5.7259 1.2908 11.889 7.1241 13.769 5.8774 1.8357 12.156-1.2671 14.026-7.0372 1.9146-5.726-1.2908-11.889-7.1241-13.769-5.833-1.8357-12.155 1.2671-14.026 7.0372m67.724-0.13216c-1.9146-5.6385-8.1927-8.7418-14.025-6.9061-5.8774 1.8359-9.0832 7.9989-7.1686 13.769 1.9146 5.7259 8.1927 8.8729 14.025 6.9934 5.833-1.8357 9.0388-8.0425 7.1686-13.856m-54.767 39.164c4.9424 3.5842 11.977 2.4914 15.539-2.404 3.6067-4.8954 2.4935-11.714-2.4933-15.255-4.9424-3.5404-11.933-2.4476-15.54 2.404-3.6065 4.8956-2.4935 11.714 2.4935 15.255m41.81 0c4.9868-3.5404 6.0999-10.359 2.4933-15.255-3.6066-4.8954-10.597-5.9882-15.539-2.404-4.987 3.5406-6.1 10.359-2.4935 15.255 3.5175 4.8954 10.597 5.9444 15.54 2.404m-20.927-34.793a6.6789 6.5564 0 0 0-6.6788 6.5563 6.6789 6.5564 0 0 0 6.6788 6.5565 6.6789 6.5564 0 0 0 6.6789-6.5565 6.6789 6.5564 0 0 0-6.6789-6.5563z"></path>
-    </g>
-  </symbol>
-
-<!--theme switcher icon-->
-  <symbol  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-theme-switcher">
-    <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 448V64c105.9 0 192 86.13 192 192S361.9 448 256 448z"></path>
-  </symbol>
-
-<!--miscellaneous logos-->
-  <symbol  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" id="icon-eye-slash">
-    <path d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"></path>
-  </symbol>
-
-  <symbol  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-graph-rising">
-    <path d="M472 432h-48a24 24 0 01-24-24V104a24 24 0 0124-24h48a24 24 0 0124 24v304a24 24 0 01-24 24zM344 432h-48a24 24 0 01-24-24V184a24 24 0 0124-24h48a24 24 0 0124 24v224a24 24 0 01-24 24zM216 432h-48a24 24 0 01-24-24V248a24 24 0 0124-24h48a24 24 0 0124 24v160a24 24 0 01-24 24zM88 432H40a24 24 0 01-24-24v-96a24 24 0 0124-24h48a24 24 0 0124 24v96a24 24 0 01-24 24z"></path>
-  </symbol>
-  <symbol  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" id="icon-rating">
-    <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
-  </symbol>
-  <symbol  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-like-dislike">
-    <path d="M22.5,10H15.75C15.13,10 14.6,10.38 14.37,10.91L12.11,16.2C12.04,16.37 12,16.56 12,16.75V18A1,1 0 0,0 13,19H18.18L17.5,22.18V22.42C17.5,22.73 17.63,23 17.83,23.22L18.62,24L23.56,19.06C23.83,18.79 24,18.41 24,18V11.5A1.5,1.5 0 0,0 22.5,10M12,6A1,1 0 0,0 11,5H5.82L6.5,1.82V1.59C6.5,1.28 6.37,1 6.17,0.79L5.38,0L0.44,4.94C0.17,5.21 0,5.59 0,6V12.5A1.5,1.5 0 0,0 1.5,14H8.25C8.87,14 9.4,13.62 9.63,13.09L11.89,7.8C11.96,7.63 12,7.44 12,7.25V6Z"></path>
-  </symbol>
-  <symbol  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" id="icon-image-slash">
-    <path d="M21 17.2L6.8 3H19C20.1 3 21 3.9 21 5V17.2M20.7 22L19.7 21H5C3.9 21 3 20.1 3 19V4.3L2 3.3L3.3 2L22 20.7L20.7 22M16.8 18L12.9 14.1L11 16.5L8.5 13.5L5 18H16.8Z"></path>
-  </symbol>
-  <symbol  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" id="icon-palette">
-    <path d="M2.53,19.65L3.87,20.21V11.18L1.44,17.04C1.03,18.06 1.5,19.23 2.53,19.65M22.03,15.95L17.07,4C16.76,3.23 16.03,2.77 15.26,2.75C15,2.75 14.73,2.79 14.47,2.9L7.1,5.95C6.35,6.26 5.89,7 5.87,7.75C5.86,8 5.91,8.29 6,8.55L11,20.5C11.29,21.28 12.03,21.74 12.81,21.75C13.07,21.75 13.33,21.7 13.58,21.6L20.94,18.55C21.96,18.13 22.45,16.96 22.03,15.95M7.88,8.75A1,1 0 0,1 6.88,7.75A1,1 0 0,1 7.88,6.75C8.43,6.75 8.88,7.2 8.88,7.75C8.88,8.3 8.43,8.75 7.88,8.75M5.88,19.75A2,2 0 0,0 7.88,21.75H9.33L5.88,13.41V19.75Z"></path>
-  </symbol>
-  <symbol  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" id="icon-responsive">
-    <path d="M4,6V16H9V12A2,2 0 0,1 11,10H16A2,2 0 0,1 18,12V16H20V6H4M0,20V18H4A2,2 0 0,1 2,16V6A2,2 0 0,1 4,4H20A2,2 0 0,1 22,6V16A2,2 0 0,1 20,18H24V20H18V20C18,21.11 17.1,22 16,22H11A2,2 0 0,1 9,20H9L0,20M11.5,20A0.5,0.5 0 0,0 11,20.5A0.5,0.5 0 0,0 11.5,21A0.5,0.5 0 0,0 12,20.5A0.5,0.5 0 0,0 11.5,20M15.5,20A0.5,0.5 0 0,0 15,20.5A0.5,0.5 0 0,0 15.5,21A0.5,0.5 0 0,0 16,20.5A0.5,0.5 0 0,0 15.5,20M13,20V21H14V20H13M11,12V19H16V12H11Z"></path>
-  </symbol>
-  <symbol  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" id="icon-search">
-    <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path>
-  </symbol>
-  <symbol  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" id="icon-external-link">
-    <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"></path>
-  </symbol>
-</svg>
--- a/routes/viewRoutes.js
+++ b/routes/viewRoutes.js
@ -0,0 +1,17 @@
+const express = require('express');
+const viewController = require('../controllers/viewControllers');
+
+const viewRouter = express.Router();
+
+// generic routes
+viewRouter.get('/about', viewController.about);
+viewRouter.get('/privacy', viewController.privacy);
+viewRouter.get('/contact', viewController.contact);
+viewRouter.get('/similar-projects', viewController.similarProjects);
+viewRouter.get('/', viewController.overview);
+
+// routes identical to imdb
+viewRouter.get('/title/:title', viewController.movie);
+// viewRouter.get('/search/title/', viewController.searchGenres);
+
+module.exports = viewRouter;
--- a/server.js
+++ b/server.js
@ -0,0 +1,33 @@
+const dotenv = require('dotenv');
+const app = require('./app');
+
+//---------------------------------------------------------------------------//
+//                          ERROR HANDLING IN NODEJS
+//---------------------------------------------------------------------------//
+// for synchronus errors that are not caught anywhere. Should come before any code
+process.on('uncaughtException', err => {
+  console.log('\x1b[31m%s\x1b[0m', '🔴️ ERROR:', err);
+  process.exit(1);
+});
+
+// for rejected promises that aren't caught anywhere
+process.on('unhandledRejection', err => {
+  console.log('\x1b[31m%s\x1b[0m', '🔴️ ERROR:', err);
+  server.close(() => process.exit(1)); // shutting the system down gracefully
+});
+
+//---------------------------------------------------------------------------//
+//                       LOADING CONFIG FILE VARIABLES
+//---------------------------------------------------------------------------//
+dotenv.config({ path: './config.env' }); // loading .env variables
+
+//---------------------------------------------------------------------------//
+//                              STARTING SERVER
+//---------------------------------------------------------------------------//
+const port = process.env.PORT || 3000;
+const server = app.listen(port, () =>
+  console.log(
+    '\x1b[36m%s\x1b[0m', // for colors lol. Search for ansi escape characters
+    `🎧️ listening at port ${port}. Env: ${process.env.NODE_ENV}`
+  )
+);
--- a/src/components/buttons/ThemeToggler.tsx
+++ b/src/components/buttons/ThemeToggler.tsx
@ -1,34 +0,0 @@
-import { useContext } from 'react';
-import { themeContext } from 'src/context/theme-context';
-import styles from 'src/styles/modules/components/buttons/themeToggler.module.scss';
-
-type Props = {
-  className: string;
-};
-
-const ThemeToggler = (props: Props) => {
-  const { theme, setTheme } = useContext(themeContext);
-  const clickHandler = () => {
-    const themeToSet = theme === 'light' ? 'dark' : 'light';
-    setTheme(themeToSet);
-  };
-
-  return (
-    <button
-      className={`${styles.button}  ${props.className}`}
-      onClick={clickHandler}
-    >
-      <span className='visually-hidden'>Change theme</span>
-      <svg
-        className={`icon ${styles.icon}`}
-        focusable='false'
-        aria-hidden='true'
-        role='img'
-      >
-        <use href='/svg/sprite.svg#icon-theme-switcher'></use>
-      </svg>
-    </button>
-  );
-};
-
-export default ThemeToggler;
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@ -1,29 +0,0 @@
-import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
-import styles from 'src/styles/modules/components/card/card.module.scss';
-
-// ensuring that other attributes to <Card/> are correct based on the value of 'as' prop.
-// a cheap implementation of as prop found in libraries like CharkaUI or MaterialUI.
-type Props<T extends ElementType> = {
-  children: ReactNode;
-  as?: T | 'section';
-  hoverable?: true;
-} & ComponentPropsWithoutRef<T>;
-
-const Card = <T extends ElementType = 'li'>({
-  children,
-  as,
-  hoverable,
-  className,
-  ...rest
-}: Props<T>) => {
-  const Component = as ?? 'li';
-  const classNames = `${hoverable ? styles.hoverable : ''} ${styles.card} ${className}`;
-
-  return (
-    <Component className={classNames} {...rest}>
-      {children}
-    </Component>
-  );
-};
-
-export default Card;
--- a/src/components/card/CardBasic.tsx
+++ b/src/components/card/CardBasic.tsx
@ -1,45 +0,0 @@
-import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
-import Image from 'next/future/image';
-import Card from './Card';
-import { getProxiedIMDbImgUrl, modifyIMDbImg } from 'src/utils/helpers';
-import styles from 'src/styles/modules/components/card/card-basic.module.scss';
-
-type Props = {
-  children: ReactNode;
-  className?: string;
-  image?: string;
-  title: string;
-} & ComponentPropsWithoutRef<'section'>;
-
-const CardBasic = ({ image, children, className, title, ...rest }: Props) => {
-  const style: CSSProperties = {
-    backgroundImage: image && `url(${getProxiedIMDbImgUrl(modifyIMDbImg(image, 300))})`,
-  };
-
-  return (
-    <Card as='section' className={`${styles.container} ${className}`} {...rest}>
-      <div className={styles.imageContainer} style={style}>
-        {image ? (
-          <Image
-            className={styles.image}
-            src={modifyIMDbImg(image)}
-            alt=''
-            priority
-            fill
-            sizes='300px'
-          />
-        ) : (
-          <svg className={styles.imageNA}>
-            <use href='/svg/sprite.svg#icon-image-slash' />
-          </svg>
-        )}
-      </div>
-      <div className={styles.info}>
-        <h1 className={`${styles.title} heading heading__primary`}>{title}</h1>
-        {children}
-      </div>
-    </Card>
-  );
-};
-
-export default CardBasic;
--- a/src/components/card/CardCast.tsx
+++ b/src/components/card/CardCast.tsx
@ -1,51 +0,0 @@
-import Card from './Card';
-import styles from 'src/styles/modules/components/card/card-cast.module.scss';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import Link from 'next/link';
-import Image from 'next/future/image';
-import { modifyIMDbImg } from 'src/utils/helpers';
-
-type Props = {
-  link: string;
-  name: string;
-  characters: string[] | null;
-  attributes: string[] | null;
-  image?: string | null;
-  children?: ReactNode;
-} & ComponentPropsWithoutRef<'li'>;
-
-const CardCast = ({ link, name, image, children, characters, attributes, ...rest }: Props) => {
-  return (
-    <Card hoverable {...rest}>
-      <Link href={link}>
-        <a className={styles.item}>
-          <div className={styles.imgContainer}>
-            {image ? (
-              <Image
-                src={modifyIMDbImg(image, 400)}
-                alt=''
-                fill
-                className={styles.img}
-                sizes='200px'
-              />
-            ) : (
-              <svg className={styles.imgNA}>
-                <use href='/svg/sprite.svg#icon-image-slash' />
-              </svg>
-            )}
-          </div>
-          <div className={styles.textContainer}>
-            <p className={`heading ${styles.name}`}>{name}</p>
-            <p className={styles.role}>
-              {characters?.join(', ')}
-              {attributes && <span> ({attributes.join(', ')})</span>}
-            </p>
-            {children}
-          </div>
-        </a>
-      </Link>
-    </Card>
-  );
-};
-
-export default CardCast;
--- a/src/components/card/CardResult.tsx
+++ b/src/components/card/CardResult.tsx
@ -1,40 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import Link from 'next/link';
-import Image from 'next/future/image';
-import Card from './Card';
-import { modifyIMDbImg } from 'src/utils/helpers';
-import styles from 'src/styles/modules/components/card/card-result.module.scss';
-
-type Props = {
-  link: string;
-  name: string;
-  image?: string;
-  showImage?: true;
-  children?: ReactNode;
-} & ComponentPropsWithoutRef<'li'>;
-
-const CardResult = ({ link, name, image, showImage, children, ...rest }: Props) => {
-  let ImageComponent = null;
-  if (showImage)
-    ImageComponent = image ? (
-      <Image src={modifyIMDbImg(image, 400)} alt='' fill className={styles.img} sizes='200px' />
-    ) : (
-      <svg className={styles.imgNA}>
-        <use href='/svg/sprite.svg#icon-image-slash' />
-      </svg>
-    );
-
-  return (
-    <Card hoverable {...rest} className={`${styles.item} ${!showImage && styles.sansImage}`}>
-      <div className={styles.imgContainer}>{ImageComponent}</div>
-      <div className={styles.info}>
-        <Link href={link}>
-          <a className={`heading ${styles.heading}`}>{name}</a>
-        </Link>
-        {children}
-      </div>
-    </Card>
-  );
-};
-
-export default CardResult;
--- a/src/components/card/CardTitle.tsx
+++ b/src/components/card/CardTitle.tsx
@ -1,63 +0,0 @@
-import Card from './Card';
-import styles from 'src/styles/modules/components/card/card-title.module.scss';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import Link from 'next/link';
-import Image from 'next/future/image';
-import { formatNumber, modifyIMDbImg } from 'src/utils/helpers';
-
-type Props = {
-  link: string;
-  name: string;
-  titleType: string;
-  year?: { start: number; end: number | null };
-  ratings?: { avg: number | null; numVotes: number };
-  image?: string;
-  children?: ReactNode;
-} & ComponentPropsWithoutRef<'li'>;
-
-const CardTitle = ({ link, name, year, image, ratings, titleType, children, ...rest }: Props) => {
-  const years = year?.end ? `${year.start}-${year.end}` : year?.start;
-
-  return (
-    <Card hoverable {...rest}>
-      <Link href={link}>
-        <a className={styles.item}>
-          <div className={styles.imgContainer}>
-            {image ? (
-              <Image
-                src={modifyIMDbImg(image, 400)}
-                alt=''
-                fill
-                className={styles.img}
-                sizes='200px'
-              />
-            ) : (
-              <svg className={styles.imgNA}>
-                <use href='/svg/sprite.svg#icon-image-slash' />
-              </svg>
-            )}
-          </div>
-          <div className={styles.textContainer}>
-            <p className={`heading ${styles.name}`}>{name}</p>
-            <p>
-              <span>{titleType}</span>
-              <span>{years && ` (${years})`}</span>
-            </p>
-            {ratings?.avg && (
-              <p className={styles.rating}>
-                <span className={styles.ratingNum}>{ratings.avg}</span>
-                <svg className={styles.ratingIcon}>
-                  <use href='/svg/sprite.svg#icon-rating'></use>
-                </svg>
-                <span> ({formatNumber(ratings.numVotes)} votes)</span>
-              </p>
-            )}
-            <div className={styles.children}>{children}</div>
-          </div>
-        </a>
-      </Link>
-    </Card>
-  );
-};
-
-export default CardTitle;
--- a/src/components/card/index.tsx
+++ b/src/components/card/index.tsx
@ -1,5 +0,0 @@
-export { default as Card } from './Card';
-export { default as CardTitle } from './CardTitle';
-export { default as CardBasic } from './CardBasic';
-export { default as CardCast } from './CardCast';
-export { default as CardResult } from './CardResult';
--- a/src/components/error/ErrorBoundary.tsx
+++ b/src/components/error/ErrorBoundary.tsx
@ -1,45 +0,0 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-import ErrorInfoComponent from './ErrorInfo';
-
-type Props = {
-  children: ReactNode;
-};
-type State = {
-  hasError: boolean;
-};
-
-class ErrorBoundary extends Component<Props, State> {
-  state: State = {
-    hasError: false,
-  };
-
-  static getDerivedStateFromError(error: Error): State {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('Uncaught error:', error, errorInfo);
-  }
-
-  resetError() {
-    this.setState({ hasError: false });
-  }
-
-  render() {
-    if (this.state.hasError)
-      return (
-        <ErrorInfoComponent
-          message='Something weird happened on your browser.'
-          misc={{
-            subtext: 'Check console for more information.',
-            buttonClickHandler: this.resetError.bind(this),
-            buttonText: 'Reload Page',
-          }}
-        />
-      );
-
-    return this.props.children;
-  }
-}
-
-export default ErrorBoundary;
--- a/src/components/error/ErrorInfo.tsx
+++ b/src/components/error/ErrorInfo.tsx
@ -1,71 +0,0 @@
-import Link from 'next/link';
-import Layout from 'src/components/layout';
-import Meta from 'src/components/meta/Meta';
-import styles from 'src/styles/modules/components/error/error-info.module.scss';
-
-// for details regarding the svg, go to sadgnu.svg file
-// description copied verbatim from https://www.gnu.org/graphics/sventsitsky-sadgnu.html
-// 404 idea from ninamori.org 404 page.
-
-type Props = {
-  message: string;
-  statusCode?: number;
-  originalPath?: string;
-  /** props specific to error boundary. */
-  misc?: {
-    subtext: string;
-    buttonText: string;
-    buttonClickHandler: () => void;
-  };
-};
-
-const ErrorInfo = ({ message, statusCode, misc, originalPath }: Props) => {
-  const title = statusCode ? `${message} (${statusCode})` : message;
-  return (
-    <>
-      <Meta title={title} description='you encountered an error page!' />
-      <Layout className={styles.error} originalPath={originalPath}>
-        <svg
-          className={styles.gnu}
-          focusable='false'
-          role='img'
-          aria-labelledby='gnu-title gnu-desc'
-        >
-          <title id='gnu-title'>GNU and Tux</title>
-          <desc id='gnu-desc'>
-            A pencil drawing of a big gnu and a small penguin, both very sad. GNU is despondently
-            sitting on a bench, and Tux stands beside him, looking down and patting him on the back.
-          </desc>
-          <use href='/svg/sadgnu.svg#sad-gnu'></use>
-        </svg>
-        <h1 className={`heading heading__primary ${styles.heading}`}>{title}</h1>
-        {misc ? (
-          <>
-            <p>{misc.subtext}</p>
-            <button className={styles.button} onClick={misc.buttonClickHandler}>
-              {misc.buttonText}
-            </button>
-          </>
-        ) : (
-          <p>
-            Go back to{' '}
-            <Link href='/'>
-              <a className='link'>the homepage</a>
-            </Link>
-            , or view this route{' '}
-            <a
-              className='link'
-              href={`https://www.imdb.com${originalPath ?? ''}`}
-              target='_blank'
-              rel='noreferrer'
-            >
-              on IMDb
-            </a>
-            .
-          </p>
-        )}
-      </Layout>
-    </>
-  );
-};
-export default ErrorInfo;
--- a/src/components/find/Company.tsx
+++ b/src/components/find/Company.tsx
@ -1,13 +0,0 @@
-import { CardResult } from 'src/components/card';
-import { Companies } from 'src/interfaces/shared/search';
-
-type Props = { company: Companies[number] };
-
-const Company = ({ company }: Props) => (
-  <CardResult name={company.name} link={`/search/title?companies=${company.id}`}>
-    {company.country && <p>{company.country}</p>}
-    {!!company.type && <p>{company.type}</p>}
-  </CardResult>
-);
-
-export default Company;
--- a/src/components/find/Keyword.tsx
+++ b/src/components/find/Keyword.tsx
@ -1,12 +0,0 @@
-import { CardResult } from 'src/components/card';
-import { Keywords } from 'src/interfaces/shared/search';
-
-type Props = { keyword: Keywords[number] };
-
-const Keyword = ({ keyword }: Props) => (
-  <CardResult link={`/search/keyword?keywords=${keyword.text}`} name={keyword.text}>
-    {keyword.numTitles && <p>{keyword.numTitles} titles</p>}
-  </CardResult>
-);
-
-export default Keyword;
--- a/src/components/find/Person.tsx
+++ b/src/components/find/Person.tsx
@ -1,20 +0,0 @@
-import { CardResult } from 'src/components/card';
-import { People } from 'src/interfaces/shared/search';
-import styles from 'src/styles/modules/components/find/person.module.scss';
-
-type Props = { person: People[number] };
-
-const Person = ({ person }: Props) => {
-  return (
-    <CardResult showImage name={person.name} link={`/name/${person.id}`} image={person.image?.url}>
-      <p>{person.aka}</p>
-      <p>{person.jobCateogry}</p>
-      <ul className={styles.basicInfo} aria-label='quick facts'>
-        {person.knownForTitle && <li>{person.knownForTitle}</li>}
-        {person.knownInYear && <li>{person.knownInYear}</li>}
-      </ul>
-    </CardResult>
-  );
-};
-
-export default Person;
--- a/src/components/find/Title.tsx
+++ b/src/components/find/Title.tsx
@ -1,37 +0,0 @@
-import Link from 'next/link';
-import { CardResult } from 'src/components/card';
-import { Titles } from 'src/interfaces/shared/search';
-import styles from 'src/styles/modules/components/find/title.module.scss';
-
-type Props = { title: Titles[number] };
-
-const Title = ({ title }: Props) => {
-  return (
-    <CardResult showImage name={title.name} link={`/title/${title.id}`} image={title.image?.url}>
-      <ul aria-label='quick facts' className={styles.basicInfo}>
-        <li>{title.type}</li>
-        <li>{title.sAndE}</li>
-        <li>{title.releaseYear}</li>
-      </ul>
-      {!!title.credits.length && (
-        <p className={styles.stars}>
-          <span>Stars: </span>
-          {title.credits.join(', ')}
-        </p>
-      )}
-      {title.seriesId && (
-        <ul aria-label='quick series facts' className={styles.seriesInfo}>
-          {title.seriesType && <li>{title.seriesType}</li>}
-          <li>
-            <Link href={`/title/${title.seriesId}`}>
-              <a className='link'>{title.seriesName}</a>
-            </Link>
-          </li>
-          {title.seriesReleaseYear && <li>{title.seriesReleaseYear}</li>}
-        </ul>
-      )}
-    </CardResult>
-  );
-};
-
-export default Title;
--- a/src/components/find/index.tsx
+++ b/src/components/find/index.tsx
@ -1,92 +0,0 @@
-import Company from './Company';
-import Person from './Person';
-import Title from './Title';
-import Keyword from './Keyword';
-import Find from 'src/interfaces/shared/search';
-import { getResTitleTypeHeading } from 'src/utils/helpers';
-import styles from 'src/styles/modules/components/find/results.module.scss';
-
-type Props = {
-  results: Find | null;
-  className?: string;
-  title: string;
-};
-
-const resultsExist = (
-  results: Props['results']
-): results is NonNullable<Props['results']> =>
-  Boolean(
-    results &&
-      (results.people.length ||
-        results.keywords.length ||
-        results.companies.length ||
-        results.titles.length)
-  );
-
-// MAIN COMPONENT
-const Results = ({ results, className, title }: Props) => {
-  if (!resultsExist(results))
-    return (
-      <h1 className={`heading heading__primary ${className}`}>
-        No results found
-      </h1>
-    );
-
-  const { titles, people, keywords, companies, meta } = results;
-  const titlesSectionHeading = getResTitleTypeHeading(
-    meta.type,
-    meta.titleType
-  );
-
-  return (
-    <article className={`${className} ${styles.results}`}>
-      <h1 className='heading heading__primary'>Results for '{title}'</h1>
-      <div className={styles.results__list}>
-        {!!titles.length && (
-          <section className={styles.titles}>
-            <h2 className='heading heading__secondary'>
-              {titlesSectionHeading}
-            </h2>
-            <ul className={styles.titles__list}>
-              {titles.map(title => (
-                <Title title={title} key={title.id} />
-              ))}
-            </ul>
-          </section>
-        )}
-        {!!people.length && (
-          <section className={styles.people}>
-            <h2 className='heading heading__secondary'>People</h2>
-            <ul className={styles.people__list}>
-              {people.map(person => (
-                <Person person={person} key={person.id} />
-              ))}
-            </ul>
-          </section>
-        )}
-        {!!companies.length && (
-          <section className={styles.people}>
-            <h2 className='heading heading__secondary'>Companies</h2>
-            <ul className={styles.people__list}>
-              {companies.map(company => (
-                <Company company={company} key={company.id} />
-              ))}
-            </ul>
-          </section>
-        )}
-        {!!keywords.length && (
-          <section className={styles.people}>
-            <h2 className='heading heading__secondary'>Keywords</h2>
-            <ul className={styles.people__list}>
-              {keywords.map(keyword => (
-                <Keyword keyword={keyword} key={keyword.id} />
-              ))}
-            </ul>
-          </section>
-        )}
-      </div>
-    </article>
-  );
-};
-
-export default Results;
--- a/src/components/forms/find/index.tsx
+++ b/src/components/forms/find/index.tsx
@ -1,121 +0,0 @@
-import { ChangeEventHandler, FormEventHandler, useRef, useState } from 'react';
-import { useRouter } from 'next/router';
-import { cleanQueryStr } from 'src/utils/helpers';
-import { QueryTypes } from 'src/interfaces/shared/search';
-import { resultTypes, resultTitleTypes } from 'src/utils/constants/find';
-import styles from 'src/styles/modules/components/form/find.module.scss';
-
-type Props = {
-  className?: string;
-};
-
-const Form = ({ className }: Props) => {
-  const router = useRouter();
-  const formRef = useRef<HTMLFormElement>(null);
-  const [isDisabled, setIsDisabled] = useState(false);
-
-  // title types can't be selected unless type selected is 'title'
-  const typesChangeHandler: ChangeEventHandler<HTMLFieldSetElement> = e => {
-    const el = e.target as unknown as HTMLInputElement; // we have only radios that'll fire change event.
-    const value = el.value as QueryTypes;
-
-    if (value === 'tt') setIsDisabled(false);
-    else setIsDisabled(true);
-  };
-
-  // preventing page refresh and instead handling submission through js
-  const submitHandler: FormEventHandler<HTMLFormElement> = e => {
-    e.preventDefault();
-
-    const formEl = formRef.current!;
-    const formData = new FormData(formEl);
-    const query = (formData.get('q') as string).trim();
-
-    const entries = [...formData.entries()] as [string, string][];
-    const queryStr = cleanQueryStr(entries);
-
-    if (query) router.push(`/find?${queryStr}`);
-    else setIsDisabled(false);
-    formEl.reset();
-  };
-
-  return (
-    <form
-      action='/find'
-      onSubmit={submitHandler}
-      ref={formRef}
-      className={`${className} ${styles.form}`}
-    >
-      <p className='heading heading__primary'>Search</p>
-
-      <p className={styles.searchbar}>
-        <svg
-          className={`icon ${styles.searchbar__icon}`}
-          focusable='false'
-          aria-hidden='true'
-          role='img'
-        >
-          <use href='/svg/sprite.svg#icon-search'></use>
-        </svg>
-        <input
-          id='searchbar'
-          type='search'
-          name='q'
-          placeholder='movies, people...'
-          className={styles.searchbar__input}
-          required
-          minLength={2}
-        />
-        <label className='visually-hidden' htmlFor='searchbar'>
-          Search for anything
-        </label>
-      </p>
-      <fieldset className={styles.types} onChange={typesChangeHandler}>
-        <legend className={`heading ${styles.types__heading}`}>Filter by Type</legend>
-        <RadioBtns data={resultTypes} className={styles.type} />
-      </fieldset>
-      <fieldset className={styles.titleTypes} disabled={isDisabled}>
-        <legend className={`heading ${styles.titleTypes__heading}`}>Filter by Title Type</legend>
-        <RadioBtns data={resultTitleTypes} className={styles.titleType} />
-      </fieldset>
-      <p className={styles.exact}>
-        <label htmlFor='exact'>Exact Matches</label>
-        <input type='checkbox' name='exact' id='exact' value='true' />
-      </p>
-      <div className={styles.buttons}>
-        <button type='reset' className={styles.button}>
-          Clear
-        </button>
-        <button type='submit' className={styles.button}>
-          Submit
-        </button>
-      </div>
-    </form>
-  );
-};
-
-const RadioBtns = ({
-  data,
-  className,
-}: {
-  data: typeof resultTypes | typeof resultTitleTypes;
-  className: string;
-}) => (
-  <>
-    {data.types.map(({ name, val }) => (
-      <p className={className} key={val}>
-        <input
-          type='radio'
-          name={data.key}
-          id={`${data.key}:${val}`}
-          value={val}
-          className='visually-hidden'
-        />
-        <label htmlFor={`${data.key}:${val}`}>{name}</label>
-      </p>
-    ))}
-  </>
-);
-
-
-export default Form;
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@ -1,52 +0,0 @@
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import styles from 'src/styles/modules/layout/footer.module.scss';
-
-const links = [
-  { path: '/about', text: 'About' },
-  { path: '/find', text: 'Find' },
-  { path: '/privacy', text: 'Privacy' },
-  { path: '/contact', text: 'Contact' },
-] as const;
-
-const Footer = () => {
-  const { pathname } = useRouter();
-
-  return (
-    <footer id='footer' className={styles.footer}>
-      <nav aria-label='primary navigation' className={styles.nav}>
-        <ul className={styles.list}>
-          {links.map(link => (
-            <li className={styles.nav__item} key={link.path}>
-              <Link href={link.path}>
-                <a
-                  className={styles.nav__link}
-                  aria-current={pathname === link.path ? 'page' : undefined}
-                >
-                  {link.text}
-                </a>
-              </Link>
-            </li>
-          ))}
-          <li className={styles.nav__item}>
-            <a href='#' className={styles.nav__link}>
-              Back to top
-            </a>
-          </li>
-        </ul>
-      </nav>
-      <p className={styles.licence}>
-        Licensed under{' '}
-        <a
-          className={styles.nav__link}
-          href='https://www.gnu.org/licenses/agpl-3.0-standalone.html'
-        >
-          GNU AGPLv3
-        </a>
-        .
-      </p>
-    </footer>
-  );
-};
-
-export default Footer;
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@ -1,84 +0,0 @@
-import Link from 'next/link';
-import ThemeToggler from 'src/components/buttons/ThemeToggler';
-import styles from 'src/styles/modules/layout/header.module.scss';
-
-type Props = { full?: boolean; originalPath?: string };
-
-const Header = ({ full, originalPath }: Props) => {
-  return (
-    <header id='header' className={`${styles.header} ${full ? styles.header__about : ''}`}>
-      <div className={styles.topbar}>
-        <Link href='/find'>
-          <a aria-label='go to homepage' className={styles.logo}>
-            <svg className={styles.logo__icon} role='img' aria-hidden>
-              <use href='/svg/sprite.svg#icon-logo'></use>
-            </svg>
-            <span className={styles.logo__text}>libremdb</span>
-          </a>
-        </Link>
-        {full && (
-          <nav className={styles.nav}>
-            <ul className={styles.nav__list}>
-              <li className={styles.nav__item}>
-                <a href='#features' className='link'>
-                  Features
-                </a>
-              </li>
-              <li className={styles.nav__item}>
-                <a href='#faq' className='link'>
-                  FAQs
-                </a>
-              </li>
-              <li className={styles.nav__item}>
-                <a href='https://github.com/zyachel/libremdb' className='link'>
-                  Source
-                </a>
-              </li>
-            </ul>
-          </nav>
-        )}
-        <div className={styles.misc}>
-          <a href={`https://www.imdb.com${originalPath ?? ''}`} target='_blank' rel='noreferrer'>
-            <span className='visually-hidden'>View on IMDb (opens in new tab)</span>
-            <svg className='icon' role='img' aria-hidden>
-              <use href='/svg/sprite.svg#icon-external-link'></use>
-            </svg>
-          </a>
-          <Link href='/find'>
-            <a>
-              <span className='visually-hidden'>Search</span>
-              <svg className='icon' role='img' aria-hidden>
-                <use href='/svg/sprite.svg#icon-search'></use>
-              </svg>
-            </a>
-          </Link>
-          <ThemeToggler className={styles.themeToggler} />
-        </div>
-      </div>
-      {full && (
-        <div className={styles.hero}>
-          <h1 className={`heading heading__primary ${styles.hero__text}`}>
-            A free & open source IMDb front-end
-          </h1>
-          <p className={styles.hero__more}>
-            inspired by projects like{' '}
-            <a href='https://codeberg.org/teddit/teddit' className='link'>
-              teddit
-            </a>
-            ,{' '}
-            <a href='https://github.com/zedeus/nitter' className='link'>
-              nitter
-            </a>
-            , and{' '}
-            <a href='https://github.com/digitalblossom/alternative-frontends' className='link'>
-              many others
-            </a>
-            .
-          </p>
-        </div>
-      )}
-    </header>
-  );
-};
-
-export default Header;
--- a/src/components/layout/index.tsx
+++ b/src/components/layout/index.tsx
@ -1,24 +0,0 @@
-import { ReactNode } from 'react';
-import Footer from './Footer';
-import Header from './Header';
-
-type Props = {
-  full?: true;
-  children: ReactNode;
-  className: string;
-  originalPath?: string;
-};
-
-const Layout = ({ full, children, className, originalPath }: Props) => {
-  return (
-    <>
-      <Header full={full} originalPath={originalPath} />
-      <main id='main' className={`main ${className}`}>
-        {children}
-      </main>
-      <Footer />
-    </>
-  );
-};
-
-export default Layout;
--- a/src/components/list/Data.tsx
+++ b/src/components/list/Data.tsx
@ -1,23 +0,0 @@
-import type { DataKind, Data as TData } from 'src/interfaces/shared/list';
-import type { ToArray } from 'src/interfaces/shared';
-import Images from './Images';
-import Names from './Names';
-import Titles from './Titles';
-
-type Props = {
-  data: ToArray<TData<DataKind>>;
-};
-
-const Data = ({ data }: Props) => {
-  if (isDataImages(data)) return <Images images={data} />;
-  if (isDataNames(data)) return <Names names={data} />;
-
-  return <Titles titles={data} />;
-};
-export default Data;
-
-const isDataImages = (data: unknown): data is TData<'images'>[] =>
-  Array.isArray(data) && typeof data[0] === 'string';
-
-const isDataNames = (data: unknown): data is TData<'names'>[] =>
-  Array.isArray(data) && data[0] && typeof data[0] === 'object' && 'about' in data[0];
--- a/src/components/list/Images.tsx
+++ b/src/components/list/Images.tsx
@ -1,22 +0,0 @@
-import Image from 'next/future/image';
-import { modifyIMDbImg } from 'src/utils/helpers';
-import type { Data } from 'src/interfaces/shared/list';
-import styles from 'src/styles/modules/components/list/images.module.scss';
-
-type Props = {
-  images: Data<'images'>[];
-};
-
-const Images = ({ images }: Props) => {
-  return (
-    <section className={styles.container}>
-      {images.map(image => (
-        <figure className={styles.imgContainer} key={image}>
-          <Image src={modifyIMDbImg(image, 400)} alt='' fill className={styles.img} sizes='200px'/>
-        </figure>
-      ))}
-    </section>
-  );
-};
-
-export default Images;
--- a/src/components/list/Meta.tsx
+++ b/src/components/list/Meta.tsx
@ -1,35 +0,0 @@
-import Link from 'next/link';
-import { formatDate } from 'src/utils/helpers';
-import List from 'src/interfaces/shared/list';
-import styles from 'src/styles/modules/components/list/meta.module.scss';
-
-type Props = {
-  title: string;
-  meta: List['meta'];
-  description: List['description'];
-};
-const Meta = ({ title, meta, description }: Props) => {
-  const by = meta.by.link ? (
-    <Link href={meta.by.link}>
-      <a className='link'>{meta.by.name}</a>
-    </Link>
-  ) : (
-    meta.by.name
-  );
-
-  return (
-    <header className={styles.container}>
-      <h1 className='heading heading__secondary'>{title}</h1>
-      <ul className={styles.list}>
-        <li>by {by}</li>
-        <li>{meta.created}</li>
-        {meta.updated && <li>{meta.updated}</li>}
-        <li>
-          {meta.num} {meta.type}
-        </li>
-      </ul>
-      {description && <p>{description}</p>}
-    </header>
-  );
-};
-export default Meta;
--- a/src/components/list/Names.tsx
+++ b/src/components/list/Names.tsx
@ -1,57 +0,0 @@
-import Image from 'next/future/image';
-import { getProxiedIMDbImgUrl, modifyIMDbImg } from 'src/utils/helpers';
-import { Card } from 'src/components/card';
-import type { Data } from 'src/interfaces/shared/list';
-import styles from 'src/styles/modules/components/list/names.module.scss';
-import OptionalLink from './OptionalLink';
-
-type Props = {
-  names: Data<'names'>[];
-};
-
-const Names = ({ names }: Props) => {
-  return (
-    <ul className={styles.names}>
-      {names.map(name => (
-        <Name {...name} key={name.name} />
-      ))}
-    </ul>
-  );
-};
-export default Names;
-
-const Name = ({ about, image, job, knownFor, knownForLink, name, url }: Props['names'][number]) => {
-  // const style: CSSProperties = {
-  //   backgroundImage: image ? `url(${getProxiedIMDbImgUrl(modifyIMDbImg(image, 300))})` : undefined,
-  // };
-
-  return (
-    <Card hoverable className={styles.name}>
-      <div className={styles.imgContainer}>
-        {image ? (
-          <Image src={modifyIMDbImg(image, 400)} alt='' fill className={styles.img} sizes='200px' />
-        ) : (
-          <svg className={styles.imgNA}>
-            <use href='/svg/sprite.svg#icon-image-slash' />
-          </svg>
-        )}
-      </div>
-      <div className={styles.info}>
-        <h2 className={`heading ${styles.heading}`}>
-          <OptionalLink href={url} className={`heading ${styles.heading}`}>
-            {name}
-          </OptionalLink>
-        </h2>
-        <ul className={styles.basicInfo} aria-label='quick facts'>
-          {job && <li>{job}</li>}
-          {knownFor && (
-            <li>
-              <OptionalLink href={knownForLink}>{knownFor}</OptionalLink>
-            </li>
-          )}
-        </ul>
-        <p>{about}</p>
-      </div>
-    </Card>
-  );
-};
--- a/src/components/list/OptionalLink.tsx
+++ b/src/components/list/OptionalLink.tsx
@ -1,20 +0,0 @@
-import type { ReactNode, ComponentPropsWithoutRef } from 'react';
-import Link from 'next/link';
-
-const OptionalLink = ({
-  href,
-  children,
-  ...rest
-}: { href?: string | null; children: ReactNode } & Omit<ComponentPropsWithoutRef<'a'>, 'href'>) => (
-  <>
-    {href ? (
-      <Link href={href}>
-        <a {...rest}>{children}</a>
-      </Link>
-    ) : (
-      children
-    )}
-  </>
-);
-
-export default OptionalLink;
--- a/src/components/list/Pagination.tsx
+++ b/src/components/list/Pagination.tsx
@ -1,33 +0,0 @@
-import OptionalLink from './OptionalLink';
-import type List from 'src/interfaces/shared/list';
-import styles from 'src/styles/modules/components/list/pagination.module.scss';
-
-type Props = {
-  pagination: List['pagination'];
-};
-const Pagination = ({ pagination }: Props) => {
-  const prevLink = pagination.prev && pagination.prev !== '#' ? pagination.prev : null;
-  const nextLink = pagination.next && pagination.next !== '#' ? pagination.next : null;
-
-  if (!prevLink && !nextLink) return null;
-
-  return (
-    <nav aria-label='pagination'>
-      <ul className={styles.nav}>
-        <li aria-hidden={!prevLink}>
-          <OptionalLink href={prevLink} className='link'>
-            Prev
-          </OptionalLink>
-        </li>
-        <li>{pagination.range} shown</li>
-        <li aria-hidden={!nextLink}>
-          <OptionalLink href={nextLink} className='link'>
-            Next
-          </OptionalLink>
-        </li>
-      </ul>
-    </nav>
-  );
-};
-
-export default Pagination;
--- a/src/components/list/Titles.tsx
+++ b/src/components/list/Titles.tsx
@ -1,79 +0,0 @@
-import Image from 'next/future/image';
-import { getProxiedIMDbImgUrl, modifyIMDbImg } from 'src/utils/helpers';
-import { Card } from 'src/components/card';
-import type { Data } from 'src/interfaces/shared/list';
-import styles from 'src/styles/modules/components/list/titles.module.scss';
-import { CSSProperties } from 'react';
-import OptionalLink from './OptionalLink';
-
-type Props = {
-  titles: Data<'titles'>[];
-};
-
-const Titles = ({ titles }: Props) => {
-  return (
-    <ul className={styles.titles}>
-      {titles.map(title => (
-        <Title {...title} key={title.name} />
-      ))}
-    </ul>
-  );
-};
-export default Titles;
-
-const Title = (props: Props['titles'][number]) => {
-  const style: CSSProperties = {
-    backgroundImage: props.image
-      ? `url(${getProxiedIMDbImgUrl(modifyIMDbImg(props.image, 300))})`
-      : undefined,
-  };
-
-  return (
-    <Card hoverable className={styles.title}>
-      <div className={styles.imgContainer}>
-        {props.image ? (
-          <Image src={modifyIMDbImg(props.image, 400)} alt='' fill className={styles.img} />
-        ) : (
-          <svg className={styles.imgNA}>
-            <use href='/svg/sprite.svg#icon-image-slash' />
-          </svg>
-        )}
-      </div>
-      <div className={styles.info}>
-        <h2 className={`heading heading__tertiary ${styles.heading}`}>
-          <OptionalLink href={props.url} className={`heading ${styles.heading}`}>
-            {props.name} {props.year}
-          </OptionalLink>
-        </h2>
-        <ul className={styles.basicInfo} aria-label='quick facts'>
-          {props.certificate && <li>{props.certificate}</li>}
-          {props.runtime && <li>{props.runtime}</li>}
-          {props.genre && <li>{props.genre}</li>}
-        </ul>
-        <ul className={styles.ratings}>
-          {Boolean(props.rating) && <li className={styles.rating}>
-            <span className={styles.rating__num}>{props.rating}</span>
-            <svg className={styles.rating__icon}>
-              <use href='/svg/sprite.svg#icon-rating'></use>
-            </svg>
-            <span className={styles.rating__text}> Avg. rating</span>
-          </li>}
-          {Boolean(props.metascore) && <li className={styles.rating}>
-            <span className={styles.rating__num}>{props.metascore}</span>
-            <span className={styles.rating__text}>Metascore</span>
-          </li>}
-        </ul>
-        <p className={styles.plot}>
-          <span>Plot:</span> {props.plot}
-        </p>
-        <ul className={styles.otherInfo}>
-          {props.otherInfo.map(([infoHeading, info]) => (
-            <li key={infoHeading}>
-              <span>{infoHeading}:</span> {info}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </Card>
-  );
-};
--- a/src/components/list/index.ts
+++ b/src/components/list/index.ts
@ -1,3 +0,0 @@
-export { default as Data } from './Data';
-export { default as Meta } from './Meta';
-export { default as Pagination } from './Pagination';
--- a/src/components/loaders/ProgressBar.tsx
+++ b/src/components/loaders/ProgressBar.tsx
@ -1,6 +0,0 @@
-import styles from 'src/styles/modules/components/loaders/progress-bar.module.scss';
-
-const ProgressBar = () => {
-  return <span className={styles.progress} role='progressbar'></span>;
-};
-export default ProgressBar;
--- a/src/components/media/Media.tsx
+++ b/src/components/media/Media.tsx
@ -1,86 +0,0 @@
-import Image from 'next/future/image';
-import Link from 'next/link';
-import { Media } from 'src/interfaces/shared';
-import { getProxiedIMDbImgUrl, modifyIMDbImg } from 'src/utils/helpers';
-import styles from 'src/styles/modules/components/media/media.module.scss';
-
-type Props = {
-  className: string;
-  media: Media;
-};
-
-// TODO: refactor this component.
-
-const Media = ({ className, media }: Props) => {
-  return (
-    <div className={`${className} ${styles.media}`}>
-      {(media.trailer || !!media.videos.total) && (
-        <section className={styles.videos}>
-          <h2 className='heading heading__secondary'>Videos</h2>
-
-          <div className={styles.videos__container}>
-            {media.trailer && (
-              <div className={styles.trailer}>
-                <video
-                  aria-label='trailer video'
-                  controls
-                  playsInline
-                  poster={getProxiedIMDbImgUrl(modifyIMDbImg(media.trailer.thumbnail))}
-                  className={styles.trailer__video}
-                  preload='none'
-                >
-                  {media.trailer.urls.map(source => (
-                    <source
-                      key={source.url}
-                      type={source.mimeType}
-                      src={getProxiedIMDbImgUrl(source.url)}
-                      data-res={source.resolution}
-                    />
-                  ))}
-                </video>
-              </div>
-            )}
-
-            {!!media.videos.total &&
-              media.videos.videos.map(video => (
-                <Link href={`/video/${video.id}`} key={video.id}>
-                  <a className={styles.video}>
-                    <Image
-                      className={styles.video__img}
-                      src={modifyIMDbImg(video.thumbnail)}
-                      alt=''
-                      fill
-                      sizes='400px'
-                    />
-                    <p className={styles.video__caption}>
-                      {video.caption} ({video.runtime}s)
-                    </p>
-                  </a>
-                </Link>
-              ))}
-          </div>
-        </section>
-      )}
-      {!!media.images.total && (
-        <section className={styles.images}>
-          <h2 className='heading heading__secondary'>Images</h2>
-          <div className={styles.images__container}>
-            {media.images.images.map(image => (
-              <figure key={image.id} className={styles.image}>
-                <Image
-                  className={styles.image__img}
-                  src={modifyIMDbImg(image.url)}
-                  alt=''
-                  fill
-                  sizes='400px'
-                />
-                <figcaption className={styles.image__caption}>{image.caption.plainText}</figcaption>
-              </figure>
-            ))}
-          </div>
-        </section>
-      )}
-    </div>
-  );
-};
-export default Media;
--- a/src/components/meta/Meta.tsx
+++ b/src/components/meta/Meta.tsx
@ -1,42 +0,0 @@
-import Head from 'next/head';
-import { ReactNode } from 'react';
-
-type Props = {
-  title: string;
-  description?: string;
-  imgUrl?: string;
-};
-
-const BASE_URL = process.env.NEXT_PUBLIC_URL ?? 'https://iket.me';
-
-const Meta = ({
-  title,
-  description = 'libremdb, a free & open source IMDb front-end.',
-  imgUrl = 'icon.svg',
-}: Props) => {
-  const url = new URL(imgUrl, BASE_URL);
-
-  return (
-    <Head>
-      <meta charSet='UTF-8' />
-      <meta httpEquiv='X-UA-Compatible' content='IE=edge' />
-      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-
-      <title key='title'>{`${title} | libremdb`}</title>
-      <meta key='desc' name='description' content={description} />
-      <link rel='icon' href='/favicon.ico' sizes='any' />
-      <link rel='icon' href='/icon.svg' type='image/svg+xml' />
-      <link rel='apple-touch-icon' href='/apple-touch-icon.png' />
-      <link rel='manifest' href='/site.webmanifest' />
-      <meta name='theme-color' content='#ffe5ef' />
-
-      <meta property='og:title' content={title} />
-      <meta property='og:description' content={description} />
-      <meta property='og:site_name' content='libremdb' />
-      <meta property='og:locale' content='en_US' />
-      <meta property='og:type' content='video.movie' />
-      <meta property='og:image' content={url.toString()} />
-    </Head>
-  );
-};
-export default Meta;
--- a/src/components/name/Basic.tsx
+++ b/src/components/name/Basic.tsx
@ -1,59 +0,0 @@
-import { CardBasic } from 'src/components/card';
-import { Basic as BasicType } from 'src/interfaces/shared/name';
-import { formatNumber } from 'src/utils/helpers';
-import styles from 'src/styles/modules/components/name/basic.module.scss';
-
-type Props = {
-  className: string;
-  data: BasicType;
-};
-
-const Basic = ({ data, className }: Props) => {
-  return (
-    <CardBasic className={className} image={data.poster?.url} title={data.name}>
-      <div className={styles.ratings}>
-        {data.ranking && (
-          <p className={styles.rating}>
-            <span className={styles.rating__num}>{formatNumber(data.ranking.position)}</span>
-            <svg className={styles.rating__icon}>
-              <use href='/svg/sprite.svg#icon-graph-rising'></use>
-            </svg>
-            <span className={styles.rating__text}>
-              {' '}
-              Popularity (
-              <span className={styles.rating__sub}>{getRankingStats(data.ranking)}</span>)
-            </span>
-          </p>
-        )}
-      </div>
-
-      {!!data.primaryProfessions.length && (
-        <p className={styles.genres}>
-          <span className={styles.heading}>Profession: </span>
-          {data.primaryProfessions.join(', ')}
-        </p>
-      )}
-      {
-        <p className={styles.overview}>
-          <span className={styles.heading}>About: </span>
-          {data.bio.short}...
-        </p>
-      }
-      {data.knownFor.title && (
-        <p className={styles.genres}>
-          <span className={styles.heading}>Known for: </span>
-          {data.knownFor.title} ({data.knownFor.role})
-        </p>
-      )}
-    </CardBasic>
-  );
-};
-
-const getRankingStats = (ranking: NonNullable<Props['data']['ranking']>) => {
-  if (ranking.direction === 'FLAT') return '\u2192';
-
-  const change = formatNumber(ranking.change);
-  return (ranking.direction === 'UP' ? '\u2191' : '\u2193') + change;
-};
-
-export default Basic;
--- a/src/components/name/Bio.tsx
+++ b/src/components/name/Bio.tsx
@ -1,12 +0,0 @@
-import styles from 'src/styles/modules/components/name/did-you-know.module.scss';
-
-type Props = { bio: string };
-
-const Bio = ({ bio }: Props) => (
-  <section className={styles.bio}>
-    <h2 className='heading heading__secondary'>About</h2>
-    <div dangerouslySetInnerHTML={{ __html: bio }} />
-  </section>
-);
-
-export default Bio;
--- a/src/components/name/Credits.tsx
+++ b/src/components/name/Credits.tsx
@ -1,43 +0,0 @@
-import { Credits } from 'src/interfaces/shared/name';
-import { CardTitle } from 'src/components/card';
-import styles from 'src/styles/modules/components/name/credits.module.scss';
-
-type Props = {
-  className: string;
-  data: Credits;
-};
-
-const Credits = ({ className, data }: Props) => {
-  if (!data.total) return null;
-
-  return (
-    <section className={`${className} ${styles.credits}`}>
-      <h2 className='heading heading__secondary'>Credits</h2>
-      {data.released.map(
-        (item, i) =>
-          !!item.total && (
-            <details open={i === 0} key={item.category.id}>
-              <summary>
-                {item.category.text} ({item.total})
-              </summary>
-              <ul className={styles.container} key={item.category.id}>
-                {item.titles.map(title => (
-                  <CardTitle
-                    key={title.id}
-                    link={`/title/${title.id}`}
-                    name={title.title}
-                    titleType={title.type.text}
-                    image={title.poster?.url}
-                    year={title.releaseYear}
-                    ratings={title.ratings}
-                  />
-                ))}
-              </ul>
-            </details>
-          )
-      )}
-    </section>
-  );
-};
-
-export default Credits;
--- a/src/components/name/DidYouKnow.tsx
+++ b/src/components/name/DidYouKnow.tsx
@ -1,51 +0,0 @@
-import Link from 'next/link';
-import { DidYouKnow } from 'src/interfaces/shared/name';
-import styles from 'src/styles/modules/components/name/did-you-know.module.scss';
-
-type Props = {
-  data: DidYouKnow;
-};
-
-const DidYouKnow = ({ data }: Props) => (
-  <section className={styles.container}>
-    <h2 className='heading heading__secondary'>Did you know</h2>
-    {!!data.trivia?.total && (
-      <section>
-        <h3 className='heading heading__tertiary'>Trivia</h3>
-        <div dangerouslySetInnerHTML={{ __html: data.trivia.html }}></div>
-      </section>
-    )}
-    {!!data.quotes?.total && (
-      <section>
-        <h3 className='heading heading__tertiary'>Quotes</h3>
-        <div dangerouslySetInnerHTML={{ __html: data.quotes.html }}></div>
-      </section>
-    )}
-    {!!data.trademark?.total && (
-      <section>
-        <h3 className='heading heading__tertiary'>Trademark</h3>
-        <div dangerouslySetInnerHTML={{ __html: data.trademark.html }}></div>
-      </section>
-    )}
-    {!!data.nicknames.length && (
-      <section>
-        <h3 className='heading heading__tertiary'>Nicknames</h3>
-        <p>{data.nicknames.join(', ')}</p>
-      </section>
-    )}
-    {!!data.salary?.total && (
-      <section>
-        <h3 className='heading heading__tertiary'>Salary</h3>
-        <p>
-          <span>{data.salary.value} in </span>
-          <Link href={`/title/${data.salary.title.id}`}>
-            <a className={'link'}>{data.salary.title.text}</a>
-          </Link>
-          <span> ({data.salary.title.year})</span>
-        </p>
-      </section>
-    )}
-  </section>
-);
-
-export default DidYouKnow;
--- a/src/components/name/Info.tsx
+++ b/src/components/name/Info.tsx
@ -1,184 +0,0 @@
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import Name, { PersonalDetails } from 'src/interfaces/shared/name';
-import styles from 'src/styles/modules/components/name/info.module.scss';
-
-type Props = {
-  info: PersonalDetails;
-  accolades: Name['accolades'];
-};
-
-const PersonalDetails = ({ info, accolades }: Props) => {
-  const {
-    query: { nameId },
-  } = useRouter();
-
-  return (
-    <div className={styles.info}>
-      <section className={styles.accolades}>
-        <h2 className='heading heading__secondary'>Accolades</h2>
-        <div className={styles.accolades__container}>
-          {accolades.awards && (
-            <p>
-              <span>
-                Won {accolades.awards.wins} {accolades.awards.name}
-              </span>
-              <span> (out of {accolades.awards.nominations} nominations)</span>
-            </p>
-          )}
-          <p>
-            {accolades.wins} wins and {accolades.nominations} nominations in total
-          </p>
-          <p>
-            <Link href={`/name/${nameId}/awards`}>
-              <a className='link'>View all awards</a>
-            </Link>
-          </p>
-        </div>
-      </section>
-
-      <section className={styles.details}>
-        <h2 className='heading heading__secondary'>Personal details</h2>
-        <div className={styles.details__container}>
-          {!!info.officialSites.length && (
-            <p>
-              <span>Official sites: </span>
-              {info.officialSites.map((site, i) => (
-                <span key={site.url}>
-                  {!!i && ', '}
-                  <a href={site.url} className='link' target='_blank' rel='noreferrer'>
-                    {site.name}
-                  </a>
-                </span>
-              ))}
-            </p>
-          )}
-          {!!info.alsoKnownAs.length && (
-            <p>
-              <span>Also known as: </span>
-              <span>{info.alsoKnownAs.join(', ')}</span>
-            </p>
-          )}
-          {info.height && (
-            <p>
-              <span>Height: </span>
-              <span>{info.height}</span>
-            </p>
-          )}
-          {info.birth && (
-            <p>
-              <span>Born: </span>
-              <span>{info.birth.date}</span>
-              <span>
-                {' '}
-                in{' '}
-                <Link href={`/search/name?birth_place=${info.birth.location}`}>
-                  <a className='link'>{info.birth.location}</a>
-                </Link>
-              </span>
-            </p>
-          )}
-          {info.death.date && (
-            <p>
-              <span>Died: </span>
-              <span>{info.death.date}</span>
-              {info.death.location && (
-                <span>
-                  {' '}
-                  in{' '}
-                  <Link href={`/search/name?death_place=${info.death.location}`}>
-                    <a className='link'>{info.death.location}</a>
-                  </Link>
-                </span>
-              )}
-            </p>
-          )}
-          {info.death.cause && (
-            <p>
-              <span>Death cause: </span>
-              <span>{info.death.cause}</span>
-            </p>
-          )}
-          {!!info.spouses?.length && (
-            <p>
-              <span>Spouses: </span>
-              {info.spouses.map((spouse, i) => (
-                <span key={spouse.name}>
-                  {!!i && ', '}
-                  {renderPersonNameWithLink(spouse)} {spouse.range}
-                  {spouse.attributes && ' (' + spouse.attributes.join(', ') + ')'}
-                </span>
-              ))}
-            </p>
-          )}
-          {!!info.children?.length && (
-            <p>
-              <span>Children: </span>
-              {info.children.map((child, i) => (
-                <span key={child.name}>
-                  {!!i && ', '}
-                  {renderPersonNameWithLink(child)}
-                </span>
-              ))}
-            </p>
-          )}
-          {!!info.parents?.length && (
-            <p>
-              <span>Parents: </span>
-              {info.parents.map((parent, i) => (
-                <span key={parent.name}>
-                  {!!i && ', '}
-                  {renderPersonNameWithLink(parent)}
-                </span>
-              ))}
-            </p>
-          )}
-          {!!info.relatives?.length && (
-            <p>
-              <span>Relatives: </span>
-              {info.relatives.map((relative, i) => (
-                <span key={relative.name}>
-                  {!!i && ', '}
-                  {renderPersonNameWithLink(relative)} ({relative.relation})
-                </span>
-              ))}
-            </p>
-          )}
-          {!!info.otherWorks?.length && (
-            <p>
-              <span>Other Works: </span>
-              {info.otherWorks.map((work, i) => (
-                <span key={work.text}>
-                  {!!i && ', '}
-                  <span dangerouslySetInnerHTML={{ __html: work.text }} />
-                </span>
-              ))}
-            </p>
-          )}
-          {!!info.publicity.total && (
-            <p>
-              <span>Publicity Listings: </span>
-              <span>{info.publicity.articles} Articles</span>,{' '}
-              <span>{info.publicity.interviews} Interviews</span>,{' '}
-              <span>{info.publicity.magazines} Magazines</span>,{' '}
-              <span>{info.publicity.pictorials} Pictorials</span>,{' '}
-              <span>{info.publicity.printBiographies} Print biographies</span>, and{' '}
-              <span>{info.publicity.filmBiographies} Biographies</span>
-            </p>
-          )}
-        </div>
-      </section>
-    </div>
-  );
-};
-
-export default PersonalDetails;
-
-const renderPersonNameWithLink = (person: { name: string; id: string | null }) =>
-  person.id ? (
-    <Link href={`/name/${person.id}`}>
-      <a className='link'>{person.name}</a>
-    </Link>
-  ) : (
-    <span>{person.name}</span>
-  );
--- a/src/components/name/KnownFor.tsx
+++ b/src/components/name/KnownFor.tsx
@ -1,34 +0,0 @@
-import type { KnownFor as KnownForType } from 'src/interfaces/shared/name';
-import { CardTitle } from 'src/components/card';
-import styles from 'src/styles/modules/components/name/known-for.module.scss';
-
-type Props = { data: KnownForType };
-
-const KnownFor = ({ data }: Props) => {
-  if (!data.length) return null;
-
-  return (
-    <section className={styles.knownFor}>
-      <h2 className='heading heading__secondary'>Known For</h2>
-      <ul className={styles.container}>
-        {data.map(title => (
-          <CardTitle
-            key={title.id}
-            link={`/title/${title.id}`}
-            name={title.title}
-            titleType={title.type.text}
-            image={title.poster?.url}
-            year={title.releaseYear}
-          >
-            <p className={styles.item__role}>{getRoles(title)}</p>
-          </CardTitle>
-        ))}
-      </ul>
-    </section>
-  );
-};
-
-const getRoles = (title: Props['data'][number]) =>
-  (title.summary.characters ?? title.summary.jobs)?.join(', ');
-
-export default KnownFor;
--- a/src/components/name/index.ts
+++ b/src/components/name/index.ts
@ -1,6 +0,0 @@
-export { default as Basic } from './Basic';
-export { default as DidYouKnow } from './DidYouKnow';
-export { default as Info } from './Info';
-export { default as Credits } from './Credits';
-export { default as KnownFor } from './KnownFor';
-export { default as Bio } from './Bio';
--- a/src/components/title/Basic.tsx
+++ b/src/components/title/Basic.tsx
@ -1,110 +0,0 @@
-import { Fragment } from 'react';
-import Link from 'next/link';
-import { CardBasic } from 'src/components/card';
-import { Basic } from 'src/interfaces/shared/title';
-import { formatNumber, formatTime } from 'src/utils/helpers';
-import styles from 'src/styles/modules/components/title/basic.module.scss';
-
-type Props = {
-  className: string;
-  data: Basic;
-};
-
-const Basic = ({ data, className }: Props) => {
-  const titleType = data.type.id;
-  const releaseTime =
-    titleType === 'tvSeries'
-      ? `${data.releaseYear?.start}-${data.releaseYear?.end || 'present'}`
-      : data.releaseYear?.start;
-
-  return (
-    <CardBasic
-      className={`${styles.container} ${className}`}
-      image={data.poster?.url}
-      title={data.title}
-    >
-      <ul className={styles.meta} aria-label='quick facts'>
-        {data.status && data.status.id !== 'released' && (
-          <li className={styles.meta__text}>{data.status.text}</li>
-        )}
-        <li className={styles.meta__text}>{data.type.name}</li>
-        {data.releaseYear && <li className={styles.meta__text}>{releaseTime}</li>}
-        {data.ceritficate && <li className={styles.meta__text}>{data.ceritficate}</li>}
-        {data.runtime && <li className={styles.meta__text}>{formatTime(data.runtime)}</li>}
-      </ul>
-      <div className={styles.ratings}>
-        {data.ratings.avg && (
-          <>
-            <p className={styles.rating}>
-              <span className={styles.rating__num}>{data.ratings.avg}</span>
-              <svg className={styles.rating__icon}>
-                <use href='/svg/sprite.svg#icon-rating'></use>
-              </svg>
-              <span className={styles.rating__text}> Avg. rating</span>
-            </p>
-            <p className={styles.rating}>
-              <span className={styles.rating__num}>{formatNumber(data.ratings.numVotes)}</span>
-              <svg className={styles.rating__icon}>
-                <use href='/svg/sprite.svg#icon-like-dislike'></use>
-              </svg>
-              <span className={styles.rating__text}> No. of votes</span>
-            </p>
-          </>
-        )}
-        {data.ranking && (
-          <p className={styles.rating}>
-            <span className={styles.rating__num}>{formatNumber(data.ranking.position)}</span>
-            <svg className={styles.rating__icon}>
-              <use href='/svg/sprite.svg#icon-graph-rising'></use>
-            </svg>
-            <span className={styles.rating__text}>
-              {' '}
-              Popularity (
-              <span className={styles.rating__sub}>
-                {data.ranking.direction === 'UP'
-                  ? `\u2191${formatNumber(data.ranking.change)}`
-                  : data.ranking.direction === 'DOWN'
-                  ? `\u2193${formatNumber(data.ranking.change)}`
-                  : ''}
-              </span>
-              )
-            </span>
-          </p>
-        )}
-      </div>
-
-      {!!data.genres.length && (
-        <p className={styles.genres}>
-          <span className={styles.genres__heading}>Genres: </span>
-          {data.genres.map((genre, i) => (
-            <Fragment key={genre.id}>
-              {i > 0 && ', '}
-              <Link href={`/search/title?genres=${genre.id}`}>
-                <a className={styles.link}>{genre.text}</a>
-              </Link>
-            </Fragment>
-          ))}
-        </p>
-      )}
-      <p className={styles.overview}>
-        <span className={styles.overview__heading}>Plot: </span>
-        <span className={styles.overview__text}>{data.plot || '-'}</span>
-      </p>
-      {data.primaryCrew.map(crewType => (
-        <p className={styles.crewType} key={crewType.type.id}>
-          <span className={styles.crewType__heading}>{`${crewType.type.category}: `}</span>
-          {crewType.crew.map((crew, i) => (
-            <Fragment key={crew.id}>
-              {i > 0 && ', '}
-              <Link href={`/name/${crew.id}`}>
-                <a className={styles.link}>{crew.name}</a>
-              </Link>
-            </Fragment>
-          ))}
-        </p>
-      ))}
-    </CardBasic>
-  );
-};
-
-export default Basic;
--- a/src/components/title/Cast.tsx
+++ b/src/components/title/Cast.tsx
@ -1,32 +0,0 @@
-import { CardCast } from 'src/components/card';
-import { Cast } from 'src/interfaces/shared/title';
-import styles from 'src/styles/modules/components/title/cast.module.scss';
-
-type Props = {
-  className: string;
-  cast: Cast;
-};
-
-const Cast = ({ className, cast }: Props) => {
-  if (!cast.length) return null;
-
-  return (
-    <section className={`${className} ${styles.container}`}>
-      <h2 className='heading heading__secondary'>Cast</h2>
-      <ul className={styles.cast}>
-        {cast.map(member => (
-          <CardCast
-            key={member.id}
-            link={`/name/${member.id}`}
-            name={member.name}
-            image={member.image}
-            characters={member.characters}
-            attributes={member.attributes}
-          />
-        ))}
-      </ul>
-    </section>
-  );
-};
-
-export default Cast;
--- a/src/components/title/DidYouKnow.tsx
+++ b/src/components/title/DidYouKnow.tsx
@ -1,105 +0,0 @@
-import Link from 'next/link';
-import { DidYouKnow } from 'src/interfaces/shared/title';
-import styles from 'src/styles/modules/components/title/did-you-know.module.scss';
-
-type Props = {
-  data: DidYouKnow;
-};
-
-const DidYouKnow = ({ data }: Props) => {
-  if (!Object.keys(data).length) return <></>;
-  return (
-    <section className={styles.didYouKnow}>
-      <h2 className='heading heading__secondary'>Did you know</h2>
-      <div className={styles.container}>
-        {data.trivia && (
-          <div className={styles.item}>
-            <h3 className='heading heading__tertiary'>Trivia</h3>
-            <div
-              className={styles.item__desc}
-              dangerouslySetInnerHTML={{ __html: data.trivia.html }}
-            ></div>
-          </div>
-        )}
-        {data.goofs && (
-          <div className={styles.item}>
-            <h3 className='heading heading__tertiary'>Goofs</h3>
-            <div
-              className={styles.item__desc}
-              dangerouslySetInnerHTML={{ __html: data.goofs.html }}
-            ></div>
-          </div>
-        )}
-        {data.quotes?.lines.length && (
-          // html spec says not to use blockquote & cite for conversations, even though it seems a perfect choice here.
-          // see 'note' part https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element
-          <div className={styles.item}>
-            <h3 className='heading heading__tertiary'>Quotes</h3>
-            {data.quotes.lines.map((line, i) => (
-              <div className={styles.quotes} key={i}>
-                <p className={styles.quote}>
-                  {line.name && (
-                    <Link href={`/name/${line.id}`}>
-                      <a className={'link'}>{line.name}</a>
-                    </Link>
-                  )}
-                  {line.stageDirection && <i> [{line.stageDirection}] </i>}
-                  {line.text && <span>: {line.text}</span>}
-                </p>
-              </div>
-            ))}
-          </div>
-        )}
-        {data.crazyCredits && (
-          <div className={styles.item}>
-            <h3 className='heading heading__tertiary'>Crazy credits</h3>
-            <div
-              className={styles.item__desc}
-              dangerouslySetInnerHTML={{ __html: data.crazyCredits.html }}
-            ></div>
-          </div>
-        )}
-        {data.alternativeVersions && (
-          <div className={styles.item}>
-            <h3 className='heading heading__tertiary'>Alternate versions</h3>
-            <div
-              className={styles.item__desc}
-              dangerouslySetInnerHTML={{
-                __html: data.alternativeVersions.html,
-              }}
-            ></div>
-          </div>
-        )}
-        {data.connections && (
-          <div className={styles.item}>
-            <h3 className='heading heading__tertiary'>Connections</h3>
-            <p className={styles.item__desc}>
-              <span>{data.connections.startText} </span>
-              <Link href={`/title/${data.connections.title.id}`}>
-                <a className={'link'}>{data.connections.title.text}</a>
-              </Link>
-              <span> ({data.connections.title.year})</span>
-            </p>
-          </div>
-        )}
-        {data.soundTrack && (
-          <div className={styles.item}>
-            <h3 className='heading heading__tertiary'>Soundtracks</h3>
-            <div className={styles.list}>
-              <p>{data.soundTrack.title}</p>
-              {data.soundTrack.htmls &&
-                data.soundTrack.htmls.map(html => (
-                  <div
-                    key={html}
-                    className={styles.item__desc}
-                    dangerouslySetInnerHTML={{ __html: html }}
-                  ></div>
-                ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </section>
-  );
-};
-export default DidYouKnow;
--- a/src/components/title/Info.tsx
+++ b/src/components/title/Info.tsx
@ -1,329 +0,0 @@
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { Info } from 'src/interfaces/shared/title';
-import { formatMoney, formatTime } from 'src/utils/helpers';
-import styles from 'src/styles/modules/components/title/info.module.scss';
-
-type Props = {
-  info: Info;
-  className: string;
-};
-
-const Info = ({ info, className }: Props) => {
-  const router = useRouter();
-  const { titleId } = router.query;
-  const { boxOffice, details, meta, keywords, technicalSpecs, accolades } =
-    info;
-
-  return (
-    <div className={`${className} ${styles.info}`}>
-      {meta.infoEpisode && (
-        <section className={styles.episodeInfo}>
-          <h2 className="heading heading__secondary">Episode info</h2>
-          <div className={styles.episodeInfo__container}>
-            {meta.infoEpisode.numSeason && (
-              <p className={styles.series}>
-                <span>Season: </span>
-                <span>{meta.infoEpisode.numSeason}</span>
-              </p>
-            )}
-            {meta.infoEpisode.numEpisode && (
-              <p>
-                <span>Episode: </span>
-                <span>{meta.infoEpisode.numEpisode}</span>
-              </p>
-            )}
-            <p>
-              <span>Series: </span>
-              <span>
-                <Link href={`/title/${meta.infoEpisode.series.id}`}>
-                  <a className={'link'}>{meta.infoEpisode.series.title}</a>
-                </Link>
-                <span>
-                  {' '}
-                  ({meta.infoEpisode.series.startYear}-
-                  {meta.infoEpisode.series.endYear || 'present'})
-                </span>
-              </span>
-            </p>
-            {meta.infoEpisode.prevId && (
-              <p>
-                <Link href={`/title/${meta.infoEpisode.prevId}`}>
-                  <a className="link">Go to previous episode</a>
-                </Link>
-              </p>
-            )}
-            {meta.infoEpisode.nextId && (
-              <p>
-                <Link href={`/title/${meta.infoEpisode.nextId}`}>
-                  <a className="link">Go to next episode</a>
-                </Link>
-              </p>
-            )}
-          </div>
-        </section>
-      )}
-      {meta.infoSeries && (
-        <section className={styles.seriesInfo}>
-          <h2 className="heading heading__secondary">Series info</h2>
-          <div className={styles.seriesInfo__container}>
-            <p>
-              <span>Total Seasons: </span>
-              <span>{meta.infoSeries.seasons.length}</span>
-            </p>
-            <p>
-              <span>Total Years: </span>
-              <span>{meta.infoSeries.years.length}</span>
-            </p>
-            <p>
-              <span>Total Episodes: </span>
-              <span>{meta.infoSeries.totalEpisodes}</span>
-            </p>
-            <p>
-              <Link href={`/title/${titleId}/episodes`}>
-                <a className="link">See all Episodes</a>
-              </Link>
-            </p>
-          </div>
-        </section>
-      )}
-      <section className={styles.accolades}>
-        <h2 className="heading heading__secondary">Accolades</h2>
-        <div className={styles.accolades__container}>
-          {accolades.topRating && (
-            <p>
-              <Link href={`/chart/top`}>
-                <a className="link">Top rated (#{accolades.topRating})</a>
-              </Link>
-            </p>
-          )}
-          {accolades.awards && (
-            <p>
-              <span>
-                Won {accolades.awards.wins} {accolades.awards.name}
-              </span>
-              <span> (out of {accolades.awards.nominations} nominations)</span>
-            </p>
-          )}
-          <p>
-            {accolades.wins} wins and {accolades.nominations} nominations in
-            total
-          </p>
-          <p>
-            <Link href={`/title/${titleId}/awards`}>
-              <a className="link">View all awards</a>
-            </Link>
-          </p>
-        </div>
-      </section>
-      {!!keywords.total && (
-        <section className={styles.keywords}>
-          <h2 className="heading heading__secondary">Keywords</h2>
-          <ul className={styles.keywords__container}>
-            {keywords.list.map(word => (
-              <li className={styles.keywords__item} key={word}>
-                <Link
-                  href={`/search/keyword/?keywords=${word.replace(/\s/g, '-')}`}
-                >
-                  <a className="link">{word}</a>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </section>
-      )}
-      {!!Object.keys(details).length && (
-        <section className={styles.details}>
-          <h2 className="heading heading__secondary">Details</h2>
-          <div className={styles.details__container}>
-            {details.releaseDate && (
-              <p>
-                <span>Release date: </span>
-                <time dateTime={details.releaseDate.date}>
-                  {details.releaseDate.date}
-                </time>
-                <span> ({details.releaseDate.country.text})</span>
-              </p>
-            )}
-
-            {details.countriesOfOrigin && (
-              <p>
-                <span>Countries of origin: </span>
-                {details.countriesOfOrigin.map((country, i) => (
-                  <span key={country.id}>
-                    {!!i && ', '}
-                    <Link
-                      href={`/search/title/?country_of_origin=${country.id}`}
-                    >
-                      <a className="link">{country.text}</a>
-                    </Link>
-                  </span>
-                ))}
-              </p>
-            )}
-            {details.officialSites && (
-              <p>
-                <span>Official sites: </span>
-                {details.officialSites.sites.map((site, i) => (
-                  <span key={site.url}>
-                    {!!i && ', '}
-                    <a href={site.url} className="link">
-                      {site.name}
-                    </a>
-                  </span>
-                ))}
-              </p>
-            )}
-            {details.languages?.length && (
-              <p>
-                <span>Languages: </span>
-                {details.languages.map((lang, i) => (
-                  <span key={lang.id}>
-                    {!!i && ', '}
-                    <Link href={`/search/title/?primary_language=${lang.id}`}>
-                      <a className="link">{lang.text}</a>
-                    </Link>
-                  </span>
-                ))}
-              </p>
-            )}
-            {details.alsoKnownAs && (
-              <p>
-                <span>Also known as: </span>
-                <span>{details.alsoKnownAs}</span>
-              </p>
-            )}
-            {details.filmingLocations?.total && (
-              <p>
-                <span>Filming locations: </span>
-                {details.filmingLocations.locations.map((loc, i) => (
-                  <span key={loc}>
-                    {!!i && ', '}
-                    <Link href={`/search/title/?locations=${loc}`}>
-                      <a className="link">{loc}</a>
-                    </Link>
-                  </span>
-                ))}
-              </p>
-            )}
-            {!!details.production?.total && (
-              <p>
-                <span>Production companies: </span>
-                {details.production.companies.map((co, i) => (
-                  <span key={co.id}>
-                    {!!i && ', '}
-                    <Link href={`/company/${co.id}`}>
-                      <a className="link">{co.name}</a>
-                    </Link>
-                  </span>
-                ))}
-              </p>
-            )}
-          </div>
-        </section>
-      )}
-      {!!Object.keys(boxOffice).length && (
-        <section className={styles.boxoffice}>
-          <h2 className="heading heading__secondary">Box office</h2>
-          <div className={styles.boxoffice__container}>
-            {boxOffice.budget && (
-              <p>
-                <span>Budget: </span>
-                <span>
-                  {formatMoney(
-                    boxOffice.budget.amount,
-                    boxOffice.budget.currency
-                  )}
-                </span>
-              </p>
-            )}
-            {boxOffice.grossUs && (
-              <p>
-                <span>Gross US & Canada: </span>
-                <span>
-                  {formatMoney(
-                    boxOffice.grossUs.amount,
-                    boxOffice.grossUs.currency
-                  )}
-                </span>
-              </p>
-            )}
-            {boxOffice.openingGrossUs && (
-              <p>
-                <span>Opening weekend US & Canada: </span>
-                <span>
-                  {formatMoney(
-                    boxOffice.openingGrossUs.amount,
-                    boxOffice.openingGrossUs.currency
-                  )}
-                  <span> ({boxOffice.openingGrossUs.date})</span>
-                </span>
-              </p>
-            )}
-            {boxOffice.gross && (
-              <p>
-                <span>Gross worldwide: </span>
-                <span>
-                  {formatMoney(
-                    boxOffice.gross.amount,
-                    boxOffice.gross.currency
-                  )}
-                </span>
-              </p>
-            )}
-          </div>
-        </section>
-      )}
-      {!!Object.keys(technicalSpecs).length && (
-        <section className={styles.technical}>
-          <h2 className="heading heading__secondary">Technical specs</h2>
-          <div className={styles.technical__container}>
-            {technicalSpecs.runtime && (
-              <p>
-                <span>Runtime: </span>
-                <span>{formatTime(technicalSpecs.runtime)}</span>
-              </p>
-            )}
-            {!!technicalSpecs.colorations?.length && (
-              <p>
-                <span> Color: </span>
-                <span>
-                  {technicalSpecs.colorations.map((color, i) => (
-                    <span key={color.id}>
-                      {!!i && ', '}
-                      <Link href={`/search/title/?colors=${color.id}`}>
-                        <a className="link">{color.name}</a>
-                      </Link>
-                    </span>
-                  ))}
-                </span>
-              </p>
-            )}
-            {!!technicalSpecs.soundMixes?.length && (
-              <p>
-                <span>Sound mix: </span>
-                <span>
-                  {technicalSpecs.soundMixes?.map((sound, i) => (
-                    <span key={sound.id}>
-                      {!!i && ', '}
-                      <Link href={`/search/title/?sound_mixes=${sound.id}`}>
-                        <a className="link">{sound.name}</a>
-                      </Link>
-                    </span>
-                  ))}
-                </span>
-              </p>
-            )}
-            {!!technicalSpecs.aspectRatios?.length && (
-              <p>
-                <span>Aspect ratio: </span>
-                <span>{technicalSpecs.aspectRatios.join(', ')}</span>
-              </p>
-            )}
-          </div>
-        </section>
-      )}
-    </div>
-  );
-};
-export default Info;
--- a/src/components/title/MoreLikeThis.tsx
+++ b/src/components/title/MoreLikeThis.tsx
@ -1,32 +0,0 @@
-import { CardTitle } from 'src/components/card';
-import { MoreLikeThis } from 'src/interfaces/shared/title';
-import styles from 'src/styles/modules/components/title/more-like-this.module.scss';
-
-type Props = {
-  className: string;
-  data: MoreLikeThis;
-};
-
-const MoreLikeThis = ({ className, data }: Props) => {
-  if (!data.length) return null;
-
-  return (
-    <section className={`${className} ${styles.morelikethis}`}>
-      <h2 className='heading heading__secondary'>More like this</h2>
-      <ul className={styles.container}>
-        {data.map(title => (
-          <CardTitle
-            key={title.id}
-            link={`/title/${title.id}`}
-            name={title.title}
-            titleType={title.type.text}
-            image={title.poster?.url}
-            year={title.releaseYear}
-            ratings={title.ratings}
-          />
-        ))}
-      </ul>
-    </section>
-  );
-};
-export default MoreLikeThis;
--- a/src/components/title/Reviews.tsx
+++ b/src/components/title/Reviews.tsx
@ -1,82 +0,0 @@
-import { useRouter } from 'next/router';
-import Link from 'next/link';
-import { Reviews } from 'src/interfaces/shared/title';
-import { formatNumber } from 'src/utils/helpers';
-import styles from 'src/styles/modules/components/title/reviews.module.scss';
-
-type Props = {
-  reviews: Reviews;
-};
-
-const Reviews = ({ reviews }: Props) => {
-  const router = useRouter();
-  const { titleId } = router.query;
-
-  return (
-    <section className={styles.reviews}>
-      <h2 className="heading heading__secondary">Reviews</h2>
-
-      {reviews.featuredReview && (
-        <article className={styles.reviews__reviewContainer}>
-          <details className={styles.review}>
-            <summary className={styles.review__summary}>
-              <strong>{reviews.featuredReview.review.summary}</strong>
-            </summary>
-            <div
-              className={styles.review__text}
-              dangerouslySetInnerHTML={{
-                __html: reviews.featuredReview.review.html,
-              }}
-            ></div>
-          </details>
-          <footer className={styles.review__metadata}>
-            <p>
-              {reviews.featuredReview.rating && (
-                <span>Rated {reviews.featuredReview.rating}/10</span>
-              )}
-              <span>
-                {' '}
-                by{' '}
-                <Link href={`/user/${reviews.featuredReview.reviewer.id}`}>
-                  <a className="link">{reviews.featuredReview.reviewer.name}</a>
-                </Link>
-              </span>
-              <span> on {reviews.featuredReview.date}.</span>
-            </p>
-            <p>
-              <span>
-                {formatNumber(reviews.featuredReview.votes.up)} upvotes
-              </span>
-              <span>
-                , {formatNumber(reviews.featuredReview.votes.down)} downvotes
-              </span>
-            </p>
-          </footer>
-        </article>
-      )}
-
-      <div className={styles.reviews__stats}>
-        <p>
-          <Link href={`/title/${titleId}/reviews`}>
-            <a className="link">
-              {formatNumber(reviews.numUserReviews)} User reviews
-            </a>
-          </Link>
-        </p>
-        <p>
-          <Link href={`/title/${titleId}/externalreviews`}>
-            <a className="link">
-              {formatNumber(reviews.numCriticReviews)} Critic reviews
-            </a>
-          </Link>
-        </p>
-        <p>
-          <Link href={`/title/${titleId}/criticreviews`}>
-            <a className="link"> {reviews.metacriticScore} Metascore</a>
-          </Link>
-        </p>
-      </div>
-    </section>
-  );
-};
-export default Reviews;
--- a/src/components/title/index.ts
+++ b/src/components/title/index.ts
@ -1,6 +0,0 @@
-export { default as Basic } from './Basic';
-export { default as Cast } from './Cast';
-export { default as DidYouKnow } from './DidYouKnow';
-export { default as Info } from './Info';
-export { default as MoreLikeThis } from './MoreLikeThis';
-export { default as Reviews } from './Reviews';
--- a/src/context/theme-context.tsx
+++ b/src/context/theme-context.tsx
@ -1,58 +0,0 @@
-import React, { useState, createContext, ReactNode } from 'react';
-import { isLocalStorageAvailable } from 'src/utils/helpers';
-
-const getInitialTheme = () => {
-  // for server-side rendering, as window isn't availabe there
-  if (typeof window === 'undefined') return 'light';
-
-  const userPrefersTheme = (
-    isLocalStorageAvailable() ? window.localStorage.getItem('theme') : null
-  ) as 'light' | 'dark' | 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: ReturnType<typeof getInitialTheme>) => { },
-};
-
-export const themeContext = createContext(initialContext);
-
-const ThemeProvider = ({ children }: { children: ReactNode }) => {
-  const [curTheme, setCurTheme] = useState(getInitialTheme);
-
-  const setTheme = (theme: typeof curTheme) => {
-    setCurTheme(theme);
-    if (isLocalStorageAvailable()) 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;
--- a/src/hooks/usePageLoading.ts
+++ b/src/hooks/usePageLoading.ts
@ -1,31 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-
-/**
- * for showing progress bar. could've used nprogress package, but didn't feel like it
- * @returns isPageLoading: as the name suggests.
- * @returns key: a unique key(in reality, a part of url) telling whether the page has changed or not
- */
-const useIsPageLoading = () => {
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleStart = useCallback(() => setIsLoading(true), []);
-  const handleEnd = useCallback(() => setIsLoading(false), []);
-
-  useEffect(() => {
-    router.events.on('routeChangeStart', handleStart);
-    router.events.on('routeChangeComplete', handleEnd);
-    router.events.on('routeChangeError', handleEnd);
-
-    return () => {
-      router.events.off('routeChangeStart', handleStart);
-      router.events.off('routeChangeComplete', handleEnd);
-      router.events.off('routeChangeError', handleEnd);
-    };
-  }, [router, handleStart, handleEnd]);
-
-  return { isPageLoading: isLoading, key: router.asPath };
-};
-
-export default useIsPageLoading;
--- a/Show more
+++ b/Show more