91 lines
6.6 KiB
Markdown
91 lines
6.6 KiB
Markdown
---
|
|
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.
|