From d95b19a2de510923565fc1a4b705c7883f71a139 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Tue, 10 Mar 2026 23:49:49 +0100
Subject: [PATCH] Add discover page components with category showcase

---
 src/components/DiscoverMinimal.vue  | 277 +++++++++++++++
 src/components/DiscoverShowcase.vue | 360 +++++++++++++++++++
 src/pages/DiscoverPage.vue          | 514 ++++++++++++++++++++++++++++
 3 files changed, 1151 insertions(+)
 create mode 100644 src/components/DiscoverMinimal.vue
 create mode 100644 src/components/DiscoverShowcase.vue
 create mode 100644 src/pages/DiscoverPage.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/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>