docs: record approved website design direction

.impeccable/design.json

@@ -1,22 +1,26 @@
 {
   "schemaVersion": 2,
-  "generatedAt": "2026-09-24T00:00:00Z",
+  "generatedAt": "2026-09-25T00:00:00Z",
-  "title": "Design System: Guilan Computer Engineering Association, Plan A",
+  "title": "Design System: Guilan Computer Engineering Association, approved logo-led Home/About direction",
   "extensions": {
     "colorMeta": {
-      "paper": { "role": "background", "displayName": "Paper" },
+      "background": { "role": "background", "displayName": "White canvas" },
-      "ink": { "role": "primary", "displayName": "Deep green" },
+      "foreground": { "role": "text", "displayName": "Dark ink" },
-      "wayfinding": { "role": "accent", "displayName": "Wayfinding green" },
+      "primary": { "role": "primary", "displayName": "Logo teal" },
-      "mint": { "role": "highlight", "displayName": "Mint" },
+      "primary-deep": { "role": "primary-hover", "displayName": "Deep teal" },
-      "signal": { "role": "focus", "displayName": "Signal rust" }
+      "gold": { "role": "highlight", "displayName": "Logo gold" },
+      "charcoal": { "role": "footer", "displayName": "Logo charcoal" },
+      "muted": { "role": "surface", "displayName": "Cool pale surface" },
+      "muted-foreground": { "role": "secondary-text", "displayName": "Secondary text" },
+      "border": { "role": "border", "displayName": "Cool border" }
     },
     "typographyMeta": {
-      "display": { "displayName": "Display", "purpose": "First-screen association statement." },
+      "display": { "displayName": "Display", "purpose": "Association landing statement." },
       "body": { "displayName": "Body", "purpose": "Persian reading and interface copy." }
     },
     "shadows": [],
     "motion": [
-      { "name": "state", "value": "150ms ease-out", "purpose": "Optional hover and focus state feedback; disabled under reduced motion." }
+      { "name": "state", "value": "180ms ease-out", "purpose": "Short Shadcn control feedback; disabled under reduced motion." }
     ],
     "breakpoints": [
       { "name": "mobile-stack", "value": "760px" }
@@ -27,32 +31,25 @@
       "name": "Primary action",
       "kind": "button",
       "refersTo": "button-primary",
-      "description": "Main next step from the association introduction.",
+      "description": "Shadcn Button default variant with logo-teal theme tokens.",
-      "html": "<button class=\"ds-button-primary\">آشنایی با انجمن</button>",
+      "html": "<a class=\"ds-button-primary\" href=\"/about\">آشنایی با انجمن</a>",
-      "css": ".ds-button-primary{font:700 16px/1.5 Vazirmatn,Tahoma,sans-serif;min-height:50px;padding:9px 24px;border:2px solid #103D3B;border-radius:4px;background:#103D3B;color:#FFFFFF;cursor:pointer}.ds-button-primary:hover{background:#AD3C20;border-color:#AD3C20}.ds-button-primary:focus-visible{outline:3px solid #AD3C20;outline-offset:4px}.ds-button-primary:disabled{opacity:.55;cursor:not-allowed}"
+      "css": ".ds-button-primary{display:inline-flex;align-items:center;justify-content:center;font:750 14px/1.45 Vazirmatn,Tahoma,sans-serif;min-height:44px;padding:9px 18px;border:1px solid #28626e;border-radius:10px;background:#28626e;color:#fff;text-decoration:none}.ds-button-primary:hover{background:#1c4c57}.ds-button-primary:focus-visible{outline:3px solid #28626e;outline-offset:3px}"
     },
     {
-      "name": "Secondary action",
+      "name": "Outline action",
       "kind": "button",
-      "refersTo": "button-secondary",
+      "refersTo": "button-outline",
-      "description": "Alternative next step with equal legibility.",
+      "description": "Shadcn Button outline variant for a second destination.",
-      "html": "<button class=\"ds-button-secondary\">دیدن رویدادها</button>",
+      "html": "<a class=\"ds-button-outline\" href=\"/events\">دیدن رویدادها</a>",
-      "css": ".ds-button-secondary{font:700 16px/1.5 Vazirmatn,Tahoma,sans-serif;min-height:50px;padding:9px 24px;border:2px solid #103D3B;border-radius:4px;background:#F2F6F2;color:#103D3B;cursor:pointer}.ds-button-secondary:hover{background:#C9E2D9}.ds-button-secondary:focus-visible{outline:3px solid #AD3C20;outline-offset:4px}.ds-button-secondary:disabled{opacity:.55;cursor:not-allowed}"
+      "css": ".ds-button-outline{display:inline-flex;align-items:center;justify-content:center;font:750 14px/1.45 Vazirmatn,Tahoma,sans-serif;min-height:44px;padding:9px 18px;border:1px solid #b8ceca;border-radius:10px;background:#fff;color:#1c4c57;text-decoration:none}.ds-button-outline:hover{background:#f3f8f7}.ds-button-outline:focus-visible{outline:3px solid #28626e;outline-offset:3px}"
-    },
-    {
-      "name": "Destination row",
-      "kind": "nav",
-      "description": "A direct route to a fixed application destination.",
-      "html": "<a class=\"ds-route\" href=\"#\"><strong>رویدادها</strong><span>برنامه‌ها و فرصت‌های یادگیری</span></a>",
-      "css": ".ds-route{display:flex;flex-direction:column;gap:2px;padding:18px 12px;border-top:1px solid #9CB9AF;color:#103D3B;text-decoration:none;font:400 16px/1.6 Vazirmatn,Tahoma,sans-serif}.ds-route strong{font-size:20px}.ds-route span{font-size:14px}.ds-route:hover{background:#C9E2D9}.ds-route:focus-visible{outline:3px solid #AD3C20;outline-offset:4px}"
     }
   ],
   "narrative": {
-    "northStar": "Campus wayfinding.",
+    "northStar": "A logo-led, content-rich Persian student association site.",
-    "overview": "The first screen answers who the association is. A restrained route line and arrival points guide visitors from identity to About, events, and reading.",
+    "overview": "Keep the current landing purpose, then present real event posters and blog previews before a participation CTA and footer.",
-    "keyCharacteristics": ["Persian first", "Recognizable existing mark", "Asymmetric identity hero", "Direct destination rows", "One rust signal line"],
+    "keyCharacteristics": ["Logo teal, pale gold and charcoal", "Vazirmatn", "Featured event posters", "Editorial blog previews", "Shadcn/ui and Lucide production components"],
     "rules": [],
-    "dos": ["Lead with an explanation of the association.", "Keep operational event and payment states truthful."],
+    "dos": ["Follow the owner's exact Home section order.", "Use existing domain data for events and posts."],
-    "donts": ["Do not copy the static comp's hidden mobile navigation into production.", "Do not seed disputed claims merely because they appear in legacy copy."]
+    "donts": ["Do not publish archived comp events as upcoming.", "Do not use illustrative blog titles as production content."]
   }
 }

