Transit Pulse Copy this Tailwind Component 0to Your Project

## **BusNow — Real Time Bus Tracker Website UI** ### **Goal:** A sleek, responsive web interface that displays real time data of buses, nearby stops, and user routes. ### **Layout Overview:** **Desktop (Split View):** Left panel (40%): Live Map Right panel (60%): Bus Info and User Actions **Mobile:** Stacked layout with fixed bottom navigation ### **Color Palette:** Primary Color: #007AFF (Bright Blue) Accent Color: #00D084 (Mint Green) Background Color: #F9FAFC (Soft White) Panels: White with backdrop blur for a glassmorphism effect ### **Main Sections:** #### 1. **Top Navigation Bar** Includes: Brand Logo Location display (current city/area) Live Clock Buttons: Sign In, Settings, Language Switch #### 2. **Map Panel** Interactive map using Mapbox or Google Maps Shows real time user location, buses in motion, and nearby stops Smooth marker animations with soft transitions #### 3. **Bus Info Panel** Tabbed layout including: **Nearby Buses:** Cards displaying bus number, ETA, and destination **My Route:** Route planner with input fields (From / To) and line suggestions **All Stops:** Searchable list of stops, each with mini map preview ### **UI/UX Effects:** Shimmer loading indicators for live data Hover animation on interactive elements Ripple feedback on click/tap Smooth transitions when switching tabs Subtle bus movement animation to show live status ### **Responsive Design Features:** Adaptive layout for all screen sizes On mobile: Sticky bottom navigation and collapsible panels for map/info ### **AI Prompt Keywords:** glassmorphism web UI, responsive layout, real time transit tracking, animated map interface, shimmer loading, card based design, minimal dashboard, GPS based live data, bus route planner, clean modern web app إذا حابّ نوسّعها لتشمل صفحات ثانية مثل: **Line Details Page** (with full schedule, live tracking, and alerts) **User Dashboard** (saved routes, favorites, preferences) **Admin Panel** (manage lines, monitor traffic, etc.)