From 013117507e2d6ce2ac09aa4497674145d21ec992 Mon Sep 17 00:00:00 2001
From: Kevin <Kevin.Midboe@gmail.com>
Date: Wed, 11 Mar 2026 00:14:49 +0100
Subject: [PATCH] Feat: Discover page (#108)

* Add discover page components with category showcase

* Add section page component for browsing discover categories

* Add icons for discover page categories (spotlights, theater, compass, calendar, star)

* Add discover icon (compass navigation) for main navigation

* Update navigation to use IconDiscover for discover route

* Add discover and section page routes with interfaces

* Update home page and components to integrate with discover navigation

* Remove deprecated ListPage component
---
 src/components/DiscoverMinimal.vue        | 277 ++++++++++++
 src/components/DiscoverShowcase.vue       | 360 +++++++++++++++
 src/components/PageHeader.vue             |  14 +-
 src/components/ResultsSection.vue         |   9 +-
 src/components/header/NavigationIcons.vue |  14 +-
 src/icons/IconCalendar.vue                |  16 +
 src/icons/IconCompass.vue                 |  13 +
 src/icons/IconDiscover.vue                |  19 +
 src/icons/IconSpotlights.vue              |   6 +
 src/icons/IconStar.vue                    |   7 +
 src/icons/IconTheater.vue                 |  10 +
 src/interfaces/ISection.ts                |   1 +
 src/pages/DiscoverPage.vue                | 514 ++++++++++++++++++++++
 src/pages/HomePage.vue                    |  56 +--
 src/pages/ListPage.vue                    |  30 --
 src/pages/SectionPage.vue                 |  40 ++
 src/routes.ts                             |  20 +-
 17 files changed, 1339 insertions(+), 67 deletions(-)
 create mode 100644 src/components/DiscoverMinimal.vue
 create mode 100644 src/components/DiscoverShowcase.vue
 create mode 100644 src/icons/IconCalendar.vue
 create mode 100644 src/icons/IconCompass.vue
 create mode 100644 src/icons/IconDiscover.vue
 create mode 100644 src/icons/IconSpotlights.vue
 create mode 100644 src/icons/IconStar.vue
 create mode 100644 src/icons/IconTheater.vue
 create mode 100644 src/pages/DiscoverPage.vue
 delete mode 100644 src/pages/ListPage.vue
 create mode 100644 src/pages/SectionPage.vue

diff --git a/src/components/DiscoverMinimal.vue b/src/components/DiscoverMinimal.vue
new file mode 100644
index 0000000..a2acf17
--- /dev/null
+++ b/src/components/DiscoverMinimal.vue
@@ -0,0 +1,277 @@
+<template>
+  <section class="discover-minimal">
+    <div class="discover-minimal-header">
+      <div class="header-content">
+        <h2 class="discover-title">Explore Collections</h2>
+        <p class="discover-description">
+          Curated selections organized by genre, mood, and decade
+        </p>
+      </div>
+      <router-link to="/discover" class="view-all-link">
+        <span class="desktop-only">View All Categories →</span>
+        <span class="mobile-only">View All →</span>
+      </router-link>
+    </div>
+
+    <DiscoverShowcase @select="navigateToDiscover" />
+
+    <div class="featured-collections-wrapper">
+      <div class="featured-collections-header">
+        <div class="header-decorator"></div>
+        <h3 class="featured-title">Featured Picks</h3>
+        <div class="header-decorator"></div>
+      </div>
+      <div class="featured-collections">
+        <ResultsSection
+          v-for="list in featuredLists"
+          :key="list.id"
+          :api-function="list.apiFunction"
+          :title="list.title"
+          :short-list="true"
+          section-type="discover"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { useRouter } from "vue-router";
+  import ResultsSection from "@/components/ResultsSection.vue";
+  import DiscoverShowcase from "@/components/DiscoverShowcase.vue";
+  import { getTmdbMovieDiscoverByName } from "../api";
+
+  const router = useRouter();
+
+  const featuredLists = [
+    {
+      id: "feel_good",
+      title: "Feel Good",
+      apiFunction: () => getTmdbMovieDiscoverByName("feel_good")
+    },
+    {
+      id: "2000s_classics",
+      title: "2000s Classics",
+      apiFunction: () => getTmdbMovieDiscoverByName("2000s_classics")
+    },
+    {
+      id: "horror_hits",
+      title: "Horror Hits",
+      apiFunction: () => getTmdbMovieDiscoverByName("horror_hits")
+    }
+  ];
+
+  function navigateToDiscover(categoryId?: string) {
+    router.push(`/discover${categoryId ? `?category=${categoryId}` : ""}`);
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .discover-minimal {
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.01) 0%,
+      rgba(255, 255, 255, 0.03) 50%,
+      rgba(255, 255, 255, 0.01) 100%
+    );
+    padding: 3rem 0;
+    position: relative;
+    margin: 2rem 0;
+    width: 100%;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 90%;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.2) 50%,
+        transparent 100%
+      );
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 90%;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.15) 50%,
+        transparent 100%
+      );
+    }
+
+    @include mobile {
+      padding: 1rem 0 0.5rem;
+      margin: 0;
+      background: transparent;
+
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .discover-minimal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 1.5rem 2rem;
+    gap: 1rem;
+
+    @include mobile {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 1rem 0.6rem;
+      gap: 0.75rem;
+    }
+
+    .header-content {
+      flex: 1;
+
+      @include mobile {
+        min-width: 0;
+      }
+    }
+
+    .discover-title {
+      margin: 0 0 0.5rem;
+      font-size: 2rem;
+      font-weight: 600;
+      color: var(--text-color);
+      letter-spacing: -0.5px;
+
+      @include mobile {
+        font-size: 1.75rem;
+        margin: 0 0 0.15rem;
+        font-weight: 600;
+      }
+    }
+
+    .discover-description {
+      margin: 0;
+      font-size: 0.95rem;
+      color: $text-color-70;
+      font-weight: 300;
+
+      @include mobile {
+        display: none;
+      }
+    }
+
+    .view-all-link {
+      padding: 0.75rem 1.5rem;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 25px;
+      color: $text-color-70;
+      font-size: 0.9rem;
+      font-weight: 400;
+      text-decoration: none;
+      transition: all 0.3s ease;
+      white-space: nowrap;
+
+      @include mobile {
+        padding: 0.45rem 0.85rem;
+        font-size: 0.75rem;
+        border-radius: 20px;
+        flex-shrink: 0;
+      }
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.08);
+        border-color: rgba(255, 255, 255, 0.2);
+        color: var(--text-color);
+        transform: translateX(2px);
+      }
+    }
+  }
+
+  .featured-collections-wrapper {
+    padding-top: 2rem;
+    position: relative;
+
+    @include mobile {
+      margin-top: 0;
+      padding-top: 0.5rem;
+    }
+  }
+
+  .featured-collections-header {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 0 1.5rem 1.5rem;
+    max-width: 1400px;
+    margin: 0 auto;
+
+    @include mobile {
+      padding: 0 1rem 0.4rem;
+      gap: 0.4rem;
+    }
+
+    .header-decorator {
+      flex: 1;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.3) 50%,
+        rgba(255, 255, 255, 0.3) 100%
+      );
+
+      &:last-child {
+        background: linear-gradient(
+          90deg,
+          rgba(255, 255, 255, 0.3) 0%,
+          rgba(255, 255, 255, 0.3) 50%,
+          transparent 100%
+        );
+      }
+    }
+
+    .featured-title {
+      margin: 0;
+      font-size: 1.4rem;
+      font-weight: 500;
+      color: var(--text-color);
+      letter-spacing: 0.5px;
+      white-space: nowrap;
+      text-transform: uppercase;
+      font-size: 0.9rem;
+      color: $text-color-70;
+
+      @include mobile {
+        font-size: 0.8rem;
+      }
+    }
+  }
+
+  .featured-collections {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 20px;
+    max-width: calc(100% - 4rem);
+    margin: 0 auto;
+
+    @include mobile {
+      border-radius: 12px;
+      padding: 0.25rem 0;
+      max-width: calc(100% - 2rem);
+    }
+  }
+</style>
diff --git a/src/components/DiscoverShowcase.vue b/src/components/DiscoverShowcase.vue
new file mode 100644
index 0000000..1a35122
--- /dev/null
+++ b/src/components/DiscoverShowcase.vue
@@ -0,0 +1,360 @@
+<template>
+  <div class="category-showcase">
+    <div class="categories-grid">
+      <button
+        v-for="category in categories"
+        :key="category.id"
+        class="category-card"
+        :class="[
+          `category-${category.id}`,
+          { active: activeCategory === category.id }
+        ]"
+        @click="$emit('select', category.id)"
+      >
+        <component :is="category.icon" class="category-icon" />
+        <div class="category-info">
+          <h3 class="category-name">{{ category.label }}</h3>
+          <p class="category-count">
+            <span class="desktop-only">{{ category.count }} collections</span>
+            <span class="mobile-only">{{ category.count }}</span>
+          </p>
+        </div>
+        <div class="category-arrow">→</div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useRouter } from "vue-router";
+  import IconPopular from "@/icons/IconPopular.vue";
+  import IconSpotlights from "@/icons/IconSpotlights.vue";
+  import IconTheater from "@/icons/IconTheater.vue";
+  import IconCalendar from "@/icons/IconCalendar.vue";
+  import IconStar from "@/icons/IconStar.vue";
+
+  interface Props {
+    activeCategory?: string;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    activeCategory: ""
+  });
+
+  defineEmits<{
+    select: [categoryId: string];
+  }>();
+
+  const router = useRouter();
+
+  const categories = [
+    { id: "popular", label: "Popular", icon: IconPopular, count: 5 },
+    { id: "genres", label: "Genres", icon: IconSpotlights, count: 13 },
+    { id: "moods", label: "Moods & Themes", icon: IconTheater, count: 7 },
+    { id: "decades", label: "By Decade", icon: IconCalendar, count: 4 },
+    { id: "special", label: "Special Collections", icon: IconStar, count: 11 }
+  ];
+
+  function navigateToDiscover(categoryId?: string) {
+    router.push(`/discover${categoryId ? `?category=${categoryId}` : ""}`);
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .category-showcase {
+    padding: 1.5rem;
+    padding-top: 0;
+
+    @include mobile {
+      padding: 0 1rem 0.6rem;
+    }
+  }
+
+  .categories-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    justify-content: center;
+
+    @include mobile {
+      gap: 0.45rem;
+    }
+  }
+
+  .category-card {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.9rem;
+    padding: 1rem 1.5rem;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+
+    @include mobile {
+      padding: 0.45rem 0.7rem;
+      gap: 0.4rem;
+      border-radius: 20px;
+    }
+
+    &.category-popular {
+      background: rgba(255, 80, 80, 0.15);
+      border-color: rgba(255, 80, 80, 0.3);
+
+      .category-icon {
+        fill: rgba(255, 120, 120, 0.9);
+      }
+    }
+
+    &.category-genres {
+      background: rgba(80, 140, 255, 0.15);
+      border-color: rgba(80, 140, 255, 0.3);
+
+      .category-icon {
+        fill: rgba(120, 170, 255, 0.9);
+      }
+    }
+
+    &.category-moods {
+      background: rgba(160, 80, 255, 0.15);
+      border-color: rgba(160, 80, 255, 0.3);
+
+      .category-icon {
+        fill: rgba(180, 120, 255, 0.9);
+      }
+    }
+
+    &.category-decades {
+      background: rgba(80, 200, 200, 0.15);
+      border-color: rgba(80, 200, 200, 0.3);
+
+      .category-icon {
+        fill: rgba(100, 220, 220, 0.9);
+      }
+    }
+
+    &.category-special {
+      background: rgba(255, 180, 80, 0.15);
+      border-color: rgba(255, 180, 80, 0.3);
+
+      .category-icon {
+        fill: rgba(255, 200, 120, 0.9);
+      }
+    }
+
+    &.active {
+      transform: translateY(-3px) scale(1.03);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+
+      &::before {
+        opacity: 1;
+      }
+
+      .category-icon {
+        transform: rotate(5deg) scale(1.15);
+      }
+
+      .category-arrow {
+        opacity: 1;
+        transform: translateX(4px);
+      }
+
+      &.category-popular {
+        background: rgba(255, 80, 80, 0.3);
+        border-color: rgba(255, 80, 80, 0.6);
+
+        .category-icon {
+          fill: rgba(255, 160, 160, 1);
+        }
+      }
+
+      &.category-genres {
+        background: rgba(80, 140, 255, 0.3);
+        border-color: rgba(80, 140, 255, 0.6);
+
+        .category-icon {
+          fill: rgba(160, 210, 255, 1);
+        }
+      }
+
+      &.category-moods {
+        background: rgba(160, 80, 255, 0.3);
+        border-color: rgba(160, 80, 255, 0.6);
+
+        .category-icon {
+          fill: rgba(220, 160, 255, 1);
+        }
+      }
+
+      &.category-decades {
+        background: rgba(80, 200, 200, 0.3);
+        border-color: rgba(80, 200, 200, 0.6);
+
+        .category-icon {
+          fill: rgba(140, 255, 255, 1);
+        }
+      }
+
+      &.category-special {
+        background: rgba(255, 180, 80, 0.3);
+        border-color: rgba(255, 180, 80, 0.6);
+
+        .category-icon {
+          fill: rgba(255, 230, 160, 1);
+        }
+      }
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.15) 0%,
+        transparent 100%
+      );
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    &:hover {
+      transform: translateY(-3px) scale(1.03);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+
+      &.category-popular {
+        background: rgba(255, 80, 80, 0.25);
+        border-color: rgba(255, 80, 80, 0.5);
+
+        .category-icon {
+          fill: rgba(255, 140, 140, 1);
+        }
+      }
+
+      &.category-genres {
+        background: rgba(80, 140, 255, 0.25);
+        border-color: rgba(80, 140, 255, 0.5);
+
+        .category-icon {
+          fill: rgba(140, 190, 255, 1);
+        }
+      }
+
+      &.category-moods {
+        background: rgba(160, 80, 255, 0.25);
+        border-color: rgba(160, 80, 255, 0.5);
+
+        .category-icon {
+          fill: rgba(200, 140, 255, 1);
+        }
+      }
+
+      &.category-decades {
+        background: rgba(80, 200, 200, 0.25);
+        border-color: rgba(80, 200, 200, 0.5);
+
+        .category-icon {
+          fill: rgba(120, 240, 240, 1);
+        }
+      }
+
+      &.category-special {
+        background: rgba(255, 180, 80, 0.25);
+        border-color: rgba(255, 180, 80, 0.5);
+
+        .category-icon {
+          fill: rgba(255, 220, 140, 1);
+        }
+      }
+
+      &::before {
+        opacity: 1;
+      }
+
+      .category-icon {
+        transform: rotate(5deg) scale(1.15);
+      }
+
+      .category-arrow {
+        opacity: 1;
+        transform: translateX(4px);
+      }
+    }
+
+    .category-icon {
+      width: 24px;
+      height: 24px;
+      fill: var(--text-color);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      flex-shrink: 0;
+
+      @include mobile {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    .category-info {
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+      line-height: 1;
+
+      @include mobile {
+        gap: 0.4rem;
+      }
+    }
+
+    .category-name {
+      margin: 0;
+      font-size: 0.95rem;
+      font-weight: 500;
+      color: white;
+      white-space: nowrap;
+
+      @include mobile {
+        font-size: 0.8rem;
+      }
+    }
+
+    .category-count {
+      margin: 0;
+      font-size: 0.8rem;
+      color: rgba(255, 255, 255, 0.8);
+      font-weight: 500;
+      background: rgba(255, 255, 255, 0.1);
+      padding: 0.2rem 0.6rem;
+      border-radius: 12px;
+      white-space: nowrap;
+
+      @include mobile {
+        font-size: 0.65rem;
+        padding: 0.15rem 0.4rem;
+      }
+    }
+
+    .category-arrow {
+      font-size: 1.1rem;
+      color: white;
+      opacity: 0;
+      transition: all 0.3s ease;
+      margin-left: 0.25rem;
+
+      @include mobile {
+        display: none;
+      }
+    }
+  }
+</style>
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 94280af..fb7b648 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -31,12 +31,22 @@
     info?: string | Array<string>;
     link?: string;
     shortList?: boolean;
+    sectionType?: "list" | "discover";
   }
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    sectionType: "list"
+  });
 
   const urlify = computed(() => {
-    return `/list/${props.title.toLowerCase().replace(" ", "_")}`;
+    const normalizedTitle = props.title
+      .toLowerCase()
+      .replace(/'s\b/g, "") // Remove possessive 's
+      .replace(/[^\w\d\s-]/g, "") // Remove special characters (keep word chars, dashes, digits, spaces)
+      .replace(/\s+/g, "_") // Replace spaces with underscores
+      .replace(/-/g, "_") // Replace dash with underscore
+      .replace(/_+/g, "_"); // Replace multiple underscores with single underscore
+    return `/${props.sectionType}/${normalizedTitle}`;
   });
 
   const prettify = computed(() => {
diff --git a/src/components/ResultsSection.vue b/src/components/ResultsSection.vue
index 08c051c..84d695c 100644
--- a/src/components/ResultsSection.vue
+++ b/src/components/ResultsSection.vue
@@ -1,6 +1,8 @@
 <template>
   <div ref="resultSection" class="resultSection">
-    <page-header v-bind="{ title, info, shortList }" />
+    <page-header
+      v-bind="{ title, info, shortList, sectionType: props.sectionType }"
+    />
 
     <div
       v-if="!loadedPages.includes(1) && loading == false"
@@ -40,9 +42,12 @@
     title: string;
     apiFunction: (page: number) => Promise<IList>;
     shortList?: boolean;
+    sectionType?: "list" | "discover";
   }
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    sectionType: "list"
+  });
 
   const results: Ref<ListResults> = ref([]);
   const page: Ref<number> = ref(1);
