# 🎯 MIMO Blueprint — Prompt สร้างเว็บสไตล์ mimoth.com

> **เป้าหมาย:** ใช้ Prompt นี้เป็น `prompt` ใน `cronjob action=create` หรือ `delegate_task` หรือส่งให้ AI อื่นสร้างเว็บในสไตล์เดียวกับ mimoth.com

---

## 📋 1. Brand & Positioning

| หัวข้อ | รายละเอียด |
|--------|-----------|
| **Name** | MIMO |
| **Domain** | `mimoth.com` |
| **Tagline** | "Thai-first AI discovery" / "เลือก AI tools ให้ตรงงานจริง" |
| **ภาษา** | ไทย 100% — สำหรับครีเอเตอร์ นักการตลาด SME ฟรีแลนซ์ไทย |
| **Positioning** | รีวิวสั้น อ่านง่าย เทียบราคาและ use case ไม่ใช่รวมลิงก์ |
| **Monetization** | Affiliate link, Sponsored guide, Service (AI Stack Audit) |

## 🧱 2. Tech Stack

```
Next.js 16 (App Router) + TypeScript 6.0 + Tailwind CSS 3.4
Content: Local TypeScript data files → Supabase (read-only)
Auth: Supabase Auth
Payments: Stripe
Deploy: Vercel
SEO: JSON-LD (Article, SoftwareApplication, ItemList, NewsArticle, WebSite)
```

## 🎨 3. Design System

### Colors
```css
--bg: #050505           /* main background */
--card: #0B0B0B         /* card/frame background */
--border: rgba(255, 255, 255, 0.08)
--accent: #f5b831 / #f6d37b  /* gold accent */
--text-primary: white
--text-muted: zinc-300 to zinc-600
--bg-soft: rgba(255, 255, 255, 0.03)
--bg-hover: rgba(255, 255, 255, 0.07)
```

### Tailwind custom colors
```js
graphite: {
  bg: "#050505",
  card: "#0B0B0B",
  border: "rgba(255,255,255,0.08)",
  soft: "rgba(255,255,255,0.05)",
}
```

### Layout
- `max-w-[1500px]` — container width
- `lg:grid-cols-[minmax(0,1fr)_440px]` — 2-column hero
- Cards: `mima-cell scan-hover terminal-shadow rounded-[4px] border p-5`
- Frames: `mima-frame overflow-hidden rounded-[4px]`
- Grid background (body::before + .bg-grid)

### Components (shared)
1. **Card** — `<div className="mima-cell scan-hover terminal-shadow min-w-0 rounded-[4px] border p-5">`
2. **Pill** — `<span className="rounded-[3px] border border-white/[0.09] bg-white/[0.035] px-3 py-1.5 text-xs text-zinc-400">`
3. **CtaLink** — 3 variants: primary (darker bg), secondary (subtler), quiet (ghost)
4. **SectionHeader** — eyebrow (zinc-500 label) + h2 title + optional description
5. **CommandPanel** — terminal-style info panel with "mima://finder" label
6. **ContentAccessBadge** — public/member/pro access levels
7. **CompareProvider + CompareBar** — tool comparison drawer

---

## 📄 4. Site Architecture (ทุกหน้า)

### 4.1 Home (/) — Heavy content showcase
```
Sections:
- Hero: tagline + metric counters (tools/guides/deals) + featured deal sidebar
- Audiences: 4 audience types (ครีเอเตอร์/นักการตลาด/SME/ฟรีแลนซ์)
- Selection paths: 4 cards linking to tools|guides|news|deals
- AI Stacks: 3 example stacks (Content/Shop/Automation)
- Priority guides: 5 key guides in horizontal grid
- Featured tools: 6 tool cards
- Latest guides section
- News desk: lead news + featured deals
- Trust signals: 3 "Why MIMO" items
- For brands: CTA for sponsored guides
```

### 4.2 /tools — AI Tools Directory
```
- Search bar (q parameter) + category dropdown
- Category filter pills
- Popular search links
- Tool cards: category, name, tier, thaiSummary, price, useCase, bestFor, tags
- Add-to-compare button per card
```

### 4.3 /tools/[slug] — Tool Detail Page
- Full review with Thai summary, pricing, pros/cons, use cases
- SEO: SoftwareApplication JSON-LD

### 4.4 /tools/compare — Compare Page
- Side-by-side tool comparison

### 4.5 /guides — Guides Index
```
- Topic clusters (grid of 4 clusters × 3 guides each)
- Guide cards: category, level, readingTime, title, summary
- Public/member/pro access badges
```

