feat: Implement blue theme with modern design

- Add Inter font from Google Fonts for modern typography - Implement blue theme from shadcn.com (primary: blue) - Add beautiful hero header with car icon - Create Separator component for visual division - Increase card padding (p-8) for better breathing room - Larger card titles (text-2xl) for better hierarchy - Improved spacing throughout (gap-8, py-12, etc.) - Blue primary color (#3B82F6) with proper foregrounds - Professional, modern look matching shadcn.com aesthetic 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-10 20:53:36 +02:00
parent 24bd736b9a
commit ffdfac65de
7 changed files with 201 additions and 30 deletions
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -2,24 +2,24 @@

@theme {
  --color-background: 0 0% 100%;
-  --color-foreground: 240 10% 3.9%;
+  --color-foreground: 222.2 84% 4.9%;
  --color-card: 0 0% 100%;
-  --color-card-foreground: 240 10% 3.9%;
+  --color-card-foreground: 222.2 84% 4.9%;
  --color-popover: 0 0% 100%;
-  --color-popover-foreground: 240 10% 3.9%;
-  --color-primary: 240 5.9% 10%;
-  --color-primary-foreground: 0 0% 98%;
-  --color-secondary: 240 4.8% 95.9%;
-  --color-secondary-foreground: 240 5.9% 10%;
-  --color-muted: 240 4.8% 95.9%;
-  --color-muted-foreground: 240 3.8% 46.1%;
-  --color-accent: 240 4.8% 95.9%;
-  --color-accent-foreground: 240 5.9% 10%;
+  --color-popover-foreground: 222.2 84% 4.9%;
+  --color-primary: 221.2 83.2% 53.3%;
+  --color-primary-foreground: 210 40% 98%;
+  --color-secondary: 210 40% 96.1%;
+  --color-secondary-foreground: 222.2 47.4% 11.2%;
+  --color-muted: 210 40% 96.1%;
+  --color-muted-foreground: 215.4 16.3% 46.9%;
+  --color-accent: 210 40% 96.1%;
+  --color-accent-foreground: 222.2 47.4% 11.2%;
  --color-destructive: 0 84.2% 60.2%;
-  --color-destructive-foreground: 0 0% 98%;
-  --color-border: 240 5.9% 90%;
-  --color-input: 240 5.9% 90%;
-  --color-ring: 240 5.9% 10%;
+  --color-destructive-foreground: 210 40% 98%;
+  --color-border: 214.3 31.8% 91.4%;
+  --color-input: 214.3 31.8% 91.4%;
+  --color-ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
 }

@@ -30,7 +30,6 @@
 }

 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: hsl(var(--color-background));
  min-height: 100vh;
  color: hsl(var(--color-foreground));
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,6 +1,13 @@
 import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
 import './globals.css'

+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+})
+
 export const metadata: Metadata = {
  title: 'Kniha Jízd',
  description: 'Journey Book Management System',
@@ -13,7 +20,7 @@ export default function RootLayout({
 }) {
  return (
    <html lang="cs">
-      <body>{children}</body>
+      <body className={inter.className}>{children}</body>
    </html>
  )
 }
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -3,6 +3,8 @@
 import { useState } from 'react'
 import JourneyForm from './components/JourneyForm'
 import DataPreview from './components/DataPreview'
+import { Separator } from '@/components/ui/separator'
+import { Car } from 'lucide-react'

 export default function Home() {
  const [calculatedData, setCalculatedData] = useState(null)
@@ -10,18 +12,26 @@ export default function Home() {
  const [formData, setFormData] = useState(null)

  return (
-    <main className="min-h-screen p-8 md:p-12">
-      <div className="max-w-7xl mx-auto">
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold tracking-tight mb-2">
-            Kniha Jízd
-          </h1>
-          <p className="text-muted-foreground">
-            Automatizovaný systém pro správu knihy jízd
-          </p>
+    <main className="min-h-screen">
+      <div className="max-w-7xl mx-auto px-6 py-12 md:px-12 md:py-16">
+        <div className="mb-12">
+          <div className="flex items-center gap-4 mb-4">
+            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+              <Car className="h-8 w-8" />
+            </div>
+            <div>
+              <h1 className="text-4xl font-bold tracking-tight">
+                Kniha Jízd
+              </h1>
+              <p className="text-lg text-muted-foreground mt-1">
+                Automatizovaný systém pro správu knihy jízd
+              </p>
+            </div>
+          </div>
+          <Separator className="mt-8" />
        </div>

-        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
          <JourneyForm
            onDataCalculated={setCalculatedData}
            setLoading={setLoading}
--- a/frontend/components/ui/card.tsx
+++ b/frontend/components/ui/card.tsx
@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn("flex flex-col space-y-1.5 p-8", className)}
    {...props}
  />
 ))
@@ -35,7 +35,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
+    className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
    {...props}
  />
 ))
@@ -57,7 +57,7 @@ const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn("p-8 pt-0", className)} {...props} />
 ))
 CardContent.displayName = "CardContent"

--- a/frontend/components/ui/separator.tsx
+++ b/frontend/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }