Nyay.ai
You are a senior frontend engineer with experience building government and public-sector platforms. Generate a production-ready Next.js homepage using JSX (not TSX) and the App Router architecture for a project named “NYAY.AI”. The UI should feel authoritative, trustworthy, and citizen-centric, similar to official Indian government digital portals, while still being modern, clean, and accessible. 🔧 TECH REQUIREMENTS Framework: Next.js (App Router) Language: JSX only (no TypeScript) Styling: Tailwind CSS Responsive: Mobile-first, fully responsive Code Quality: Clean, readable, modular JSX components UI Style: Professional, government-grade (no flashy effects) 🏛️ PROJECT CONTEXT NYAY.AI is an AI-powered welfare fraud detection and transparency platform designed for Indian government departments and public institutions. The platform focuses on: Fair distribution of welfare schemes Fraud prevention Transparency and accountability Ethical and explainable AI in governance The design should inspire trust, neutrality, and fairness. 🎨 COLOR & DESIGN GUIDELINES (Indian Government Inspired) Use colors subtly and professionally — no gradients or neon styles. Primary Color: Deep Government Blue (#0B3C5D or similar) Secondary: White / Light Grey backgrounds Accent Colors (Minimal Use): Saffron (#FF9933) — highlights, icons, CTA borders Green (#138808) — success indicators, trust elements Typography: Clean, readable sans-serif (default Tailwind stack) UI Feel: Calm, structured, formal, accessible 🧩 PAGE STRUCTURE (JSX COMPONENTS) Create a single homepage composed of the following clearly separated JSX components. 1️⃣ Navbar Component Sticky navbar with subtle shadow Left: Logo text → NYAY.AI Center Navigation Links: Home About Impact Platform Right CTA Buttons: “Login as User” (outline style) “Official Admin Login” (solid primary button) Add hover states and focus styles (accessibility friendly) 2️⃣ Hero Section Large, bold heading: “NYAY.AI” Subtitle / slogan: “Ensuring Fair, Transparent, and Accountable Welfare Distribution through AI” Short descriptive paragraph explaining the mission CTA Buttons: Login as User Login as Admin Explore Platform Include a clean placeholder container for a future dashboard illustration or analytics preview Use subtle spacing, alignment, and visual hierarchy 3️⃣ About Section Heading: “About NYAY.AI” Short paragraph describing: AI-driven fraud detection Governance transparency Ethical and explainable AI Two-column layout on desktop Single-column stacked layout on mobile 4️⃣ Impact Section Heading: “Our Impact” Responsive grid of impact cards Each card includes: Title One-line description Impact themes: Prevention of welfare fund leakage Identification of duplicate beneficiaries Reduced manual verification Improved transparency & public trust Cards should have subtle borders, soft shadows, and hover feedback 5️⃣ Key Features / Platform Capabilities Section Heading: “Platform Capabilities” Grid or list of feature cards: AI-powered Fraud Detection Duplicate Beneficiary Identification Real-time Risk Scoring Explainable AI Decisions Human-in-the-loop Verification Secure & Privacy-safe Design Use icons via simple div placeholders (no external libraries) 6️⃣ Call-To-Action Section Prominent message: “Building a fairer welfare ecosystem with the power of AI.” Buttons: Go to User Login Go to Admin Dashboard Visually distinct section with light background contrast 7️⃣ Footer Component Text: “NYAY.AI – AI for Fair Governance” Disclaimer (small text): “This platform uses synthetic data for hackathon and research purposes.” Footer navigation links: About | Impact | Platform | Login Clean, minimal, government-style footer 📦 OUTPUT REQUIREMENTS Provide clean, copy-paste-ready JSX code Use semantic HTML elements Use Tailwind utility classes only No external UI libraries No backend logic or API calls Code must be ready to paste into: app/page.jsx