# Demo1 — Shobuj Jibon by Ayesha: PHP Implementation Plan

> **Status:** implementation-ready planning artifact; এই folder-এ এখন production code বা বাস্তব credentials নেই।  
> **Site format:** Multipage  
> **Runtime target:** PHP 8.2+ compatible shared/VPS hosting; implementation-এর সময় host-এর currently supported PHP release যাচাই করতে হবে।  
> **Data policy:** কোনো application database নয়; form submission persist করা যাবে না।

## 1. Scope, vertical slice ও architecture guard

এই plan-এর vertical slice হলো **টেকসই জীবনযাপন পরামর্শক ও ব্যক্তিগত ব্র্যান্ড**-এর জন্য একটি স্বতন্ত্র Bangladesh-first public website: বাংলা-first content, responsive visual system, flat-file blog/content, server-side SMTP contact form এবং WhatsApp handoff।

এটি একটি **local PHP demo track**। WebLinkPong production v1-এর accepted baseline হলো managed custom Next.js deployment, versioned shared runtime ও central inventory (D-026)। Architecture decision ও managed deployment/runtime control পরিবর্তন ছাড়া এই PHP demo-কে production customer site হিসেবে promote করা যাবে না। Production adaptation হলে server-side site identity, revision/deployment evidence, runtime field permissions এবং inventory reporting আলাদাভাবে পূরণ করতে হবে।

### Definition of done

- Multipage experience routes ও নিচের content flow অনুযায়ী সম্পূর্ণ।
- desktop, tablet ও mobile-এ অসম editorial split hero, ডান পাশে উল্লম্ব proof rail এবং নিচে staggered story blocks; motif: পাতলা blueprint line, measured annotations ও precise corner marks বাস্তবায়িত।
- PHP ছাড়া browser-এ SMTP credential, recipient address বা secret কোনোভাবেই প্রকাশ পায় না।
- contact POST সফল হলে SMTP দিয়ে পাঠায়; ব্যর্থ হলে submission সংরক্ষণ না করে safe retry/WhatsApp option দেয়।
- flat-file content ও blog database ছাড়াই কাজ করে।
- generated/local images responsive, optimized, alt-textসহ এবং license/source ledger-এ নথিভুক্ত।
- accessibility, SEO, performance, privacy ও security acceptance checklist pass করে।

## 2. Demo identity (launch-এর আগে বদলাতে হবে)

| Field | Demo value |
|---|---|
| Brand | **Shobuj Jibon by Ayesha** |
| Concept | টেকসই জীবনযাপন পরামর্শক ও ব্যক্তিগত ব্র্যান্ড |
| Primary audience | শহুরে পরিবার ও তরুণ পেশাজীবী |
| Core offer | বাসা, কেনাকাটা ও দৈনন্দিন অভ্যাসের sustainability audit |
| Demo contact person | Shobuj Jibon by Ayesha Demo Desk |
| Demo email | `hello@shobuj-jibon-by-ayesha.example` — reserved `.example`, deliverable নয় |
| Demo phone/WhatsApp | `+880 1XXX-XXX-0001` — X-সহ non-routable placeholder |
| Demo address | 101 Demo Lane, Dhaka, Bangladesh — **কাল্পনিক** |

সব visible demo detail-এর পাশে development/staging-এ “Demo information” label থাকবে। বাস্তব launch-এর আগে verified legal name, public contact, service boundary, address ও WhatsApp number content sign-off দিয়ে প্রতিস্থাপন করতে হবে।

## 3. Positioning ও conversion contract

- **One-line promise:** “বাসা, কেনাকাটা ও দৈনন্দিন অভ্যাসের sustainability audit—পরিষ্কার তথ্য, নির্দিষ্ট next step এবং কোনো অস্পষ্ট প্রতিশ্রুতি ছাড়া।”
- **Primary visitor:** শহুরে পরিবার ও তরুণ পেশাজীবী।
- **Primary conversion:** প্রয়োজন/প্রশ্নসহ secure contact form submit।
- **Secondary conversion:** prefilled WhatsApp conversation; কোনো automated message send নয়, user নিজে WhatsApp-এ send করবেন।
- **Trust strategy:** বাস্তব process, সীমাবদ্ধতা, scope, evidence type এবং response expectation আগে দেখানো; fabricated review, client logo, accreditation, result বা number ব্যবহার নয়।
- **Not in scope:** login, cart/payment, CRM, user account, database, admin panel, live availability, stored lead history।

