Roomix - Hotel Technology Landing Page

A modern, responsive landing page for Roomix hotel technology platform, accurately recreated from Figma design.

Features

• Fully Responsive Design: Optimized for mobile, tablet, and desktop
• Custom Typography: Archivo and Inter fonts from assets
• Modern Layout: Clean, professional design with proper spacing
• Accessibility: Focus states and semantic HTML structure
• Performance Optimized: Efficient CSS and image handling

Sections

1. Hero Section: Eye-catching header with background image and CTA
2. Features Section: Three alternating feature blocks showcasing platform capabilities
3. Why Us Section: Background image with testimonial carousel
4. Results Section: Dark theme with measurable statistics
5. Testimonials Section: Customer success story with metrics
6. Footer Section: Final CTA and legal information

Technologies Used

• HTML5
• CSS3 with Tailwind CSS
• Custom fonts (Archivo, Inter)
• Responsive design principles

File Structure

/
├── index.html          # Main HTML file
├── styles.css          # Custom CSS styles
├── README.md           # Project documentation
└── assets/             # Fonts and images
    ├── Archivo-VariableFont.ttf
    ├── Archivo-Italic-VariableFont.ttf
    ├── Inter-VariableFont.ttf
    ├── Inter-Italic-VariableFont.ttf
    ├── hero_bg.png
    ├── whyus_bg.png
    ├── feature1.png
    ├── feature2.png
    ├── feature3.png
    └── testimonials.png

Responsive Breakpoints

• Mobile: 320px - 768px
• Tablet: 768px - 1024px
• Desktop: 1024px+

Colors

• Primary Brown: #6f2e1f
• Dark Brown: #402d29
• Cream: #f8ede3
• Dark Green: #353623
• Dark Red: #481e1a
• Light Cream: #fff2e4

Getting Started

1. Clone or download the project files
2. Ensure all assets are in the assets/ folder
3. Open index.html in a web browser
4. The page will automatically load with all styles and fonts

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Design Notes

• Based on Figma design with 1440px desktop width
• Maintains original color scheme and typography
• Responsive grid layouts for optimal viewing on all devices
• Semantic HTML structure for accessibility
• No additional hover effects or animations as per requirements