Refactor code structure for improved readability and maintainability

2026-06-12 11:00:24 +03:30
parent c05ac7ca51
commit 484d3024c1
7 changed files with 930 additions and 1 deletions
@@ -0,0 +1,122 @@
+# 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.