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:
- Hero Section - With trust badge, headline, highlights, CTA buttons, stats (50K+ students, 2K+ teachers, 98% satisfaction), and a mock dashboard preview
- Features Section - 6 feature cards: Homework Tracker, Attendance System, Progress Dashboard, Instant Notifications, Parent Portal, and Secure & Private
- How It Works - 3-step visual flow (Teacher Assigns → Student Submits → Parents Monitor) with dashboard mockups
- Benefits Section - 6 benefits with stats (90% fewer missed assignments, 3x faster communication, etc.)
- Dashboard Preview - Full interactive mock showing homework status, attendance circle chart, and grade performance
- Stats Section - Bold statistics highlighting measurable results
- Testimonials - 6 testimonial cards from students, teachers, parents, and principals across Nepal
- FAQ Section - 8 accordion questions including pricing, rural school support, and data security
- Footer - CTAs, links, contact info, and social icons
Features:
- Fully responsive (mobile, tablet, desktop)
- Smooth scroll navigation
- Working mobile hamburger menu
- Interactive FAQ accordion
- Clean color scheme (Blue
#2563EBprimary, Green#22C55Esecondary) - Modern SaaS aesthetics with rounded corners and soft shadows
CRISPE V0 Prompt: Homework Submission Feature (EduTrack Nepal)
CONTEXT
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.
ROLE
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.
INSTRUCTIONS
Build a complete Homework Submission system with the following:
1. Homework List Page (/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:
- Filter by: Subject, Status, Due Date range
- Sort by: Due Date (default), Subject, Status
- Search by: Title or Subject
Empty States:
- No homework assigned: "No homework yet! Enjoy your free time."
- No results from filter: "No homework matches your filters."
2. Homework Submission Button
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 item3. Homework Submission Modal/Page (/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:
- Auto-save draft every 30 seconds
- Manual "Save as Draft" button
- File preview before upload
- Progress indicator for file upload
- Character count for text fields
Submission Flow:
- Student opens homework detail
- Reads assignment instructions
- Types response or uploads file
- Clicks "Submit Homework" button
- Confirmation modal appears: "Are you sure you want to submit? You cannot edit after submission."
- On confirm → API call → Success toast → Redirect to homework list
4. Post-Submission Redirect Behavior
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=submitted5. Homework Detail View (/dashboard/homework/[id])
Display:
- Assignment title and description
- Subject and teacher name
- Due date with countdown (e.g., "Due in 2 days")
- Attached resources (if any)
- Submission status
- If submitted: submission date, attached files, teacher feedback (if graded)
- If graded: marks obtained, teacher comments
6. API Endpoints Required
| 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 |
7. Real-time Notifications
When homework is submitted:
- Notify teacher: "Aarav Gurung submitted Math homework"
- Notify parent: "Your child submitted Math homework"
- Update dashboard counters
8. Status Flow Diagram
┌─────────────┐
│ 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)
└─────────────┘STYLE
Design System: Continue using EduTrack Nepal theme
- Primary: Blue (
#2563EB) - Secondary: Green (
#22C55E) - Error/Overdue: Red (
#EF4444) - Warning/Due Soon: Amber (
#F59E0B)
- Primary: Blue (
- Components: Use shadcn/ui components (Button, Card, Badge, Dialog, Input, Textarea)
- Animations: Subtle transitions, loading spinners, success checkmarks
- Mobile-first: Fully responsive, touch-friendly buttons
PROFILES (Target Users)
| 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 |
EXPECTATIONS
The final output must include:
- Homework List Page - Filterable, sortable table/cards with status badges
- Submission Button Component - Reusable with all states
- Submission Modal/Page - Form with file upload and validation
- Post-submission redirect - With highlight animation
- API route stubs - Ready for database integration
- Toast notifications - Success/error feedback
- Mobile responsive - Works on all devices
- TypeScript types - For homework, submission, and status
OPTIONAL ADD-ONS
- Drag-and-drop file upload
- Image preview for photo submissions
- Offline draft saving (localStorage fallback)
- Submission deadline countdown timer
- Bulk submission for multiple homeworks
- Submission receipt PDF download
Would you like me to build this homework submission feature now?