TrustLab Web

TrustLab Web is the premium, responsive frontend interface for the TrustLab ecosystem. Built with Next.js 16 (App Router) and Tailwind CSS v4, it delivers a high-performance, aesthetically pleasing user experience for both Customers and Administrators.

🚀 Key Features

💎 Premium User Interface

• Modern Aesthetic: "Glassmorphism" design language with backdrop blurs and subtle gradients.
• Dark Mode First: Fully optimized dark/light theme switching with persistent state.
• Responsive Design: Mobile-first architecture ensuring seamless adaptability from Phones to 4K Desktops.

🛡️ Secure Dashboard & Portal

• Dashboard Layout: comprehensive sidebar navigation with collapsible grouping (Admin vs Customer).
• Role-Based Views: UI elements (Buttons, Menus) adapt dynamically based on Owner, Admin, or Customer roles.
• Profile Management: User settings, password management, and social account linking.
• Ticket System UI: Chat-like interface for support tickets with real-time status updates and file attachment previews.

🛠️ Public Tools

• Chat ID Finder: Tool for retrieving Telegram Chat IDs.
• Key Generator: Secure, client-side generator for Laravel/App secrets (base64, hex).
• Contact Form: Integrated inquiry system protected by Cloudflare Turnstile.

🛠️ Technology Stack

• Framework: Next.js 16 (App Router)
• Styling: Tailwind CSS v4
• Language: TypeScript
• State Management: React Context (Sidebar, Theme, Auth) & Hooks
• HTTP Client: Axios (with centralized interceptors for Auth/CSRF)
• Icons: Lucide React
• Bot Protection: @marsidev/react-turnstile

📂 Project Structure

• src/app/(public): Publicly accessible pages (Landing, Tools, Auth).
• src/app/dashboard: Protected routes requiring authentication.
• src/components/ui: Reusable, atomic UI components (Buttons, Modals, Inputs) following the design system.
• src/hooks: Custom hooks for Auth (useAuth), Theme (useTheme), and Window dimensions.

---

© 2024 TrustLab. All Internal Rights Reserved.