# FRONTEND DESIGN GUIDELINES (Aloads)

> Purpose of this document: when adding a new design, the output must match the project’s existing visual family (appearance, spacing, typography, responsive behavior, and motion).

---

## 1) Design DNA (Core Principles)

- This project’s UI is a combination of **Bootstrap RTL + custom Utility Classes**.
- Visual language: minimal, light, soft contrast, and color emphasis on the brand green.
- Forms, cards, tables, and CTAs should be rounded and lightweight.
- Interaction pattern: subtle motion (hover/transform/opacity), not heavy animations.

---

## 2) Color System & Tokens (Required)

Primary source: `root.css`

### Main colors

- `--mint-green: #22b573` -> primary CTA/Accent color
- `--dark-gray: #333333` -> headings and dark buttons
- `--Charcoal-gray: #555555` -> main body text
- `--medium-gray: #666666`, `--soft-gray: #888888`, `--light-gray: #999999` -> secondary text
- `--body: #f4f4f4` -> default page background
- `--white: #ffffff`

### Color usage rule

- **Primary action** = `btn-mint-green`
- **Secondary action** = `btn-dark-gray` or `btn-mint-green-empty`
- Body text = `Charcoal-gray` or `medium-gray`
- Disabled/low-importance text = `light-gray`

---

## 3) Typography

Source: `font.css`

- Project font: `YekanBakh`
- Use weights only via existing classes:
  - `light`, `semi`, `bold`, `extra-bold`, `black`
- Sizes are class-driven:
  - `font-10`, `font-12`, `font-13`, `font-14`, `font-18`, `font-20`, `font-23`, `font-30`

### Practical rules

- Paragraph text: `font-13` or `font-14` + `light/Regular`
- Section title: `font-20` or `font-23` + `bold/extra-bold`
- Hero title: `font-30` + `extra-bold`

---

## 4) Spacing, Radius, Borders

### Radius

- Standard project radius: `main-radius` (12px)
- Use this for most cards/inputs/buttons.

### Padding/Margin

- Most spacing comes from Bootstrap utilities (`p-2`, `p-3`, `mt-3`, `mb-2`, ...)
- Standard project button:
  - `first-page-btn-component` + button color (`btn-*`)
- Section vertical rhythm usually uses `mt-5`, `pt-5`, or responsive variants (`mt-lg-5 mt-0`)

### Border

- Neutral borders: very light gray (`#e4e4e4` or `#dee2e6`)
- Inputs: `login-input` + simple border + green focus state

---

## 5) Reusable Visual Patterns

## Buttons

- Standard button classes:
  - `btn-mint-green`
  - `btn-mint-green-empty`
  - `btn-dark-gray`
- Hover must have a logical invert (background/text color swap).
- Standard transition is roughly `0.3s ~ 0.5s`.

## Inputs & Forms

- Always use `login-input`.
- Placeholder should be light and subtle (consistent with existing styling).
- Focus state uses `mint-green`.
- For multi-field forms: put the label above the input using `font-14`.

## Cards/Boxes

- The dominant pattern:
  - `bg-white` + `shadow-sm` + `main-radius` + `p-2/p-3`
- Card internal title:
  - `side-title position-relative max-w`
  - The green underline is provided by a pseudo-element.

## Tables

- For panel/order tables:
  - wrapper: `order-table`
  - vertical row separation via `border-spacing`
  - rounded corners on the first/last `td`
- Status colors:
  - success: `pay-sucsess`
  - pending: `pay-cancel` (orange)
  - error/canceled: `pay-no` (red)

## Chat/Ticket UI

- Current user message: `my-message`
- Other party message: `your-message`
- The bubble “tail” is built with a pseudo-element; keep this pattern for new chat UI.

---

## 6) Responsive Pattern (Very Important)

Source: `response.css`

### Reference breakpoints

- `1200`
- `992`
- `768`
- `576`

### Project rules

- Container:
  - Desktop: narrow (~`76%`)
  - <=1200: `90%`
  - <=768: `95%`
- Mobile/Desktop visibility:
  - `d-lg-none` / `d-lg-block`
- Headers and large titles shrink on small mobile (`font-30` -> near `font-20`).
- Images inside article/description rich text (`.discription img`) have specific rules per breakpoint.
  - If you add new rich text, preserve the same pattern so it responds correctly.

---

## 7) Motion & Animation Rules

## Animation style

- Animations should be soft, short, and non-intrusive:
  - `transform`, `opacity`, `translate`
- Use existing keyframes or create equivalents:
  - `smoothFloat`, `slideInLeft`, `slideInRight`

## Existing patterns to follow

- Hover card/image:
  - small scale/translate (e.g. `translateY(-5px)` or `scale(1.1~1.2)`)
- Lightweight parallax:
  - `section-animation` driven by `mousemove`
- Footer collapse:
  - open/close with `max-height` + class toggle (`is-expanded`)
- Counter/Odometer:
  - start animation via `IntersectionObserver` only when it enters the viewport

---

## 8) Swiper Guidelines (Only the necessary JS part)

## Implementation principles

- Create each slider with its own `new Swiper(...)`.
- For most sliders:
  - `centeredSlides: false`
  - `autoplay.delay: 2500~3500`
  - `disableOnInteraction: false`
- Make breakpoints the main driver:
  - mobile starts with small `slidesPerView` (`1.2`, `1.5`, `2.2`)
  - desktop increases gradually (`3.5`, `4.5`, `5.5`, ...)

## Visual polish inside Swiper

- For the brand slider, faded edges are done with pseudo-elements (`::before/::after`).
- If navigation/pagination is enabled, it must use scoped classes for that specific slider.

## Golden Rule

- Keep Swiper class naming feature-based:
  - examples: `mySwiper-brands`, `mySwiper-articles`, `mySwiper-resolve`

---

## 9) Rules for New Section Design

For every new section, follow this checklist:

1. Match the section background with the page palette (`bg-body` or `bg-white`).
2. Build typography only with existing classes.
3. Keep spacing using current utilities and patterns (`mt-5/pt-5`).
4. The primary CTA must be one of the existing button styles.
5. On hover: only subtle motion (avoid big jumps).
6. Test mobile and desktop separately (especially `992` and `768`).
7. If the section is dynamic, add only the required JS (animation/swiper/toggle).

---

## 10) Do’s & Don’ts

## Do’s

- Reuse existing tokens and classes.
- Before writing new CSS, search for a similar existing class first.
- Use `main-radius`, `login-input`, `first-page-btn-component` as standards.
- Consider RTL alignment and icon spacing when designing.

## Don’ts

- Add new palettes without a real need.
- Create new button/input/table styles when an equivalent standard style already exists.
- Long or “bouncy” animations.
- Break current breakpoints with random sizes.

---

## 11) Quick Start Template for a New Design

- Step 1: Section skeleton using Bootstrap grid (`container`, `row`, `col-*`)
- Step 2: Typography using `font-*` + existing `bakh-*` weights
- Step 3: Card/box with `bg-white shadow-sm main-radius`
- Step 4: CTA with `first-page-btn-component` + `btn-*`
- Step 5: Responsive tuning across the four reference breakpoints
- Step 6: Add only small motion if needed (hover/scroll/swiper)

---

## 12) JS Scope in This Document

This guide intentionally does not cover state management.
JS is allowed only for:

- Swiper
- animation/transition triggers
- modal lifecycle
- collapse/toggle interaction
- number formatting and visual effects