diff --git a/src/components/header/NavigationIcons.vue b/src/components/header/NavigationIcons.vue
index c52ed77..234b3ec 100644
--- a/src/components/header/NavigationIcons.vue
+++ b/src/components/header/NavigationIcons.vue
@@ -15,13 +15,14 @@
   import { ref, watch } from "vue";
   import { useRoute } from "vue-router";
   import NavigationIcon from "@/components/header/NavigationIcon.vue";
-  import IconInbox from "@/icons/IconInbox.vue";
+  import IconMailboxFull from "@/icons/IconMailboxFull.vue";
   import IconNowPlaying from "@/icons/IconNowPlaying.vue";
   import IconPopular from "@/icons/IconPopular.vue";
   import IconUpcoming from "@/icons/IconUpcoming.vue";
   import IconSettings from "@/icons/IconSettings.vue";
   import IconActivity from "@/icons/IconActivity.vue";
-  import IconBinoculars from "@/icons/IconBinoculars.vue";
+  import IconHelm from "@/icons/IconHelm.vue";
+  import IconDiscover from "@/icons/IconDiscover.vue";
   import type INavigationIcon from "../../interfaces/INavigationIcon";
 
   const route = useRoute();
@@ -30,13 +31,18 @@
     {
       title: "Requests",
       route: "/list/requests",
-      icon: IconInbox
+      icon: IconMailboxFull
     },
     {
       title: "Now Playing",
       route: "/list/now_playing",
       icon: IconNowPlaying
     },
