# Build the ClinicPro Public Homepage at `/`

## Goal

Implement the public landing page designed in `clinicpromain/کلینیک پرو.html` as a Symfony/Twig page served at the `/` route. No React — pure Twig + vanilla JS.

---

## Step 1 — Webpack entry for homepage CSS/JS

Add a new entry to `webpack.config.js`:

```js
.addEntry('home', './assets/home/index.js')
```

Create `assets/home/index.js`:

```js
import './styles.css';
```

Create `assets/home/styles.css` — copy the **entire contents** of `clinicpromain/styles.css` verbatim into this file. Do not modify any CSS rule.

---

## Step 2 — Symfony controller

Create `src/Shared/Controller/HomeController.php`:

```php
<?php

namespace App\Shared\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

class HomeController extends AbstractController
{
    #[Route('/', name: 'home', methods: ['GET'])]
    public function index(): Response
    {
        return $this->render('public/home.html.twig');
    }
}
```

---

## Step 3 — Twig template

Create `templates/public/home.html.twig`.

The template is a **standalone HTML file** (does not extend base.html.twig). Copy the structure from `clinicpromain/کلینیک پرو.html` and adapt it as follows:

### Head

```twig
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>کلینیک پرو — نرم‌افزار مدیریت مطب</title>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap" />
{{ encore_entry_link_tags('home') }}
<script>document.documentElement.classList.add('js');</script>
</head>
```

### Body (all sections)

Copy the `<body>` content from `clinicpromain/کلینیک پرو.html` verbatim — all sections in order:

1. `<header class="site-header" id="header">` — navigation
2. `<section class="hero" id="hero">` — hero with SVG illustration and floating chips
3. `<section class="fcols" id="features">` — four feature columns
4. `<section class="band">` — icon row + devices section (both are inside `.band`)
5. `<section class="specs">` — specialty cards
6. `<section class="appcta" id="download">` — desktop app CTA
7. `<footer class="site-footer" id="contact">` — footer with brand, links, contact, download badges
8. `<script>` — the full inline JS block at bottom of body (scroll handler, mobile menu toggle, active nav sync, reveal animation)

### Twig-specific adaptations

- The `href="#download"` link on the nav download burger can stay as-is (anchor link).
- No Twig variables or dynamic data needed — this is a fully static page for now.
- Close with `{{ encore_entry_script_tags('home') }}` before `</body>`.

---

## Step 4 — Build and verify

Run:

```bash
ddev exec yarn dev
```

Check the output for errors. Then open `https://clinic-pro.ddev.site/` in a browser and verify:

- [ ] Page loads with correct RTL layout
- [ ] Vazirmatn font and IBM Plex Mono load correctly
- [ ] Hero section shows the SVG illustration and floating chips with animation
- [ ] Scroll causes header shadow to appear (`.scrolled` class)
- [ ] Mobile menu toggle works on narrow viewport
- [ ] Reveal animations fire as sections enter the viewport
- [ ] Footer shows correct contact info and social links
- [ ] `/admin` route still works (no regression)

---

## Notes

- The `clinicpromain/` directory is a design reference only. Do not move or delete it.
- All SVG illustrations in the HTML are inline — keep them exactly as-is.
- The `@keyframes floaty` and `@keyframes revealIn` animations are defined in the CSS — do not remove them.
- The inline `<script>` block at the bottom of the HTML uses vanilla JS only (`var`, no modules) — keep it as a `<script>` tag inside the Twig template, not a separate JS file.
- `assets/home/styles.css` should be an **exact copy** of `clinicpromain/styles.css` — font faces reference CDN URLs so no local font files are needed.
