LightMountain Advisory — AI Deal Intelligence Tool
---
Build a complete, production-ready Next.js web application called the **LightMountain Advisory AI Deal Intelligence & Compliance Advisor**. This is a branded AI tool for a boutique financial advisory firm operating in the MENA/KSA market. The app will be deployed to Vercel.
---
STACK
- Next.js 14 (App Router)
- Tailwind CSS
- Anthropic SDK (`@anthropic-ai/sdk`)
- Google Fonts: Cormorant Garamond (headings) + DM Sans (body) + DM Mono (labels/mono)
- No database required — stateless, API-driven
---
SETUP STEPS
1. Run `npx create-next-app@latest lma-advisor --typescript --tailwind --app --no-src-dir --import-alias "@/*"` and cd into it
2. Run `npm install @anthropic-ai/sdk`
3. Create `.env.local` with `ANTHROPIC_API_KEY=your_key_here`
4. Create `.gitignore` entry for `.env.local`
5. Update `tailwind.config.ts` to include the Google Fonts import and extend theme with brand colors
---
FILE STRUCTURE TO CREATE
```
app/
page.tsx ← Main tool UI
layout.tsx ← Root layout with Google Fonts
api/
analyze/
route.ts ← POST endpoint calling Anthropic API
components/
Header.tsx ← LMA branded header
DealForm.tsx ← Deal input form
ScoreCards.tsx ← SAMA / Shariah / V2030 score display
ResultSection.tsx ← Individual result section card
LoadingState.tsx ← Spinner with status message
public/
favicon.ico
```
---
DESIGN SYSTEM
**Brand Colors (add to tailwind.config.ts):**
```js
colors: {
gold: {
50: '#FAEEDA',
100: '#FAC775',
200: '#EF9F27',
500: '#BA7517',
700: '#854F0B',
900: '#633806',
},
ink: {
50: '#F6F5F0',
100: '#E8E6DF',
400: '#888780',
700: '#444441',
900: '#1C1B18',
}
}
```
**Typography rules:**
- All headings: `font-family: 'Cormorant Garamond', serif` — use `font-serif` Tailwind class after adding it to config
- Body: `font-family: 'DM Sans', sans-serif`
- Labels, mono data, scores: `font-family: 'DM Mono', monospace`
- Page background: `#F6F5F0` (warm off-white, not pure white)
- Card background: `#FFFFFF`
- Border color: `rgba(0,0,0,0.1)` — subtle, thin
**Add to `app/layout.tsx`:**
```tsx
import { Cormorant_Garamond, DM_Sans, DM_Mono } from 'next/font/google'
const cormorant = Cormorant_Garamond({ subsets: ['latin'], weight: ['400','500','600'], variable: '--font-cormorant' })
const dmSans = DM_Sans({ subsets: ['latin'], variable: '--font-dm-sans' })
const dmMono = DM_Mono({ subsets: ['latin'], weight: ['400','500'], variable: '--font-dm-mono' })
```
---
API ROUTE: `app/api/analyze/route.ts`
Create a POST handler that:
1. Accepts JSON body: `{ clientName, sector, txType, dealSize, financeType, dealDesc }`
2. Validates all required fields are present
3. Calls Anthropic API using the SDK with `claude-haiku-4-5` model, max_tokens 1200
4. Uses this exact system prompt:
```
You are a senior financial advisor at LightMountain Advisory, a boutique MENA/GCC advisory firm. You have deep expertise in SAMA regulations, Islamic finance (AAOIFI standards), Saudi Vision 2030 strategy, and complex deal structuring across the Gulf. You provide concise, expert, commercially astute analysis.
```
5. User message builds context from the form fields and instructs the model to return ONLY valid JSON (no markdown, no preamble) in this schema:
```json
{
"scores": {
"sama": <1-10 integer>,
"shariah": <1-10 integer>,
"v2030": <1-10 integer>
},
"sama": "<3-4 sentences on SAMA regulatory requirements, required approvals, KSA banking compliance>",
"shariah": "<3-4 sentences on Shariah compliance, suitable Islamic instruments (Murabaha/Ijara/Istisna/Sukuk), AAOIFI references>",
"v2030": "<2-3 sentences on Vision 2030 alignment, NCP pillars, PIF/giga-project relevance>",
"structure": "<3-4 sentences on recommended financing structure — instrument, tenure, security, lender approach>",
"risks": "<3-4 sentences on top risks and mitigants specific to this deal and MENA market>",
"nextsteps": "<3 specific, numbered, actionable next steps for LightMountain Advisory>"
}
```
6. Parse the JSON response and return it as the API response
7. Return 400 for validation errors, 500 for API errors
---
MAIN PAGE: `app/page.tsx`
Layout
Header Component
Deal Form (left-heavy two-column grid on desktop, single col mobile)
**Row 1 — 2 columns:**
- Client / Project Name (text input)
- Sector (select: Energy & Power, Real Estate & Hospitality, Healthcare, Manufacturing & Industrial, Logistics & Transport, Technology & Fintech, Retail & Consumer, Infrastructure, Oil & Gas, Education, Contracting, Other)
**Row 2 — 3 columns:**
- Transaction Type (select: Funding Arrangement, Debt Restructuring, Project Finance, M&A / Acquisition Finance, Working Capital Facility, Private Debt / Alternative, Business Valuation, Financial Advisory)
- Deal Size USD equiv (select: Under $10M, $10M–$50M, $50M–$150M, $150M–$500M, $500M–$1B, Over $1B)
- Finance Structure (select: Conventional, Islamic Shariah-Compliant, Hybrid / TBD)
**Row 3 — full width:**
- Deal Summary (textarea, 4 rows, placeholder: "Briefly describe the deal — purpose of financing, existing obligations, key stakeholders, timeline, any compliance concerns...")
**Submit button:**
- Full-width on mobile, auto-width on desktop aligned left
- Background `bg-gold-500 hover:bg-gold-700 text-white`
- Text: "Analyze Deal →"
- Loading state: "Analyzing..." with spinner, button disabled
- Below button: small italic disclaimer text "Analysis covers SAMA regulatory alignment, Shariah compliance, Vision 2030 fit, and financing strategy. For advisory purposes only."
**Form field styling:**
- Labels: DM Mono 11px uppercase tracked, `text-ink-400`, `mb-1`
- Inputs/selects: `border border-black/10 rounded-lg px-3 py-2 text-sm bg-white w-full focus:outline-none focus:ring-2 focus:ring-gold-500/30 focus:border-gold-500/50`
- All inputs have `text-ink-900`
---
Results Section (renders after successful API call)
**Score Cards Row — 3 equal columns:**
Each card: `bg-white border border-black/10 rounded-xl p-4 text-center`
- Score number: Cormorant Garamond 42px, color determined by score value:
- 7-10: `text-green-700`
- 4-6: `text-gold-500`
- 1-3: `text-red-700`
- "/10" suffix in 16px same color
- Label below: DM Mono 10px uppercase tracked `text-ink-400`
- Labels: "SAMA Readiness", "Shariah Compliance", "Vision 2030"
**Result Section Cards — one per insight:**
Each card: `bg-white border border-black/10 rounded-xl p-5 mb-3`
Card header row: colored dot + DM Mono 11px uppercase label
- SAMA: amber dot `bg-gold-500`
- Shariah: green dot `bg-green-600`
- Vision 2030: blue dot `bg-blue-600`
- Recommended Structure: amber dot
- Key Risks: red dot `bg-red-600`
- Next Steps: green dot
Card body: DM Sans 14px `text-ink-700 leading-relaxed`
**Section order:**
1. Score Cards
2. SAMA Regulatory Compliance
3. Shariah Compliance Assessment
4. Vision 2030 Alignment
5. Recommended Financing Structure
6. Key Risks & Mitigants
7. Recommended Next Steps
**Section titles (exact):**
- "SAMA Regulatory Compliance"
- "Shariah Compliance Assessment"
- "Vision 2030 Alignment"
- "Recommended Financing Structure"
- "Key Risks & Mitigants"
- "Recommended Next Steps"
**Results header:** Cormorant Garamond 22px "Advisory Intelligence Report — {clientName}" with thin border-bottom, mb-4
---
Loading State
Error State
---
FOOTER
```
© LightMountain Advisory · Dubai, UAE · lightmountainadvisory.com
```
DM Mono 10px `text-ink-400`, centered, `mt-8 pt-4 border-t border-black/10`
---
`next.config.js`
Ensure the Anthropic API is only called server-side. No client-side API key exposure.
```js
/** @type {import('next').NextConfig} */
const nextConfig = {}
module.exports = nextConfig
```
---
`.env.local` (create this file, do not commit)
```
ANTHROPIC_API_KEY=<redacted>
```
---
VERCEL DEPLOYMENT
After building locally:
1. Run `npm run build` to verify no errors
2. Run `vercel --prod` (or push to GitHub and connect Vercel)
3. In Vercel dashboard → Settings → Environment Variables → add `ANTHROPIC_API_KEY`
---
FINAL CHECKLIST
Before finishing, verify:
- [ ] App runs on `npm run dev` without errors
- [ ] Form validation works — empty sector/txType/desc shows inline error
- [ ] API route calls Anthropic and returns valid JSON
- [ ] Score colors change based on score value (green/amber/red)
- [ ] Loading spinner shows during API call
- [ ] Mobile responsive — stacked single column on small screens
- [ ] Fonts load correctly (Cormorant Garamond visible on headings)
- [ ] No API key exposed to client bundle
- [ ] `.env.local` is in `.gitignore`
- [ ] `npm run build` succeeds with no TypeScript errors
---
*Built for LightMountain Advisory · lightmountainadvisory.com · Dubai, UAE*