GKR Hospitality - Web Application

A modern, high-performance web application for GKR Hospitality, redesigned and migrated to Next.js 15. This project features a premium design with smooth animations, responsive layouts, and optimized performance.

🚀 Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• Animations: Framer Motion
• Icons: Lucide React
• Testing: Vitest & React Testing Library

🛠️ Getting Started

Prerequisites

• Node.js 18+ installed on your machine.

Installation

1. Clone the repository:

   git clone <repository-url>
   cd garrett-ronan-web

2. Install dependencies:

   npm install

Development

Start the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

🧪 Testing

This project uses Vitest for unit testing. The test suite covers all major pages (Home, About, Services, Contact) and core components (Navbar, Footer).

Run tests:

npm test

📊 Analytics

Google Tag Manager is loaded site-wide from the root layout via src/components/common/GoogleTagManager.tsx (container GTM-TG8GB3PP), including the <noscript> fallback for clients without JavaScript.

To point a build at a different container — or to disable GTM locally — set the environment variable before building:

# .env.local
NEXT_PUBLIC_GTM_ID=GTM-XXXXXXX   # empty value disables GTM entirely

📦 Building for Production

To create an optimized production build:

npm run build

To run the production build locally:

npm start

📂 Project Structure

├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── about/           # About Page
│   │   ├── contact/         # Contact Page
│   │   ├── services/        # Services Page
│   │   ├── components/      # Shared Components (Navbar, Footer, UI)
│   │   ├── layout.tsx       # Root Layout
│   │   └── page.tsx         # Home Page
│   └── styles/              # Global Styles
├── public/                  # Static Assets
├── vitest.config.ts         # Testing Configuration
└── next.config.ts           # Next.js Configuration

⚡ Performance Optimizations

• Images: LCP optimizations with priority loading for Hero images. Responsive sizes props implemented across all sections.
• Animations: will-change-transform applied to infinite marquees to prevent layout thrashing and flickering.
• Strict Typing: Full TypeScript coverage for reliability.

---

Original design source: Figma