Propease is a comprehensive marketing and landing page product built to demonstrate a property management SaaS. It places a heavy emphasis on presentation, leveraging a content-driven homepage with multiple sections (hero, perks, features, pricing, testimonials, FAQ, CTA), modern authentication flows, and a placeholder dashboard shell.
The codebase adopts the Next.js App Router with advanced route groups to clearly separate the marketing, authentication, and dashboard layouts.
Core Features & Functionality
The marketing site (/) is a single-page landing experience composed of self-contained sections. Each section is driven by typed data in src/constants/, meaning content can be edited without touching component code.
- Hero with animated gradient and CTA.
- Perks section highlighting product value propositions.
- Feature grid showcasing product capabilities.
- Tiered pricing plans with toggleable billing periods.
- Platform metrics with animated numeric counters.
Isolated layout group aimed precisely for authentication screens (/signin, /signup).
- Uses React Hook Form + Zod for rigorous validation.
- OTP inputs via
input-otp. - Clean, minimal auth layout separate from the main landing page chrome.
A dedicated placeholder route (/dashboard) crafted for the authenticated product experience.
- Ready to be extended with real data.
- Integrated with Recharts for admin data visualization.
- Employs separate shell layouts for distinct navigation environments.
Technology Stack
The platform leverages a cutting-edge, highly-performant stack suitable for modern SaaS products.
Next.js 15 & React 19
App Router, Server Components, and Turbopack-ready architecture for maximum performance.
Tailwind & shadcn/ui
Utility-first styling with accessible, highly customizable Radix UI primitives.
Framer Motion 12
Rich page and section animations, paired with react-parallax-tilt for 3D
effects.
React Hook Form & Zod
Robust, type-safe form state management and schema validation for auth flows.
Architecture & Implementation Details
Application Routing
The Next.js App Router is structured using route groups to isolate distinct layouts:
(marketing): The landing page with a global Navbar and Footer.(auth): Isolated, minimal layout for Sign In and Sign Up flows./dashboard: The authenticated dashboard experience placeholder.
Content-Driven Data Layer
All marketing copy, pricing, features, and platform stats are stored as fully typed constants in src/constants/. This acts as a static CMS.
nav-links.ts: Navigation items.pricing.ts: Tiers, pricing amounts, and feature lists.faq.ts: Accordion items.
Styling & Theming
Styling utilizes Tailwind CSS with customized theme variables in globals.css.
- Uses
next-themesfor seamless dark/light mode switching via theclassstrategy. - Leverages
clsxandtailwind-mergeutility functions (cn()) for dynamic class composition.
Folder Structure
An organized view of the key directories within the Propease monorepo:
Additional Details
Live Demo
Experience the marketing landing page and authentication UI in real-time. Visit Propease Live
