Learning Platform - Copy this React, Tailwind Component to your project
I am building a website that integrates Unity WebGL scenes and has a design similar to GDQuest’s course pages. I need a modern, responsive frontend that supports embedded interactive Unity WebGL scenes while also providing structured sections for text, lessons, and user progress tracking. Here are my requirements: Design: A clean, minimalist design similar to GDQuest's interactive lesson pages. Responsive layout (works well on mobile, tablet, and desktop). Typography and color scheme should be modern, readable, and align with a professional education platform. The page should have sections for: Text content: Descriptions of lessons or tutorials. Embedded Unity WebGL content: Support for Unity WebGL builds (embedded via iframe or div elements) with proper scaling and responsive behavior. Progress tracking UI (optional for now): Placeholder buttons and UI elements for lesson progress tracking. Functionality: The Unity WebGL content should be embedded seamlessly within each lesson page. Use a JavaScript framework like React.js or Vue.js for a component based approach. Create reusable components for: Lesson sections (with headings, subheadings, and text areas). A Unity WebGL scene player (where I can input different WebGL build paths). A progress bar component (for future integration with user tracking). The design should support interactive quizzes or exercises after the Unity scenes in the future. User Interactions: Ensure that mouse clicks or keypresses during Unity WebGL playback do not interfere with the navigation or other parts of the page. Navigation should be intuitive and smooth, using modern design patterns (e.g., side menus, fixed headers). Responsive and Accessible: The design should work on various devices and screen sizes. Make use of semantic HTML for accessibility, and ensure the UI is keyboard and screen reader friendly. Deployment Considerations: The final design should be deployable using services like Netlify, Vercel, or GitHub Pages for a frontend focused deployment. The Unity WebGL build files should be integrated into the appropriate folders for serving the WebGL builds. Please generate the HTML, CSS, and JavaScript (preferably React.js) necessary for this layout and functionality. Include comments in the code explaining key components.
