ORION — Smart Community Intelligence Platform

The Operating System for Modern Communities

Orion is a comprehensive digital platform that connects residential communities with smart technology, combining community communication, IoT environmental monitoring, security alerts, and administrative management into one intelligent ecosystem.

---

🏗 Architecture Overview

Layer	Count	Description
Public Pages	11	Marketing, content, and conversion pages
Auth Pages	5	Authentication and account management
Resident App	11	Protected resident dashboard and tools
Admin Panel	12	Administration and management system
Total	39 pages	Full-stack community platform

---

📄 Complete Page Map

Public Website (Marketing)

Route	Page	Description
/	Landing Page	Hero, features showcase, platform overview, pricing preview, security section, manifesto
/features	Platform Features	Community communication, security alerts, IoT monitoring, admin automation, analytics, engagement
/pricing	Pricing	3 tiers (Starter/Smart Community/Enterprise), monthly/yearly toggle, feature comparison
/manifesto	Philosophy & Manifesto	Orion's ideology — future of residential living, ethical surveillance, sustainability
/case-studies	Case Studies	Community transformations with before/after metrics and success stories
/blog	Blog & Insights	Tech insights, smart city trends, community safety articles
/contact	Contact	Contact form, demo booking, enterprise sales, office information
/help	Help Center	Knowledge base, documentation, troubleshooting, FAQ section
/status	System Status	Real-time uptime status of all Orion services with health indicators
/changelog	Changelog	Versioned product updates with timeline visualization
/roadmap	Roadmap	Future features with shipped/in-progress/planned status badges

Authentication

Route	Page	Description
/login	Login	Email/password login, OAuth (Google/Apple), magic link support
/signup	Sign Up	Account creation with OAuth options
/forgot-password	Forgot Password	Email-based password reset flow
/reset-password	Reset Password	New password entry form
/verify-email	Email Verification	Verification confirmation with resend option

Resident Platform (/app/*)

Route	Page	Description
/app/dashboard	Dashboard	Announcements, IoT metrics (temp/humidity/AQI), activity feed, chart visualizations
/app/community	Community Feed	Announcements, discussion threads, polls, reactions, post filtering
/app/alerts	Alerts Center	Security alerts, environmental warnings, emergency notifications with severity levels
/app/environment	Environment Monitoring	Real-time sensor data — temperature, humidity, air quality, noise per zone
/app/visitors	Visitor Management	Guest passes, QR visitor entry, visitor logs, entry approvals
/app/maintenance	Maintenance Requests	Submit issues, upload photos, request tracking, priority/status management
/app/notifications	Notifications	Push alerts, system alerts, community alerts with read/unread states
/app/messages	Messages	Resident messaging, admin communication, conversation threads
/app/payments	Payments	Community fees, invoices, payment history, online payment
/app/documents	Documents	Community policies, guidelines, meeting notes with category filtering
/app/settings	Settings	Profile, security (2FA), notification preferences, privacy, device management

Admin Platform (/admin/*)

Route	Page	Description
/admin/dashboard	Admin Dashboard	Community overview, system health, IoT analytics charts, activity feed
/admin/residents	Resident Management	Resident list, verification, role management, search, profile editing
/admin/posts	Community Posts	Create announcements, pin updates, moderation tools, view counts
/admin/alerts	Alerts Management	Emergency alert broadcasting, incident tracking, severity management
/admin/devices	IoT Device Management	Device registration, sensor monitoring, firmware status, online/offline tracking
/admin/security	Security Center	Incident reports, CCTV camera management, suspicious activity alerts
/admin/visitors	Visitor Management	Visitor logs, entry approvals, gate management with status tracking
/admin/billing	Payments & Billing	Invoices, payment tracking, collection rates, overdue management
/admin/analytics	Analytics	Engagement analytics, environmental trends, system performance metrics
/admin/maintenance	Maintenance System	Request tracking, staff assignment, resolution management with priority levels
/admin/documents	Document Management	Upload policies, manage files, resident access control, download tracking
/admin/settings	Admin Settings	System configuration, role permissions, security settings, integrations (Slack/Stripe/SendGrid/Twilio)

---

🎨 Design System — "Celestial Intelligence"

Color Palette

Token	Light	Dark	Usage
--primary	Orion Blue #3B82F6	Orion Blue #3B82F6	Primary actions, links
--accent	Aurora Cyan #22D3EE	Aurora Cyan #22D3EE	Accents, highlights
--background	#F8FAFC	#020617	Page backgrounds
--foreground	#0F172A	#E2E8F0	Primary text
--muted-foreground	Slate 500	Slate 400	Secondary text

Gradient

gradient-orion: linear-gradient(135deg, Orion Blue → Aurora Cyan)

Typography

Usage	Font	Weight
H1-H3 Headings	Space Grotesk	Bold, tight tracking
H4-H6 Subheadings	Sora	Semibold
Body text	Inter	Regular
Data/Dashboard	JetBrains Mono	Medium
Manifesto quotes	Playfair Display	Italic

Components

• Containers: rounded-2xl to rounded-3xl
• Buttons: rounded-xl with gradient-orion
• Glass surfaces: bg-white/70 backdrop-blur-xl (light) / bg-slate-900/60 backdrop-blur-xl (dark)
• Noise overlay: SVG turbulence at 0.04 opacity
• Starfield: Radial gradient dots for dark mode backgrounds

Theme System

Three-state toggle: Light / Dark / System

• 250ms ease-in-out color transitions
• Animated icon rotation on toggle
• All components adapt to theme

---

🛠 Tech Stack

Technology	Purpose
React 18	UI framework
TypeScript	Type safety
Vite	Build tool
Tailwind CSS	Utility-first styling
shadcn/ui	Component library
Framer Motion	Animations
React Router v6	Client-side routing
Lucide Icons	Icon system
TanStack Query	Data fetching

---

🧩 Layout System

Layout	Usage	Features
PublicLayout	Marketing pages	Floating navbar + footer
AppLayout	Resident dashboard	Collapsible sidebar + header
AdminLayout	Admin panel	Collapsible sidebar + admin badge + header

All layouts include theme toggle, responsive design, and consistent navigation.

---

🚀 Getting Started

# Clone the repository
git clone https://github.com/allhailgachuri/Orion

# Navigate to the project
cd orion-platform

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:5173.

---

📱 Responsive Design

• Mobile-first approach
• Collapsible sidebar navigation on mobile
• Stacked card layouts for small screens
• Touch-optimized interactions
• Breakpoints: mobile / tablet / desktop / ultrawide

---

🔐 Authentication Pages

All auth pages feature:

• Branded glass-morphism cards
• Starfield background
• OAuth buttons (Google, Apple)
• Smooth animations
• Inter-page navigation (Login ↔ Signup ↔ Forgot Password)

---

📊 Dashboard Features

Resident Dashboard

• Community announcements widget
• IoT environmental metrics (temperature, humidity, AQI)
• Activity feed with real-time updates
• Temperature & humidity bar charts (24h)
• Quick action buttons

Admin Dashboard

• Total residents, active sensors, open alerts, forum activity stats
• IoT analytics chart (7-day)
• System health panel (Database, API, Sensors, Auth, Storage)
• Recent activity timeline

---

🌐 Micro Pages

Page	Purpose
/status	System uptime with per-service health
/changelog	Product version history with timeline
/roadmap	Future features with status indicators

---

📋 License

© 2026 Orion Technologies. All rights reserved.