Wip on homepage.

Add documentation how to optimize code size in production.

docs/theme-rules.md

@@ -0,0 +1,103 @@
+# Theme Rules & Color Palette - Aperonight
+
+Extracted from `app/views/pages/home.html.erb`
+
+## Color Palette
+
+### Primary Colors
+- **Indigo**: `#4338ca` (rgb(67, 56, 202)) - Used in hero gradient
+- **Purple**: `#8b5cf6` (rgb(139, 92, 246)) - Primary brand color
+- **Pink**: `#ec4899` (rgb(236, 72, 153)) - Accent color
+
+### Background Gradients
+- **Hero**: `bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700`
+- **CTA**: `bg-gradient-to-r from-purple-900 via-indigo-900 to-pink-900`
+- **Cards**: `bg-gradient-to-br from-gray-800 to-gray-900`
+- **Buttons**: `bg-gradient-to-r from-purple-600 to-pink-600`
+
+### Text Colors
+- **White**: `text-white` - Primary text
+- **Gray-200**: `text-gray-200` - Secondary text
+- **Gray-300**: `text-gray-300` - Subtle text
+- **Gray-400**: `text-gray-400` - Muted text
+- **Transparent gradient**: `text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400` - Special highlight
+
+### Background Colors
+- **Gray-900**: `bg-gray-900` - Main background
+- **Black**: `bg-black` - Overlay backgrounds
+- **Gray-800**: `bg-gray-800` - Card backgrounds
+- **White/Transparent**: `bg-white bg-opacity-10 backdrop-blur-sm` - Glass effect
+
+## Spacing & Layout
+
+### Hero Section
+- **Height**: `min-h-[70vh]`
+- **Max-width**: `max-w-7xl mx-auto`
+- **Padding**: `px-4 sm:px-6 lg:px-8`
+
+### Grid Layouts
+- **Responsive**: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
+- **Gap**: `gap-8` standard spacing
+
+### Padding Classes
+- **Section**: `py-16`, `py-20`
+- **Card**: `p-4`, `p-6`, `p-8`
+- **Button**: `py-3`, `py-4`, `px-6`, `px-8`
+
+## Typography
+
+### Font Sizes
+- **Hero Title**: `text-5xl md:text-7xl`
+- **Section Title**: `text-4xl`
+- **Card Title**: `text-2xl`
+- **Body**: `text-xl`, `text-lg`
+- **Small**: `text-sm`
+
+### Font Weights
+- **Bold**: `font-bold` (headings)
+- **Semibold**: `font-semibold` (buttons, important text)
+- **Medium**: `font-medium` (labels)
+
+## Interactive States
+
+### Hover Effects
+- **Scale**: `hover:scale-105`
+- **Transition**: `transition-all duration-300`
+- **Button Hover**: `hover:from-purple-700 hover:to-pink-700`
+- **Glass Hover**: `hover:bg-opacity-20`
+
+### Shadows
+- **Default**: `shadow-lg`
+- **Strong**: `shadow-xl`
+- **Card**: `shadow-2xl`
+
+## Border Radius
+- **Buttons**: `rounded-full` (pill-shaped)
+- **Cards**: `rounded-2xl`
+- **Inputs**: `rounded-lg`
+
+## Icon Colors
+- **Primary**: `text-white` (on colored backgrounds)
+- **Accent**: `text-purple-400`, `text-pink-400`
+- **Muted**: `text-gray-400`
+
+## Usage Examples
+
+### Primary Button
+```html
+class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg"
+```
+
+### Card Background
+```html
+class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-xl"
+```
+
+### Hero Gradient
+```html
+class="bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700"
+```
+
+### Glass Effect
+```html
+class="bg-white bg-opacity-10 backdrop-blur-sm border border-white border-opacity-30"