style: update sidebar and dashboard with NextForm branding

This commit is contained in:
Aleksandar 2025-12-11 14:28:10 +01:00
parent ad6fdc2226
commit 76b9ee24c5
5 changed files with 47 additions and 58 deletions

View File

@ -0,0 +1 @@
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj4KICAKICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojMkZCN0U4O3N0b3Atb3BhY2l0eToxIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiMwQjdGQjM7c3RvcC1vcGFjaXR5OjEiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICAKICAKPC9zdmc+

View File

@ -1,29 +1,28 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<!-- Background shape -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<defs>
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#2FB7E8;stop-opacity:1" />
<stop offset="50%" style="stop-color:#0B9FD0;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0B7FB3;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Arrow/Chevron background -->
<path d="M 140 50 L 180 50 L 140 100 Z" fill="url(#logoGrad)" opacity="0.9"/>
<path d="M 60 50 L 100 100 L 60 100 Z" fill="url(#logoGrad)" opacity="0.8"/>
<!-- Main arrow shape -->
<path d="M 420 150 L 540 150 L 420 300 Z" fill="url(#grad1)" opacity="0.95"/>
<path d="M 180 150 L 300 300 L 180 300 Z" fill="url(#grad1)" opacity="0.85"/>
<!-- Dumbbell icon -->
<g transform="translate(70, 80)">
<!-- Left weight -->
<rect x="0" y="15" width="8" height="30" fill="white" rx="2"/>
<circle cx="4" cy="12" r="6" fill="white"/>
<circle cx="4" cy="48" r="6" fill="white"/>
<!-- Bar -->
<rect x="10" y="20" width="20" height="8" fill="white" rx="2"/>
<!-- Right weight -->
<rect x="32" y="15" width="8" height="30" fill="white" rx="2"/>
<circle cx="36" cy="12" r="6" fill="white"/>
<circle cx="36" cy="48" r="6" fill="white"/>
<!-- Dumbbell - Left -->
<g transform="translate(200, 250)">
<!-- Left disk -->
<circle cx="0" cy="0" r="35" fill="white" opacity="0.95"/>
<!-- Bar left -->
<rect x="35" y="-15" width="80" height="30" fill="white" rx="4"/>
<!-- Right disk -->
<circle cx="115" cy="0" r="35" fill="white" opacity="0.95"/>
<!-- Grip lines -->
<line x1="45" y1="-35" x2="45" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
<line x1="65" y1="-35" x2="65" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
<line x1="85" y1="-35" x2="85" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
<line x1="105" y1="-35" x2="105" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -51,18 +51,12 @@ export default function Home() {
{/* Hero Section */}
<div className="pt-8 pb-4">
<div className="space-y-3">
<div className="flex items-center gap-4">
<div className="flex items-center gap-3">
<img
src="/nextform-logo.svg"
alt="NextForm"
className="h-12 w-12"
className="h-16 w-16"
/>
<div className="flex items-center gap-3">
<div className="h-12 w-1 bg-gradient-to-b from-blue-600 to-cyan-600 rounded-full"></div>
<h1 className="text-5xl font-black bg-gradient-to-r from-blue-600 via-blue-700 to-cyan-600 bg-clip-text text-transparent">
NextForm Dashboard
</h1>
</div>
</div>
<p className="text-lg text-gray-600 ml-4">Performance metrics & athlete insights</p>
</div>

View File

@ -68,16 +68,12 @@ export function Sidebar() {
<aside className="w-64 bg-gradient-to-b from-slate-900 via-slate-900 to-slate-950 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800/50 shadow-2xl">
{/* Logo Section */}
<div className="p-6 border-b border-slate-800/50">
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center font-bold text-white shadow-lg">
</div>
<div>
<h1 className="text-lg font-black bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-300 bg-clip-text text-transparent">
FitAI
</h1>
<p className="text-xs text-slate-400 font-semibold tracking-wide">ADMIN PRO</p>
</div>
<div className="flex items-center justify-center">
<img
src="/nextform-logo.svg"
alt="NextForm"
className="h-14 w-14"
/>
</div>
</div>

View File

@ -1,29 +1,28 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<!-- Background shape -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<defs>
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#2FB7E8;stop-opacity:1" />
<stop offset="50%" style="stop-color:#0B9FD0;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0B7FB3;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Arrow/Chevron background -->
<path d="M 140 50 L 180 50 L 140 100 Z" fill="url(#logoGrad)" opacity="0.9"/>
<path d="M 60 50 L 100 100 L 60 100 Z" fill="url(#logoGrad)" opacity="0.8"/>
<!-- Main arrow shape -->
<path d="M 420 150 L 540 150 L 420 300 Z" fill="url(#grad1)" opacity="0.95"/>
<path d="M 180 150 L 300 300 L 180 300 Z" fill="url(#grad1)" opacity="0.85"/>
<!-- Dumbbell icon -->
<g transform="translate(70, 80)">
<!-- Left weight -->
<rect x="0" y="15" width="8" height="30" fill="white" rx="2"/>
<circle cx="4" cy="12" r="6" fill="white"/>
<circle cx="4" cy="48" r="6" fill="white"/>
<!-- Bar -->
<rect x="10" y="20" width="20" height="8" fill="white" rx="2"/>
<!-- Right weight -->
<rect x="32" y="15" width="8" height="30" fill="white" rx="2"/>
<circle cx="36" cy="12" r="6" fill="white"/>
<circle cx="36" cy="48" r="6" fill="white"/>
<!-- Dumbbell - Left -->
<g transform="translate(200, 250)">
<!-- Left disk -->
<circle cx="0" cy="0" r="35" fill="white" opacity="0.95"/>
<!-- Bar left -->
<rect x="35" y="-15" width="80" height="30" fill="white" rx="4"/>
<!-- Right disk -->
<circle cx="115" cy="0" r="35" fill="white" opacity="0.95"/>
<!-- Grip lines -->
<line x1="45" y1="-35" x2="45" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
<line x1="65" y1="-35" x2="65" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
<line x1="85" y1="-35" x2="85" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
<line x1="105" y1="-35" x2="105" y2="35" stroke="url(#grad1)" stroke-width="3" opacity="0.5"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB