123 lines
4.1 KiB
Markdown
123 lines
4.1 KiB
Markdown
# 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.
|