Initial commit: IndeeHub decentralized streaming platform

Built a complete Netflix-style streaming interface for IndeeHub's decentralized media platform with real film content.

Features:
- Vue 3 + TypeScript + Vite setup with hot module reloading
- Netflix-inspired UI with hero section and horizontal scrolling content rows
- Glass morphism design system with custom Tailwind configuration
- 20+ real IndeeHub films organized into 6 categories (Bitcoin, Documentaries, Drama, etc.)
- Full-featured video player component with custom controls
- Mobile-responsive design with bottom navigation
- Nostr integration ready (nostr-tools, relay pool, NIP-71 support)
- Pinia state management for content
- MCP tools configured (Filesystem, Memory, Nostr, Puppeteer)

Components:
- Browse.vue: Main streaming interface with hero and content rows
- ContentRow.vue: Horizontal scrolling film cards with navigation arrows
- VideoPlayer.vue: Custom video player with play/pause, seek, volume, fullscreen
- MobileNav.vue: Bottom tab navigation for mobile devices

Tech Stack:
- Frontend: Vue 3 (Composition API), TypeScript
- Build: Vite 7
- Styling: Tailwind CSS with custom theme
- State: Pinia 3
- Router: Vue Router 4.6
- Protocol: Nostr (nostr-tools 2.22)

Design:
- 4px grid spacing system
- Glass morphism UI components
- Netflix-style hero section with featured content
- Smooth animations and hover effects
- Mobile-first responsive breakpoints
- Dark theme with custom color palette

Content:
- 20+ IndeeHub films with titles, descriptions, categories
- Bitcoin documentaries: God Bless Bitcoin, Dirty Coin, Searching for Satoshi
- Independent films and documentaries
- Working Unsplash CDN images for thumbnails and backdrops

Ready for deployment to Umbrel, Start9, and Archy nodes.

Co-authored-by: Cursor <cursoragent@cursor.com>

.cursor/rules/seo-meta-strategy.mdc

@@ -0,0 +1,112 @@
+---
+description: SEO optimization and social meta tag strategy
+alwaysApply: false
+globs: **/*.{html,tsx,jsx,vue,astro}
+---
+
+# SEO & Meta Tag Strategy
+
+## Core Philosophy
+
+SEO combines three pillars:
+1. **Content SEO**: Quality, relevance, keywords
+2. **Technical SEO**: Structure, performance, crawlability
+3. **Social SEO**: Open Graph, Twitter Cards, sharing optimization
+
+## Page Title Optimization
+
+**Formula**: `[Primary Keyword] - [Secondary Keyword] | [Brand Name]`
+
+**Guidelines**:
+- Optimal: 50-60 characters
+- Maximum: 70 characters
+- Mobile: 55 characters
+
+```html
+<title>Bitcoin UX Design - Lightning Network Development | PROUX</title>
+```
+
+## Meta Descriptions
+
+**Formula**: `[Hook/Benefit] + [Key Details] + [Call-to-Action]`
+
+**Guidelines**:
+- Optimal: 150-160 characters
+- Mobile: 120 characters
+- Minimum: 120 characters
+
+```html
+<meta name="description" content="Transform your Bitcoin app's UX. 10+ years designing for Lightning Network. 98% user satisfaction. Explore projects →">
+```
+
+## Open Graph Tags
+
+**Essential OG Tags**:
+
+```html
+<meta property="og:title" content="Page Title">
+<meta property="og:description" content="Description">
+<meta property="og:image" content="https://example.com/og-image.png">
+<meta property="og:url" content="https://example.com/page">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="Brand">
+```
+
+### OG Image Specifications
+
+- Dimensions: 1200x630px (1.91:1 ratio)
+- Format: PNG or JPG
+- File Size: < 5MB (ideally < 300KB)
+- Safe Zone: Keep text/logos in center 1200x600px
+
+## Twitter Card Tags
+
+```html
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:site" content="@yourusername">
+<meta name="twitter:title" content="Page Title">
+<meta name="twitter:description" content="Description">
+<meta name="twitter:image" content="https://example.com/image.jpg">
+```
+
+## Structured Data (Schema.org)
+
+```html
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "name": "Company Name",
+  "description": "Company description",
+  "url": "https://example.com",
+  "logo": "https://example.com/logo.png"
+}
+</script>
+```
+
+## Canonical URLs
+
+```html
+<link rel="canonical" href="https://example.com/page">
+```
+
+Use canonical URLs to:
+- Prevent duplicate content issues
+- Handle URL parameters
+- Indicate preferred URL version
+
+## Performance for SEO
+
+Core Web Vitals affect rankings:
+- **LCP** (Largest Contentful Paint): < 2.5s
+- **FID** (First Input Delay): < 100ms
+- **CLS** (Cumulative Layout Shift): < 0.1
+
+```html
+<!-- Preload critical resources -->
+<link rel="preload" href="hero.jpg" as="image">
+<link rel="preload" href="font.woff2" as="font" crossorigin>
+
+<!-- Lazy load images -->
+<img src="image.jpg" loading="lazy" alt="Description">
+```