feat: enhance styling and layout for improved user experience

- Added custom fonts 'Blade Knight' and 'Coligra' for a unique aesthetic
- Updated background color and styling for body and app components
- Improved content card design with glass morphism effects and hover states
- Enhanced mobile navigation with a floating glass effect and updated button styles
- Adjusted header layout for better responsiveness and visual appeal

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

assets/blade-knight/READ BEFORE INSTALL THIS FONT.txt

@@ -0,0 +1,35 @@
+READ THIS :
+Be very careful and take the time to read any terms & conditions before deciding
+to use the font commercially. Ignorance is not an excuse for breaking the law.
+By installing or using this font, you are hereby agree to this Font Usage Agreement:
+1. This font is ONLY FOR PERSONAL USE purposes.
+2. NO PROMOTIONAL & NO COMMERCIAL USE ALLOWED
+3. You are REQUIRES A LICENSE for Promotional or Commercial Use
+4. Click this link to buy License for Commercial purpose 
+   https://maknastudio.com/product/blade-knight/
+
+Contact : emailmakna@gmail.com 
+
+=====================================================================================================================================
+
+Dengan meng-install font ini, anda dianggap mengerti dan menyetujui semua syarat dan ketentuan penggunaan font dibawah ini:
+
+    > Font demo ini hanya dapat digunakan untuk Kebutuhan "Personal Use"/kebutuhan pribadi, dan untuk keperluan yang 
+      sifatnya tidak "komersil" atau tidak menghasilkan profit maupun keuntungan dari hasil memanfaatkan/menggunakan font kami. 
+      Baik itu untuk individu, Agensi Desain Grafis, Percetakan, Distro atau Perusahaan/Korporasi Periklanan.
+
+    > Silakan gunakan lisensi komersial dengan membeli melalui link ini : https://maknastudio.com/product/blade-knight/
+
+    > Dengan hanya lisensi "Personal Use", DILARANG KERAS menggunakan font ini untuk kepeluan Komersial, baik itu untuk   
+      Iklan, Promosi, TV, Film, Video, Motion Graphics, Youtube, Desain kaos ataupun Kemasan Produk ( Produk fisik   
+      ataupun Digital) atau Media apapun dengan tujuan menghasilkan  profit/keuntungan/viewers/enggagment/iklan/Followers/adsense/dll.
+
+    > Untuk penggunaan keperluan Perusahaan/Korporasi silakan menggunakan Corporate License.
+    Menggunakan font ini dengan lisensi "Personal Use" untuk kepentingan Komersial apapun 
+    bentuknya TANPA IZIN dari kami merupakan tindakan illegal / melanggar hukum dan  akan
+    dikenakan biaya sesuai dengan penggunaannya ( sesuai ketentuan lisensi di Maknastudio ).
+
+Informasi tentang Lisensi apa yang akan anda perlukan, silahkan menghubungi kami 
+di email : emailmakna@gmail.com 
+
+Terima kasih.

src/components/ContentRow.vue

@@ -9,7 +9,7 @@
       <button 
         v-if="canScrollLeft"
         @click="scrollLeft"
-        class="absolute left-0 top-0 bottom-0 z-10 w-12 bg-black/50 hover:bg-black/70 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity"
+        class="hidden md:block absolute left-0 top-0 bottom-0 z-10 w-12 bg-black/50 hover:bg-black/70 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity"
       >
         <svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 24 24">
           <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
@@ -19,24 +19,26 @@
       <!-- Content Slider -->
       <div 
         ref="sliderRef"
-        class="flex gap-8 overflow-x-auto scrollbar-hide scroll-smooth px-6 py-4"
+        class="flex gap-8 overflow-x-auto overflow-y-visible scrollbar-hide scroll-smooth px-6 py-4 pb-8"
         @scroll="handleScroll"
       >
         <div
           v-for="content in contents"
           :key="content.id"
