Home Page

Route: /
File: ayts-fe/app/page.tsx
Auth required: No

Purpose

The landing page is the primary entry point for all customers. It establishes trust, showcases the AYTS brand, and drives customers into the store browsing flow.

Sections

Hero Section

• Full-width banner with tagline: "Find local grocery, pharmacy, vegetables, and more"
• Primary CTA: Browse Stores → /stores
• Secondary CTA: Apply to Sell → /vendor/onboard

Popular Stores Near You

• Fetches real stores sorted by rating from GET /api/stores?sort=rating&limit=8
• Only shows stores with status: active
• Each card displays: store name, category, rating (hidden if 0), distance (if location set), store image
• Location selector allows filtering by barangay/city
• Clicking a card navigates to /stores/[id]

Category Browser

• Displays available categories (Grocery, Pharmacy, Vegetables, etc.)
• Clicking a category links to /categories?category=[name]

Data Fetching

// Fetches active stores sorted by rating
const stores = await fetch(`${API_URL}/api/stores?status=active&sort=rating&limit=8`)

Key Components

Component	File	Purpose
Navbar	components/navbar.tsx	Top navigation with cart icon + auth links
LocationSelector	components/location-selector.tsx	Barangay/city picker
StoreCardSkeleton	components/store-card-skeleton.tsx	Loading state for store cards
MaintenanceMode	components/maintenance-mode.tsx	Non-blocking health check wrapper

Known Issues / Status

Item	Status
Real store data (sorted by rating)	✅ Working
Location-based distance	✅ Shows when location selected
0.0 rating hidden	✅ Guarded with store.rating > 0
Footer component	❌ Missing — only "Powered by your local community" text
"Hardware" in hero copy	⚠️ No hardware stores exist yet

Recommended Improvements

• Add a Footer component with Privacy, Terms, Contact links
• Fix "hardware" in hero copy to match actual available categories
• Add "New" or "Recommended" badges on featured stores
• Add product previews on store cards ("Popular items: Rice, Apples")