I have a hackathon i want to work on. This is the PRD link below
Design all the screens as it is in the PRD. Use green and white as the color, be creative and accurate. Use nextjs and tailwind css
https://docs.google.com/document/d/1WFe80yeIpsE6iwdNmtF861WA3RlftU9zWZgsapUucmw/edit?usp=sharing
I'm sorry, but I can't access the Google Docs link you've shared. To help you design the screens for your hackathon project, could you please share the key requirements and screen descriptions from the PRD?
Once you provide those details, I'll create all the necessary screens using Next.js and Tailwind CSS with green and white as the primary colors. I'll make sure the design is both creative and accurate to your specifications.
This is the content of the PRD link
🌿 Product Requirements Document (PRD)
Project Name: HerbiCare AI – The AI-Powered Herbal Healing Guide
Goal:
Empower users to research and shop for medicinal herbs tailored to their condition using real-time, citation-backed AI insights from Perplexity’s Sonar API.
Target Users
Primary: Individuals seeking alternative, natural treatments for specific ailments.
Secondary: Herbal product vendors, integrative health professionals.
Tertiary: Wellness communities, researchers, students.
Core Features
A. AI-Powered Herbal Search
Input: Disease, symptom, or health concern.
Output: Herbs suggested by the Sonar API (with citations + brief reasoning).
Display AI explanation, benefit breakdown, precautions.
B. Herb Shopping Interface
Search or browse herbs.
View herbal benefits (powered by AI), vendors, pricing, and reviews.
Add to cart and proceed to checkout.
C. ProConnect – Book a Professional (Paid Feature)
Schedule consultation with certified herbalists or doctors.
Payments handled via Stripe.
Video call booking + calendar integration.
D. Free AI Research Tool
AI search is free, even without an account.
Users can generate herb recommendations with research citations anytime.
E. User Dashboard (for registered users)
View previous searches.
Track selected herbs.
Save symptoms for future reference.
Upgrade to Pro version.
Screens Required
Screen
Description
Landing Page
Hero section, tagline, CTA buttons (Search Herbs, Try AI Assistant, Book a Pro)
AI Herbal Assistant Screen
Input field + AI response area with herb cards, citations, “Ask Again”
Herb Details Page
Herb image, scientific name, benefits (AI-backed), sources, vendor links
Herb Shop Listing
Grid/list view of all herbs + filters (condition, category, price)
Cart & Checkout
List of selected herbs, checkout flow with Stripe integration
ProConnect Booking
List of doctors/herbalists, bio + schedule slot booking, payment
Dashboard
Past searches, saved herbs, upcoming consultations, upgrade button
Authentication
Login / Register screen with email or Google OAuth
Success & Error Modals
For confirmed purchases, failed actions, and AI errors
Admin (optional)
To manage herb DB, professionals, and user bookings (can be basic)
Technical Architecture
Layer
Stack
Frontend
React + Vite + TailwindCSS
Backend
Node.js + Express
Database
MongoDB (herb data, users, professionals, bookings)
AI Layer
Perplexity Sonar API (for real-time research)
Auth
Firebase Auth or Auth0
Payments
Stripe
Hosting
Vercel / Render for frontend, backend; MongoDB Atlas
Success Criteria (for hackathon)
Criteria
Target
AI integration
Herb recommendations with 2+ citations using Sonar API
Working prototype
All main flows: search, view herb, add to cart, basic booking
Clear demo
2–3 min video showing symptom → herb suggestion → shop/booking
Innovation
AI + traditional healing + professional care integration
Documentation
Clean GitHub repo + clear README + deploy link
MVP Scope for Hackathon
Focus on:
AI Assistant
Herb Detail View
Cart (mock checkout okay)
ProConnect (demo 1 booking flow)
Nice-to-have: Dashboard, Authentication
I'll create a comprehensive Next.js application with Tailwind CSS for your HerbiCare AI project, using green and white as the primary colors. Based on your PRD, I'll design all the required screens with a focus on the MVP scope.