commit 99032bf03ccf871e7acc4fde18e84cd8bb734f66 Author: Jarno Kiesiläinen Date: Sat Aug 2 10:49:24 2025 +0300 initial commit diff --git a/.cursor/rules/color-theme.mdc b/.cursor/rules/color-theme.mdc new file mode 100644 index 0000000..fc2c14d --- /dev/null +++ b/.cursor/rules/color-theme.mdc @@ -0,0 +1,117 @@ +--- +alwaysApply: true +--- +# Frontend Color Theme Guidelines + +## Color Palette + +### Primary Colors +- **Primary Peach**: `#FFCDB2` - Main brand color, used for primary buttons, links, and accents +- **Secondary Coral**: `#FFB4A2` - Used for gradients and secondary elements +- **Light Pink**: `#E5989B` - Hover states and secondary buttons +- **Medium Mauve**: `#B5838D` - Alternative secondary color +- **Dark Purple**: `#6D6875` - Text and dark accents + +### Background Colors +- **Dark Mode Background**: `#6D6875` - Main dark theme background +- **Light Mode Background**: `#FFCDB2` - Main light theme background (very light) +- **Card Background**: `white` - Card and component backgrounds + +### Text Colors +- **Primary Text (Dark)**: `#6D6875` - Main text color in light mode +- **Primary Text (Light)**: `rgba(255, 255, 255, 0.87)` - Main text color in dark mode +- **Secondary Text**: `#B5838D` - Subtitle and body text +- **Accent Text**: `#E5989B` - Card subtitles and accent text + +### Interactive States +- **Hover Effects**: Use `transform: translateY(-2px)` for subtle lift animations +- **Focus Rings**: `rgba(255, 205, 178, 0.3)` - Peach focus outline +- **Shadows**: `rgba(255, 205, 178, 0.3)` for primary elements, `rgba(229, 152, 155, 0.3)` for secondary + +## CSS Custom Properties + +Always define colors using CSS custom properties in [src/index.css](mdc:src/index.css): + +```css +:root { + /* Primary Colors */ + --color-primary: #FFCDB2; + --color-primary-dark: #FFB4A2; + --color-secondary: #E5989B; + --color-secondary-dark: #B5838D; + --color-dark: #6D6875; + + /* Background Colors */ + --color-bg-dark: #6D6875; + --color-bg-light: #FFCDB2; + --color-bg-card: white; + + /* Text Colors */ + --color-text-primary: #6D6875; + --color-text-primary-light: rgba(255, 255, 255, 0.87); + --color-text-secondary: #B5838D; + --color-text-accent: #E5989B; + + /* Interactive Colors */ + --color-focus: rgba(255, 205, 178, 0.3); + --color-shadow-primary: rgba(255, 205, 178, 0.3); + --color-shadow-secondary: rgba(229, 152, 155, 0.3); +} +``` + +## Component Styling Guidelines + +### Buttons +Follow the patterns in [src/components/Button.css](mdc:src/components/Button.css): +- Use gradient backgrounds for primary/secondary buttons +- Implement hover animations with `translateY(-2px)` +- Apply consistent focus states with green outline +- Use semantic class names: `.btn-primary`, `.btn-secondary`, `.btn-outline`, `.btn-ghost` + +### Cards +Follow the patterns in [src/components/Card.css](mdc:src/components/Card.css): +- Use white background with subtle shadows +- Implement hover animations with `translateY(-8px)` +- Use consistent border radius (16px) +- Apply image hover effects with `scale(1.05)` + +### Links +- Primary color: `#FFCDB2` +- Hover color: `#E5989B` (dark mode), `#B5838D` (light mode) +- No text decoration by default + +## Dark/Light Mode Support + +Always include both dark and light mode variants using `@media (prefers-color-scheme: light)` in [src/index.css](mdc:src/index.css). + +## Accessibility + +- Maintain minimum contrast ratios (4.5:1 for normal text, 3:1 for large text) +- Use focus indicators with `--color-focus` +- Ensure hover states are distinct from focus states +- Test with color blindness simulators + +## File Organization + +- Global styles and CSS custom properties: [src/index.css](mdc:src/index.css) +- Component-specific styles: Individual `.css` files in [src/components/](mdc:src/components/) +- Utility classes: [src/App.css](mdc:src/App.css) +- Consider creating a dedicated [src/styles/](mdc:src/styles/) directory for theme files + +## Usage Examples + +```css +/* Button with theme colors */ +.my-button { + background: var(--color-primary); + color: var(--color-dark); + box-shadow: 0 4px 12px var(--color-shadow-primary); +} + +/* Card with theme colors */ +.my-card { + background: var(--color-bg-card); + color: var(--color-text-primary); + border: 1px solid rgba(109, 104, 117, 0.1); +} +``` diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 0000000..23f9fb4 --- /dev/null +++ b/frontend/README.md @@ -0,0 +1,222 @@ +# Vibing - React + Vite Application + +A modern React application built with Vite, featuring beautiful components and a responsive design that adapts to any device. + +## 🚀 Features + +- **Fast Development**: Built with Vite for lightning-fast development and hot module replacement +- **Modern React**: Using React 19 with modern hooks and patterns +- **Responsive Design**: Fully responsive design that looks great on all devices +- **Component Library**: Reusable components with consistent styling +- **Custom Hooks**: Useful custom hooks for common functionality +- **API Utilities**: Built-in API utilities with error handling +- **Modern Styling**: Beautiful gradients and modern CSS design + +## 📦 Project Structure + +``` +src/ +├── components/ # Reusable UI components +│ ├── Header.jsx # Navigation header +│ ├── Footer.jsx # Site footer +│ ├── Button.jsx # Reusable button component +│ ├── Card.jsx # Card component for content +│ └── index.js # Component exports +├── hooks/ # Custom React hooks +│ └── useLocalStorage.js +├── pages/ # Page components +│ ├── Home.jsx # Home page +│ └── Home.css +├── utils/ # Utility functions +│ └── api.js # API utilities +├── styles/ # Global styles (future use) +├── assets/ # Static assets +├── App.jsx # Main app component +├── App.css # Global styles +├── main.jsx # App entry point +└── index.css # Base styles +``` + +## 🛠️ Getting Started + +### Prerequisites + +- Node.js (version 16 or higher) +- npm or yarn + +### Installation + +1. Clone the repository: +```bash +git clone +cd vibing +``` + +2. Install dependencies: +```bash +npm install +``` + +3. Start the development server: +```bash +npm run dev +``` + +4. Open your browser and navigate to `http://localhost:5173` + +## 📜 Available Scripts + +- `npm run dev` - Start development server +- `npm run build` - Build for production +- `npm run preview` - Preview production build +- `npm run lint` - Run ESLint + +## 🎨 Components + +### Button Component + +```jsx +import { Button } from './components'; + +// Different variants + + + + + +// Different sizes + + + +``` + +### Card Component + +```jsx +import { Card } from './components'; + + +

Card content goes here...

+ +``` + +### Header & Footer + +```jsx +import { Header, Footer } from './components'; + +// Header with navigation +
+ +// Footer with links and social media +