Replace the flat minimal sections with a bento layout (ui-ux-pro-max "Bento
Box Grid" style) while keeping the light theme and single blue accent.
- Bento grid system in CSS: 4-col -> 2-col -> 1-col, varied spans (span-2,
row-2), 22px tiles, hover lift, dark/accent/tint tile variants
- Hero is now a bento: dark name/anchor tile + value-prop tile + accent
availability tile + social tile
- Services: bento tiles with a tinted featured tile and a dark AI tile
- Stack: four category tiles (AI/ML tinted)
- Portfolio: featured 2x2 tile + colored covers per project
- Pipeline / expertise / blog / contact kept as different layouts for rhythm
Verified: 4-col desktop, clean 1-col mobile with no horizontal overflow,
no console errors. Tailwind bundle rebuilt.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Audited the site with the ui-ux-pro-max skill. It validated the brand blue
(#2563EB == its SaaS primary) but flagged real high-severity gaps:
- Contrast: muted grays were zinc-400 (~2.8:1, fails WCAG AA). Bumped the
muted token + all text-zinc-400 to zinc-500 (#71717a, ~4.6:1).
- Touch targets: social buttons 38px -> 44x44 (meets 44pt minimum).
- Cursor + disabled: cursor-pointer on buttons; disabled state dims + blocks.
- Form a11y: required-field asterisks (name/service/budget/message),
autocomplete on name/company, and role=status aria-live=polite on the
submit status so screen readers announce success/error.
Kept Syne + system fonts and the blue accent (skill suggested Inter + an
AI-purple palette its own anti-patterns reject). Rebuilt Tailwind bundles.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Swap the fabricated case studies (Atlas/Sentinel/etc. with invented metrics)
for the four real shipped products, each linking to its live site:
- Hamkadr (hamkadr.ir) - healthcare staffing marketplace
- Meezi (meezi.ir) - cafe/restaurant management SaaS
- Barge Vasat (bargevasat.ir) - online Hokm card game
- Flatrender (flatrender.ir) - AI video/image studio
Cards are now external links (2x2 grid), no invented numbers or clients.
Regenerated the purged Tailwind bundle for the new classes.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The runtime CDN (cdn.tailwindcss.com) is not production-grade: FOUC, no
purging, and an external request that is slow/blocked from some networks.
- Add Tailwind v3 build (package.json `npm run build`) with two scoped configs:
public (accent + zinc) -> wwwroot/css/tailwind.css, and admin (dark base/
electric/violet/emerald, separate to avoid the emerald flat-vs-scale clash)
-> wwwroot/css/tailwind-admin.css. Both minified + content-purged.
- Layouts now link the built CSS instead of the CDN script; built artifacts
are committed so Docker/CI need no Node step. node_modules stays ignored.
- Verified: utilities (incl. arbitrary values like aspect-[16/9], grid-cols-
[8rem_1fr]) resolve; public + admin render; no console errors.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
soroush.asadi