+    {
+      title: "Discover",
+      route: "/discover",
+      icon: IconDiscover
+    },
     {
       title: "Popular",
       route: "/list/popular",
@@ -58,7 +64,7 @@
       title: "Torrents",
       route: "/torrents",
       requiresAuth: true,
-      icon: IconBinoculars
+      icon: IconHelm
     },
     {
       title: "Settings",
diff --git a/src/icons/IconCalendar.vue b/src/icons/IconCalendar.vue
new file mode 100644
index 0000000..db75336
--- /dev/null
+++ b/src/icons/IconCalendar.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 768">
+    <path d="M0 32h160v64h-160v-64z" />
+    <path d="M288 32h192v64h-192v-64z" />
+    <path d="M608 32h160v64h-160v-64z" />
+    <path d="M192 0h64v224h-64v-224z" />
+    <path d="M512 0h64v224h-64v-224z" />
+    <path d="M288 128h192v64h-192v-64z" />
+    <path
+      d="M704 128h-96v64h96v512h-640v-512h96v-64h-96c-35.3 0-64 28.7-64 64v512c0 35.3 28.7 64 64 64h640c35.3 0 64-28.7 64-64v-512c0-35.3-28.7-64-64-64z"
+    />
+    <path
+      d="M128 304v320c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-320c0-8.8-7.2-16-16-16h-480c-8.8 0-16 7.2-16 16zM160 480h128v128h-128v-128zM448 480v128h-128v-128h128zM320 448v-128h128v128h-128zM480 608v-128h128v128h-128zM608 448h-128v-128h128v128zM288 320v128h-128v-128h128z"
+    />
+  </svg>
+</template>
diff --git a/src/icons/IconCompass.vue b/src/icons/IconCompass.vue
new file mode 100644
index 0000000..933c048
--- /dev/null
+++ b/src/icons/IconCompass.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 768">
+    <path
+      d="M737.8 234.5c-19.3-45.7-47-86.8-82.3-122-35.3-35.3-76.3-62.9-122-82.3-47.4-20-97.7-30.2-149.5-30.2s-102.1 10.2-149.5 30.2c-45.7 19.3-86.8 47-122 82.3-35.3 35.3-62.9 76.3-82.3 122-20 47.4-30.2 97.7-30.2 149.5s10.2 102.1 30.2 149.5c19.3 45.7 47 86.8 82.3 122 35.3 35.3 76.3 62.9 122 82.3 47.4 20 97.7 30.2 149.5 30.2s102.1-10.2 149.5-30.2c45.7-19.3 86.8-47 122-82.3 35.3-35.3 62.9-76.3 82.3-122 20-47.4 30.2-97.7 30.2-149.5s-10.2-102.1-30.2-149.5zM384 704c-176.4 0-320-143.6-320-320s143.6-320 320-320c176.4 0 320 143.6 320 320s-143.6 320-320 320z"
+    />
+    <path
+      d="M384 96c-76.9 0-149.3 30-203.6 84.4s-84.4 126.7-84.4 203.6 30 149.3 84.4 203.6c54.3 54.4 126.7 84.4 203.6 84.4s149.3-30 203.6-84.4c54.4-54.3 84.4-126.7 84.4-203.6s-30-149.3-84.4-203.6c-54.3-54.4-126.7-84.4-203.6-84.4zM384 640c-141.2 0-256-114.8-256-256s114.8-256 256-256c141.2 0 256 114.8 256 256s-114.8 256-256 256z"
+    />
+    <path
+      d="M520.8 225.7l-192 96c-3.1 1.5-5.6 4.1-7.2 7.2l-96 192c-3.1 6.2-1.9 13.6 3 18.5 3.1 3.1 7.2 4.7 11.3 4.7 2.4 0 4.9-0.6 7.2-1.7l192-96c3.1-1.5 5.6-4.1 7.2-7.2l96-192c3.1-6.2 1.9-13.6-3-18.5s-12.3-6.1-18.5-3zM340.4 363l64.6 64.6-129.2 64.6 64.6-129.2zM427.6 405l-64.6-64.6 129.2-64.6-64.6 129.2z"
+    />
+  </svg>
+</template>
diff --git a/src/icons/IconDiscover.vue b/src/icons/IconDiscover.vue
new file mode 100644
index 0000000..24f2dbd
--- /dev/null
+++ b/src/icons/IconDiscover.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    width="100%"
+    height="100%"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M23.0562 7.3281C22.4531 5.9 21.5875 4.6156 20.4844 3.5156 19.3812 2.4125 18.1 1.55 16.6719 0.9438 15.1906 0.3187 13.6187 0 12 0S8.8094 0.3187 7.3281 0.9438C5.9 1.5469 4.6156 2.4125 3.5156 3.5156 2.4125 4.6188 1.55 5.9 0.9438 7.3281 0.3188 8.8094 0 10.3813 0 12s0.3188 3.1906 0.9438 4.6719c0.6031 1.4281 1.4687 2.7125 2.5718 3.8125C4.6188 21.5875 5.9 22.45 7.3281 23.0562 8.8094 23.6813 10.3813 24 12 24s3.1906-0.3187 4.6719-0.9438c1.4281-0.6031 2.7125-1.4687 3.8125-2.5718 1.1031-1.1032 1.9656-2.3844 2.5718-3.8125C23.6813 15.1906 24 13.6187 24 12s-0.3187-3.1906-0.9438-4.6719zM12 22C6.4875 22 2 17.5125 2 12S6.4875 2 12 2 22 6.4875 22 12 17.5125 22 12 22z"
+    />
+    <path
+      d="M12 3C9.5969 3 7.3344 3.9375 5.6375 5.6375S3 9.5969 3 12s0.9375 4.6656 2.6375 6.3625C7.3344 20.0625 9.5969 21 12 21s4.6656-0.9375 6.3625-2.6375C20.0625 16.6656 21 14.4031 21 12s-0.9375-4.6656-2.6375-6.3625C16.6656 3.9375 14.4031 3 12 3zM12 20c-4.4125 0-8-3.5875-8-8s3.5875-8 8-8 8 3.5875 8 8-3.5875 8-8 8z"
+    />
+    <path
+      d="M16.275 7.0531l-6 3c-0.0969 0.0469-0.175 0.1281-0.225 0.225l-3 6c-0.0969 0.1938-0.0594 0.425 0.0937 0.5782 0.0969 0.0968 0.2251 0.1468 0.3532 0.1468 0.075 0 0.1531-0.0187 0.225-0.0531l6-3c0.0969-0.0469 0.175-0.1281 0.225-0.225l3-6c0.0969-0.1938 0.0594-0.425-0.0938-0.5781C16.7 6.9937 16.4688 6.9563 16.275 7.0531zM10.6375 11.3438l2.0188 2.0187-4.0376 2.0187zM13.3625 12.6563l-2.0187-2.0188 4.0375-2.0187z"
+    />
+  </svg>
+</template>
diff --git a/src/icons/IconSpotlights.vue b/src/icons/IconSpotlights.vue
new file mode 100644
index 0000000..2c59b66
--- /dev/null
+++ b/src/icons/IconSpotlights.vue
@@ -0,0 +1,6 @@
+<template>
+<!-- generated by icomoon.io - licensed Lindua icon -->
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
+    <path d="M23.4406 17.9219c-0.1812-0.2375-0.4-0.4563-0.6562-0.6563l-7.2781-6.1562 4.4031-9.6969c0.2031-0.4437 0.0531-0.9687-0.35-1.2437-0.4031-0.2719-0.9469-0.2157-1.2844 0.1375l-6.9375 7.275-8.6906-7.3438c-0.3781-0.3187-0.9313-0.3156-1.3031 94e-4-0.3719 0.325-0.4532 0.8719-0.1875 1.2906l6.3718 10.0469-6.6874 7.0125c-0.1032 0.1031-0.1969 0.2125-0.2844 0.325C0.1938 19.4 0 19.9469 0 20.5c0 0.5532 0.1938 1.1 0.5594 1.5781 0.3094 0.4094 0.7407 0.7657 1.275 1.0625C2.8282 23.6938 4.1313 24 5.5001 24c1.3687 0 2.6718-0.3062 3.6687-0.8594 0.5344-0.2968 0.9625-0.6562 1.275-1.0625 0.1281-0.1687 0.2375-0.3499 0.3219-0.5343v0l1.2843-2.8282 1.3063 2.0625c0.0593 0.1032 0.1281 0.2032 0.2 0.3 0.3093 0.4094 0.7406 0.7657 1.275 1.0625C15.8281 22.6938 17.1313 23 18.5 23c1.3688 0 2.6719-0.3062 3.6688-0.8594 0.5343-0.2969 0.9625-0.6562 1.275-1.0625 0.3656-0.4781 0.5593-1.025 0.5593-1.5781s-0.1968-1.1-0.5625-1.5781zM9.9844 18.4313C9.75 18.2219 9.475 18.0312 9.1688 17.8594 8.1719 17.3063 6.8688 17 5.5 17c-0.1281 0-0.2562 31e-4-0.3812 94e-4l3.5125-3.6844 2.1406 3.375zM11.2656 15.6125 9.3438 12.5813l2.8343-2.975 1.3125 1.1093zM13.9188 9.7688l-1.05-0.8876 2.775-2.9125zM6.3438 5.9812 9.9562 9.0375 8.95 10.0938zM5.5 22C3.3969 22 2 21.0969 2 20.5c0-0.1375 0.075-0.2906 0.2125-0.4469v0l0.0719-0.075C2.7938 19.4844 3.9563 19 5.5 19 7.6031 19 9 19.9031 9 20.5c0 0.0594-0.0125 0.1188-0.0406 0.1813l-0.0156 0.0375C8.6656 21.2937 7.3594 22 5.5 22zM14.6469 13.0031 18.2 16.0062c-1.2563 0.0407-2.4438 0.3407-3.3656 0.8532-0.4282 0.2375-0.7875 0.5125-1.0719 0.8219l-0.7219-1.1375zM18.5 21c-1.7094 0-2.9531-0.5969-3.3594-1.1406l-0.0781-0.1219c-0.0437-0.0813-0.0656-0.1625-0.0656-0.2375 0-0.5969 1.3969-1.5 3.5-1.5s3.5 0.9031 3.5 1.5S20.6031 21 18.5 21z" />
+</svg>
+</template>
\ No newline at end of file
diff --git a/src/icons/IconStar.vue b/src/icons/IconStar.vue
new file mode 100644
index 0000000..d8d9dc8
--- /dev/null
+++ b/src/icons/IconStar.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 768">
+    <path
+      d="M767 312c-3.1-12-12.8-21.1-25-23.4l-231.1-44.3-97.5-225c-5.1-11.7-16.6-19.3-29.4-19.3s-24.3 7.6-29.4 19.3l-97.5 225-231.1 44.3c-12.2 2.3-21.9 11.4-25 23.4s1 24.7 10.5 32.6l176.6 147.1-59.1 236.5c-3.1 12.4 1.5 25.5 11.7 33.3 10.2 7.7 24.1 8.6 35.2 2.3l208.1-118.9 208.1 118.9c4.9 2.8 10.4 4.2 15.9 4.2 6.8 0 13.6-2.2 19.3-6.5 10.2-7.7 14.8-20.8 11.7-33.3l-59.1-236.5 176.6-147.1c9.5-7.9 13.6-20.6 10.5-32.6zM523.5 455.4c-9.4 7.9-13.5 20.4-10.6 32.3l45.9 183.3-158.9-90.8c-4.9-2.8-10.4-4.2-15.9-4.2s-11 1.4-15.9 4.2l-158.9 90.8 45.8-183.2c3-11.9-1.1-24.5-10.6-32.3l-140-116.8 181.3-34.8c10.4-2 19.1-9 23.3-18.7l75-172.7 74.9 172.8c4.2 9.7 12.9 16.7 23.3 18.7l181.3 34.8-140 116.6z"
+    />
+  </svg>
+</template>
diff --git a/src/icons/IconTheater.vue b/src/icons/IconTheater.vue
new file mode 100644
index 0000000..9694b14
--- /dev/null
+++ b/src/icons/IconTheater.vue
@@ -0,0 +1,10 @@
+<template>
+<!-- generated by icomoon.io - licensed Lindua icon -->
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
+    <path d="M22.6031 5.2031c-0.25-0.1875-0.575-0.25-0.8781-0.1625-2.8625 0.8188-5.3187 1.1125-7.8875 0.8875 0.0969-1.0625 0.15-2.2062 0.1625-3.4187 31e-4-0.1625-0.075-0.3156-0.2063-0.4094-0.1312-0.0937-0.3-0.1219-0.4531-0.0687-3.875 1.2906-7.8062 1.2906-11.6843 0-0.1532-0.05-0.3219-0.025-0.4532 0.0687C1.0719 2.1937 0.9969 2.3438 1 2.5062c0.0469 4.4063 0.6375 7.8 1.7594 10.0875 0.5594 1.1407 1.2531 2.0094 2.0625 2.5782C5.6031 15.7219 6.5063 16 7.5 16c0.5313 0 1.0375-0.0813 1.5125-0.2375 0.2344 0.8531 0.5125 1.6156 0.8344 2.2906 0.6219 1.3156 1.425 2.3156 2.3844 2.975C13.1719 21.6719 14.2719 22 15.5 22s2.3281-0.3281 3.2688-0.9719c0.9593-0.6594 1.7625-1.6594 2.3843-2.975C22.3969 15.4312 23 11.4875 23 6c0-0.3125-0.1469-0.6094-0.3969-0.7969zM7.5 15c-0.7844 0-1.4937-0.2187-2.1031-0.6469-0.6719-0.4718-1.2563-1.2125-1.7406-2.2-0.9969-2.0344-1.5469-5.0468-1.6438-8.9656C3.8375 3.725 5.6781 4 7.5 4s3.6625-0.275 5.4875-0.8156c-0.0219 0.9219-0.0719 1.8-0.1437 2.625-1.1407-0.1563-2.3157-0.4156-3.5688-0.7719C8.9719 4.95 8.65 5.0125 8.3969 5.2 8.1469 5.3875 8 5.6844 8 5.9969 8 7.4656 8.0438 8.825 8.1312 10.0781 7.9313 10.025 7.7187 9.9969 7.5 9.9969c-1.3781 0-2.5 1.1219-2.5 2.5 0 0.275 0.225 0.5 0.5 0.5h2.9406c0.0938 0.6312 0.2032 1.225 0.3281 1.7875C8.375 14.9281 7.95 15 7.5 15zM8.3094 12H6.0875c0.2062-0.5812 0.7625-1 1.4156-1 0.2625 0 0.5063 0.0687 0.7219 0.1844 0.0219 0.2781 0.0531 0.55 0.0844 0.8156zM19.3469 17.1969C18.4406 19.1094 17.2188 20 15.5 20c-1.7187 0-2.9406-0.8906-3.8469-2.8031-1.0031-2.1157-1.5531-5.4407-1.6406-9.8938C11.9656 7.775 13.7375 8 15.5 8s3.5344-0.225 5.4875-0.6969c-0.0875 4.4532-0.6406 7.7782-1.6406 9.8938z" />
+    <path d="M17.5 15h-4c-0.275 0-0.5 0.225-0.5 0.5 0 1.3781 1.1219 2.5 2.5 2.5s2.5-1.1219 2.5-2.5c0-0.275-0.225-0.5-0.5-0.5zM15.5 17c-0.6531 0-1.2094-0.4188-1.4156-1h2.8281c-0.2031 0.5812-0.7594 1-1.4125 1z" />
+    <path d="M14.5 12.2062 15.2063 11.5l-1.3532-1.3531c-0.1937-0.1938-0.5125-0.1938-0.7062 0L11.7938 11.5 12.5 12.2062l1-1z" />
+    <path d="M17.5 11.2062l1 1 0.7063-0.7062-1.3532-1.3531c-0.1937-0.1938-0.5125-0.1938-0.7062 0L15.7938 11.5 16.5 12.2062z" />
+    <path d="M5.5 8c0.1281 0 0.2563-0.05 0.3531-0.1469L7.2063 6.5 6.5 5.7938l-1 1-1-1L3.7938 6.5 5.1469 7.8531C5.2437 7.95 5.3719 8 5.5 8z" />
+</svg>
+</template>
\ No newline at end of file
diff --git a/src/interfaces/ISection.ts b/src/interfaces/ISection.ts
index 6196636..b2b197f 100644
--- a/src/interfaces/ISection.ts
+++ b/src/interfaces/ISection.ts
@@ -3,4 +3,5 @@ import type { IList } from "./IList";
 export default interface ISection {
   title: string;
   apiFunction: (page: number) => Promise<IList>;
+  sectionType?: "list" | "discover";
 }
diff --git a/src/pages/DiscoverPage.vue b/src/pages/DiscoverPage.vue
new file mode 100644
index 0000000..c27476b
--- /dev/null
+++ b/src/pages/DiscoverPage.vue
@@ -0,0 +1,514 @@
+<template>
+  <section class="discover-page">
+    <div class="hero-section">
+      <div class="hero-collage">
+        <div
+          v-for="(poster, index) in heroPosters"
+          :key="index"
+          class="poster-tile"
+          :style="{ backgroundImage: `url(${poster})` }"
+        ></div>
+      </div>
+      <div class="hero-overlay"></div>
+
+      <div class="hero-content-wrapper">
+        <div class="discover-header">
+          <h1>Discover Movies</h1>
+          <p class="discover-subtitle">
+            Explore curated collections across genres, eras, and moods
+          </p>
+        </div>
+
+        <DiscoverShowcase
+          :active-category="activeCategory"
+          @select="updateCategory"
+        />
+      </div>
+    </div>
+
+    <div class="discover-content">
+      <ResultsSection
+        v-for="list in activeLists"
+        :key="list.id"
+        :api-function="list.apiFunction"
+        :title="list.title"
+        :short-list="true"
+        section-type="discover"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted, watch } from "vue";
+  import { useRoute, useRouter } from "vue-router";
+  import ResultsSection from "@/components/ResultsSection.vue";
+  import DiscoverShowcase from "@/components/DiscoverShowcase.vue";
+  import { getTmdbMovieDiscoverByName } from "../api";
+  import type { Ref } from "vue";
+
+  interface DiscoverList {
+    id: string;
+    title: string;
+    apiFunction: (page: number) => Promise<any>;
+    category: string;
+  }
+
+  const route = useRoute();
+  const router = useRouter();
+  const activeCategory: Ref<string> = ref(
+    (route.query.category as string) || "popular"
+  );
+  const heroPosters: Ref<string[]> = ref([]);
+
+  // Update URL when category changes
+  function updateCategory(categoryId: string) {
+    activeCategory.value = categoryId;
+    router.push({ query: { category: categoryId } });
+  }
+
+  // Watch for query parameter changes (e.g., browser back/forward)
+  watch(
+    () => route.query.category,
+    newCategory => {
+      if (newCategory && newCategory !== activeCategory.value) {
+        activeCategory.value = newCategory as string;
+      }
+    }
+  );
+
+  // Fetch popular movies for hero collage
+  onMounted(async () => {
+    // Scroll to top when component mounts - Safari compatible
+    // Use requestAnimationFrame to ensure it runs after render
+    requestAnimationFrame(() => {
+      return;
+      window.scrollTo(0, 0);
+      // Also try scrolling the body element for Safari compatibility
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    });
+
+    try {
+      const response = await getTmdbMovieDiscoverByName("recent_releases");
+      const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500";
+
+      // Take first 12 movies and shuffle them for variety
+      const posters = response.results
+        .slice(0, 12)
+        .map((movie: any) =>
+          movie.poster ? IMAGE_BASE_URL + movie.poster : null
+        )
+        .filter((poster: string | null) => poster !== null);
+
+      heroPosters.value = posters;
+    } catch (error) {
+      console.error("Failed to load hero posters:", error);
+    }
+  });
+
+  const discoverLists: DiscoverList[] = [
+    // Popular
+    {
+      id: "popular_now",
+      title: "Popular Now",
+      apiFunction: () => getTmdbMovieDiscoverByName("popular_now"),
+      category: "popular"
+    },
+    {
+      id: "top_rated",
+      title: "Top Rated",
+      apiFunction: () => getTmdbMovieDiscoverByName("top_rated"),
+      category: "popular"
+    },
+    {
+      id: "critics_choice",
+      title: "Critics' Choice",
+      apiFunction: () => getTmdbMovieDiscoverByName("critics_choice"),
+      category: "popular"
+    },
+    {
+      id: "recent_releases",
+      title: "Recent Releases",
+      apiFunction: () => getTmdbMovieDiscoverByName("recent_releases"),
+      category: "popular"
+    },
+    {
+      id: "crowd_pleasers",
+      title: "Crowd Pleasers",
+      apiFunction: () => getTmdbMovieDiscoverByName("crowd_pleasers"),
+      category: "popular"
+    },
+
+    // Genres
+    {
+      id: "action_packed",
+      title: "Action Packed",
+      apiFunction: () => getTmdbMovieDiscoverByName("action_packed"),
+      category: "genres"
+    },
+    {
+      id: "sci_fi_wonders",
+      title: "Sci-Fi Wonders",
+      apiFunction: () => getTmdbMovieDiscoverByName("sci_fi_wonders"),
+      category: "genres"
+    },
+    {
+      id: "horror_hits",
+      title: "Horror Hits",
+      apiFunction: () => getTmdbMovieDiscoverByName("horror_hits"),
+      category: "genres"
+    },
+    {
+      id: "romantic_favorites",
+      title: "Romantic Favorites",
+      apiFunction: () => getTmdbMovieDiscoverByName("romantic_favorites"),
+      category: "genres"
+    },
+    {
+      id: "laugh_out_loud",
+      title: "Laugh Out Loud",
+      apiFunction: () => getTmdbMovieDiscoverByName("laugh_out_loud"),
+      category: "genres"
+    },
+    {
+      id: "animated_magic",
+      title: "Animated Magic",
+      apiFunction: () => getTmdbMovieDiscoverByName("animated_magic"),
+      category: "genres"
+    },
+    {
+      id: "fantasy_worlds",
+      title: "Fantasy Worlds",
+      apiFunction: () => getTmdbMovieDiscoverByName("fantasy_worlds"),
+      category: "genres"
+    },
+    {
+      id: "thriller_edge",
+      title: "Thriller's Edge",
+      apiFunction: () => getTmdbMovieDiscoverByName("thriller_edge"),
+      category: "genres"
+    },
+    {
+      id: "crime_dramas",
+      title: "Crime Dramas",
+      apiFunction: () => getTmdbMovieDiscoverByName("crime_dramas"),
+      category: "genres"
+    },
+    {
+      id: "westerns",
+      title: "Westerns",
+      apiFunction: () => getTmdbMovieDiscoverByName("westerns"),
+      category: "genres"
+    },
+    {
+      id: "war_epics",
+      title: "War Epics",
+      apiFunction: () => getTmdbMovieDiscoverByName("war_epics"),
+      category: "genres"
+    },
+    {
+      id: "dark_comedy",
+      title: "Dark Comedy",
+      apiFunction: () => getTmdbMovieDiscoverByName("dark_comedy"),
+      category: "genres"
+    },
+    {
+      id: "musical_magic",
+      title: "Musical Magic",
+      apiFunction: () => getTmdbMovieDiscoverByName("musical_magic"),
+      category: "genres"
+    },
+
+    // Moods & Themes
+    {
+      id: "feel_good",
+      title: "Feel Good",
+      apiFunction: () => getTmdbMovieDiscoverByName("feel_good"),
+      category: "moods"
+    },
+    {
+      id: "mind_benders",
+      title: "Mind Benders",
+      apiFunction: () => getTmdbMovieDiscoverByName("mind_benders"),
+      category: "moods"
+    },
+    {
+      id: "epic_movies",
+      title: "Epic Movies",
+      apiFunction: () => getTmdbMovieDiscoverByName("epic_movies"),
+      category: "moods"
+    },
+    {
+      id: "quick_picks",
+      title: "Quick Picks",
+      apiFunction: () => getTmdbMovieDiscoverByName("quick_picks"),
+      category: "moods"
+    },
+    {
+      id: "family_night",
+      title: "Family Night",
+      apiFunction: () => getTmdbMovieDiscoverByName("family_night"),
+      category: "moods"
+    },
+    {
+      id: "true_stories",
+      title: "True Stories",
+      apiFunction: () => getTmdbMovieDiscoverByName("true_stories"),
+      category: "moods"
+    },
+    {
+      id: "coming_of_age",
+      title: "Coming of Age",
+      apiFunction: () => getTmdbMovieDiscoverByName("coming_of_age"),
+      category: "moods"
+    },
+
+    // Decades
+    {
+      id: "golden_age",
+      title: "Golden Age",
+      apiFunction: () => getTmdbMovieDiscoverByName("golden_age"),
+      category: "decades"
+    },
+    {
+      id: "90s_nostalgia",
+      title: "90s Nostalgia",
+      apiFunction: () => getTmdbMovieDiscoverByName("90s_nostalgia"),
+      category: "decades"
+    },
+    {
+      id: "2000s_classics",
+      title: "2000s Classics",
+      apiFunction: () => getTmdbMovieDiscoverByName("2000s_classics"),
+      category: "decades"
+    },
+    {
+      id: "2010s_best",
+      title: "2010s Best",
+      apiFunction: () => getTmdbMovieDiscoverByName("2010s_best"),
+      category: "decades"
+    },
+
+    // Special Collections
+    {
+      id: "blockbusters",
+      title: "Blockbusters",
+      apiFunction: () => getTmdbMovieDiscoverByName("blockbusters"),
+      category: "special"
+    },
+    {
+      id: "hidden_gems",
+      title: "Hidden Gems",
+      apiFunction: () => getTmdbMovieDiscoverByName("hidden_gems"),
+      category: "special"
+    },
+    {
+      id: "modern_classics",
+      title: "Modern Classics",
+      apiFunction: () => getTmdbMovieDiscoverByName("modern_classics"),
+      category: "special"
+    },
+    {
+      id: "indie_darlings",
+      title: "Indie Darlings",
+      apiFunction: () => getTmdbMovieDiscoverByName("indie_darlings"),
+      category: "special"
+    },
+    {
+      id: "international_cinema",
+      title: "International Cinema",
+      apiFunction: () => getTmdbMovieDiscoverByName("international_cinema"),
+      category: "special"
+    },
+    {
+      id: "oscar_winners",
+      title: "Oscar Winners",
+      apiFunction: () => getTmdbMovieDiscoverByName("oscar_winners"),
+      category: "special"
+    },
+    {
+      id: "space_odyssey",
+      title: "Space Odyssey",
+      apiFunction: () => getTmdbMovieDiscoverByName("space_odyssey"),
+      category: "special"
+    },
+    {
+      id: "superhero_saga",
+      title: "Superhero Saga",
+      apiFunction: () => getTmdbMovieDiscoverByName("superhero_saga"),
+      category: "special"
+    },
+    {
+      id: "heist_films",
+      title: "Heist Films",
+      apiFunction: () => getTmdbMovieDiscoverByName("heist_films"),
+      category: "special"
+    },
+    {
+      id: "zombies_apocalypse",
+      title: "Zombies & Apocalypse",
+      apiFunction: () => getTmdbMovieDiscoverByName("zombies_apocalypse"),
+      category: "special"
+    },
+    {
+      id: "time_travel",
+      title: "Time Travel",
+      apiFunction: () => getTmdbMovieDiscoverByName("time_travel"),
+      category: "special"
+    }
+  ];
+
+  const activeLists = computed(() => {
+    return discoverLists.filter(list => list.category === activeCategory.value);
+  });
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .discover-page {
+    background-color: var(--background-color);
+    min-height: 100vh;
+  }
+
+  .hero-section {
+    position: relative;
+    overflow: hidden;
+    min-height: 400px;
+
+    @include mobile {
+      min-height: 350px;
+    }
+  }
+
+  .hero-content-wrapper {
+    position: relative;
+    z-index: 1;
+  }
+
+  .discover-header {
+    padding: 4rem 1.5rem 2rem;
+    text-align: center;
+
+    @include mobile {
+      padding: 3rem 1rem 1.5rem;
+    }
+
+    h1 {
+      margin: 0 0 0.5rem;
+      font-size: 3rem;
+      font-weight: 700;
+      color: #ffffff;
+      text-shadow:
+        0 3px 15px rgba(0, 0, 0, 0.8),
+        0 1px 3px rgba(0, 0, 0, 0.6);
+      letter-spacing: -0.5px;
+
+      @include mobile {
+        font-size: 2rem;
+      }
+    }
+
+    .discover-subtitle {
+      margin: 0;
+      font-size: 1.1rem;
+      color: rgba(255, 255, 255, 0.95);
+      font-weight: 300;
+      text-shadow:
+        0 2px 10px rgba(0, 0, 0, 0.8),
+        0 1px 3px rgba(0, 0, 0, 0.6);
+
+      @include mobile {
+        font-size: 0.95rem;
+      }
+    }
+  }
+
+  .hero-collage {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+    padding: 10px;
+    opacity: 0.4;
+    filter: blur(0px);
+
+    @include mobile {
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: repeat(3, 1fr);
+      gap: 8px;
+      padding: 8px;
+    }
+  }
+
+  .poster-tile {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 6px;
+    animation: fadeIn 0.8s ease-in-out;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+
+    &:nth-child(even) {
+      animation-delay: 0.1s;
+    }
+
+    &:nth-child(3n) {
+      animation-delay: 0.2s;
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .hero-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      135deg,
+      rgba(var(--background-color-rgb, 18, 18, 18), 0.6) 0%,
+      rgba(var(--background-color-rgb, 18, 18, 18), 0.7) 50%,
+      rgba(var(--background-color-rgb, 18, 18, 18), 0.6) 100%
+    );
+    backdrop-filter: blur(0px);
+  }
+
+  .discover-content {
+    padding: 0;
+    background-color: var(--background-color);
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.1) 50%,
+        transparent 100%
+      );
+    }
+  }
+</style>
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 45ec350..5a590ab 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -2,38 +2,40 @@
   <section>
     <LandingBanner />
 
