Super Merra Frisör

A modern, responsive website for Super Merra Frisör - a professional men's hair salon in Katrineholm, Sweden. Built with React, TypeScript, and Vite for optimal performance and developer experience.

Try Super Merra Live

🌟 Features

• Modern Design: Clean, professional interface optimized for barbershop services
• Responsive Layout: Fully responsive design that works on all devices
• Interactive Gallery: Showcase of work with smooth animations
• Service Booking: Easy-to-use service display with pricing and duration
• Customer Testimonials: Dynamic testimonial carousel
• Contact Integration: Direct contact options with phone, email, and location
• SEO Optimized: Structured data and meta tags for better search visibility
• Performance Focused: Fast loading times with Vite bundling

🛠️ Tech Stack

• Frontend Framework: React 18.3.1
• Language: TypeScript 5.5.3
• Build Tool: Vite 7.0.4
• Styling: TailwindCSS 3.4.1
• Icons: Lucide React
• Linting: ESLint 9.9.1
• Development: Hot reload, TypeScript checking

🚀 Quick Start

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/yourusername/supermerra.git
   cd supermerra

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

📝 Available Scripts

Command	Description
npm run dev	Start development server with hot reload
npm run build	Build the project for production
npm run preview	Preview the production build locally
npm run lint	Run ESLint to check code quality

🏗️ Project Structure

supermerra/
├── src/
│   ├── App.tsx           # Main application component
│   ├── main.tsx          # Application entry point
│   ├── index.css         # Global styles and Tailwind imports
│   └── vite-env.d.ts     # Vite environment type definitions
├── public/               # Static assets
├── index.html           # HTML template
├── package.json         # Project dependencies and scripts
├── vite.config.ts       # Vite configuration
├── tailwind.config.js   # TailwindCSS configuration
├── tsconfig.json        # TypeScript configuration
├── tsconfig.app.json    # App-specific TypeScript config
├── tsconfig.node.json   # Node-specific TypeScript config
├── eslint.config.js     # ESLint configuration
└── postcss.config.js    # PostCSS configuration

🎨 Design System

Colors

• Primary: Black (#000000) - Professional, elegant
• Accent: Gold/Yellow (#FCD34D) - Premium touch
• Background: White/Gray tones - Clean, modern
• Text: High contrast for accessibility

Typography

• Modern, readable fonts
• Hierarchical heading structure
• Responsive font sizes

Components

• Navigation: Sticky header with smooth scrolling
• Hero Section: Full-screen with call-to-action
• Service Cards: Grid layout with hover effects
• Gallery: Responsive image grid with overlays
• Testimonials: Carousel with navigation controls
• Contact Form: Clean, accessible form design

📱 Responsive Design

The website is fully responsive and optimized for:

• Desktop: Full-featured layout (1024px+)
• Tablet: Adapted layout (768px - 1023px)
• Mobile: Mobile-first design (320px - 767px)

🔧 Configuration

Vite Configuration

• React plugin enabled
• Lucide React optimization
• Fast development builds

TailwindCSS

• Custom animations and transitions
• Responsive design utilities
• Component-based styling

TypeScript

• Strict mode enabled
• Modern ES modules
• Type-safe development

🌐 SEO Features

• Meta Tags: Comprehensive meta descriptions and keywords
• Open Graph: Social media sharing optimization
• Structured Data: Schema markup for local business
• Performance: Optimized loading and Core Web Vitals
• Accessibility: WCAG compliance considerations

📈 Performance

• Bundle Size: Optimized with Vite code splitting
• Image Optimization: WebP format with fallbacks
• Lazy Loading: Images and components loaded on demand
• Caching: Browser caching strategies
• CDN Ready: Static assets optimized for CDN delivery

🚀 Deployment

Build for Production

npm run build

Deploy to Netlify/Vercel

1. Connect your repository
2. Set build command: npm run build
3. Set publish directory: dist
4. Deploy automatically on push

Deploy to Traditional Hosting

1. Run npm run build
2. Upload the dist folder contents to your web server
3. Configure server for SPA routing (if needed)

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use TailwindCSS for styling
• Maintain responsive design principles
• Write semantic HTML
• Test across different browsers and devices

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Contact & Support

• Business: Super Merra Frisör
• Location: Katrineholm, Sweden
• Phone: 076-282 15 58
• Email: [email protected]

For questions about the website:

• Create an issue on GitHub
• Contact [email protected]

🙏 Acknowledgments

• Design Inspiration: Modern barbershop aesthetics
• Images: Unsplash contributors
• Icons: Lucide React icon library
• Fonts: Google Fonts
• Framework: React development team
• Build Tool: Vite development team

---

Super Merra Frisör - Professional men's grooming services in Katrineholm since 2020. Quality, tradition, and modern style combined.