# ALIFY — Digital Services Agency Website

A premium, conversion-focused agency website in **strictly dark "electronic editorial"** design language.
Static HTML + CSS + vanilla JS + **GSAP 3.13** (all plugins incl. ScrollSmoother / SplitText / Flip — self-hosted).
**33 pages**, zero external runtime dependencies (fonts, icons, libraries all vendored locally).

## Quick start

```bash
cd alify
python3 -m http.server 8000
# open http://localhost:8000
```

Any static host (Netlify, Vercel, cPanel, S3…) works — upload the folder as-is. No build step needed to *serve*.

## Pages (33)

- **Core (10):** home, about, services hub, portfolio, pricing, blog, testimonials, faq, get-a-quote, contact
- **Service singles (9):** `/services/*.html` — one shared template, per-service content
- **Case studies (3):** `/portfolio/northpine-outdoor|lumina-skincare|metricflow.html`
- **Blog articles (6):** `/blog/*.html`
- **Legal (5):** privacy, terms, cookies, refunds, disclaimer — one shared template
- Plus `sitemap.xml` + `robots.txt`

## Architecture (per master plan §4)

```
assets/css/    base, typography, buttons, header, push-menu, footer, forms, popups,
               + one file per page (home, about, services-hub, service-single, …)
assets/js/     main, header, push-menu, footer, forms, popups, home, services-hub,
               portfolio, blog
assets/gsap/   gsap-config (plugins, ScrollSmoother, splitWords, reduced-motion),
               animations-global (data-reveal / data-split / data-count / data-para),
               animations-header, animations-push-menu, animations-popups,
               animations-home, animations-services, animations-portfolio, animations-blog
assets/vendor/ gsap 3.13 (+ScrollTrigger, SplitText, ScrollSmoother, Flip),
               swiper 11, phosphor icons (light+duotone), fonts
               (Clash Display, General Sans, Space Grotesk, Playfair Display)
assets/img/    generated brand imagery (1:1 squares) + favicon.svg
gen/           static-site generator (Python) — see "Editing" below
```

Each HTML page links **only** the CSS/JS it uses, per the plan's binding rule.

## Editing (the easy way — generator)

Content lives in `gen/` as structured Python data; HTML is generated:

```bash
python3 gen/build.py      # regenerates all 33 pages + sitemap + robots
```

| File | What to edit |
|---|---|
| `gen/data_services.py` | services text, pricing, FAQs; portfolio projects & case studies |
| `gen/data_content.py`  | blog posts (full article bodies), testimonials, FAQs, legal |
| `gen/pages.py`         | page layouts / section order |
| `gen/partials.py`      | head meta, header, push menu, footer, popups, script bindings |
| `gen/build.py`         | page registry (URL, page CSS/JS, JSON-LD) |

Or just edit any HTML file directly — the generator is optional tooling.

## Systems cheat-sheet

- **Animations:** add attributes — `data-reveal`, `data-reveal-group`, `data-split`,
  `data-count`, `data-para="12"`. All auto-skip under `prefers-reduced-motion`.
- **Sliders:** Swiper, responsive 3 / 2 / 1 slides (desktop / tablet / mobile), gapped + peek.
- **Portfolio filter:** GSAP Flip (instant fallback without GSAP).
- **Accordions:** `.acc` + optional `data-acc="single"` — wired in `main.js`.
- **Forms:** `data-form="contact|quote|brief|newsletter"` — validation, error states,
  success swaps are built in; **currently simulated async** (no backend). Point
  `forms.js`'s `setTimeout` block at your endpoint (Formspree / custom API) to go live.
- **Popups:** cookie bar (load), exit-intent (desktop, session-once, after 20s),
  newsletter (18s or 50% scroll, weekly cap), live chat (canned assistant). All in
  `assets/js/popups.js` — triggers/timings are constants at the top of each block.
- **SEO:** unique title/description/canonical per page, OG/Twitter tags, JSON-LD
  (Organization, WebSite, BreadcrumbList, Service, Article, FAQPage), sitemap.xml.

## Before going live

1. Replace `SITE = "https://alify.agency"` in `gen/partials.py` (canonical/OG/schema), rebuild.
2. Swap placeholder contact details (email, WhatsApp number in `partials.py` / `pages.py`).
3. Wire forms + chat to real endpoints.
4. Replace client names/metrics with your own real proof.
