✅ FINAL PROMPT — HyperIOTTek.com AI IoT Dashboard (Glass UI, Manrope, 8 Sections)

**"Create a complete, responsive AI-powered IoT dashboard UI for HyperIOTTek.com using React + Tailwind + React Router + Framer Motion. Follow a glass-effect futuristic style similar to the reference image of HyperIOTTek.com. Use the color palette: • Neon Green: #BED754 • Deep Red: #C72C41 • Soft Coral: #EF9F9F • Carbon Black: #191919 Primary background is dark (#191919), and glass panels must have transparent black with subtle neon glow borders. Use Manrope as the only font across all pages. Everything must be fully responsive for desktop, tablet, and mobile. All components should use smooth animations, hover effects, glass blur, transparency, and glowing UI like the reference.

—————————————— 🔐 Authentication Pages Required (Glass UI) Create:

Login Page

Signup Page

Both must include: • Split layout with glass form card • Inputs with glow border on focus • Manrope font • Google Sign-in button (with icon) • Smooth Framer Motion page transitions • Background with dark gradient + neon glow particles similar to HyperIOTTek

—————————————— 📊 Dashboard Structure

After login, load a full dashboard layout with:

Sidebar (Glass UI) – 8 Sections

Create a left sidebar with icons + labels + neon glow hover effects. Include these 8 sections:

Overview (Main stats + IoT summary + device count + automation logs)

Devices (List of connected devices + status + add device UI)

Automation (AI rule builder preview + routine status)

Analytics (Charts: device usage, automation logs, uptime)

Monitoring (Real-time device health + predictive maintenance + alerts)

Workflows (Automation flows preview + step visualizer)

Settings (User profile, account, notification settings)

Support (Help, documentation links, contact form)

Sidebar must: • Collapse on tablet • Slide-in on mobile • Use neon green (#BED754) glow highlights

—————————————— 📍 Dashboard Header • Search bar • Notification bell • User avatar dropdown • Floating glass style

—————————————— 📂 Each Page Should Include • Glass cards • Dark backgrounds • Neon glowing borders (green & red based on importance) • Smooth animations • Responsive grid layouts • Minimalistic iconography (Lucide icons preferred)

—————————————— 💡 Design & UI Requirements • Full glassmorphism:  – backdrop-blur  – transparency (10–20%)  – soft neon glows • Match the futuristic IoT theme of HyperIOTTek • Use animated dotted lines, small nodes, or glowing particles (optional) • Auto-resize and adapt to all screens • Device cards with subtle hover scaling • Charts using Recharts or mock SVG charts

—————————————— 🖥️ Example Components to Create (Front-End Only) • Device online/offline indicator • AI routine suggestion card • Real-time logs UI • Automation timeline • Alerts notification drawer • Device add modal (mock only)

—————————————— ⚙️ Technical Stack Requirements • React + Vite • Tailwind CSS • Framer Motion • React Router • Lucide Icons • Recharts (for analytics) • No backend required (mock data only)

—————————————— 🎯 Final Output Must Include: • Login page • Signup page • Sidebar layout • Header • All 8 dashboard pages • Glass UI components • Neon IoT theme • Mobile responsiveness • Animations & interactions • Proper color palette (#BED754, #C72C41, #EF9F9F, #191919) • Manrope font imported globally

——————————————

Generate the complete front-end UI with routing, components, pages, sidebar, authentication screens, and dashboard sections using this design system."**