## 4. Information architecture

### Public routes

- `/`
- `/profile/`
- `/expertise/`
- `/selected-work/`
- `/journal/`
- `/contact/`

`/contact/submit.php` public page নয়; এটি শুধুমাত্র validated POST endpoint। `/health.php` থাকলে secret-free status এবং HTTP 200/503 ছাড়া আর কিছু দেখাবে না।

### Homepage content order

1. **বিশ্বাসযোগ্যতার প্রমাণ** — বাসা, কেনাকাটা ও দৈনন্দিন অভ্যাসের sustainability audit-কে কেন্দ্র করে এই block-এর copy, evidence ও action সাজাতে হবে।
2. **লেখা** — বাসা, কেনাকাটা ও দৈনন্দিন অভ্যাসের sustainability audit-কে কেন্দ্র করে এই block-এর copy, evidence ও action সাজাতে হবে।
3. **যোগাযোগ** — বাসা, কেনাকাটা ও দৈনন্দিন অভ্যাসের sustainability audit-কে কেন্দ্র করে এই block-এর copy, evidence ও action সাজাতে হবে।
4. **পরিচিতি** — বাসা, কেনাকাটা ও দৈনন্দিন অভ্যাসের sustainability audit-কে কেন্দ্র করে এই block-এর copy, evidence ও action সাজাতে হবে।
5. **বিশেষ দক্ষতা** — বাসা, কেনাকাটা ও দৈনন্দিন অভ্যাসের sustainability audit-কে কেন্দ্র করে এই block-এর copy, evidence ও action সাজাতে হবে।
6. **নির্বাচিত কাজ** — বাসা, কেনাকাটা ও দৈনন্দিন অভ্যাসের sustainability audit-কে কেন্দ্র করে এই block-এর copy, evidence ও action সাজাতে হবে।

Homepage-এর প্রতিটি block-এর উদ্দেশ্য ও visual grammar আলাদা হবে। একই rounded-card grid বারবার ব্যবহার করা যাবে না; section order, scale, alignment, background density ও media ratio ইচ্ছাকৃতভাবে বদলাতে হবে।

### Multipage responsibilities

- প্রতিটি route-এর একটি মাত্র clear job থাকবে; homepage-এর copy হুবহু repeat করা যাবে না।
- “Resources/Journal” index flat-file metadata পড়বে এবং article page sanitized Markdown render করবে।
- Contact/booking/inquiry page service boundary, expected response window, privacy note ও alternate WhatsApp path একসঙ্গে দেখাবে।
- বর্তমান route-এর visible navigation state, skip link, breadcrumb (প্রয়োজনে) ও unique title/meta description থাকবে।

## 5. Unique visual direction

- **Layout signature:** অসম editorial split hero, ডান পাশে উল্লম্ব proof rail এবং নিচে staggered story blocks; motif: পাতলা blueprint line, measured annotations ও precise corner marks।
- **Color tokens:** ink `hsl(138 34% 14%)`, surface `hsl(185 38% 96%)`, accent `hsl(138 72% 43%)`, supporting `hsl(334 58% 52%)`; final implementation-এ WCAG contrast যাচাই করে lightness সামঞ্জস্য করতে হবে।
- **Typography direction:** Noto Serif Bengali + Inter; বাংলা body copy সর্বনিম্ন 16px/1.65 line-height। Font self-host করলে license file রাখতে হবে; remote font fail হলেও system fallback readable হতে হবে।
- **Shape language:** Demo 1-এর section number, concept-specific icon silhouette ও motif মিলিয়ে custom CSS primitives; generic template icon pack দিয়ে identity বানানো যাবে না।
- **Motion:** opacity/transform-only 160–420ms transitions; `prefers-reduced-motion`-এ সম্পূর্ণ static fallback।
- **Responsive rule:** content hierarchy recompose করতে হবে—desktop শুধু ছোট করে mobile বানানো যাবে না। Critical CTA প্রথম 600–750px mobile viewport-এর মধ্যে পৌঁছানো উচিত।

## 6. Image generation ও asset plan

### Hero prompt

> একটি স্বচ্ছ ঘরোয়া পরিবেশে বাংলাদেশের sustainable-lifestyle consultant, reusable household objects, warm daylight, Bangladesh perspective, অসম editorial split hero, ডান পাশে উল্লম্ব proof rail এবং নিচে staggered story blocks; motif: পাতলা blueprint line, measured annotations ও precise corner marks, color accents hsl(138 72% 43%) and hsl(334 58% 52%), premium editorial photography, realistic proportions, culturally respectful, no readable text, no logo, no watermark, no UI mockup.

