Merge pull request 'Add styleguide based on current design' (#57) from styleguide into main

Reviewed-on: #57
Reviewed-by: jleibl <jleibl@proton.me>

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Casino Gaming Platform
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -2,7 +2,7 @@
 
 An online gaming platform offering various casino-style games with virtual currency support. This project features a modern tech stack with Angular frontend, Spring Boot backend, and complete user authentication.
 
-![Casino Gaming Platform](/frontend/public/blackjack.webp)
+Please refer to our [Style Guide](/frontend/README.md#style-guide) for design guidelines and component standards.
 
 ## Features
 
@@ -150,4 +150,4 @@ References:
 
 ## License
 
-[License information here]
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

frontend/README.md

@@ -1,3 +1,136 @@
-# Lf12Starter 2024
+# Casino Gaming Platform - Frontend
 
+This is the frontend application for the Casino Gaming Platform. It's built with Angular 18 and TailwindCSS, providing a responsive and modern UI for the casino gaming experience.
+
+## Development
+
+### Commands
+
+- **Build**: `bun run build` or `bunx @angular/cli build`
+- **Start Dev Server**: `bun run start` or `bunx @angular/cli serve --proxy-config src/proxy.conf.json`
+- **Format Code**: `bun run format` or `prettier --write "src/**/*.{ts,html,css,scss}"`
+- **Lint**: `bun run lint` or `ng lint`
+- **Test**: `bun run test` or `bunx @angular/cli test`
+- **Test Single File**: `bunx @angular/cli test --include=path/to/test.spec.ts`
+
+## Style Guide
+
+### Color Palette
+
+#### Primary Colors
+- Deep Blue: `#0a1219` (background)
+- Deep Blue Light: `#121e27` (secondary background)
+- Deep Blue Contrast: `#1a2835` (cards, elements)
+
+#### Accent Colors
+- Emerald: `#10b981` (primary buttons)
+- Emerald Dark: `#059669` (button hover)
+- Emerald Light: `#34d399` (highlights)
+
+#### Text Colors
+- Primary Text: `#ffffff` (white)
+- Secondary Text: `#94a3b8` (light gray)
+- Tertiary Text: `#64748b` (darker gray)
+
+#### Additional Accents
+- Yellow: `#fbbf24`
+- Red: `#ef4444`
+- Purple: `#8b5cf6`
+
+### Typography
+
+#### Font Sizes
+- Extra Small: Text-xs (footer disclaimers)
+- Small: Text-sm (navigation links, footer links)
+- Base: Text-base (general text)
+- Large: Text-lg (section headings)
+- Extra Large: Text-xl (stat numbers, game headings)
+- Display: Text-4xl/5xl/7xl (welcome bonus text)
+
+#### Font Weights
+- Normal: General text
+- Medium: Labels
+- Semibold: Navigation brand
+- Bold: Headings, stats
+- Extrabold: Welcome bonus text
+
+### Components
+
+#### Buttons
+- Primary: Emerald background with hover state
+- Secondary: Deep blue light background with hover state
+- All buttons have active scale effect (95%)
+- Transition duration: 200-300ms
+
+#### Cards
+- Background: Deep blue contrast
+- Rounded corners (lg)
+- Shadow effects with hover transition
+- Consistent padding (p-4)
+
+#### Navigation
+- Desktop: Horizontal links with hover effects
+- Mobile: Collapsible menu with toggle
+- Links have color and background transitions
+
+#### Modals
+- Backdrop blur with dark overlay
+- Card-style container with emerald focus rings
+- Consistent form styling with transitions
+
+### Forms
+
+#### Inputs
+- Dark background with border
+- Focus states with emerald accent
+- Consistent padding and rounded corners
+- Clear label positioning
+
+### Layout
+
+#### Grid System
+- Mobile-first responsive grid
+- Breakpoints: sm, md, lg
+- Grid columns: 1 (mobile), 2 (tablet), 3 (desktop)
+- Consistent gap spacing (gap-4)
+
+#### Spacing
+- Consistent margin/padding scale
+- Mobile-responsive spacing adjustments
+
+### Animation
+- Transitions: 200-500ms duration
+- Hover/active state animations
+- Scale transformations (95-110%)
+- Opacity transitions for navigation elements
+
+### Components & Classes
+
+#### Common UI Elements
+- `.card` - Base card container
+- `.button-primary` - Main CTA buttons
+- `.button-secondary` - Alternative action buttons
+- `.section-heading` - Section titles
+- `.nav-link` - Navigation links
+- `.modal-card` - Modal container
+
+#### Game Elements
+- `.game-card-content` - Game information container
+- `.game-heading-sm` - Small game titles
+- `.game-heading-xl` - Large game titles
+- `.game-text` - Game descriptions
+- `.slider-container` - Game carousel container
+
+### Responsive Design
+- Mobile-first approach
+- Tailwind breakpoints (sm, md, lg)
+- Different layouts based on screen size
+- Responsive text sizing and spacing
+- Hidden/visible elements using responsive classes
+
+### CSS Framework
+- Tailwind CSS for utility classes
+- Custom utility classes with @apply directive
+- CSS variables for theming
+- Component-based styling approach