Here is your CRISPE V0 Landing Page Prompt fully converted for EduTrack Nepal: --- 🧠 V0 Landing Page Prompt (EduTrack Nepal) --- ## 🧩 CONTEXT I am building a web app (SaaS-style education platform) called EduTrack Nepal. It helps users (students, teachers, and parents in Nepal) to track homework, attendance, and academic progress in one simple system. The main problem it solves is: Students in Nepal lack a simple system to track homework, attendance, and learning progress, and parents/teachers have no real-time visibility of student performance. --- ## 👨💻 ROLE You are an expert UI/UX designer and frontend developer specializing in modern, high-converting SaaS landing pages using React and Tailwind CSS. --- ## 📌 INSTRUCTIONS Create a complete landing page with the following sections: ### 1. Hero Section * Strong headline (education + Nepal-focused) * Subheading explaining value clearly * Primary CTA button (e.g., “Get Started”, “Track Your Progress”) ### 2. Features Section Highlight key functionalities: * Homework Tracker (assign, submit, track status) * Attendance System (daily tracking + parent view) * Progress Dashboard (marks + charts + performance tracking) ### 3. How It Works Section Simple step-by-step explanation: * Teacher assigns homework / marks attendance * Student submits homework & views progress * Parents monitor performance in real-time ### 4. Benefits Section Explain value proposition: * Reduces missed assignments * Improves parent-teacher communication * Helps students stay organized and disciplined ### 5. Dashboard Preview Section Show UI-style layout of: * Homework status (Pending / Submitted / Completed) * Attendance summary * Performance charts (green/red indicators) ### 6. Testimonials Section Add user feedback cards from: * Students * Teachers * Parents ### 7. FAQ Section Include questions like: * Is this free for schools? * Can parents access without login issues? * Is it suitable for rural schools in Nepal? ### 8. Footer * Links (Home, Features, Contact, About) * Social icons * Copyright © EduTrack Nepal Ensure smooth scrolling navigation and clear visual hierarchy. --- ## 🎨 STYLE * Style: modern, clean, and education-focused SaaS UI * Color theme: * Primary: Blue (#2563EB) * Secondary: Green (#22C55E) * UI style: * Rounded corners * Soft shadows * Clean spacing * Modern SaaS aesthetics * Light gradient backgrounds (subtle, not heavy) --- ## 👥 PROFILES (TARGET USERS) * School students (Grade 6–12 in Nepal) * Teachers in public and private schools * Parents who want real-time academic updates They need a simple, mobile-friendly system to track learning progress, attendance, and homework efficiently. --- ## ✨ EXPECTATIONS The final output must be: * Fully responsive (mobile, tablet, desktop) * Production-ready UI * Clean, modern startup-level design * Built with reusable React + Tailwind components * Highly intuitive UX (easy for Nepal school users) * Conversion-focused landing page --- ## 🚀 OPTIONAL ADD-ON ### Branding Tone * Friendly * Educational * Trust-building ### Extra Sections (Optional) * App dashboard preview mock * Statistics (e.g., “90% homework completion improvement”) * School integration section --- If you want, I can next: 👉 Generate the full React + Tailwind landing page code (ready to run) 👉 Or design a Figma-style layout structure first
Now I'll install lucide-react for icons first, then build the complete landing page with all sections.
Now let me update the globals.css with the EduTrack Nepal theme colors, then create all the components:
Now let me create all the landing page components. I'll create them in parallel:
Now let me create the main page that brings all the components together:
The landing page is looking great! Let me scroll down to verify the other sections:
The dashboard preview looks fantastic! Let me check the testimonials and footer sections:
I notice the ' is not rendering correctly in the trust badges section. Let me fix that:
Also let me fix the testimonial content to use proper quotes:
Now let me check the footer and mobile view:
Let me now check the mobile responsiveness:
Excellent! The mobile view looks great too! Let me test the navigation by clicking the hamburger menu:
The mobile menu is working perfectly! Let me test the FAQ accordion:
Let me scroll to the FAQ section specifically:
The FAQ accordion is working perfectly! Let me now test the smooth scroll navigation on desktop:
The landing page looks great! Let me add smooth scrolling behavior to the CSS and ensure everything works:
Let me test clicking a navigation link:
The smooth scroll navigation is working perfectly. The landing page is fully functional with all sections. Let me close the browser and provide a summary:
Your EduTrack Nepal landing page is now complete! 🎓
Here's what I built:
All Requested Sections:
Features:
#2563EB primary, Green #22C55E secondary)I am building the Homework Submission feature for EduTrack Nepal, an education management platform. This feature allows students to submit their homework assignments and view their submission history in a homework list.
Current state: The landing page is complete. Now I need to build the actual homework submission functionality.
Problem it solves: Students need a clear, simple way to submit homework with status tracking, and teachers/parents need visibility into submission status.
You are an expert full-stack developer specializing in building educational SaaS applications with React, Next.js, and Tailwind CSS. You understand student workflows and accessibility requirements for users in Nepal.
Build a complete Homework Submission system with the following:
/dashboard/homework)Display all homework assignments with:
| Column | Description |
|---|---|
| Subject | Math, Science, English, Nepali, etc. |
| Title | Assignment title/description |
| Assigned By | Teacher name |
| Due Date | Deadline with color coding (red if overdue, yellow if due today, green if upcoming) |
| Status | Pending / Submitted / Completed / Overdue |
| Actions | View, Submit, Edit (if draft) |
Filtering & Sorting:
Empty States:
Button States:
| State | Appearance | Behavior |
|---|---|---|
| Not Started | Primary Blue, "Submit Homework" | Opens submission modal/page |
| Draft Saved | Outline Blue, "Continue Submission" | Opens submission with saved draft |
| Submitting | Disabled + Spinner, "Submitting..." | Shows loading state |
| Submitted | Green with checkmark, "Submitted" | Shows submission details on click |
| Overdue | Red outline, "Submit Late" | Opens submission with late warning |
| Completed | Green filled, "Completed ✓" | Non-interactive, shows grade if available |
Button Click Behavior:
Click "Submit Homework"
→ Open Homework Submission Modal/Page
→ Student fills form (text, file upload)
→ Click "Submit"
→ Show confirmation dialog
→ On confirm: POST to API
→ Show success toast
→ Redirect to Homework List with updated status
→ Highlight newly submitted item/dashboard/homework/[id]/submit)Form Fields:
| Field | Type | Required | Validation |
|---|---|---|---|
| Answer/Response | Textarea | Yes | Min 10 characters |
| File Attachment | File Upload | Optional | Max 10MB, PDF/DOC/DOCX/JPG/PNG |
| Notes to Teacher | Textarea | Optional | Max 500 characters |
Features:
Submission Flow:
After successful submission:
1. Show success toast: "Homework submitted successfully!"
2. Redirect to: /dashboard/homework
3. Scroll to submitted homework item
4. Highlight the item with subtle animation (green glow for 3 seconds)
5. Update status badge from "Pending" to "Submitted"
6. Show submission timestampURL State Management:
/dashboard/homework?highlight=[homeworkId]&status=submitted/dashboard/homework/[id])Display:
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/homework | List all homework for student |
| GET | /api/homework/[id] | Get homework details |
| POST | /api/homework/[id]/submit | Submit homework |
| PUT | /api/homework/[id]/draft | Save draft |
| GET | /api/homework/[id]/submission | Get submission details |
When homework is submitted:
┌─────────────┐
│ Assigned │
└──────┬──────┘
│ Student views
▼
┌─────────────┐
│ Pending │ ←── Default state
└──────┬──────┘
│ Student clicks "Submit"
▼
┌─────────────┐
│ Submitting │ ←── Loading state
└──────┬──────┘
│ API success
▼
┌─────────────┐
│ Submitted │ ←── Awaiting teacher review
└──────┬──────┘
│ Teacher grades
▼
┌─────────────┐
│ Completed │ ←── Final state with grade
└─────────────┘
Alternative path:
┌─────────────┐
│ Pending │
└──────┬──────┘
│ Due date passes
▼
┌─────────────┐
│ Overdue │ ←── Can still submit (marked late)
└─────────────┘Design System: Continue using EduTrack Nepal theme
#2563EB)#22C55E)#EF4444)#F59E0B)| User | Needs |
|---|---|
| Students (Grade 6-12) | Simple submission flow, clear status indicators, mobile-friendly |
| Teachers | View submissions, grade assignments, provide feedback |
| Parents | Monitor submission status, receive notifications |
The final output must include:
Would you like me to build this homework submission feature now?