### Supporting prompts

1. বাসা, কেনাকাটা ও দৈনন্দিন অভ্যাসের sustainability audit-এর বাস্তব process বা material-এর close documentary detail, Dhaka, natural light, no text, no logo, no watermark.
2. শহুরে পরিবার ও তরুণ পেশাজীবী-এর একজন বা ছোট দলকে সম্মানজনক বাস্তব context-এ দেখানো, Bangladesh, candid composition, no identifiable private data.
3. টেকসই জীবনযাপন পরামর্শক ও ব্যক্তিগত ব্র্যান্ড-এর tools, documents বা components নিয়ে top-down editorial still life, palette inspired by hsl(138 72% 43%), no text.

### Required files

- `public/assets/images/shobuj-jibon-by-ayesha-hero.avif` (1600px), WebP fallback এবং 768px mobile crop।
- `public/assets/images/shobuj-jibon-by-ayesha-process-01.webp`, `-people-02.webp`, `-detail-03.webp`।
- `public/assets/images/shobuj-jibon-by-ayesha-og.png` (1200×630; text browser-side compositing নয়, final graphic manual QA)।
- `content/media-ledger.php`: source/generation date, prompt reference, usage rights, reviewer, alt text এবং replacement status।

Faces, medical/legal claim, uniform, equipment, safety practice বা identifiable premises থাকলে human review বাধ্যতামূলক। Generated image-এ লেখা/লোগো তৈরি না করে HTML text overlay ব্যবহার করতে হবে। Alt text image কী দেখায় ও context-এ কেন দরকার সেটাই বলবে; “image of” দিয়ে শুরু নয়।

## 7. Editorial/blog plan

1. **কম বর্জ্যের রান্নাঘর শুরু করার ১২টি বাস্তব ধাপ** — intent: তথ্যভিত্তিক organic discovery; শেষে contextual inquiry link।
2. **কাপড় কেনার আগে cost-per-wear কীভাবে ভাববেন** — intent: তথ্যভিত্তিক organic discovery; শেষে contextual inquiry link।
3. **ঢাকার ছোট বাসায় বিদ্যুৎ সাশ্রয়ের checklist** — intent: তথ্যভিত্তিক organic discovery; শেষে contextual inquiry link।

প্রতিটি article 700–1,200 শব্দের original বাংলা draft, short English summary, author/reviewer, publish/update date ও source notes পাবে। Medical, legal, finance, migration, safety বা regulated topic হলে qualified reviewer ছাড়া publish নয় এবং service-specific disclaimer থাকবে। AI draft fact-check ও plagiarism review ছাড়া publish করা যাবে না।

### Flat-file model

- Post body: `content/posts/<slug>.md`
- Metadata: `content/posts/index.php`-এ allowlisted PHP array—title, slug, excerpt, author, reviewedBy, publishedAt, updatedAt, hero, alt।
- Markdown parser: current maintained package implementation-এর সময় যাচাই করে Composer lockfile-এ pin; raw HTML disabled।
- Slug route একটি allowlisted index থেকে resolve হবে; visitor-supplied file path সরাসরি `include`/read করা যাবে না।

## 8. PHP/no-database technical blueprint

```text
Demo1/
├─ IMPLEMENTATION_PLAN.md
├─ composer.json
├─ composer.lock
├─ .env.example                 # placeholders only; real .env commit নয়
├─ app/                         # public web root-এর বাইরে
│  ├─ bootstrap.php
│  ├─ config.php
│  ├─ contact-mailer.php
│  ├─ contact-validation.php
│  ├─ csrf.php
│  └─ view.php
├─ content/
│  ├─ site.php
│  ├─ pages.php
│  ├─ media-ledger.php
│  └─ posts/
│     ├─ index.php
│     └─ *.md
├─ public/                      # hosting document root
│  ├─ index.php
│  ├─ assets/
│  │  ├─ css/site.css
│  │  ├─ js/site.js
│  │  └─ images/
│  ├─ contact/submit.php
│  └─ <route folders>/index.php
├─ templates/
│  ├─ layout.php
│  ├─ partials/
│  └─ components/
├─ tests/
│  ├─ contact-validation.php
│  └─ smoke.php
└─ var/                         # public root-এর বাইরে; deployment-created
   └─ logs/                     # secrets/PII/form body ছাড়া operational log
```

