lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate real IndeeHub film data with CDN images

Browse Source 
- Replaced placeholder content with 20 real IndeeHub films
- All films now use IndeeHub's CloudFront CDN for images
- Added actual film titles, descriptions, and metadata
- Reduced hero section height (60vh/65vh) for better fold usage
- Content starts higher on page with more visible films

Films include:
- Bitcoin documentaries: God Bless Bitcoin, Bitcoiners, Hard Money
- Dramas: The Things We Carry, Kismet, Clemont, Bender
- Economics: Bitcoin: End of Money, Menger Notes, Housing Bubble
- Plus shorts and independent films

Images served from d1yvaqj97q119b.cloudfront.net

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-02 22:26:50 +00:00
parent f8abd42329
commit 92d6943cb3
77 changed files with 594 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/Browse.vue
View File

@@ -36,7 +36,7 @@
</header>
<!-- Hero / Featured Content -->
<section class="relative h-[70vh] md:h-[80vh] overflow-hidden">
<section class="relative h-[60vh] md:h-[65vh] overflow-hidden">
<!-- Background Image -->
<div class="absolute inset-0">
<img
@@ -48,36 +48,36 @@
</div>
<!-- Hero Content -->
<div class="relative container mx-auto px-6 h-full flex items-center md:items-end pb-8 md:pb-24">
<div class="max-w-2xl space-y-3 md:space-y-4 animate-fade-in pt-24 md:pt-0">
<div class="relative container mx-auto px-6 h-full flex items-end pb-16 md:pb-20">
<div class="max-w-2xl space-y-2.5 md:space-y-3 animate-fade-in">
<!-- Title -->
<h1 class="text-4xl md:text-6xl lg:text-7xl font-bold drop-shadow-2xl leading-tight">
<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-base md:text-lg lg:text-xl text-white/90 drop-shadow-lg line-clamp-3">
<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-3 text-sm text-white/80">
<span v-if="featuredContent.rating" class="bg-white/20 px-3 py-1 rounded">{{ featuredContent.rating }}</span>
<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-3 md:gap-4 pt-2 md:pt-4">
<button class="px-6 md:px-8 py-2.5 md:py-3 bg-white text-black font-semibold rounded-lg hover:bg-white/90 transition-all flex items-center gap-2 shadow-xl text-sm md:text-base">
<svg class="w-5 h-5 md:w-6 md:h-6" fill="currentColor" viewBox="0 0 24 24">
<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-6 md:px-8 py-2.5 md:py-3 bg-white/20 text-white font-semibold rounded-lg hover:bg-white/30 transition-all backdrop-blur-md flex items-center gap-2 text-sm md:text-base">
<svg class="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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
@@ -88,7 +88,7 @@
</section>
<!-- Content Rows -->
<section class="relative -mt-32 pb-20">
<section class="relative -mt-24 pb-20">
<div class="container mx-auto px-6 space-y-12">
<!-- Featured Films -->
<ContentRow