-    <div v-for="list in lists" :key="list.title">
-      <ResultsSection
-        :api-function="list.apiFunction"
-        :title="list.title"
-        :short-list="true"
-      />
-    </div>
+    <ResultsSection
+      :api-function="getRequests"
+      title="Requests"
+      :short-list="true"
+    />
+
+    <ResultsSection
+      :api-function="() => getTmdbMovieListByName('now_playing')"
+      title="Now playing"
+      :short-list="true"
+      section-type="list"
+    />
+
+    <DiscoverMinimal />
+
+    <ResultsSection
+      :api-function="() => getTmdbMovieListByName('upcoming')"
+      title="Upcoming"
+      :short-list="true"
+      section-type="list"
+    />
+
+    <ResultsSection
+      :api-function="() => getTmdbMovieListByName('popular')"
+      title="Popular"
+      :short-list="true"
+      section-type="list"
+    />
   </section>
 </template>
 
 <script setup lang="ts">
   import LandingBanner from "@/components/LandingBanner.vue";
   import ResultsSection from "@/components/ResultsSection.vue";
+  import DiscoverMinimal from "@/components/DiscoverMinimal.vue";
   import { getRequests, getTmdbMovieListByName } from "../api";
-  import type ISection from "../interfaces/ISection";
-
-  const lists: ISection[] = [
-    {
-      title: "Requests",
-      apiFunction: getRequests
-    },
-    {
-      title: "Now playing",
-      apiFunction: () => getTmdbMovieListByName("now_playing")
-    },
-    {
-      title: "Upcoming",
-      apiFunction: () => getTmdbMovieListByName("upcoming")
-    },
-    {
-      title: "Popular",
-      apiFunction: () => getTmdbMovieListByName("popular")
-    }
-  ];
 </script>