- PHP templates `htmlspecialchars(..., ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8')` দিয়ে untrusted output escape করবে।
- Content PHP arrays repository-reviewed; visitor input দিয়ে dynamic `include` নয়।
- JavaScript enhancement-only: navigation, disclosure, lightweight validation hints; submit/security PHP-তে authoritative।
- Database, SQLite, form JSON/CSV append, browser storage বা email-body log—সব নিষিদ্ধ।
- Apache rewrite rule ও Nginx equivalent deployment note লিখতে হবে; `app/`, `content/`, `vendor/`, `.env`, `var/` কখনো web-accessible নয়।

## 9. Contact form, SMTP ও WhatsApp contract

### Form fields

- `name` (2–80), `phone` (7–20), `email` (optional but valid, max 120)
- concept-specific `inquiry_type` allowlist
- `message` (20–2,000), explicit privacy consent, hidden honeypot, server-issued form timestamp
- no attachment, no rich HTML, no arbitrary recipient/subject/from field

### Server-only environment variables

```dotenv
SMTP_HOST=replace-in-host-secret-manager
SMTP_PORT=587
SMTP_USER=replace
SMTP_PASS=replace
SMTP_ENCRYPTION=tls
MAIL_FROM=no-reply@replace.example
MAIL_FROM_NAME="Shobuj Jibon by Ayesha Website"
MAIL_TO=replace-with-verified-recipient
CONTACT_HMAC_KEY=replace-with-long-random-secret
WHATSAPP_NUMBER=8801XXXXXXXXX
```

বাস্তব values repository, `public/`, HTML, JavaScript, source map, error page বা client response-এ থাকবে না। Shared hosting-এ document root `public/`-এ point করতে হবে এবং config/secret এক level বাইরে বা hosting secret manager-এ রাখতে হবে। `.env.example`-এ শুধু placeholders।

### POST flow

1. HTTPS-only POST; same-origin `Origin`/reasonable `Referer` check এবং PHP session CSRF token verify।
2. honeypot, minimum-fill-time, request/body size, allowlisted content type ও per-session/IP-aware bounded throttle verify। IP raw log নয়; প্রয়োজন হলে rotating-key HMAC count।
3. trim/normalize/length validation; CRLF/header-injection reject; recipient ও From server config থেকে স্থির।
4. current maintained PHPMailer release Composer দিয়ে install ও lock; authenticated SMTP + STARTTLS/TLS, certificate verification disabled করা যাবে না।
5. plain-text ও escaped HTML email তৈরি; reply-to কেবল valid user email হলে।
6. success-এ PRG `303` redirect + one-time session flash; failure-এ generic message, correlation ID এবং safe retry।
7. submission body, email, phone database/file/log-এ persist নয়। SMTP failure queue-ও নয়; user-কে retry বা WhatsApp handoff।

### WhatsApp

Server config থেকে public business number নিয়ে `https://wa.me/<digits>?text=<urlencoded>` link render হবে। Prefill-এ শুধু demo/site label ও user-editable generic inquiry থাকবে; form-এর sensitive free text auto-copy নয়। `target="_blank"` হলে `rel="noopener noreferrer"`। +880 1XXX-XXX-0001 কেবল visual placeholder—বাস্তব `WHATSAPP_NUMBER` না দেওয়া পর্যন্ত CTA disabled এবং “Demo” marked থাকবে।

## 10. Security ও privacy controls

- security headers: CSP (self assets + explicitly approved image/font origin), `frame-ancestors 'none'`, `X-Content-Type-Options: nosniff`, strict referrer policy, permissions policy এবং production HSTS।
- session cookie: Secure, HttpOnly, SameSite=Lax; success flash ছাড়া personal data session-এ রাখা যাবে না।
- PHP errors visitor-কে display নয়; server log-এ secret, form body, email, phone, SMTP response payload নয়।
- contact response generic, যাতে SMTP configuration/recipient/account enumerate করা না যায়।
- dependency audit, secret scan, `php -l`, malicious input test, CSRF failure, throttle এবং SMTP failure test।
- analytics/cookie banner defaultে নেই। পরে analytics যোগ হলে consent ও privacy decision আলাদা।
- public legal copy: privacy note, demo disclaimer, regulated-sector limitation এবং response-time expectation।

## 11. SEO, schema ও sharing

