mammoth-platform

byRonak Limbashiya

Build a modern, interactive Ed-Tech platform designed to solve "Tutorial Hell" by providing visual, node-based learning roadmaps and career progression guides. The UI should feature a premium "Dark Mode" aesthetic with neon accents (similar to Linear.app), using Next.js, Tailwind CSS, and a node-based library like React Flow. Please build the application with the following core user flow and features: 1. Landing & Onboarding (The "Taste Test" Hook): - A high-converting hero section with a compelling headline targeting students deciding their career paths. - Clean Auth UI (Login/Signup). - A selection interface where users choose a Primary Field (e.g., "Computer Engineering", "Mechanical Engineering","Civil engineering","Electrical engineering","Chemical Engineering" And Many More branches) and are dynamically presented with Subfields (e.g., "Web Development", "Cyber Security", "Machine Learning","Data Scientist","App Development"...And many more ) using interactive, animated cards. 2. The Interactive Roadmap Canvas (Core Feature): - Generate an interactive "Mind Map" UI for the selected subfield. - Use a visual node-graph layout (similar to Roadmap.sh or NotebookLM's visualizer) showing the learning path from beginner to advanced. - Nodes should represent topics (e.g., "Learn HTML", "Network Security"). - When a user clicks a node, it should open a sleek slide-out Sidebar. 3. The Resource Sidebar (Content Aggregator): - The sidebar must contain a distinct toggle switch between "Free Mode" and "Paid Mode". - Free Mode UI: Display curated YouTube playlist cards, highlighting metrics like "Views" and "Positive Sentiment/Comments rating". - Paid Mode UI: Display premium course cards (e.g., Udemy, Coursera) highlighting ratings, price, and platform. 4. Career & LinkedIn Integration (The End-Game): - At the end of the visual roadmap, include a "Job Ready" terminal node. - Clicking this opens a dashboard displaying mock job opportunities related to the completed path. - Include a "LinkedIn Optimizer" section featuring UI guides and templates on how to summarize their project portfolio and format their profile for recruiters. UI/UX Requirements: - Use Framer Motion (or equivalent) for smooth page transitions and micro-interactions. - Implement responsive design (must work perfectly on mobile and desktop). - Use glowing borders, glassmorphism effects on cards, and modern typography. - Populate the UI with realistic mock data for a "Cyber Security" or "Web Development" path so I can see a fully functioning prototype.