feat: add MIT License and update README for clarity

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