### 4.6 /guides/[slug] — Guide Detail Page
- Full article: sections, steps, comparisonRows, FAQ, decisionRules
- SEO: Article JSON-LD with mainEntity (FAQ markup)

### 4.7 /news — News Desk
```
- Filter: categories (AI Agents/Tools Update/Business/Content/Automation/Pricing)
- Filter: types (news/trend-brief/product-update/model-update/business)
- Editor's picks section
- News cards: image, type badge, title, summary, source
```

### 4.8 /news/[slug] — News Detail
- Full article with image lightbox
- SEO: NewsArticle JSON-LD

### 4.9 /deals — AI Stacks & Deals
```
- Stacks/deals comparison grid
- Per deal: vendor, title, discount, summary, tags, note
- Linked tools per stack
- Member/pro gating on alternating items
```

### 4.10 /services — Service Packages
```
4 packages:
- AI Stack Audit Express (1,500 THB, 24-48h)
- AI Stack Audit (3-5 days)
- Workflow Setup (7-14 days)
- Team Playbook (2-3 weeks)
```

### 4.11 Auth Pages
- /auth/login, /auth/register, /auth/forgot-password, /auth/reset-password
- Supabase Auth integration

### 4.12 /dashboard — Member Dashboard
- /dashboard, /dashboard/prompts

### 4.13 Info Pages
- /about, /contact (with LINE QR), /privacy, /advertise, /affiliate-disclosure, /methodology

### 4.14 /mimoadminza — Admin CMS (protected)
- Full CRUD: tools, guides, news, deals
- Media upload, affiliate links, audit logs, news intake

---

## 🔧 5. Data Model

### Tool
```typescript
{ slug, name, category, price, pricingNote, summary, thaiSummary, useCase, bestFor,
  notFor?, tags[], score, affiliateCta, featured?, quickVerdict?, bestUseCases?,
  pros?, cons?, skipIf?, pricingDiscussion?, decisionRule?, internalLinks? }
```

### Guide
```typescript
{ slug, title, seoTitle?, metaDescription?, category, level, readingTime,
  summary, image?, imageAlt?, socialImage?, tags[], steps[], contentSections?,
  audience?, beforeStart?, examplePrompt?, commonMistakes?, comparisonRows?,
  decisionRules?, faq?, internalLinks?, affiliateCta? }
```

### NewsItem / NewsArticle
```typescript
{ slug, title, summary, source, date, category, image?, tags[], newsType?,
  author?, sourceName?, sourceUrl?, publishedAt?, lastCheckedAt? }
```

### Deal
```typescript
{ slug, title, vendor, category, discount, summary, tags[], note }
```

---

## 🔒 6. Content Access Model (70/30)
- **Public (70%)**: Most tools, guides, news — fully indexable
- **Member (free)**: Save/compare tools, shortlist, watchlist
- **Pro/Service (paid)**: Workflow maps, automation blueprints, AI stack recommendations

---

## 🚀 7. Deployment & SEO

### Config
- `next.config.ts`: CSP headers, security headers, redirects
- `robots.ts`, `sitemap.ts`
- OG image: `/opengraph-image` (Next.js OG image generation)

### Metadata helper
```typescript
buildMetadata({ title, description, path, image?, type?, noIndex? })
→ Returns OG + Twitter + canonical + robots
```

### JSON-LD helpers
- `createWebsiteJsonLd()` — WebSite schema
- `createItemListJsonLd()` — ItemList for listing pages
- `createToolJsonLd()` — SoftwareApplication
- `createGuideArticleJsonLd()` — Article with FAQ
- `createNewsArticleJsonLd()` — NewsArticle with date/author

---

## 📁 8. Filesystem Structure

```
/root/mir/
├── src/
│   ├── app/          # Pages (App Router)
│   ├── components/   # Shared UI components
│   ├── data/         # Local content (TypeScript data files)
│   ├── lib/          # Utilities
│   │   ├── admin/    # CMS admin actions
│   │   ├── auth/     # Auth helpers
│   │   ├── content/  # Content source repo (local + supabase)
│   │   ├── supabase/ # Supabase client
│   │   └── ...       # seo.ts, news.ts, navigation.ts, tool-tier.ts
│   ├── hooks/        # React hooks
│   ├── types/        # Shared types
│   └── middleware.ts # Auth middleware
├── public/           # Images, icons, brand assets
│   ├── brand/        # Logo files
│   ├── icons/        # Favicon, apple icon
│   ├── images/       # Guides, news, home images
│   └── news/         # News images
├── docs/             # Project documentation
├── scripts/          # Automation scripts
├── supabase/         # Supabase schema/seed
└── .vercel/          # Vercel config
```