mirror of
https://github.com/mmahdium/TBW.git
synced 2025-12-20 04:33:54 +01:00
Improve Navbar and homepage
This commit is contained in:
14
package.json
14
package.json
@@ -21,29 +21,29 @@
|
||||
"@tailwindcss/vite": "^4.1.16",
|
||||
"@vercel/speed-insights": "^1.2.0",
|
||||
"@vueuse/motion": "^3.0.3",
|
||||
"axios": "^1.13.1",
|
||||
"pinia": "^3.0.3",
|
||||
"axios": "^1.13.2",
|
||||
"pinia": "^3.0.4",
|
||||
"tailwindcss": "^4.1.16",
|
||||
"vue": "^3.5.22",
|
||||
"vue-router": "^4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node22": "^22.0.2",
|
||||
"@types/node": "^24.9.2",
|
||||
"@types/node": "^24.10.0",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vue/eslint-config-prettier": "^10.2.0",
|
||||
"@vue/eslint-config-typescript": "^14.6.0",
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
"daisyui": "^5.3.10",
|
||||
"eslint": "^9.38.0",
|
||||
"daisyui": "^5.4.5",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-vue": "~10.5.1",
|
||||
"jiti": "^2.6.1",
|
||||
"npm-run-all2": "^8.0.4",
|
||||
"prettier": "3.6.2",
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "^7.1.12",
|
||||
"vite": "^7.2.0",
|
||||
"vite-bundle-analyzer": "^1.2.3",
|
||||
"vite-plugin-vue-devtools": "^8.0.3",
|
||||
"vue-tsc": "^3.1.2"
|
||||
"vue-tsc": "^3.1.3"
|
||||
}
|
||||
}
|
||||
611
pnpm-lock.yaml
generated
611
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
|
||||
@@ -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 3 and Tailwind 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;
|
||||
|
||||
Reference in New Issue
Block a user