30 Shanghai Shops Landing Page Gallery

# 30 Shanghai Shop Landing Pages — Final Version

Build **one deploy**: a gallery homepage + 30 subpaths, each subpath a complete standalone landing page for a local Shanghai shop with no website of its own. **Do not attempt 30 separate deploys** (the sandbox overwrites and only one survives).

---

## Phase 1 · Find 30 shops (parallel scraping)

Across **Dianping / Amap / Xiaohongshu / Douyin location pages**, find 30:
- Brick-and-mortar Shanghai shops across 9 districts (Xuhui / Jing'an / Changning / Huangpu / Hongkou / Yangpu / Putuo / Minhang / Pudong), 2–5 per district
- Rating ≥ 4.3, reviews ≥ 30
- **No official website** (a WeChat official account or Xiaohongshu account does not count)
- **No chains / no influencer checklist spots**: Haidilao, Starbucks, Luckin, Manner, % Arabica, Heytea, Nayuki, Grandma's Home, Taier, Green Tea Restaurant, Lululemon, ZARA and the like are all excluded
- Diverse categories: Shanghainese bistros / independent coffee / noodle shops / bakeries / barbershops / pet grooming / shoe & bag repair / laundries / florists / tattoo studios / independent bookstores / auto repair / key cutting / massage studios / teahouses / vintage clothing / heritage brands / private-kitchen dining

For each, scrape: `name, category, neighborhood, district, address, phone, hours, rating, review_count, top_3_reviews(verbatim+nickname+platform+date), signature_offering, signature_price_cny, neighborhood_vibe, years_in_business, amap_lat_lng (lng,lat), source_urls`.

Output `businesses.json`. **No fabrication** — write `null` for fields you can't find, and keep searching until you have all 30.

---

## Phase 2 · Build 30 shops in parallel (30 sub-agents + 1 design lead)

Directory structure:

```
/mnt/agents/output/sites/
├── 01_slug/  ├── index.html  ├── hero.jpg  ├── portfolio_01.jpg ...
├── 02_slug/  ...
└── 30_slug/
```

### Images (critical, anti broken image)

**All images must be downloaded locally**, referenced in HTML with relative paths like `./hero.jpg`. **No hotlinking Unsplash / Dianping CDN** (they 404 or block hotlinks).

Priority:
1. Real photos from Dianping / Amap / Xiaohongshu → download with `requests.get()` and save as `hero.jpg`
2. Unsplash / Pexels with precise English category keywords → **download locally**
3. AI generation (`generate_image`), prompt includes category + neighborhood + storefront + photography style, **photorealistic only, no cartoon/illustration**, ≥ 1600px wide
4. Typographic poster fallback (solid color + 96–160px bold shop name), at most 3 of 30 shops

### 8 archetypes (≤ 5 shops each, chosen by category character)

Menu-first (restaurants) · magazine longform (bookstores/coffee/teahouses) · phone-first (auto repair/locksmiths) · portfolio grid (tattoo/nails/barber/floral) · price list (hair salons/laundry/massage) · map-first (deep in the lanes) · story-first (shops 20+ years old) · product waterfall (florists/bakeries/vintage)

**No three adjacent shops** may share the same archetype + header + hero height at once. **Font pairs all differ** (Chinese serif picks: Source Han Serif, LXGW WenKai, Founder YouSong; Chinese sans: Source Han Sans, PingFang). **Pull the palette from the shop's real storefront photo** — the default warm orange is banned.

### Required modules

1. Hero (shop name + one-liner + real photo)
2. 3 verbatim real reviews (with nickname + platform + date)
3. Address + hours + phone (tap-to-call on mobile)
4. Amap embed (**format below**)
5. Sticky bottom CTA bar on mobile (shown < 768px): “Call” + “Directions”
6. `<title>` = shop name + subtitle
7. favicon = first character of the shop name (**no AI / swarm marks**)

### Amap embed (do not use the Google Maps `pb=` format, it won't open in China)

```html
<iframe src="https://uri.amap.com/marker?position=121.4571,31.2155&name=SHOPNAME&coordinate=gaode&callnative=0"
        width="100%" height="320" frameborder="0" style="border:0; border-radius:4px;"
        loading="lazy"></iframe>
```

“Directions” button: `https://uri.amap.com/navigation?to=121.4571,31.2155,SHOPNAME&mode=car&coordinate=gaode`

⚠️ `position` order is **longitude first, latitude second** — verify it live after deploy before continuing.

### Design language

Benchmark Sightglass / Tartine / Aesop / % Arabica / OWSPACE bookstore / Hengshan Heji. **Banned**: gradient heroes, box-shadow, ≥12px radius, emoji, rainbow category colors, stacked Material cards. **Use**: 1px hairline borders, low saturation, oversized headings, restrained whitespace.

TailwindCSS CDN + mobile-first + WCAG AA + single page ≤ 200KB excluding images.

---

## Phase 3 · Merge + deploy (1 merge agent + 1 deploy)

### Step 1 · Regroup into `/mnt/agents/output/final/`

Copy the 30 subdirectories as-is into `final/01_slug/` ... `final/30_slug/` (**zero changes** to subpage design).

### Step 2 · Inject a "back to gallery" link at the bottom of every subpage (before `</body>`)

```html
<a href="/" style="display:block; text-align:center; padding:14px 16px;
   font-family:inherit; font-size:13px; color:inherit; text-decoration:none;
   opacity:0.6; background:rgba(0,0,0,0.025);
   border-top:1px solid rgba(0,0,0,0.06); letter-spacing:0.05em;"
   onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.6">
  ← Back to 30 Shops
</a>
```

`color:inherit` lets the link adapt to each shop's palette.

### Step 3 · Generate the gallery homepage `/mnt/agents/output/final/index.html`

- **Hero**: title “30 Shanghai Shops” (display serif 72–96px) + one-line subtitle + timestamp “Month 2026” (**current year**)
- **Filter bar**: “All (30)” + ~14 category chips (multi-select, highlighted when active) + 9 district chips. `data-category` + `data-district` attributes + a JS `filterCategory()` function for show/hide + live counts
- **30-card grid** (3 columns desktop / 2 tablet / 1 mobile): 4:3 real photo + small category·neighborhood line + shop name + one-line vibe + ⭐ rating. Whole card clicks through to the subpath
- **Footer**: “30 Shops · made in Shanghai · 2026” (**no 2024 / 2025**) + the 30 shop names sorted by pinyin

Gallery palette: off-white #FAFAF7 + ink #1A1A1A + warm ink brown #5A4A3A (restrained). Fonts: Source Han Serif Heavy + Source Han Sans. Copy ≤ 300 characters. **No emoji decoration / rainbow category colors / shadows / ≥12px radius**.

### Step 4 · One deploy

```python
deploy_website(source_dir="/mnt/agents/output/final/", site_name="30-shanghai-stores")
```

---

## Phase 4 · QA + delivery (1 QA sub-agent)

| Check | Pass condition |
|---|---|
| Gallery homepage | loads in 3s + all 30 cards + filters work + counts correct |
| 8 subpage deep links | load fully, every image verified live |
| Back-to-gallery link | present on all 30, color adapts |
| Amap embed | spot-check 5 shops for the right location (not a downtown Shanghai wide shot) |
| Footer year | all 2026, **no 2024 / 2025 anywhere** |
| Visual variety | any 5 subpages look like work from 5 different studios |
| AI traces | zero “AI / Swarm / Kimi” strings anywhere on the site |

**Deliver**: 1 deploy URL + a list of the 30 subpaths (number + shop name + one-liner) + `businesses.json` + `README.md` (data sources + archetype assignments + image source stats).

# 30 Shanghai Shop Landing Pages — Final Version

Build **one deploy**: a gallery homepage + 30 subpaths, each subpath a complete standalone landing page for a local Shanghai shop with no website of its own. **Do not attempt 30 separate deploys** (the sandbox overwrites and only one survives).

---

## Phase 1 · Find 30 shops (parallel scraping)

Across **Dianping / Amap / Xiaohongshu / Douyin location pages**, find 30:
- Brick-and-mortar Shanghai shops across 9 districts (Xuhui / Jing'an / Changning / Huangpu / Hongkou / Yangpu / Putuo / Minhang / Pudong), 2–5 per district
- Rating ≥ 4.3, reviews ≥ 30
- **No official website** (a WeChat official account or Xiaohongshu account does not count)
- **No chains / no influencer checklist spots**: Haidilao, Starbucks, Luckin, Manner, % Arabica, Heytea, Nayuki, Grandma's Home, Taier, Green Tea Restaurant, Lululemon, ZARA and the like are all excluded
- Diverse categories: Shanghainese bistros / independent coffee / noodle shops / bakeries / barbershops / pet grooming / shoe & bag repair / laundries / florists / tattoo studios / independent bookstores / auto repair / key cutting / massage studios / teahouses / vintage clothing / heritage brands / private-kitchen dining

For each, scrape: `name, category, neighborhood, district, address, phone, hours, rating, review_count, top_3_reviews(verbatim+nickname+platform+date), signature_offering, signature_price_cny, neighborhood_vibe, years_in_business, amap_lat_lng (lng,lat), source_urls`.

Output `businesses.json`. **No fabrication** — write `null` for fields you can't find, and keep searching until you have all 30.

---

## Phase 2 · Build 30 shops in parallel (30 sub-agents + 1 design lead)

Directory structure:

```
/mnt/agents/output/sites/
├── 01_slug/  ├── index.html  ├── hero.jpg  ├── portfolio_01.jpg ...
├── 02_slug/  ...
└── 30_slug/
```

### Images (critical, anti broken image)

**All images must be downloaded locally**, referenced in HTML with relative paths like `./hero.jpg`. **No hotlinking Unsplash / Dianping CDN** (they 404 or block hotlinks).

Priority:
1. Real photos from Dianping / Amap / Xiaohongshu → download with `requests.get()` and save as `hero.jpg`
2. Unsplash / Pexels with precise English category keywords → **download locally**
3. AI generation (`generate_image`), prompt includes category + neighborhood + storefront + photography style, **photorealistic only, no cartoon/illustration**, ≥ 1600px wide
4. Typographic poster fallback (solid color + 96–160px bold shop name), at most 3 of 30 shops

### 8 archetypes (≤ 5 shops each, chosen by category character)

Menu-first (restaurants) · magazine longform (bookstores/coffee/teahouses) · phone-first (auto repair/locksmiths) · portfolio grid (tattoo/nails/barber/floral) · price list (hair salons/laundry/massage) · map-first (deep in the lanes) · story-first (shops 20+ years old) · product waterfall (florists/bakeries/vintage)

**No three adjacent shops** may share the same archetype + header + hero height at once. **Font pairs all differ** (Chinese serif picks: Source Han Serif, LXGW WenKai, Founder YouSong; Chinese sans: Source Han Sans, PingFang). **Pull the palette from the shop's real storefront photo** — the default warm orange is banned.

### Required modules

1. Hero (shop name + one-liner + real photo)
2. 3 verbatim real reviews (with nickname + platform + date)
3. Address + hours + phone (tap-to-call on mobile)
4. Amap embed (**format below**)
5. Sticky bottom CTA bar on mobile (shown < 768px): “Call” + “Directions”
6. `<title>` = shop name + subtitle
7. favicon = first character of the shop name (**no AI / swarm marks**)

### Amap embed (do not use the Google Maps `pb=` format, it won't open in China)

```html
<iframe src="https://uri.amap.com/marker?position=121.4571,31.2155&name=SHOPNAME&coordinate=gaode&callnative=0"
        width="100%" height="320" frameborder="0" style="border:0; border-radius:4px;"
        loading="lazy"></iframe>
```

“Directions” button: `https://uri.amap.com/navigation?to=121.4571,31.2155,SHOPNAME&mode=car&coordinate=gaode`

⚠️ `position` order is **longitude first, latitude second** — verify it live after deploy before continuing.

### Design language

Benchmark Sightglass / Tartine / Aesop / % Arabica / OWSPACE bookstore / Hengshan Heji. **Banned**: gradient heroes, box-shadow, ≥12px radius, emoji, rainbow category colors, stacked Material cards. **Use**: 1px hairline borders, low saturation, oversized headings, restrained whitespace.

TailwindCSS CDN + mobile-first + WCAG AA + single page ≤ 200KB excluding images.

---

## Phase 3 · Merge + deploy (1 merge agent + 1 deploy)

### Step 1 · Regroup into `/mnt/agents/output/final/`

Copy the 30 subdirectories as-is into `final/01_slug/` ... `final/30_slug/` (**zero changes** to subpage design).

### Step 2 · Inject a "back to gallery" link at the bottom of every subpage (before `</body>`)

```html
<a href="/" style="display:block; text-align:center; padding:14px 16px;
   font-family:inherit; font-size:13px; color:inherit; text-decoration:none;
   opacity:0.6; background:rgba(0,0,0,0.025);
   border-top:1px solid rgba(0,0,0,0.06); letter-spacing:0.05em;"
   onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.6">
  ← Back to 30 Shops
</a>
```

`color:inherit` lets the link adapt to each shop's palette.

### Step 3 · Generate the gallery homepage `/mnt/agents/output/final/index.html`

- **Hero**: title “30 Shanghai Shops” (display serif 72–96px) + one-line subtitle + timestamp “Month 2026” (**current year**)
- **Filter bar**: “All (30)” + ~14 category chips (multi-select, highlighted when active) + 9 district chips. `data-category` + `data-district` attributes + a JS `filterCategory()` function for show/hide + live counts
- **30-card grid** (3 columns desktop / 2 tablet / 1 mobile): 4:3 real photo + small category·neighborhood line + shop name + one-line vibe + ⭐ rating. Whole card clicks through to the subpath
- **Footer**: “30 Shops · made in Shanghai · 2026” (**no 2024 / 2025**) + the 30 shop names sorted by pinyin

Gallery palette: off-white #FAFAF7 + ink #1A1A1A + warm ink brown #5A4A3A (restrained). Fonts: Source Han Serif Heavy + Source Han Sans. Copy ≤ 300 characters. **No emoji decoration / rainbow category colors / shadows / ≥12px radius**.

### Step 4 · One deploy

```python
deploy_website(source_dir="/mnt/agents/output/final/", site_name="30-shanghai-stores")
```

---

## Phase 4 · QA + delivery (1 QA sub-agent)

| Check | Pass condition |
|---|---|
| Gallery homepage | loads in 3s + all 30 cards + filters work + counts correct |
| 8 subpage deep links | load fully, every image verified live |
| Back-to-gallery link | present on all 30, color adapts |
| Amap embed | spot-check 5 shops for the right location (not a downtown Shanghai wide shot) |
| Footer year | all 2026, **no 2024 / 2025 anywhere** |
| Visual variety | any 5 subpages look like work from 5 different studios |
| AI traces | zero “AI / Swarm / Kimi” strings anywhere on the site |

**Deliver**: 1 deploy URL + a list of the 30 subpaths (number + shop name + one-liner) + `businesses.json` + `README.md` (data sources + archetype assignments + image source stats).