DESIGN.md

@@ -0,0 +1,90 @@
+---
+name: Guilan Computer Engineering Association
+description: Logo-led, content-rich Home and About direction for review.
+colors:
+  background: "#FFFFFF"
+  foreground: "#22363A"
+  primary: "#28626E"
+  primary-deep: "#1C4C57"
+  gold: "#F9E697"
+  charcoal: "#313332"
+  muted: "#F3F8F7"
+  muted-foreground: "#53686B"
+  border: "#D9E5E4"
+typography:
+  display:
+    fontFamily: "Vazirmatn, Tahoma, sans-serif"
+    fontSize: "clamp(2.4rem, 4.2vw, 3.9rem)"
+    fontWeight: 850
+    lineHeight: 1.3
+  body:
+    fontFamily: "Vazirmatn, Tahoma, sans-serif"
+    fontSize: "1rem"
+    fontWeight: 400
+    lineHeight: 1.8
+rounded:
+  control: "10px"
+  card: "16px"
+spacing:
+  compact: "8px"
+  regular: "16px"
+  section: "77px"
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.background}"
+    rounded: "{rounded.control}"
+    padding: "9px 18px"
+    height: "44px"
+  button-outline:
+    backgroundColor: "{colors.background}"
+    textColor: "{colors.primary-deep}"
+    rounded: "{rounded.control}"
+    padding: "9px 18px"
+    height: "44px"
+---
+
+## Overview
+
+Status: **logo-led Home/About visual direction approved by the owner on 2026-09-25; CMS/API contract approved on 2026-09-26**. The owner rejected the two original concepts and then the first current-derived refinement. The approved [Home comp](../guilan-ace-deployment/tasks/concepts/d-logo-led-home.html), [About comp](../guilan-ace-deployment/tasks/concepts/d-logo-led-about.html), and [component map](../guilan-ace-deployment/tasks/concepts/d-component-map.md) follow the owner's three visual references and explicit Home order. Earlier comps remain historical alternatives. Production content, responsive behavior, and accessibility are checked during implementation.
+
+The site should feel like the current Persian RTL product, with more useful content immediately after the intro. Use the recognizable association logo and its teal, pale gold, and charcoal colors as the visual anchor. The Home page order is **landing/association introduction → featured events → featured blog posts → participation CTA → footer**. About uses the same system with a shorter, clearer reading path.
+
+## Colors
+
+The logo was sampled from the repository asset: teal `#28626E`, pale gold approximately `#F9E697`, and charcoal `#313332`. Use teal for primary actions and links, gold as a restrained highlight on teal or as a light action surface, and charcoal for the footer and dense text. Teal on white and pale gold on teal pass normal-text contrast in the draft palette; recheck all final states after implementing the tokens in `src/index.css`. Keep white and the cool near-white surface for readable content sections. No extra bright accent palette is needed. For the existing dark mode, start from deep teal `#14252A` background, `#1D3439` cards, pale teal `#9FD4D2` primary text/actions, and the same logo gold for sparse highlights; confirm contrast and owner fit in a real browser before approval.
+
+## Typography
+
+Keep the locally hosted Vazirmatn variable font. Home display text names the association; its lead identifies the East Guilan faculty and explains the website. Section headings distinguish events and posts without oversized empty gaps. Event poster typography is part of the source image; metadata and titles beneath it use the site's accessible type scale. Let long Persian names and Latin contacts wrap safely.
+
+## Layout
+
+Use a compact, welcoming intro that allows the events heading to appear soon after the first desktop viewport. The Home comp uses a split hero with an enlarged real logo panel while preserving the current landing message. Three event previews use real poster images and truthful data-backed status in production. The blog section combines a leading post with two shorter previews; final article titles, categories, images, and links come from the blog domain. If post images are absent, keep a legible branded text cover. The CTA and multi-column footer close the page. On mobile, stack content in reading order, keep the familiar bottom navigation, and reserve enough space that it never covers the last content.
+
+About identifies one association first, then explains its activities and contact paths. Avoid an unsupported statistics wall and repetitive nested cards. Verify 320, 390, 768, and 1440px with real Persian copy and both light/dark themes. The static comps use archived poster samples; they do not assert those events are open for registration.
+
+## Elevation & Depth
+
+Use borders and tonal surfaces for cards. A soft shadow is reserved for an overlay such as the mobile navigation. The logo panel uses real logo geometry and a thin gold detail rather than decorative technical imagery.
+
+## Shapes
+
+Controls use about 10px corners; cards and content surfaces use about 16px. Small status/category badges may be pill-shaped. Keep poster corners and image crops consistent without cutting essential poster text.
+
+## Components
+
+- **Shadcn/ui:** implement with the existing local `Button`, `Card` composition, `Badge`, and `Separator` components under `src/components/ui/`. Use semantic theme tokens and built-in variants; `Button asChild` wraps application links. The static comp mirrors their anatomy, while the production frontend will use the actual React components.
+- **Lucide:** use installed `lucide-react` icons for arrows, calendar, reading, activity, and contact labels. Keep one stroke weight and mark decorative icons `aria-hidden`.
+- **Event preview:** image, title, relevant metadata and truthful availability; never infer registration state from the poster. The click goes to the event detail route, with a clear route to all events.
+- **Blog preview:** title, category/excerpt, approved image or text fallback, and article route. The mock blog copy in the comp is review content only.
+- **Header/footer:** retain current functional account and mobile navigation patterns; use the official mark/short name and the owner-selected contact set: `eastguilanceassociation@gmail.com`, `https://t.me/guilancea`, `https://instagram.com/guilance.ir`.
+- **Interaction:** links remain links and actions remain buttons; maintain visible hover/focus/active/disabled states, at least 44px targets, and reduced-motion behavior.
+
+## Do's and Don'ts
+
+- Do use the exact Home section order requested by the owner.
+- Do read featured event/blog content from existing domain APIs; CMS owns surrounding editorial copy and shared identity.
+- Do compare the comps to current Home/About captures and the three supplied references during owner review.
+- Don't copy poster dates, price, availability, or article examples from the comp into production data.
+- Don't treat the earlier Plan A/B or first current-derived comp as approved design guidance.

