# 06. Responsive UI, Homepage, Navigation, Loading States, and Error Handling

meta:
  id: hyper-specific-plant-disease-id-06
  feature: hyper-specific-plant-disease-id
  priority: P2
  depends_on: [hyper-specific-plant-disease-id-01, hyper-specific-plant-disease-id-05]
  tags: [frontend, ui, ux, polish]

objective:
- Build the public-facing pages (homepage, browse plants, about), global navigation, consistent loading skeletons, error boundaries, and responsive layout so the app feels polished and production-ready.

deliverables:
- `app/page.tsx` — homepage hero with upload CTA, feature highlights, sample disease cards
- `app/browse/page.tsx` — browse/search all plants with disease counts
- `app/browse/[plantId]/page.tsx` — single plant detail page with its disease list
- `app/about/page.tsx` — about page explaining methodology and disclaimer
- `components/Navbar.tsx` — responsive global navigation with search bar
- `components/Footer.tsx` — site footer with links and disclaimer
- `components/LoadingSkeleton.tsx` — reusable skeleton component for loading states
- `components/ErrorBoundary.tsx` — React error boundary with fallback UI
- `components/EmptyState.tsx` — reusable empty state with illustration and CTA
- `app/layout.tsx` — root layout with Navbar, Footer, metadata, and font loading
- `lib/constants.ts` — site-wide constants (app name, tagline, social links)

steps:
1. Build `components/Navbar.tsx`:
   - Sticky top bar with app name/logo, navigation links (Home, Browse Plants, About).
   - Mobile hamburger menu with slide-out drawer.
   - Search input that navigates to `/browse?search=...` on submit.
   - Active link highlighting.
2. Build `components/Footer.tsx`:
   - Three-column layout: about blurb, quick links, disclaimer (beta, not a professional diagnosis).
   - "Made by gardeners, for gardeners" tagline.
3. Build `app/page.tsx` (Homepage):
   - Hero section: large headline ("Snap. Identify. Treat."), subtitle, prominent image upload component (from task 03) centered.
   - How-it-works section: 3-step illustration (Upload → AI Analysis → Treatment Plan).
   - Featured plants / common diseases section — carousel of 6-8 popular plant cards linking to `/browse/...`.
   - Trust signals: "Trained on 50K+ images", "Covers 20+ plants", "Open source".
4. Build `app/browse/page.tsx`:
   - Grid of plant cards (image + name + disease count).
   - Search input at top filters plants client-side by name.
   - Category filter chips: "All", "Vegetables", "Herbs", "Houseplants", "Flowers".
   - Click a card → navigates to `/browse/{plantId}`.
5. Build `app/browse/[plantId]/page.tsx`:
   - Plant hero: common name, scientific name, family, care summary.
   - Disease list: each disease is a card linking to... (todo: disease detail page could be a future enhancement; for now show expandable info inline or redirect to the identification flow).
   - "Identify a disease on this plant" button → triggers upload flow targeting this plant for narrowed identification.
6. Build `app/about/page.tsx`:
   - Mission statement, how the model works (plain language), data sources, limitations disclaimer.
   - Open-source credits and contribution guide.
   - FAQ accordion.
7. Build `components/LoadingSkeleton.tsx`:
   - Configurable skeleton: `variant` (card, text, image, circle) and `count` (repeat).
   - Pulse animation using Tailwind `animate-pulse`.
   - Export presets: `ResultsSkeleton`, `PlantCardSkeleton`, `UploadSkeleton`.
8. Build `components/ErrorBoundary.tsx`:
   - Class-based React error boundary with `componentDidCatch`.
   - Fallback UI: friendly message ("Something went wrong!"), error detail (dev mode), "Try again" button, "Go home" link.
9. Build `components/EmptyState.tsx`:
   - Illustration (emoji or SVG), message, optional CTA button.
   - Used in browse page when search returns no results.
10. Update `app/layout.tsx`:
    - Import and wrap Navbar + Footer.
    - Set metadata (title template, description, Open Graph).
    - Load Inter font via Next.js font optimization.
    - Wrap children in `ErrorBoundary`.
11. Add responsive breakpoints and test on 375px, 768px, 1024px, 1440px.
12. Add smooth scroll behavior and transition utilities.

tests:
- **Integration:** Homepage loads with hero, upload component, and featured plants.
- **Integration:** Browse page renders plant grid and search filters work.
- **Integration:** Plant detail page shows disease list.
- **Integration:** Mobile hamburger menu opens and closes.
- **Integration:** Error boundary catches thrown errors and shows fallback.
- **Integration:** Search in navbar navigates to browse page with query param.
- **Visual:** All pages render without layout shift at 375px and 1280px.

acceptance_criteria:
- Homepage, browse, plant detail, and about pages all render without errors.
- Navigation is accessible via keyboard and screen reader.
- Loading skeletons appear while pages/data are loading.
- Error boundary catches runtime errors with helpful fallback.
- Empty state shown when search or filter yields no results.
- Mobile navigation hamburger menu works on touch devices.
- All pages pass basic Lighthouse audit (no layout shift, proper heading hierarchy).

validation:
```bash
curl http://localhost:3000/          # → 200, homepage renders
curl http://localhost:3000/browse    # → 200, plant grid renders
curl http://localhost:3000/browse/tomato  # → 200, tomato detail
curl http://localhost:3000/about     # → 200, about page
# Open in browser at 375px → hamburger menu visible and functional
# Run Lighthouse → Performance ≥90, Accessibility ≥90, SEO ≥90
```

notes:
- Use Next.js `<Image>` component with remote patterns configured for any external plant photos.
- All static pages are server-rendered (no `'use client'` unless interactivity requires it).
- The homepage should feel warm and approachable — use plant emoji / botanical illustrations as visual elements.
- Keep the beta disclaimer visible in footer to manage expectations (AI is not a substitute for professional diagnosis).