Abcdef

Redesign the About Us and Why Us pages with full content and imagery. Follow AGENTS.md and .github/copilot-instructions.md and use docs/ui-design.md as the single design source (palette, fonts, motifs, rules: do not invent a new style). No new dependencies. Do not edit .env files. No git commands. Windows-safe commands. Do not change data layers, schemas, actions, admin pages or routes. Keep metadata, breadcrumbs, one h1 per page, static rendering, and the explicit-empty-value rule for unset client facts (never test text for "PLACEHOLDER").

CONTENT RULES (pharma-sensitive: read carefully)

Write original, plain-language, confident but modest copy in the content modules (src/features/marketing/content.ts or a split-out file per page; keep one typed source of truth, no copy inside components).

ALLOWED: what the website does (browse products, request a quote per product, we get in touch by phone or email), the two contact points (Mumbai and Jaipur, taken from site config, never labelled "office", "factory" or "plant"), principles and commitments written as intentions ("we aim to", "we focus on", "we believe"), and general, non-medical statements about pharmaceutical supply.

FORBIDDEN: years in business, numbers or statistics, customer counts, certifications, licences, approvals, awards, "manufacturer", "our facility/plant/lab/factory", "WHO", "GMP", "ISO", unverifiable superlatives ("best", "leading", "world-class", "trusted by"), health or therapeutic claims, delivery-time or coverage promises, named partners or clients, testimonials, named people.

Add a header comment at the top of each content file listing that every statement must be confirmed by the client before launch.

TASK 1: IMAGES

1. Use Unsplash or Pexels ONLY (never Google Images, never other sources). Allowed subjects: capsules and tablets as macro or flat-lay, blister packs and plain unbranded packaging, pharmacy-style shelving without readable brand names, glassware or lab-style detail shots as abstract close-ups, clean desk or paperwork textures. Forbidden: identifiable people or faces, visible brand names, logos or readable text on packs, real branded drugs, anything that depicts a factory, production line or a named facility, patients, syringes in use, anything graphic or alarming.

2. Needed: About page: 1 wide hero image, 2 supporting images. Why Us page: 1 wide hero image, 1 supporting image. Total 5 files. Choose images that suit the palette in docs/ui-design.md (cool, clean, teal-friendly), are sharp, and have a clear focal point so object-cover cropping works at mobile and desktop ratios.

3. If your tools can download files (browser tool or PowerShell Invoke-WebRequest, network permitting): download the 5 images into public/images/about/ and public/images/why-us/ with descriptive lowercase file names. Keep each file at most 2000px wide and under about 500 KB; if you cannot resize, pick a smaller export size from the source site. Record for each image the source page URL, photographer, platform, and license name in docs/image-credits.md.

4. If you cannot download (no network or tool limits): do NOT fake it. Build everything with the image slots disabled and give me, in the report, a table of the exact 5 images needed: target path, recommended search terms, orientation and minimum size.

5. Image wiring: a typed ABOUT_IMAGES / WHY_US_IMAGES config where each slot is either null or { src, width, height, alt }. A slot that is null renders the existing decorative, aria-hidden, text-free panel so the page still looks finished; a slot with a file renders next/image. Verify with a search that every configured file exists on disk (add a unit test for this). Rules: alt text describes only what is visible and never claims ownership or place (for example "Close-up of white capsules on a pale surface", never "Our laboratory"); fixed aspect-ratio containers and accurate sizes (no layout shift); priority only on the one hero image per page, lazy elsewhere; no remote URLs, no changes to next.config image patterns.

TASK 2: ABOUT US PAGE (target roughly 700 to 900 words in total)

Compose, with a different layout rhythm per section (not a stack of identical cards), using the blister-pack motifs with restraint:

1. Hero: page header with a short intro paragraph and the hero image in a pocket-style frame.

2. Who we are: 2 to 3 short paragraphs on what Vinsent Pharma is and does, in terms of what the website and company relationship offers a buyer. Company history stays omitted unless configured.

3. Mission and vision: two contrasting panels, one sentence each plus one supporting sentence.

4. What we do: four short items (for example "Showcase our product range", "Handle your quote requests", "Stay in touch directly", "Keep information clear") with icons from @tabler/icons-react; each 1 to 2 sentences and true of the website's real behaviour.

5. Our values: five values (integrity, quality focus, reliability, transparency, responsibility) as a ruled list or editorial layout with one-sentence descriptions each, no numbering and no all-caps labels.

6. How working with us looks: a four-step sequence (Browse the products, Request a quote on the product you need, We contact you by phone or email, Discuss your requirements). This IS a sequence, so numbered markers are appropriate here; vertical on mobile, horizontal on desktop.

7. Where to find us: the two contact points (cities from config) with phone, email and map links from config, and a link to the Contact page.

8. The existing dark call-to-action band.

TASK 3: WHY US PAGE (target roughly 700 to 900 words in total)

1. Hero with the hero image and a short intro.

2. The six reasons, expanded: quality focus, careful sourcing of ingredients, trust and commitment, a clear mission, convenient reach through two contact points, customer focus. 2 to 3 sentences each, written as intentions and approach, not verified facts. Use an editorial layout (for example a sticky heading column with the list beside it on desktop) rather than a six-card grid; reuse the same data module that the home page grid reads so there is one source, and do not break the home page layout.

3. What to expect when you work with us: four short points about communication, clarity, consistency and follow-up, each phrased as an aim.

4. Our commitments: a short quiet strip of three to four principle statements, no numbers.

5. Frequently asked questions: 6 to 7 questions built with native <details>/<summary> (no JavaScript), accessible and visibly focusable, answers true to the website: how to request a quote (from the product page), whether you can buy online (no, the site does not take payments or orders), what to include in a quote request, how we get in touch, where to reach us (Mumbai and Jaipur contact points from config), what to do if you cannot find a product (contact us by phone or email), and whether medical advice is given on the site (no, general information only, ask a healthcare professional). Do not add FAQ structured data.

6. The existing dark call-to-action band.

Page descriptions in metadata must match the new content and stay under 160 characters.

QUALITY BAR

Mobile-first and beautiful from 360px to 1920px and wider, no horizontal scroll, text blocks under 75 characters per line, 44px touch targets, visible focus, WCAG AA contrast, prefers-reduced-motion respected, no new client JavaScript, no layout shift, server components only. Keep the home page and every other page unchanged in behaviour. Update any tests that reference changed content.

VERIFY

typecheck, lint and format check on changed files, bun test, build once. Run the production build on a free port; fetch /about-us, /why-us and / : 200 and exactly one h1 each; the forbidden words from the content rules (certified, GMP, WHO, ISO, manufacturer, factory, plant, laboratory, leading, best, trusted, years) must not appear in the rendered text of either page (report the check). Screenshot both pages at 360, 768, 1280 and 1920 widths, critique and fix spacing, hierarchy, crowded or empty areas, and image cropping. Check the browser console for errors. Stop only the server you started.

REPORT (short)

(1) Image result: downloaded files with sources and licenses, or the table of images still needed (2) Word counts per page (3) Files created/changed (4) Anything in your copy you are unsure is safe for a pharma client, listed for review (5) Issues found in screenshots and fixes (6) typecheck/lint/format/test/build results (7) Decisions to review