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

feat: enhance styling and layout for improved user experience

Browse Source 
- 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>
This commit is contained in:
Dorian
2026-02-02 23:18:35 +00:00
parent ea03167da8
commit 90c55883f2
14 changed files with 289 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
src/views/Browse.vue
View File

@@ -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"
:class="{
'header-scrolled': scrolled,
'header-top': !scrolled
}">
<div class="mx-auto px-8 py-4" style="max-width: 75%;">
<header class="fixed top-0 left-0 right-0 z-50 pt-4 px-6">
<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%;">
<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">
{{ featuredContent?.title || 'Welcome to IndeedHub' }}
<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 || '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">
<div class="mx-auto space-y-12" style="max-width: 75%;">
<section class="relative pt-8 pb-20 px-6">
<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 {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.5) 75%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.5) 75%, transparent 100%);
.floating-glass-header {
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);
}
.header-top {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.7) 50%,
rgba(0, 0, 0, 0.4) 75%,
rgba(0, 0, 0, 0) 100%
);
/* Navigation Button Styles - EXACT from Archy Onboarding */
.nav-button {
position: relative;
padding: 12px 24px;
font-size: 16px;
font-weight: 500;
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 {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.8) 50%,
rgba(0, 0, 0, 0.5) 75%,
rgba(0, 0, 0, 0) 100%
);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
.nav-button::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), 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: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>