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:

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

Create assets/home/index.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

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

<!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:

<header class="site-header" id="header"> — navigation
<section class="hero" id="hero"> — hero with SVG illustration and floating chips
<section class="fcols" id="features"> — four feature columns
<section class="band"> — icon row + devices section (both are inside .band)
<section class="specs"> — specialty cards
<section class="appcta" id="download"> — desktop app CTA
<footer class="site-footer" id="contact"> — footer with brand, links, contact, download badges
<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:

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.

4.1 KiB Raw Permalink Blame History

Build the ClinicPro Public Homepage at /