initial commit

2025-08-02 10:49:24 +03:00
commit 99032bf03c
30 changed files with 4754 additions and 0 deletions
--- a/.cursor/rules/color-theme.mdc
+++ 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);
+}
+```
--- a/.gitignore
+++ 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?
--- a/frontend/README.md
+++ 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 <repository-url>
+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
+<Button variant="primary">Primary Button</Button>
+<Button variant="secondary">Secondary Button</Button>
+<Button variant="outline">Outline Button</Button>
+<Button variant="ghost">Ghost Button</Button>
+
+// Different sizes
+<Button size="small">Small</Button>
+<Button size="medium">Medium</Button>
+<Button size="large">Large</Button>
+```
+
+### Card Component
+
+```jsx
+import { Card } from './components';
+
+<Card 
+  title="Card Title"
+  subtitle="Card subtitle"
+  image="https://example.com/image.jpg"
+>
+  <p>Card content goes here...</p>
+</Card>
+```
+
+### Header & Footer
+
+```jsx
+import { Header, Footer } from './components';
+
+// Header with navigation
+<Header />
+
+// Footer with links and social media
+<Footer />
+```
+
+## 🔧 Custom Hooks
+
+### useLocalStorage
+
+```jsx
+import useLocalStorage from './hooks/useLocalStorage';
+
+const [value, setValue] = useLocalStorage('key', initialValue);
+```
+
+## 🌐 API Utilities
+
+```jsx
+import { api } from './utils/api';
+
+// GET request
+const data = await api.get('/users');
+
+// POST request
+const newUser = await api.post('/users', { name: 'John', email: 'john@example.com' });
+
+// PUT request
+const updatedUser = await api.put('/users/1', { name: 'Jane' });
+
+// DELETE request
+await api.delete('/users/1');
+```
+
+## 🎯 Environment Variables
+
+Create a `.env` file in the root directory:
+
+```env
+VITE_API_BASE_URL=http://localhost:3000/api
+```
+
+## 📱 Responsive Design
+
+The application is fully responsive and includes:
+
+- Mobile-first design approach
+- Flexible grid layouts
+- Responsive typography
+- Touch-friendly interactions
+- Optimized for all screen sizes
+
+## 🎨 Styling
+
+The project uses:
+
+- CSS modules for component-specific styles
+- CSS custom properties for theming
+- Flexbox and Grid for layouts
+- Modern CSS features like gradients and animations
+- Responsive design patterns
+
+## 🚀 Deployment
+
+### Build for Production
+
+```bash
+npm run build
+```
+
+The build output will be in the `dist` directory, ready for deployment to any static hosting service.
+
+### Deploy to Vercel
+
+1. Install Vercel CLI:
+```bash
+npm i -g vercel
+```
+
+2. Deploy:
+```bash
+vercel
+```
+
+### Deploy to Netlify
+
+1. Build the project:
+```bash
+npm run build
+```
+
+2. Upload the `dist` folder to Netlify
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+- [Vite](https://vitejs.dev/) for the fast build tool
+- [React](https://reactjs.org/) for the UI library
+- [Unsplash](https://unsplash.com/) for the beautiful images
--- a/frontend/env.example
+++ b/frontend/env.example
@@ -0,0 +1,10 @@
+# API Configuration
+VITE_API_BASE_URL=http://localhost:3000/api
+
+# App Configuration
+VITE_APP_TITLE=Vibing
+VITE_APP_DESCRIPTION=A modern React application built with Vite
+
+# Feature Flags
+VITE_ENABLE_ANALYTICS=false
+VITE_ENABLE_DEBUG_MODE=false 
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "vibing",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.7.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "vite": "^7.0.4"
+  }
+}
--- a/frontend/public/vite.svg
+++ b/frontend/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -0,0 +1,75 @@
+/* Global styles */
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.6;
+  color: var(--color-text-primary);
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+/* Reset some default styles */
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-weight: 600;
+}
+
+p {
+  margin: 0;
+}
+
+ul, ol {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Utility classes */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+/* Responsive utilities */
+@media (max-width: 768px) {
+  .container {
+    padding: 0 1rem;
+  }
+}
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { LanguageProvider } from './contexts/LanguageContext';
+import Home from './pages/Home';
+import './App.css';
+
+function App() {
+  return (
+    <LanguageProvider>
+      <Router>
+        <Routes>
+          <Route path="/" element={<Home />} />
+        </Routes>
+      </Router>
+    </LanguageProvider>
+  );
+}
+
+export default App;
--- a/frontend/src/components/Button.css
+++ b/frontend/src/components/Button.css
@@ -0,0 +1,87 @@
+.btn {
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  font-family: inherit;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+/* Variants */
+.btn-primary {
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+  color: var(--color-dark);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px var(--color-shadow-primary);
+}
+
+.btn-secondary {
+  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
+  color: white;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px var(--color-shadow-secondary);
+}
+
+.btn-outline {
+  background: transparent;
+  color: var(--color-primary);
+  border: 2px solid var(--color-primary);
+}
+
+.btn-outline:hover:not(:disabled) {
+  background: var(--color-primary);
+  color: var(--color-dark);
+  transform: translateY(-2px);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--color-primary);
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background: rgba(255, 205, 178, 0.1);
+  transform: translateY(-2px);
+}
+
+/* Sizes */
+.btn-small {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+
+.btn-medium {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+}
+
+.btn-large {
+  padding: 1rem 2rem;
+  font-size: 1.125rem;
+}
+
+/* Focus states */
+.btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-focus);
+}
+
+.btn-outline:focus {
+  box-shadow: 0 0 0 3px var(--color-focus);
+} 
--- a/frontend/src/components/Button.jsx
+++ b/frontend/src/components/Button.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import './Button.css';
+
+const Button = ({ 
+  children, 
+  variant = 'primary', 
+  size = 'medium', 
+  onClick, 
+  disabled = false,
+  type = 'button',
+  className = '',
+  ...props 
+}) => {
+  const buttonClasses = `btn btn-${variant} btn-${size} ${className}`.trim();
+  
+  return (
+    <button
+      type={type}
+      className={buttonClasses}
+      onClick={onClick}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button; 
--- a/frontend/src/components/Card.css
+++ b/frontend/src/components/Card.css
@@ -0,0 +1,69 @@
+.card {
+  background: var(--color-bg-card);
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(109, 104, 117, 0.1);
+}
+
+.card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+}
+
+.card-image {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+}
+
+.card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.card:hover .card-image img {
+  transform: scale(1.05);
+}
+
+.card-content {
+  padding: 1.5rem;
+}
+
+.card-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.card-subtitle {
+  margin: 0 0 1rem 0;
+  color: var(--color-text-accent);
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.card-body {
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}
+
+/* Card without image */
+.card:not(:has(.card-image)) .card-content {
+  padding: 2rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .card-content {
+    padding: 1rem;
+  }
+  
+  .card:not(:has(.card-image)) .card-content {
+    padding: 1.5rem;
+  }
+} 
--- a/frontend/src/components/Card.jsx
+++ b/frontend/src/components/Card.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import './Card.css';
+
+const Card = ({ 
+  children, 
+  title, 
+  subtitle, 
+  image, 
+  imageAlt,
+  className = '',
+  ...props 
+}) => {
+  return (
+    <div className={`card ${className}`.trim()} {...props}>
+      {image && (
+        <div className="card-image">
+          <img src={image} alt={imageAlt || title} />
+        </div>
+      )}
+      <div className="card-content">
+        {title && <h3 className="card-title">{title}</h3>}
+        {subtitle && <p className="card-subtitle">{subtitle}</p>}
+        <div className="card-body">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Card; 
--- a/frontend/src/components/Footer.css
+++ b/frontend/src/components/Footer.css
@@ -0,0 +1,76 @@
+.footer {
+  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-secondary-dark) 100%);
+  color: var(--color-text-primary-light);
+  padding: 3rem 0 1rem;
+  margin-top: auto;
+}
+
+.footer-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.footer-section h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+  color: var(--color-primary);
+}
+
+.footer-section h4 {
+  margin: 0 0 1rem 0;
+  font-size: 1.2rem;
+  color: var(--color-primary);
+}
+
+.footer-section p {
+  margin: 0;
+  line-height: 1.6;
+  color: var(--color-text-primary-light);
+}
+
+.footer-section ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-section ul li {
+  margin-bottom: 0.5rem;
+}
+
+.footer-section ul li a {
+  color: var(--color-text-primary-light);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-section ul li a:hover {
+  color: var(--color-secondary);
+}
+
+.footer-bottom {
+  border-top: 1px solid var(--color-secondary-dark);
+  padding-top: 1rem;
+  text-align: center;
+}
+
+.footer-bottom p {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+}
+
+@media (max-width: 768px) {
+  .footer-content {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+} 
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import './Footer.css';
+import { useLanguage } from '../contexts/LanguageContext';
+
+const Footer = () => {
+  const { t } = useLanguage();
+  return (
+    <footer className="footer">
+      <div className="footer-container">
+        <div className="footer-content">
+          <div className="footer-section">
+            <h3>Phun</h3>
+            <p>{t('footerDescription')}</p>
+          </div>
+          <div className="footer-section">
+            <h4>Links</h4>
+            <ul>
+              <li><a href="/">Home</a></li>
+              <li><a href="/about">About</a></li>
+              <li><a href="/contact">Contact</a></li>
+            </ul>
+          </div>
+          <div className="footer-section">
+            <h4>Connect</h4>
+            <ul>
+              <li><a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub</a></li>
+              <li><a href="https://twitter.com" target="_blank" rel="noopener noreferrer">Twitter</a></li>
+              <li><a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
+            </ul>
+          </div>
+        </div>
+        <div className="footer-bottom">
+          <p>&copy; 2024 Phun. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer; 
--- a/frontend/src/components/Header.css
+++ b/frontend/src/components/Header.css
@@ -0,0 +1,68 @@
+.header {
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+  color: var(--color-dark);
+  padding: 1rem 0;
+  box-shadow: 0 2px 10px var(--color-shadow-primary);
+}
+
+.header-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header-title {
+  margin: 0;
+  font-size: 2rem;
+  font-weight: 700;
+  background: linear-gradient(45deg, var(--color-dark), var(--color-secondary-dark));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+}
+
+.nav-list {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 2rem;
+}
+
+.nav-link {
+  color: var(--color-dark);
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+}
+
+.nav-link:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
+}
+
+@media (max-width: 768px) {
+  .header-container {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .nav-list {
+    gap: 1rem;
+  }
+  
+  .header-nav {
+    order: 2;
+  }
+} 
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useLanguage } from '../contexts/LanguageContext';
+import LanguageSwitcher from './LanguageSwitcher';
+import './Header.css';
+
+const Header = () => {
+  const { t } = useLanguage();
+
+  return (
+    <header className="header">
+      <div className="header-container">
+        <h1 className="header-title">Phun</h1>
+        <nav className="header-nav">
+          <ul className="nav-list">
+            <li><Link to="/" className="nav-link">{t('home')}</Link></li>
+            <li><Link to="/about" className="nav-link">{t('about')}</Link></li>
+            <li><Link to="/contact" className="nav-link">{t('contact')}</Link></li>
+          </ul>
+        </nav>
+        <LanguageSwitcher />
+      </div>
+    </header>
+  );
+};
+
+export default Header; 
--- a/frontend/src/components/LanguageSwitcher.css
+++ b/frontend/src/components/LanguageSwitcher.css
@@ -0,0 +1,89 @@
+.language-switcher {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.language-label {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+
+.language-buttons {
+  display: flex;
+  gap: 4px;
+  background: rgba(109, 104, 117, 0.1);
+  border-radius: 8px;
+  padding: 2px;
+}
+
+.language-btn {
+  background: transparent;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 60px;
+}
+
+.language-btn:hover {
+  background: rgba(255, 205, 178, 0.2);
+  color: var(--color-text-primary);
+  transform: translateY(-1px);
+}
+
+.language-btn.active {
+  background: var(--color-primary);
+  color: var(--color-dark);
+  box-shadow: 0 2px 8px var(--color-shadow-primary);
+}
+
+.language-btn:focus {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+  .language-buttons {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  
+  .language-btn {
+    color: var(--color-text-primary-light);
+  }
+  
+  .language-btn:hover {
+    background: rgba(255, 205, 178, 0.15);
+    color: rgba(255, 255, 255, 0.95);
+  }
+  
+  .language-btn.active {
+    background: var(--color-primary);
+    color: var(--color-dark);
+  }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .language-switcher {
+    margin-left: 0;
+    margin-top: 12px;
+  }
+  
+  .language-label {
+    font-size: 13px;
+  }
+  
+  .language-btn {
+    padding: 5px 10px;
+    font-size: 13px;
+    min-width: 50px;
+  }
+} 
--- a/frontend/src/components/LanguageSwitcher.jsx
+++ b/frontend/src/components/LanguageSwitcher.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useLanguage } from '../contexts/LanguageContext';
+import './LanguageSwitcher.css';
+
+const LanguageSwitcher = () => {
+  const { language, setLanguage, t } = useLanguage();
+
+  const handleLanguageChange = (newLanguage) => {
+    setLanguage(newLanguage);
+  };
+
+  return (
+    <div className="language-switcher">
+      <span className="language-label">{t('language')}:</span>
+      <div className="language-buttons">
+        <button
+          className={`language-btn ${language === 'en' ? 'active' : ''}`}
+          onClick={() => handleLanguageChange('en')}
+          aria-label="Switch to English"
+        >
+          {t('english')}
+        </button>
+        <button
+          className={`language-btn ${language === 'fi' ? 'active' : ''}`}
+          onClick={() => handleLanguageChange('fi')}
+          aria-label="Vaihda suomeksi"
+        >
+          {t('finnish')}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default LanguageSwitcher; 
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -0,0 +1,5 @@
+export { default as Header } from './Header';
+export { default as Footer } from './Footer';
+export { default as Button } from './Button';
+export { default as Card } from './Card';
+export { default as LanguageSwitcher } from './LanguageSwitcher'; 
--- a/frontend/src/contexts/LanguageContext.jsx
+++ b/frontend/src/contexts/LanguageContext.jsx
@@ -0,0 +1,103 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const LanguageContext = createContext();
+
+export const useLanguage = () => {
+  const context = useContext(LanguageContext);
+  if (!context) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+};
+
+const translations = {
+  en: {
+    // Header
+    home: 'Home',
+    about: 'About',
+    contact: 'Contact',
+    
+    // CTA Section
+    readyToStart: 'Ready to get started?',
+    ctaSubtitle: 'Join thousands of developers building amazing applications with our modern stack.',
+    startBuilding: 'Start Building',
+    
+    // Language Switcher
+    language: 'Language',
+    english: 'English',
+    finnish: 'Finnish',
+    
+    // Search Page
+    searchPlaceholder: 'Enter your search query...',
+    searchButton: 'Search',
+    searchResults: 'Search Results',
+    searchResultsSubtitle: 'Here are the results for your search query.',
+    searchResultsPlaceholder: 'Search results will appear here. Try entering a search term above to get started.',
+    
+    // Search Filters
+    dogFriendly: 'Dog Friendly',
+    accessible: 'Accessible',
+    familyFriendly: 'Family Friendly',
+    peopleCount: 'People',
+    priceRange: 'Price',
+    any: 'Any',
+
+    // Footer
+    footerDescription: 'Find fun things to do!',
+  },
+  fi: {
+    // Header
+    home: 'Koti',
+    about: 'Tietoja',
+    contact: 'Yhteystiedot',
+
+
+    // CTA Section
+    readyToStart: 'Valmiina aloittamaan?',
+    ctaSubtitle: 'Liity tuhansien kehittäjien joukkoon, jotka rakentavat upeita sovelluksia modernilla teknologiapinoamme.',
+    startBuilding: 'Aloita rakentaminen',
+    
+    // Language Switcher
+    language: 'Kieli',
+    english: 'Englanti',
+    finnish: 'Suomi',
+    
+    // Search Page
+    searchPlaceholder: 'Syötä hakukyselysi...',
+    searchButton: 'Hae',
+    searchResults: 'Hakutulokset',
+    searchResultsSubtitle: 'Tässä ovat hakutulokset kyselysi perusteella.',
+    searchResultsPlaceholder: 'Hakutulokset näkyvät täällä. Kokeile syöttää hakusana yllä aloittaaksesi.',
+    
+    // Search Filters
+    dogFriendly: 'Koiraystävällinen',
+    accessible: 'Esteetön',
+    familyFriendly: 'Lapsiystävällinen',
+    peopleCount: 'Henkilöt',
+    priceRange: 'Hinta',
+    any: 'Mikä tahansa',
+
+    // Footer
+    footerDescription: 'Löydä hauskaa tekemistä!',
+  }
+};
+
+export const LanguageProvider = ({ children }) => {
+  const [language, setLanguage] = useState('en');
+
+  const t = (key) => {
+    return translations[language][key] || key;
+  };
+
+  const value = {
+    language,
+    setLanguage,
+    t
+  };
+
+  return (
+    <LanguageContext.Provider value={value}>
+      {children}
+    </LanguageContext.Provider>
+  );
+}; 
--- a/frontend/src/hooks/useLocalStorage.js
+++ b/frontend/src/hooks/useLocalStorage.js
@@ -0,0 +1,30 @@
+import { useState } from 'react';
+
+const useLocalStorage = (key, initialValue) => {
+  // Get from local storage then parse stored json or return initialValue
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  // Return a wrapped version of useState's setter function that persists the new value to localStorage
+  const setValue = (value) => {
+    try {
+      // Allow value to be a function so we have the same API as useState
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(`Error setting localStorage key "${key}":`, error);
+    }
+  };
+
+  return [storedValue, setValue];
+};
+
+export default useLocalStorage; 
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,89 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #6D6875;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* 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);
+}
+
+a {
+  font-weight: 500;
+  color: var(--color-primary);
+  text-decoration: inherit;
+}
+a:hover {
+  color: var(--color-secondary);
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: var(--color-bg-dark);
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: var(--color-primary);
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto var(--color-focus);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: var(--color-text-primary);
+    background-color: var(--color-bg-light);
+  }
+  a:hover {
+    color: var(--color-secondary-dark);
+  }
+  button {
+    background-color: var(--color-bg-light);
+  }
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/frontend/src/pages/Home.css
+++ b/frontend/src/pages/Home.css
@@ -0,0 +1,337 @@
+.home {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-content {
+  flex: 1;
+}
+
+/* Hero Section */
+.hero {
+  background: linear-gradient(rgba(109, 104, 117, 0.4), rgba(109, 104, 117, 0.4)), url('https://images.unsplash.com/photo-1429305336325-b84ace7eba3b?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  color: white;
+  padding: 3rem 0;
+  text-align: center;
+}
+
+.hero-content {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.hero-title {
+  font-size: 3.5rem;
+  font-weight: 800;
+  margin: 0 0 3rem 0;
+  line-height: 1.2;
+}
+
+.highlight {
+  background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Search Toolbar in Hero */
+.search-toolbar {
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(10px);
+  padding: 1.5rem;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.toolbar-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+/* Search Input Container */
+.search-input-container {
+  display: flex;
+  gap: 1rem;
+  max-width: 600px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 50px;
+  padding: 0.5rem;
+  box-shadow: 0 8px 32px var(--color-shadow-primary);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.search-input-container:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 40px var(--color-shadow-primary);
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  padding: 1rem 1.5rem;
+  font-size: 1rem;
+  border-radius: 25px;
+  background: transparent;
+  color: var(--color-text-primary);
+}
+
+.search-input::placeholder {
+  color: var(--color-text-secondary);
+  opacity: 0.7;
+}
+
+.search-button {
+  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
+  color: white;
+  border: none;
+  padding: 1rem 2rem;
+  border-radius: 25px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px var(--color-shadow-secondary);
+}
+
+.search-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px var(--color-shadow-secondary);
+}
+
+.search-button:focus {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/* Filters Container */
+.filters-container {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+}
+
+.filter-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 25px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(109, 104, 117, 0.1);
+}
+
+.filter-label:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(109, 104, 117, 0.15);
+  background: white;
+}
+
+.filter-checkbox {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--color-secondary);
+  cursor: pointer;
+}
+
+.filter-text {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+}
+
+.filter-select {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.9rem;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+}
+
+.filter-select:hover {
+  background: rgba(229, 152, 155, 0.1);
+}
+
+.filter-select:focus {
+  background: rgba(229, 152, 155, 0.2);
+}
+
+/* Features Section */
+.features {
+  padding: 5rem 0;
+  background: white;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.section-title {
+  text-align: center;
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin: 0 0 3rem 0;
+  color: var(--color-text-primary);
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .hero {
+    padding: 4rem 0;
+  }
+  
+  .hero-title {
+    font-size: 2.5rem;
+  }
+  
+  .hero-subtitle {
+    font-size: 1.125rem;
+  }
+  
+  .hero-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .toolbar-content {
+    gap: 1rem;
+  }
+  
+  .search-input-container {
+    flex-direction: column;
+    border-radius: 16px;
+    padding: 1rem;
+  }
+  
+  .search-input,
+  .search-button {
+    border-radius: 12px;
+  }
+  
+  .filters-container {
+    gap: 1rem;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .filter-label {
+    min-width: 200px;
+    justify-content: center;
+  }
+  
+  .features {
+    padding: 3rem 0;
+  }
+  
+  .section-title {
+    font-size: 2rem;
+  }
+  
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-title {
+    font-size: 2rem;
+  }
+  
+  .hero-subtitle {
+    font-size: 1rem;
+  }
+  
+  .container {
+    padding: 0 1rem;
+  }
+  
+  .search-toolbar {
+    padding: 1rem;
+  }
+  
+  .filter-label {
+    min-width: 180px;
+    padding: 0.75rem;
+  }
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .search-toolbar {
+    background: rgba(109, 104, 117, 0.95);
+    backdrop-filter: blur(10px);
+  }
+  
+  .search-input-container {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+  }
+  
+  .search-input {
+    color: var(--color-text-primary-light);
+  }
+  
+  .search-input::placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  
+  .filter-label {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+  }
+  
+  .filter-label:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+  
+  .filter-text {
+    color: var(--color-text-primary-light);
+  }
+  
+  .filter-select {
+    color: var(--color-text-primary-light);
+  }
+  
+  .filter-select:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  
+  .filter-select:focus {
+    background: rgba(255, 255, 255, 0.2);
+  }
+  
+  .features {
+    background: var(--color-bg-dark);
+  }
+} 
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import { Header, Footer, Button, Card } from '../components';
+import { useLanguage } from '../contexts/LanguageContext';
+import './Home.css';
+
+const Home = () => {
+  const { t } = useLanguage();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filters, setFilters] = useState({
+    dogFriendly: false,
+    accessible: false,
+    familyFriendly: false,
+    peopleCount: '',
+    priceRange: ''
+  });
+
+  const handleGetStarted = () => {
+    alert('Get Started button clicked!');
+  };
+
+  const handleLearnMore = () => {
+    alert('Learn More button clicked!');
+  };
+
+  const handleFilterChange = (filterName, value) => {
+    setFilters(prev => ({
+      ...prev,
+      [filterName]: value
+    }));
+  };
+
+  const handleSearch = () => {
+    // Handle search logic here
+    console.log('Search query:', searchQuery);
+    console.log('Filters:', filters);
+  };
+
+  return (
+    <div className="home">
+      <Header />
+      
+      <main className="main-content">
+        {/* Hero Section */}
+        <section className="hero">
+          <div className="hero-content">
+            
+            {/* Search Toolbar */}
+            <div className="search-toolbar">
+              <div className="toolbar-content">
+                {/* Search Input */}
+                <div className="search-input-container">
+                  <input 
+                    type="text" 
+                    className="search-input" 
+                    placeholder={t('searchPlaceholder')}
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
+                  />
+                  <button className="search-button" onClick={handleSearch}>
+                    {t('searchButton')}
+                  </button>
+                </div>
+
+                {/* Filters */}
+                <div className="filters-container">
+                  <div className="filter-group">
+                    <label className="filter-label">
+                      <input 
+                        type="checkbox" 
+                        className="filter-checkbox"
+                        checked={filters.dogFriendly}
+                        onChange={(e) => handleFilterChange('dogFriendly', e.target.checked)}
+                      />
+                      <span className="filter-text">{t('dogFriendly')}</span>
+                    </label>
+                  </div>
+
+                  <div className="filter-group">
+                    <label className="filter-label">
+                      <input 
+                        type="checkbox" 
+                        className="filter-checkbox"
+                        checked={filters.accessible}
+                        onChange={(e) => handleFilterChange('accessible', e.target.checked)}
+                      />
+                      <span className="filter-text">{t('accessible')}</span>
+                    </label>
+                  </div>
+
+                  <div className="filter-group">
+                    <label className="filter-label">
+                      <input 
+                        type="checkbox" 
+                        className="filter-checkbox"
+                        checked={filters.familyFriendly}
+                        onChange={(e) => handleFilterChange('familyFriendly', e.target.checked)}
+                      />
+                      <span className="filter-text">{t('familyFriendly')}</span>
+                    </label>
+                  </div>
+
+                  <div className="filter-group">
+                    <label className="filter-label">
+                      <span className="filter-text">{t('peopleCount')}:</span>
+                      <select 
+                        className="filter-select"
+                        value={filters.peopleCount}
+                        onChange={(e) => handleFilterChange('peopleCount', e.target.value)}
+                      >
+                        <option value="">{t('any')}</option>
+                        <option value="1">1</option>
+                        <option value="2">2</option>
+                        <option value="3">3</option>
+                        <option value="4">4</option>
+                        <option value="5+">5+</option>
+                      </select>
+                    </label>
+                  </div>
+
+                  <div className="filter-group">
+                    <label className="filter-label">
+                      <span className="filter-text">{t('priceRange')}:</span>
+                      <select 
+                        className="filter-select"
+                        value={filters.priceRange}
+                        onChange={(e) => handleFilterChange('priceRange', e.target.value)}
+                      >
+                        <option value="">{t('any')}</option>
+                        <option value="€">€</option>
+                        <option value="€€">€€</option>
+                        <option value="€€€">€€€</option>
+                        <option value="€€€€">€€€€</option>
+                      </select>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default Home; 
--- a/frontend/src/utils/api.js
+++ b/frontend/src/utils/api.js
@@ -0,0 +1,84 @@
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api';
+
+class ApiError extends Error {
+  constructor(message, status, data) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+    this.data = data;
+  }
+}
+
+const handleResponse = async (response) => {
+  const contentType = response.headers.get('content-type');
+  const isJson = contentType && contentType.includes('application/json');
+  
+  if (!response.ok) {
+    const errorData = isJson ? await response.json() : await response.text();
+    throw new ApiError(
+      errorData.message || `HTTP error! status: ${response.status}`,
+      response.status,
+      errorData
+    );
+  }
+  
+  return isJson ? response.json() : response.text();
+};
+
+export const api = {
+  async get(endpoint, options = {}) {
+    const url = `${API_BASE_URL}${endpoint}`;
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+      ...options,
+    });
+    return handleResponse(response);
+  },
+
+  async post(endpoint, data = {}, options = {}) {
+    const url = `${API_BASE_URL}${endpoint}`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+      body: JSON.stringify(data),
+      ...options,
+    });
+    return handleResponse(response);
+  },
+
+  async put(endpoint, data = {}, options = {}) {
+    const url = `${API_BASE_URL}${endpoint}`;
+    const response = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+      body: JSON.stringify(data),
+      ...options,
+    });
+    return handleResponse(response);
+  },
+
+  async delete(endpoint, options = {}) {
+    const url = `${API_BASE_URL}${endpoint}`;
+    const response = await fetch(url, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+      ...options,
+    });
+    return handleResponse(response);
+  },
+};
+
+export { ApiError }; 
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>