mahdium/TBW
1
0
Fork 0
mirror of https://github.com/mmahdium/TBW.git synced 2026-08-13 07:42:48 +03:30
Code Issues Packages Projects Releases Wiki Activity

Improve Navbar and homepage

Browse Source
This commit is contained in:
mahdium
2025-11-05 22:48:50 +03:30
parent a30972384a
commit 4a19199fbb
4 changed files with 411 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/NavBar.vue
+34 -36
View File
@@ -1,15 +1,15 @@
<template>
<div
class="navbar sticky top-0 z-20 bg-white/70 glass border-b border-gray-200/60 shadow-sm transition"
<nav
class="navbar sticky top-0 z-30 bg-white/70 backdrop-blur-md border-b border-gray-200/60 shadow-sm"
>
<!-- Left -->
<!-- Left: Logo + Mobile Menu -->
<div class="navbar-start">
<!-- Mobile dropdown -->
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden" aria-label="Menu">
<div class="dropdown lg:hidden">
<label tabindex="0" class="btn btn-ghost p-2" aria-label="Menu">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-600"
class="h-6 w-6 text-gray-700"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -18,58 +18,56 @@
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</div>
</label>
<ul
tabindex="-1"
class="menu menu-sm dropdown-content mt-3 w-52 p-2 rounded-lg shadow-md bg-white/80 backdrop-blur-md border border-gray-200/60"
tabindex="0"
class="menu menu-sm dropdown-content mt-3 w-52 rounded-md bg-white/90 backdrop-blur-md shadow-lg border border-gray-200/60"
>
<li><RouterLink class="text-gray-700 hover:text-gray-900" to="/">Home</RouterLink></li>
<li>
<RouterLink class="text-gray-700 hover:text-gray-900" to="/list">Library</RouterLink>
</li>
<li><RouterLink class="text-gray-700 hover:text-gray-900" to="/add">Add</RouterLink></li>
<li><RouterLink to="/" class="nav-link">Home</RouterLink></li>
<li><RouterLink to="/list" class="nav-link">Library</RouterLink></li>
<li><RouterLink to="/add" class="nav-link">Add</RouterLink></li>
</ul>
</div>
<!-- Logo -->
<RouterLink
class="btn btn-ghost normal-case text-2xl font-bold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
to="/"
class="text-2xl font-extrabold tracking-tight bg-linear-to-r from-gray-700 via-indigo-500 to-cyan-400 bg-clip-text text-transparent"
>
To Vue
TBW
</RouterLink>
</div>
<!-- Center (desktop menu) -->
<!-- Center: Desktop Menu -->
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1 space-x-4">
<li>
<RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/">Home</RouterLink>
</li>
<li>
<RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/list"
>Library</RouterLink
>
</li>
<li>
<RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/add"
>Add</RouterLink
>
</li>
<ul class="menu menu-horizontal gap-6">
<li><RouterLink to="/" class="nav-link">Home</RouterLink></li>
<li><RouterLink to="/list" class="nav-link">Library</RouterLink></li>
<li><RouterLink to="/add" class="nav-link">Add</RouterLink></li>
</ul>
</div>
<!-- Right -->
<!-- Right: CTA -->
<div class="navbar-end">
<RouterLink
class="btn px-5 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
to="/list"
class="btn px-5 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
>
Go to library
Go to Library
</RouterLink>
</div>
</div>
</nav>
</template>
<style scoped>
@reference "tailwindcss";
.nav-link {
@apply text-gray-700 font-medium transition-colors hover:text-gray-900;
}
.router-link-active.nav-link {
@apply text-indigo-600 font-semibold;
}
</style>
src/views/HomeView.vue
+68 -3
View File
@@ -1,14 +1,48 @@
<script setup lang="ts"></script>
<template>
<div class="container mx-auto px-4 py-16" v-motion-fade-visible-once>
<div class="flex flex-col items-center justify-center text-center">
<div class="relative isolate bg-white px-6 pt-16 lg:px-8">
<!-- Top blurred gradient background -->
<div
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
>
<div
class="relative left-[calc(50%-11rem)] aspect-1155/678 w-xl -translate-x-1/2 rotate-30 bg-linear-to-tr from-gray-400 via-indigo-400 to-cyan-400 opacity-30 sm:left-[calc(50%-30rem)] sm:w-6xl"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
<!-- Hero content -->
<div
class="container mx-auto px-4 py-24 sm:py-32 lg:py-40 text-center"
v-motion-fade-visible-once
>
<h1 class="text-5xl font-bold mb-8 leading-tight">
Welcome to <br />
<span class="text-6xl font-extrabold gradient-text"> To Be Watched </span>
</h1>
<p class="text-lg text-gray-600 max-w-2xl mb-12">
<p class="text-lg text-gray-600 max-w-2xl mx-auto mb-12">
A simple and beautiful media list app built with Vue&nbsp;3 and Tailwind&nbsp;CSS (daisyUI).
</p>
@@ -19,6 +53,36 @@
Get Started
</RouterLink>
</div>
<!-- Bottom blurred gradient background -->
<div
class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
class="relative left-[calc(50%+3rem)] aspect-1155/678 w-xl -translate-x-1/2 bg-linear-to-tr from-gray-400 via-indigo-400 to-cyan-400 opacity-30 sm:left-[calc(50%+36rem)] sm:w-6xl"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
</div>
</template>
@@ -31,6 +95,7 @@
/* indigo-400 */ #22d3ee 100% /* cyan-400 */
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% auto;
animation: gradientShift 6s ease infinite alternate;