Serene Heights Lahore — Production Real Estate Website

Official website for a landmark 17-storey mixed-use commercial development on Gulberg Main Boulevard, Lahore. Built with Next.js, Tailwind CSS, and Framer Motion.

Project Overview

Serene Heights Lahore is an LDA-approved high-rise situated at the center of Lahore's most active commercial zone. The building configuration is strategically divided to maximize value:

Lower Ground + 3 — Commercial Floors (Premium retail spaces with drive-through ramps)
Levels 3–4 — Dedicated Parking Floors
2 Floors — Hotel Apartments (Fully furnished serviced apartments)
3 Floors — Office Levels (Corporate offices in the Central Business District)
Top 2 Floors — Duplex Penthouses (Panoramic views of Lahore's historic cityscape)

A Joint Venture by Fatir Developers, DM Consortium, and FALAH Developers.

Tech Stack

Framework: Next.js 16.1.6 (App Router)
Library: React 19
Language: TypeScript
Styling: Tailwind CSS v4
Animations: Framer Motion for smooth, premium micro-interactions and scroll effects
Analytics: Vercel Analytics
Deploy: Vercel with GoDaddy domain

Key Features

Dynamic Navigation — Fully responsive navbar that transitions from transparent header to floating pill-shaped menu on scroll with Framer Motion animations
Premium Animations — Entrance animations, scroll-triggered reveals, and text transformations throughout the site
Rich Media Delivery — Optimized delivery of high-resolution building renders and blueprints via next/image
Tailored Typography — Custom fonts (Celine Sans Regular, Proforma) for an ultra-premium, luxury architectural aesthetic
Responsive Layouts — Complex CSS Grid and Flexbox layouts adapting from mobile to ultrawide desktop monitors

Repository Structure

serene-lahore/
├── app/
│   ├── about/                # About Us page
│   ├── amenities/            # Project amenities and facilities
│   ├── contact/              # Contact and inquiry forms
│   ├── invest/               # Investment opportunities and ROI breakdowns
│   ├── the-project/          # Floor configurations and blueprints
│   └── page.tsx              # Landing page
├── components/               # Reusable UI components
└── public/assets/            # Building renders, logos, icons

Getting Started

git clone https://github.com/Kashan-2912/serene-new-proj.git
cd serene-lahore
npm install
npm run dev

Deployment

Deployed on Vercel with GoDaddy domain configuration. Vercel Analytics tracks traffic and custom events automatically.