- প্রতি public route-এ unique Bengali title (প্রায় 45–60 chars), description, canonical, Open Graph/Twitter metadata।
- `lang="bn-BD"`, English fragment-এ `lang="en"`; correct heading outline।
- schema type concept অনুযায়ী human-reviewed: `Person + ProfilePage`; fake rating, review, price, availability বা accreditation schema নয়।
- XML sitemap কেবল public canonical routes; `contact/submit.php`, internal app/content path ও demo-only health endpoint বাদ।
- robots meta staging-এ `noindex,nofollow`; verified production domain ও content sign-off-এর পরে indexable।
- `robots.txt`, `sitemap.xml`, `404.php`, favicon ও OG asset acceptance-এর অংশ।

## 12. Accessibility ও performance

- skip link, landmarks, visible keyboard focus, 44px touch target, error summary + field association এবং success status announcement।
- form label placeholder-এর বিকল্প নয়; Bangla error message সংক্ষিপ্ত ও next action স্পষ্ট।
- color contrast WCAG AA; information শুধু color/hover-এ নয়।
- responsive image `srcset`/sizes, AVIF/WebP, below-fold lazy loading, explicit width/height।
- hero LCP image preload only when measured; critical CSS ছোট, non-critical JS `defer`।
- target: production mobile Lighthouse representative run-এ Performance ≥90, Accessibility ≥95, Best Practices ≥95, SEO ≥95; measurement URL ও date নথিভুক্ত।
- 360px থেকে 1440px পর্যন্ত horizontal overflow নয়; low-end Android ও slow 4G smoke test।

## 13. Implementation sequence

1. এই plan ও demo identity review; prohibited claim, regulated disclaimer ও primary conversion approve।
2. route/content inventory, wireframe এবং অসম editorial split hero, ডান পাশে উল্লম্ব proof rail এবং নিচে staggered story blocks; motif: পাতলা blueprint line, measured annotations ও precise corner marks অনুযায়ী responsive prototype।
3. PHP skeleton, document-root isolation, content arrays এবং reusable escaped templates।
4. CSS tokens/typography/components; এরপর generated/local images optimize ও media ledger complete।
5. flat-file blog renderer raw HTML disabled রেখে implement।
6. contact validation, CSRF, throttle, SMTP adapter ও WhatsApp fallback; test SMTP sandbox দিয়ে end-to-end।
7. accessibility, responsive, performance, security header, secret scan ও negative-path QA।
8. real contact/content বসিয়ে staging sign-off; production architecture gate পরীক্ষা; backup/rollback note।

## 14. Acceptance checklist

- [ ] Folder/site identity, offer, section order, layout signature ও imagery অন্য Demo থেকে copy নয়।
- [ ] Site format **Multipage** এবং route list ঠিক আছে।
- [ ] All content Bengali-first, concise, factual এবং demo information clearly marked।
- [ ] No database/SQLite/CSV lead file/localStorage lead persistence।
- [ ] SMTP secret browser/public tree/repository/log/error response-এ নেই।
- [ ] CSRF, honeypot, minimum-time, validation, CRLF defense, throttling ও PRG tested।
- [ ] SMTP success, SMTP failure, validation failure এবং idempotent double-click behavior tested।
- [ ] WhatsApp number config-driven; placeholder অবস্থায় CTA disabled; sensitive form content prefill নয়।
- [ ] Generated images human-reviewed, optimized, local, alt-text ও media ledger complete।
- [ ] Blog posts original, source/reviewer metadata আছে; raw HTML disabled।
- [ ] Keyboard, screen-reader form flow, reduced motion, contrast এবং 200% zoom pass।
- [ ] Unique metadata/schema, sitemap, robots staging guard, 404 ও OG image pass।
- [ ] `php -l`, Composer audit, secret scan, link check ও representative Lighthouse run pass।
- [ ] Deployment note-এ document root, PHP version, SMTP provider settings, rollback এবং architecture promotion gate আছে।

## 15. Launch replacement checklist

- [ ] সব fake name/address/`.example` email/X-যুক্ত phone খুঁজে verified values বসানো।
- [ ] SMTP sender/domain authentication (SPF, DKIM, DMARC) provider-side verify।
- [ ] recipient consent ও response owner নির্ধারণ; test inbox থেকে real delivery/reply test।
- [ ] business WhatsApp number ownership verify; no secret/token frontend-এ নেই।
- [ ] legal/medical/finance/migration/safety claim qualified owner approve।
- [ ] staging `noindex` production approval-এর পরেই সরানো।
- [ ] WebLinkPong production হলে accepted managed-site architecture ছাড়া promote নয়।