Multi-Project Plot Management Dashboard

A production-quality SaaS demo for Webbheads — showcasing premium real estate management with investor-ready UI/UX.

---

🎯 Project Overview

Purpose: Demo SaaS for managing real estate projects, plots, and customers
Target: Real estate developers, plot managers, sales teams
Design Philosophy: Premium · Minimal · Trust-worthy · Client-Ready

Think: Notion + Airbnb Admin + Real Estate CRM

---

✨ Key Features

🏠 Public Landing Page

• Modern hero section with gradient accents
• Feature showcase with premium cards
• Location highlights with trust indicators
• High-conversion CTAs

📊 Admin Dashboard

• Overview: Revenue metrics, project stats with animated cards
• Projects: Grid view with progress indicators and revenue tracking
• Plot Management (Core Feature):
  • Color-coded status grid (Available/Reserved/Sold)
  • Advanced filtering and search
  • Real-time stats overview
  • Smooth animations and hover states
• Clean Navigation: Sidebar with active state indicators

---

🎨 Design System

Color Palette

• Primary: Blue (#0ea5e9) - Professional, trust-worthy
• Status Colors:
  • Available: Emerald (#10b981)
  • Reserved: Amber (#f59e0b)
  • Sold: Rose (#ef4444)
• Neutrals: Clean grays for backgrounds and text

Typography

• Display: 60px, bold, -2% letter spacing
• Headings: 36px → 24px scale
• Body: 15px for optimal readability
• Small: 13px for metadata

Spacing & Layout

• Section spacing: 96px
• Card padding: 24px
• Element gap: 16px
• Max content width: 1600px

---

🧱 Tech Stack

Category	Technology
Framework	Next.js 15 (App Router)
Language	TypeScript
Styling	Tailwind CSS v4
UI Components	shadcn/ui
Animations	Framer Motion
Icons	Lucide React
Charts	Recharts
Data	Mock API (realistic data)

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm

Installation

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

Access Points

• Landing Page: http://localhost:3000
• Dashboard: http://localhost:3000/overview

---

📂 Project Structure

src/
├── app/
│   ├── (dashboard)/           # Admin routes with sidebar layout
│   │   ├── overview/          # Dashboard homepage
│   │   ├── projects/          # Project management
│   │   │   └── [id]/          # Project details (dynamic)
│   │   ├── plots/             # Plot inventory (core feature)
│   │   ├── customers/         # Customer management
│   │   ├── documents/         # Document repository
│   │   ├── analytics/         # Analytics dashboard
│   │   └── settings/          # App settings
│   ├── (marketing)/           # Public routes
│   │   └── page.tsx           # Landing page
│   └── globals.css            # Global styles
├── components/
│   ├── layout/                # Sidebar, Header
│   ├── projects/              # ProjectCard
│   ├── plots/                 # PlotGrid, PlotStatusBadge
│   └── ui/                    # shadcn components
├── lib/
│   ├── design-system.ts       # Design tokens
│   └── utils.ts               # Utilities
├── data/
│   └── mock-data.ts           # Realistic mock data
└── types/
    └── index.ts               # TypeScript definitions

---

🎯 Design Principles Applied

Visual Hierarchy

• Clear heading scales (36px → 13px)
• Consistent spacing system
• Strategic use of color and contrast

Micro-Interactions

• Smooth page transitions (Framer Motion)
• Hover states on cards and buttons
• Active navigation indicators
• Progress bar animations

Trustworthy Design

• Clean, minimal layouts
• Professional color palette
• Consistent spacing
• No clutter or aggressive CTAs

Responsive

• Mobile-first approach
• Sidebar collapses on mobile
• Grid layouts adapt to screen size

---

🌟 Highlights

What Makes This Special

1. Premium UI: Looks like a $10k/month SaaS product
2. Attention to Detail: Consistent spacing, shadows, borders
3. Smooth Animations: Page loads, card hovers, transitions
4. Real-world Data: 130 plots across 2 projects with realistic statuses
5. Enterprise-Ready: Scalable architecture, clean code, TypeScript

Key Differentiators

• NOT a template — custom-designed from scratch
• Premium aesthetics inspired by Linear, Notion, Vercel
• Production-ready code quality
• Can be demoed to clients/investors immediately

---

📸 Screenshots

Dashboard Overview

• Revenue metrics with gradient accents
• Project cards with progress bars
• Clean, spacious layout

Plot Management

• Color-coded status grid
• Advanced filtering
• Real-time stats

Landing Page

• Modern hero section
• Feature showcase
• Location highlights

---

🚢 Deployment

Vercel (Recommended)

npm run build
vercel deploy

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]

---

📝 Development Notes

Adding New Pages

1. Create route in src/app/(dashboard)/
2. Add to Sidebar navigation
3. Follow design system tokens

Modifying Design System

Edit src/lib/design-system.ts for colors, spacing, typography

Mock Data

Extend src/data/mock-data.ts for additional projects/plots

---

🎓 Learning Resources

• Next.js App Router Docs
• shadcn/ui Components
• Framer Motion
• Tailwind CSS

---

📜 License

Built by Webbheads for demonstration purposes.

---

🙌 Credits

• Design Inspiration: Linear, Notion, Vercel, Stripe
• UI Components: shadcn/ui
• Framework: Next.js by Vercel

---

Ready to impress clients and investors? Start the dev server and explore the dashboard!

npm run dev
# Open http://localhost:3000

plot-management