Rolle: Du bist ein Senior Frontend Engineer(React / Tailwind) und UI / UX Designer.Ziel: Wir machen ein umfassendes UI - Overhaul einer bestehenden Whisky - App("WhiskyVault") und benennen sie um in "DramLog".Das Ziel ist eine Premium - Mobile - Experience(Dark Mode, Gold Akzente, Serif Fonts).

Tech Stack: React, Tailwind CSS, Lucide - React Icons.
1. Globales Design - System(Anwenden auf alle Views)

Branding: App Name ist "DramLog".

  Farben:

Background: #0F1014(Deep Rich Black)

Surface: #1A1B20(Card Backgrounds)

        Primary Accent: #C89D46(Whisky Amber / Gold)

Text - Secondary: #8F9096

Typografie:

        Importiere und nutze Playfair Display(Serif) für: Überschriften(h1 - h3), Whisky - Namen auf Cards.

        Nutze Inter(Sans) für: UI - Elemente, Labels, Fließtext, Daten.

  Shape: rounded - 2xl für Cards, rounded - full für Buttons.

2. Spezifische Component Refactorings

A.Dashboard(Home View):

    Entferne die grauen Hintergründe der 4 oberen Statistik - Boxen.Zeige die Werte(Zahlen) groß in Playfair Display(Weiß) und die Labels klein darunter(Grau).Ordne sie in einem Grid oder einer flex - row mit justify - between an.

  Benenne "Dein Bestand" um in "Collection".

    Mache die Listen - Einträge unter "Tasting Sessions" interaktiv.Entferne die sichtbaren Trash / Edit Buttons und nutze ein sauberes Listen - Layout.

  B.Whisky Card(Collection Grid):

    Redesign der Card - Komponente.

  Bild: Muss bis an den Rand gehen(w - full, kein Padding).

    Overlay: Lege einen bg - gradient - to - t from - black via - black / 80 to - transparent über das untere Drittel des Bildes.

      Text: Platziere Name(Serif) und Destillerie(Sans, Uppercase, Gold) weiß auf dem Bild im unteren Bereich(über dem Gradient).

        Tags: Mache Tags minimalistisch(bg - white / 10 backdrop - blur - sm text - xs border border - white / 10).

3. Die "Floating" Navigation(Core Feature)

Erstelle eine neue Komponente BottomNavigation.Sie ersetzt alle bisherigen Menüs.Sie muss am unteren Bildschirmrand fixiert sein.WICHTIG: Implementiere exakt dieses Layout - Pattern für den schwebenden Button:
JavaScript

// Reference Implementation for BottomNavigation.jsx
import { Home, Grid, Scan, User, Search } from 'lucide-react';

export const BottomNavigation = () => {
  return (
    <div className= "fixed bottom-0 left-0 w-full z-50" >
    {/* Background Container mit Glassmorphism */ }
    < div className = "relative bg-[#0F1014]/90 backdrop-blur-xl border-t border-white/10 pb-safe pt-2" >

      <div className="flex justify-between items-end px-6 h-16" >

        {/* Left Actions */ }
        < button className = "flex flex-col items-center gap-1 text-[#C89D46] w-12" >
          <Home size={ 24 } />
            < span className = "text-[10px] font-medium" > Home </span>
              </button>

              < button className = "flex flex-col items-center gap-1 text-gray-500 hover:text-white w-12 transition-colors" >
                <Grid size={ 24 } />
                  < span className = "text-[10px] font-medium" > Shelf </span>
                    </button>

  {/* Spacer für den Center Button */ }
  <div className="w-16" />

    {/* Right Actions */ }
    < button className = "flex flex-col items-center gap-1 text-gray-500 hover:text-white w-12 transition-colors" >
      <Search size={ 24 } />
        < span className = "text-[10px] font-medium" > Search </span>
          </button>

          < button className = "flex flex-col items-center gap-1 text-gray-500 hover:text-white w-12 transition-colors" >
            <User size={ 24 } />
              < span className = "text-[10px] font-medium" > Profile </span>
                </button>
                </div>

  {/* THE FLOATING MAGIC BUTTON */ }
  <div className="absolute -top-8 left-1/2 -translate-x-1/2" >
    <button 
            className="flex items-center justify-center w-16 h-16 rounded-full 
  bg - gradient - to - tr from - [#C89D46] to - [#E0B456]
  shadow - [0_0_20px_rgba(200, 157, 70, 0.4)]
  border - 4 border - [#0F1014]
  active: scale - 95 transition - transform duration - 200"
  aria - label="Scan Bottle"
    >
    <Scan color="#0F1014" size = { 32} strokeWidth = { 2} />
      </button>
      </div>

      </div>
      </div>
  );
};

Aufgabe:

    Implementiere das globale Styling(Fonts / Colors).

    Baue die BottomNavigation ein(ersetze alte Navs).

    Passe die Dashboard View an den neuen "Clean Look" an.

    Passe die WhiskyCard an den neuen "Editorial Look" an.