indee-demo/src/views/Browse.vue

<template>
  <div class="browse-view">
    <!-- Header / Navigation -->
    <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
            :class="{ 
              'bg-white/10 dark:bg-black/20 backdrop-blur-xl shadow-2xl border-b border-white/10': scrolled, 
              'bg-transparent': !scrolled 
            }">
      <div class="container mx-auto px-8 py-4">
        <div class="flex items-center justify-between">
          <!-- Logo -->
          <div class="flex items-center gap-8">
            <img src="/assets/images/logo.svg" alt="IndeedHub" class="h-10" />
            
            <!-- Navigation -->
            <nav class="hidden md:flex items-center gap-6">
              <a href="#" class="text-white hover:text-white/80 transition-colors">Home</a>
              <a href="#" class="text-white/70 hover:text-white transition-colors">Films</a>
              <a href="#" class="text-white/70 hover:text-white transition-colors">Series</a>
              <a href="#" class="text-white/70 hover:text-white transition-colors">Creators</a>
              <a href="#" class="text-white/70 hover:text-white transition-colors">My List</a>
            </nav>
          </div>

          <!-- Right Side Actions -->
          <div class="flex items-center gap-4">
            <!-- Search -->
            <button class="p-2 hover:bg-white/10 rounded-lg transition-colors" @click="toggleSearch">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </button>

            <!-- User Avatar -->
            <div class="w-8 h-8 rounded bg-gradient-to-br from-orange-500 to-pink-500"></div>
          </div>
        </div>
      </div>
    </header>

    <!-- Hero / Featured Content -->
    <section class="relative h-[60vh] md:h-[65vh] overflow-hidden">
      <!-- Background Image -->
      <div class="absolute inset-0">
        <img 
          :src="featuredContent?.backdrop || 'https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=1920'"
          alt="Featured content"
          class="w-full h-full object-cover"
        />
        <div class="absolute inset-0 hero-gradient"></div>
      </div>

      <!-- Hero Content -->
      <div class="relative mx-auto px-8 h-full flex items-end pb-16 md:pb-20" style="max-width: 75%;">
        <div class="max-w-2xl space-y-2.5 md:space-y-3 animate-fade-in">
          <!-- Title -->
          <h1 class="text-3xl md:text-5xl lg:text-6xl font-bold drop-shadow-2xl leading-tight">
            {{ featuredContent?.title || 'Welcome to IndeedHub' }}
          </h1>

          <!-- Description -->
          <p class="text-sm md:text-base lg:text-lg text-white/90 drop-shadow-lg line-clamp-2 md:line-clamp-3">
            {{ featuredContent?.description || 'Discover decentralized content from independent creators and filmmakers around the world.' }}
          </p>

          <!-- Meta Info -->
          <div v-if="featuredContent" class="flex items-center gap-2.5 text-xs md:text-sm text-white/80">
            <span v-if="featuredContent.rating" class="bg-white/20 px-2.5 py-0.5 rounded">{{ featuredContent.rating }}</span>
            <span v-if="featuredContent.releaseYear">{{ featuredContent.releaseYear }}</span>
            <span v-if="featuredContent.duration">{{ featuredContent.duration }}min</span>
            <span v-else>{{ featuredContent.type === 'film' ? 'Film' : 'Series' }}</span>
          </div>

          <!-- Action Buttons -->
          <div class="flex items-center gap-2.5 md:gap-3 pt-1.5 md:pt-2">
            <button class="px-5 md:px-7 py-2 md:py-2.5 bg-white text-black font-semibold rounded-md hover:bg-white/90 transition-all flex items-center gap-2 shadow-xl text-xs md:text-sm">
              <svg class="w-4 h-4 md:w-5 md:h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z"/>
              </svg>
              Play
            </button>
            <button class="px-5 md:px-7 py-2 md:py-2.5 bg-white/20 text-white font-semibold rounded-md hover:bg-white/30 transition-all backdrop-blur-md flex items-center gap-2 text-xs md:text-sm">
              <svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              More Info
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Content Rows -->
    <section class="relative pt-8 pb-20">
      <div class="mx-auto space-y-12" style="max-width: 75%;">

        <!-- Featured Films -->
        <ContentRow 
          title="Featured Films" 
          :contents="featuredFilms"
          @content-click="handleContentClick"
        />

        <!-- New Releases -->
        <ContentRow 
          title="New Releases" 
          :contents="newReleases"
          @content-click="handleContentClick"
        />

        <!-- Bitcoin & Crypto -->
        <ContentRow 
          title="Bitcoin & Cryptocurrency" 
          :contents="bitcoinFilms"
          @content-click="handleContentClick"
        />

        <!-- Documentaries -->
        <ContentRow 
          title="Documentaries" 
          :contents="documentaries"
          @content-click="handleContentClick"
        />

        <!-- Independent Cinema -->
        <ContentRow 
          title="Independent Cinema" 
          :contents="independentCinema"
          @content-click="handleContentClick"
        />

        <!-- Dramas -->
        <ContentRow 
          title="Drama Films" 
          :contents="dramas"
          @content-click="handleContentClick"
        />
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import ContentRow from '../components/ContentRow.vue'
import { useContentStore } from '../stores/content'
import type { Content } from '../types/content'

const contentStore = useContentStore()
const scrolled = ref(false)

const featuredContent = computed(() => contentStore.featuredContent)
const featuredFilms = computed(() => contentStore.contentRows.featured)
const newReleases = computed(() => contentStore.contentRows.newReleases)
const bitcoinFilms = computed(() => contentStore.contentRows.bitcoin)
const independentCinema = computed(() => contentStore.contentRows.independent)
const dramas = computed(() => contentStore.contentRows.dramas)
const documentaries = computed(() => contentStore.contentRows.documentaries)

const handleScroll = () => {
  // Calculate 30% of the page height
  const scrollThreshold = document.documentElement.scrollHeight * 0.3
  scrolled.value = window.scrollY > scrollThreshold
}

const toggleSearch = () => {
  // TODO: Implement search modal
  console.log('Search clicked')
}

const handleContentClick = (content: Content) => {
  console.log('Content clicked:', content)
  // TODO: Navigate to content detail page
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  contentStore.fetchContent()
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.browse-view {
  min-height: 100vh;
}
</style>