-          class="content-card flex-shrink-0 w-[200px] md:w-[280px]"
+          class="content-card flex-shrink-0 w-[200px] md:w-[280px] group/card cursor-pointer"
           @click="$emit('content-click', content)"
         >
-          <img 
+          <div class="glass-card rounded-lg p-1.5 transition-all duration-300">
-            :src="content.thumbnail" 
+            <img 
-            :alt="content.title"
+              :src="content.thumbnail" 
-            class="w-full aspect-[2/3] object-contain rounded-lg bg-neutral-900"
+              :alt="content.title"
-            loading="lazy"
+              class="w-full aspect-[2/3] object-contain rounded-md bg-neutral-900"
-          />
+              loading="lazy"
+            />
+          </div>
           <div class="mt-2">
-            <h3 class="text-xs md:text-sm font-medium text-white truncate">{{ content.title }}</h3>
+            <h3 class="text-base font-medium text-white truncate">{{ content.title }}</h3>
-            <p class="text-xs text-white/60 truncate hidden md:block">{{ content.description }}</p>
+            <p class="text-base text-white/60 truncate hidden md:block">{{ content.description }}</p>
           </div>
         </div>
       </div>
@@ -45,7 +47,7 @@
       <button 
         v-if="canScrollRight"
         @click="scrollRight"
-        class="absolute right-0 top-0 bottom-0 z-10 w-12 bg-black/50 hover:bg-black/70 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity"
+        class="hidden md:block absolute right-0 top-0 bottom-0 z-10 w-12 bg-black/50 hover:bg-black/70 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity"
       >
         <svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 24 24">
           <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