diff --git a/src/pages/ListPage.vue b/src/pages/ListPage.vue
deleted file mode 100644
index 4c65e4a..0000000
--- a/src/pages/ListPage.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <ResultsSection :title="listName" :api-function="_getTmdbMovieListByName" />
-</template>
-
-<script setup lang="ts">
-  import { ref } from "vue";
-  import type { Ref } from "vue";
-  import { useRoute } from "vue-router";
-  import ResultsSection from "@/components/ResultsSection.vue";
-  import { getTmdbMovieListByName } from "../api";
-
-  const route = useRoute();
-  const listName: Ref<string | string[]> = ref(
-    route?.params?.name || "List page"
-  );
-
-  function _getTmdbMovieListByName(page: number) {
-    return getTmdbMovieListByName(listName.value?.toString(), page);
-  }
-</script>
-
-<style lang="scss" scoped>
-  .fullwidth-button {
-    width: 100%;
-    margin: 1rem 0;
-    padding-bottom: 2rem;
-    display: flex;
-    justify-content: center;
-  }
-</style>
diff --git a/src/pages/SectionPage.vue b/src/pages/SectionPage.vue
new file mode 100644
index 0000000..412a6c0
--- /dev/null
+++ b/src/pages/SectionPage.vue
@@ -0,0 +1,40 @@
+<template>
+  <ResultsSection :title="sectionName" :api-function="_getSectionData" />
+</template>
+
+<script setup lang="ts">
+  import { ref } from "vue";
+  import type { Ref } from "vue";
+  import { useRoute } from "vue-router";
+  import ResultsSection from "@/components/ResultsSection.vue";
+  import { getTmdbMovieListByName, getTmdbMovieDiscoverByName } from "../api";
+
+  const route = useRoute();
+  const sectionName: Ref<string | string[]> = ref(
+    route?.params?.name || "Section page"
+  );
+
+  // Determine if this is a discover section or a list based on the route path
+  const isDiscoverSection = route.path.startsWith("/discover/");
+
+  function _getSectionData(page: number) {
+    const name = sectionName.value?.toString();
+
+    // Use the appropriate API function based on the route type
+    if (isDiscoverSection) {
+      return getTmdbMovieDiscoverByName(name, page);
+    } else {
+      return getTmdbMovieListByName(name, page);
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .fullwidth-button {
+    width: 100%;
+    margin: 1rem 0;
+    padding-bottom: 2rem;
+    display: flex;
+    justify-content: center;
+  }
+</style>
diff --git a/src/routes.ts b/src/routes.ts
index 3bc48af..b636375 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -39,7 +39,17 @@ const routes: RouteRecordRaw[] = [
   {
     name: "list",
     path: "/list/:name",
-    component: () => import("./pages/ListPage.vue")
+    component: () => import("./pages/SectionPage.vue")
+  },
+  {
+    name: "discover-section",
+    path: "/discover/:name",
+    component: () => import("./pages/SectionPage.vue")
+  },
+  {
+    name: "discover",
+    path: "/discover",
+    component: () => import("./pages/DiscoverPage.vue")
   },
   {
     name: "search",
@@ -104,7 +114,13 @@ const router = createRouter({
   history: createWebHistory("/"),
   // base: "/",
   routes,
-  linkActiveClass: "is-active"
+  linkActiveClass: "is-active",
+  scrollBehavior(to, from, savedPosition) {
+    if (to.name !== "discover") return;
+
+    console.log("scrolling top");
+    return { top: 0 };
+  }
 });
 
 const loggedIn = () => store.getters["user/loggedIn"];