PRODUCT.md

@@ -0,0 +1,59 @@
+# Product
+
+<!-- impeccable:product-schema 1 -->
+
+## Platform
+
+web
+
+## Users
+
+- Students and other event participants who discover events, register, receive communications, read articles, and manage their account.
+- Association members with different staff roles who organize events, manage registrations and participant communications, and publish articles or announcements.
+- Designated content staff who draft public-page changes, and a smaller publisher group who approves them for release.
+
+## Product Purpose
+
+This is the public website and operating interface for the computer engineering student association at the University of Guilan's East Guilan Faculty of Engineering. It helps people understand the association, discover and attend events, and read its technical/editorial content; it helps members run those activities. The current project is a redesign and public-content management upgrade, not a change to the underlying event business rules.
+
+## Operating Context
+
+The existing system is a Persian RTL web application with Next.js/React frontend and a Django/Ninja backend, PostgreSQL, and Django admin. Student journeys include authentication, event discovery, registration, payment where applicable, notifications, and blog reading. Staff journeys include event, registration, user, and blog administration. The association also sends email/SMS messages to participants through the existing backend workflows.
+
+## Capabilities and Constraints
+
+- Public editorial content and shared branding—including Home/About copy, title/logo, approved images, navigation, footer, and SEO—must be editable through Django admin.
+- Editors may change, reorder, or hide predefined Home/About section types; creating new layouts remains development work.
+- Staff draft; a narrower publisher role approves and publishes. Superusers retain full access.
+- Functional interface labels, form/validation messages, and admin-screen text remain in versioned application code.
+- Existing event registration, capacity, payment, cancellation, and eligibility rules must be preserved in the first release.
+- Transactional email, SMS, and in-app message templates are outside the first release and need a later reviewed phase.
+- Redesign priority is Home/About, authentication, events and registration, blog, then the responsive staff-admin interface.
+- Current static public content needs an auditable, reviewed production seed rather than manual re-entry or guessed corrections.
+- The owner selected the About-page association contacts on 2026-09-24; scope and dates for legacy statistics and affiliate entries still need mapping before seeding.
+
+## Brand Commitments
+
+- Official full name: `انجمن علمی مهندسی کامپیوتر دانشگاه گیلان (دانشکده‌ی فنی و مهندسی شرق گیلان)`.
+- Preserve the recognizable current association logo and use existing approved assets first.
+- The owner rejected the two initial concepts and the first current-derived refinement on 2026-09-25. The owner approved the logo-led Home/About direction, based on the association's teal, pale gold, and charcoal and the three supplied references, on 2026-09-25; the CMS/API contract was approved on 2026-09-26. See `DESIGN.md` and the approved component mapping.
+
+## Bundle 0 Owner Decisions (2026-09-24)
+
+- Home/About should explain the association in the first screen before directing visitors to events or articles.
+- The current repository logo is an approved source for the concepts.
+- Use the About page's association contact set for the new design: `eastguilanceassociation@gmail.com`, `https://t.me/guilancea`, and `https://instagram.com/guilance.ir`. The Footer contains different legacy values; keep those differences visible in the content inventory until cutover.
+- The earlier Plan A selection was withdrawn. The owner approved this Home order: current landing and website introduction, featured events, featured blog posts, CTA, footer. Use existing Shadcn/ui components and Lucide icons in implementation, with colors drawn from the association logo. The approved Home/About comps provide the visual direction; production content and responsive/accessibility details are verified during implementation.
+
+## Evidence on Hand
+
+- Real event and blog content exists in the backend; the current Home/About pages and shared navigation/footer contain legacy public copy and imagery.
+- Current Home/About metadata, contacts, association names, and numeric claims differ. The owner says repository facts are verified and selected the About contact set; the migration inventory preserves variants and maps each claim to its entity before publication.
+- No new approved association/team photography has been supplied for this project; do not fabricate documentary images.
+
+## Product Principles
+
+1. Keep event and registration information truthful to the backend state.
+2. Give editors control over public content without making structural layout or sensitive workflow changes accidental.
+3. Make student and staff tasks understandable and usable at phone and desktop widths.
+4. Preserve existing data and behavior through a reversible, reviewed rollout.