The Old Vine Hotel - Website

A modern, responsive hotel website built with React.js, featuring multilingual support (English, Arabic, French) and a fully static deployment.

🌐 Live Website

https://oldvinehotel.com

✨ Features

🎨 Modern, responsive design
🌐 Multilingual support (EN, AR, FR)
🏨 Room gallery with categories
📸 Photo galleries (Hotel & Restaurant)
📍 Contact page with Google Maps
📱 Mobile-optimized
⚡ Fully static (no backend required)
🎯 SEO-friendly

🛠️ Technology Stack

Frontend: React.js with Material-UI
Routing: React Router DOM
Internationalization: i18next
Styling: Material-UI (MUI) components
Build Tool: Create React App
Deployment: Static hosting (cPanel/GoDaddy)

📁 Project Structure

vine_hotel/
├── client/                 # React frontend
│   ├── public/            # Static assets (images, JSON data)
│   ├── src/               # Source code
│   │   ├── components/    # Reusable components
│   │   ├── pages/         # Page components
│   │   ├── locales/       # Translation files
│   │   └── utils/         # Utilities
│   └── build/             # Production build (generated)
├── docs/                  # Documentation
└── scripts/               # Build/deployment scripts

🚀 Getting Started

Prerequisites

Node.js (v16 or higher)
npm or yarn

Installation

Clone the repository

git clone <repository-url>
cd vine_hotel

Install dependencies
```
cd client
npm install
```
Start development server
```
npm start
```
The website will open at http://localhost:3060

Building for Production

cd client
npm run build

The production build will be in client/build/ directory.

📝 Content Management

The website uses static JSON files for content, located in:

client/public/static-data/ - Content data files
client/src/locales/ - Translation files

To update content:

Edit the JSON files in client/public/static-data/
Edit translations in client/src/locales/
Rebuild the site: npm run build

🌍 Languages

English (en) - Default
Arabic (ar) - العربية
French (fr) - Français

Users can switch languages using the language selector in the header.

📦 Deployment

The website is deployed as a static site. To deploy:

Build the production bundle:
```
cd client
npm run build
```
Upload the contents of client/build/ to your web server's public_html directory.
Ensure .htaccess is included for proper routing.

📄 License

MIT License

Note: This repository contains only the frontend/website code. The CMS/backend code is excluded from this repository.

2.8 KiB Raw Blame History