@@ -114,4 +116,19 @@ onUnmounted(() => {
 .scrollbar-hide::-webkit-scrollbar {
   display: none;
 }
+
+.glass-card {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.group\/card:hover .glass-card {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.05);
+  transform: translateY(-4px);
+}
 </style>

src/components/MobileNav.vue

@@ -1,13 +1,13 @@
 <template>
-  <nav class="mobile-nav fixed bottom-0 left-0 right-0 z-50 md:hidden">
+  <nav class="mobile-nav fixed bottom-0 left-0 right-0 z-50 md:hidden pb-4 px-6">
-    <div class="glass-card rounded-t-3xl border-t">
+    <div class="floating-glass-nav px-4 py-3 rounded-2xl">
-      <div class="grid grid-cols-5 gap-1 px-2 py-3">
+      <div class="flex items-center justify-around">
         <button
           v-for="item in navItems"
           :key="item.name"
           @click="navigate(item.path)"
-          class="flex flex-col items-center gap-1 p-2 rounded-lg transition-colors"
+          class="flex flex-col items-center gap-1 nav-tab"
-          :class="{ 'text-netflix-red': isActive(item.path), 'text-white/60': !isActive(item.path) }"
+          :class="{ 'nav-tab-active': isActive(item.path) }"
         >
           <component :is="item.icon" class="w-6 h-6" />
           <span class="text-xs font-medium">{{ item.name }}</span>
@@ -74,6 +74,42 @@ const isActive = (path: string) => {
 <style scoped>
 .mobile-nav {
   /* Safe area for iPhone notch/home indicator */
-  padding-bottom: env(safe-area-inset-bottom, 0);
+  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
+}
+
+.floating-glass-nav {
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(40px);
+  -webkit-backdrop-filter: blur(40px);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: 
+    0 20px 60px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.nav-tab {
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  padding: 8px 12px;
+  border-radius: 12px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.nav-tab:active {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.nav-tab-active {
+  color: rgba(255, 255, 255, 1);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  padding: 8px 12px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.15);
+  font-weight: 600;
 }
 </style>

src/stores/content.ts

@@ -22,11 +22,20 @@ export const useContentStore = defineStore('content', () => {
     error.value = null
 
     try {
-      // Simulate loading delay for UX
+      // Set featured content immediately - God Bless Bitcoin
-      await new Promise(resolve => setTimeout(resolve, 300))
+      const godBlessBitcoin = bitcoinFilms.find(f => f.title === 'God Bless Bitcoin') || bitcoinFilms[0]
+      if (godBlessBitcoin) {
+        // Override backdrop to use the downloaded image
+        featuredContent.value = {
+          ...godBlessBitcoin,
+          backdrop: '/assets/images/god-bless-bitcoin-backdrop.jpg'
+        }
+      } else {
+        featuredContent.value = indeeHubFilms[0]
+      }
       
-      // Set featured content (first Bitcoin doc)
+      // Small delay for content rows only
-      featuredContent.value = bitcoinFilms[0] || indeeHubFilms[0]
+      await new Promise(resolve => setTimeout(resolve, 100))
       
       // Organize content into rows
       contentRows.value = {

src/style.css

@@ -2,23 +2,47 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Blade Knight Font */
+@font-face {
+  font-family: 'Blade Knight';
+  src: url('/assets/fonts/Blade Knight Regular.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Coligra Font */
+@font-face {
+  font-family: 'Coligra';
+  src: url('/assets/fonts/Coligra.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
+html {
+  background-color: #0a0a0a;
+  color: white;
+}
+
 body {
   font-family: 'Inter', 'Avenir Next', system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a0a14 100%);
+  background-color: #0a0a0a;
   color: white;
   min-height: 100vh;
 }
 
 #app {
   min-height: 100vh;
+  background-color: #0a0a0a;
 }
 
 /* Glass Morphism Styles from neode-ui */

src/views/Browse.vue

@@ -1,27 +1,23 @@
 <template>
   <div class="browse-view">
     <!-- Header / Navigation -->
-    <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 header-gradient"
+    <header class="fixed top-0 left-0 right-0 z-50 pt-4 px-6">
-            :class="{ 
+      <div class="floating-glass-header mx-auto px-4 md:px-6 py-3.5 rounded-2xl transition-all duration-300" style="max-width: 100%;">
-              'header-scrolled': scrolled, 
-              'header-top': !scrolled 
-            }">
-      <div class="mx-auto px-8 py-4" style="max-width: 75%;">
         <div class="flex items-center justify-between">
           <!-- Logo -->
-          <div class="flex items-center gap-8">
+          <div class="flex items-center">
             <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>
 
+          <!-- Navigation - Centered -->
+          <nav class="hidden md:flex items-center gap-3 absolute left-1/2 -translate-x-1/2">
+            <a href="#" class="nav-button-active">Home</a>
+            <a href="#" class="nav-button">Films</a>
+            <a href="#" class="nav-button">Series</a>
+            <a href="#" class="nav-button">Creators</a>
+            <a href="#" class="nav-button">My List</a>
+          </nav>
+
           <!-- Right Side Actions -->
           <div class="flex items-center gap-4">
             <!-- Search -->
@@ -39,11 +35,11 @@
     </header>
 
     <!-- Hero / Featured Content -->
-    <section class="relative h-[60vh] md:h-[65vh] overflow-hidden">
+    <section class="relative h-[51vh] md:h-[55vh] overflow-hidden">
       <!-- Background Image -->
       <div class="absolute inset-0">
         <img 
-          :src="featuredContent?.backdrop || 'https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=1920'"
+          :src="featuredContent?.backdrop || '/assets/images/god-bless-bitcoin-backdrop.jpg'"
           alt="Featured content"
           class="w-full h-full object-cover object-center"
         />
@@ -51,16 +47,16 @@
       </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="relative mx-auto px-6 md:px-8 h-full flex items-center pt-16" style="max-width: 90%;">
         <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">
+          <h1 class="w-full text-3xl md:text-5xl lg:text-6xl font-bold drop-shadow-2xl leading-tight uppercase" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;">
-            {{ featuredContent?.title || 'Welcome to IndeedHub' }}
+            {{ featuredContent?.title || 'GOD BLESS BITCOIN' }}
           </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.' }}
+            {{ featuredContent?.description || 'A groundbreaking documentary exploring the intersection of faith, finance, and the future of money through the lens of Bitcoin.' }}
           </p>
 
           <!-- Meta Info -->
@@ -91,8 +87,8 @@
     </section>
 
     <!-- Content Rows -->
-    <section class="relative pt-8 pb-20">
+    <section class="relative pt-8 pb-20 px-6">
-      <div class="mx-auto space-y-12" style="max-width: 75%;">
+      <div class="mx-auto space-y-12">
 
         <!-- Featured Films -->
         <ContentRow 
@@ -186,35 +182,136 @@ onUnmounted(() => {
 <style scoped>
 .browse-view {
   min-height: 100vh;
+  overflow-x: hidden;
 }
 
-.header-gradient {
+.floating-glass-header {
-  backdrop-filter: blur(12px);
+  background: rgba(0, 0, 0, 0.65);
-  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(40px);
-  mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.5) 75%, transparent 100%);
+  -webkit-backdrop-filter: blur(40px);
-  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.5) 75%, transparent 100%);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: 
+    0 20px 60px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
-.header-top {
+/* Navigation Button Styles - EXACT from Archy Onboarding */
-  background: linear-gradient(
+.nav-button {
-    to bottom,
+  position: relative;
-    rgba(0, 0, 0, 0.7) 0%,
+  padding: 12px 24px;
-    rgba(0, 0, 0, 0.7) 50%,
+  font-size: 16px;
-    rgba(0, 0, 0, 0.4) 75%,
+  font-weight: 500;
-    rgba(0, 0, 0, 0) 100%
+  line-height: 1.4;
-  );
+  border-radius: 16px;
+  background: rgba(0, 0, 0, 0.25);
+  color: rgba(255, 255, 255, 0.96);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.22);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  display: inline-block;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
 }
 
-.header-scrolled {
+.nav-button::before {
-  background: linear-gradient(
+  content: '';
-    to bottom,
+  position: absolute;
-    rgba(0, 0, 0, 0.8) 0%,
+  inset: 0;
-    rgba(0, 0, 0, 0.8) 50%,
+  border-radius: inherit;
-    rgba(0, 0, 0, 0.5) 75%,
+  padding: 2px;
-    rgba(0, 0, 0, 0) 100%
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent);
-  );
+  -webkit-mask: 
-  backdrop-filter: blur(20px);
+    linear-gradient(#fff 0 0) content-box, 
-  -webkit-backdrop-filter: blur(20px);
+    linear-gradient(#fff 0 0);
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.nav-button:hover {
+  transform: translateY(-2px);
+  background: rgba(0, 0, 0, 0.35);
+  box-shadow:
+    0 12px 32px rgba(0, 0, 0, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+
+.nav-button:hover::before {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
+}
+
+.nav-button-active {
+  position: relative;
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  border-radius: 16px;
+  background: rgba(0, 0, 0, 0.35);
+  color: rgba(255, 255, 255, 1);
+  box-shadow:
+    0 12px 32px rgba(0, 0, 0, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  display: inline-block;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+}
+
+.nav-button-active::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 2px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
+  -webkit-mask: 
+    linear-gradient(#fff 0 0) content-box, 
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.nav-button-active:hover {
+  transform: translateY(-2px);
+  background: rgba(0, 0, 0, 0.40);
+  box-shadow:
+    0 12px 32px rgba(0, 0, 0, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+/* Mobile Tab Bar Styles */
+.nav-tab {
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  padding: 8px 12px;
+  border-radius: 12px;
+}
+
+.nav-tab:active {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.nav-tab-active {
+  color: rgba(255, 255, 255, 1);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  padding: 8px 12px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.1);
 }
 </style>