What this is

A premium, responsive homepage for a fictional AI contract-review product — built for the Acdyon Technologies "Build It Like You Mean It" frontend challenge, Part 2 track. It's not a static mockup: the "Analyze a contract" section is a genuinely live tool. Paste a clause, hit Analyze with Groq →, and a real LLM call (proxied through a Netlify serverless function so the API key never touches the browser) returns a structured risk breakdown.

If no GROQ_API_KEY is configured, the page degrades honestly — the badge switches to Demo mode and the analyzer explains exactly what's missing instead of pretending to work.

✨ Preview

Hero Clear value prop, single primary CTA, honest "built by one person" line — no fake logos, no invented user counts.	Live analyzer Real clause in → real Groq-backed risk analysis out, with severity badges and clause references.
Proof, not promises An actual flagged clause from the demo contract, clickable, showing exactly what the model catches and why.	Micro-interactions Staggered fade-up hero entrance, a live/offline pulsing status dot, hover states with restraint — not five competing animations.

Screenshots live in /screenshots — add the three you already have (hero, analyzer, flagged-clause) so they render inline here once pushed to GitHub.

🧠 Why it's built this way

Decision	Reasoning
No build step	index.html is styles + markup + client JS in one file. Fastest to ship, easiest to audit line-by-line in a follow-up call.
Serverless proxy, not client-side API calls	netlify/functions/analyze.js holds the Groq key server-side. The browser never sees it — non-negotiable for anything calling a paid API.
Graceful "Demo mode"	Judges (or anyone) opening the repo without setting GROQ_API_KEY still see a complete, honest product — not a broken fetch.
One real flagged clause, not five	The brief penalizes fabricated proof. The homepage shows one actual clause from the shipped demo contract instead of invented "AI found 47 risks!" copy.
Dark mode is all-or-nothing	Per the brief's constraint — half-dark is worse than none, so the whole page commits to one dark theme rather than a half-baked toggle.

🚀 Deploy (Netlify, ~3 minutes)

# 1. push this folder to a GitHub repo, then:

1. app.netlify.com → Add new site → Import an existing project → pick the repo (Build command: leave blank · Publish directory: . — netlify.toml already sets this)

2. Site configuration → Environment variables → Add a variable

   Key	Value
   GROQ_API_KEY	your key from console.groq.com/keys

3. Deploy → open the live URL → badge should read "Live — powered by Groq."

No key added? The page still looks and works complete — badge just switches to Demo mode.

🖥️ Run it locally

npm install -g netlify-cli
cp .env.example .env      # fill in your real GROQ_API_KEY
netlify dev

Serves index.html and runs the function locally at /api/analyze.

📡 API contract

Request POST /api/analyze Content-Type: application/json { "text": "<contract text>" }

Response { "summary": "string", "risks": [{ "category": "string", "severity": "LOW|MEDIUM|HIGH", "description": "string", "clause_reference": "string" }], "obligations": ["string"] }

GET /api/analyze — health check the page polls to render the live/offline badge:

{ "ok": true, "configured": true }

📁 Structure

.
├── index.html                       # entire page — markup, styles, client JS. no build step.
├── netlify/
│   └── functions/
│       └── analyze.js               # serverless proxy → Groq (key never reaches the browser)
├── netlify.toml                     # routes /api/* → the function
├── .env.example                     # GROQ_API_KEY, for local dev only
├── DECISIONS.md                     # 1-page write-up: trade-offs, AI usage, what I'd change
└── screenshots/                     # for this README

✅ Brief checklist

• Hero with clear value prop + one strong CTA
• Section that shows the product (live Groq-backed analyzer, not a screenshot of a claim)
• Motion that earns its keep — staggered entrance, live-status pulse, no animation soup
• 390px mobile → 1440px desktop, no horizontal scroll
• Dark mode, committed fully
• Zero fabricated testimonials, user counts, or logos
• Hidden easter egg 🥚 (five clicks somewhere obvious rewards the curious — not spoiling it here)
• DECISIONS.md — ingestion N/A (Part 2 track), trade-offs + AI usage documented

_{Built by one person as a working prototype — not a company, not funded, no fabricated user count.}