# About Page Module

This directory powers the Remark About Us page. It provides the ACF configuration, shortcode logic, and styles that mirror the Home BD hero experience while keeping the content editable from the `Remark + About` options screen.

## Files at a Glance
- `acf.php` - Registers the About sections field group and defines the hero tab (badge, desktop/mobile titles, subtitle, CTA, image), the company intro tab with enable toggle/copy/side images, the highlight tab with badge/gradient/feature image controls, and the milestones tab with heading/intro repeater fields.
- `shortcodes.php` - Exposes the `[remark_about]` hero shortcode, `[remark_about_intro]` company intro block, `[remark_about_highlight]` badge + gradient highlight section, and `[remark_about_milestones]` timeline section, loading the About asset bundle automatically while applying highlight handling (`{{text}}`) where supported.
- `page.css` - Contains the hero layout, button styling, intro section with decorative imagery, the highlight section gradient treatment, and the milestones timeline styling.
- `page.js` - Placeholder for future page-level behaviour.
- `page.anim.js` - Optional GSAP + ScrollTrigger hook that animates `.remark-section--about` blocks when the libraries are available.

## Available Shortcodes
| Shortcode | Description |
| --- | --- |
| `[remark_about]` | Hero section with badge, highlightable headline, subtitle, CTA, and supporting image. |
| `[remark_about_intro]` | Company overview copy with optional headline highlights and decorative side images. |
| `[remark_about_highlight]` | Gradient feature block featuring a badge, headline, and image card. |
| `[remark_about_milestones]` | Timeline of company milestones with year, title, and description entries. |

Sections source their data from the `Remark + About` options page. Empty fields automatically skip output so the hero hides itself if no content is provided.

## Editing Notes
- Use newline breaks in the desktop/mobile title fields to split lines; wrap copy in `{{double braces}}` to apply the gradient highlight.
- The CTA button reuses the shared flair animation styles; adjust the `button__flair:before` colour in `page.css` if the palette shifts.
- Intro copy is powered by a WYSIWYG field; the left/right decorative images accept PNG/SVG assets and render as positioned shapes around the text.
- Highlight gradients are managed via two color pickers; defaults match the current design but can be refined per locale.
- Milestones are maintained through a repeater; keep years/titles concise for better readability in the vertical timeline.
- Keep new markup wrapped in `.remark-section--about` to benefit from the existing animation hook.