Refactor code structure for improved readability and maintainability
This commit is contained in:
hamed
@@ -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.
|
||||
+2
-1
@@ -53,4 +53,5 @@
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
###< symfony/webpack-encore-bundle ###
|
||||
clinicpro/*
|
||||
clinicpro/*
|
||||
clinicpromain/*
|
||||
@@ -0,0 +1 @@
|
||||
import './styles.css';
|
||||
@@ -0,0 +1,279 @@
|
||||
/* ===========================================================
|
||||
Clinic Pro — Foton-style redesign
|
||||
Light & airy · indigo headings · coral + blue pills · flat illustrations
|
||||
=========================================================== */
|
||||
|
||||
@font-face { font-family:'Vazirmatn'; src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
|
||||
@font-face { font-family:'Vazirmatn'; src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
|
||||
@font-face { font-family:'Vazirmatn'; src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
|
||||
@font-face { font-family:'Vazirmatn'; src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
|
||||
|
||||
:root {
|
||||
--ink: oklch(0.37 0.095 285); /* deep indigo headings */
|
||||
--ink-strong: oklch(0.31 0.10 286);
|
||||
--body: oklch(0.57 0.035 282); /* muted body text */
|
||||
--muted: oklch(0.66 0.03 282);
|
||||
--faint: oklch(0.74 0.02 282);
|
||||
|
||||
--coral: oklch(0.71 0.15 33);
|
||||
--coral-deep: oklch(0.66 0.16 33);
|
||||
--blue: oklch(0.58 0.185 277);
|
||||
--blue-deep: oklch(0.52 0.20 278);
|
||||
|
||||
--bg: #ffffff;
|
||||
--bg-soft: oklch(0.972 0.014 282);
|
||||
--bg-soft2: oklch(0.955 0.024 280);
|
||||
--tint-blue: oklch(0.93 0.035 278);
|
||||
--line: oklch(0.92 0.018 282);
|
||||
--line-soft: oklch(0.95 0.012 282);
|
||||
--navy: oklch(0.265 0.05 285);
|
||||
--navy-2: oklch(0.235 0.05 285);
|
||||
|
||||
--shadow-sm: 0 2px 8px oklch(0.4 0.06 285 / 0.05);
|
||||
--shadow: 0 14px 38px oklch(0.4 0.08 285 / 0.09);
|
||||
--shadow-lg: 0 26px 70px oklch(0.38 0.10 285 / 0.14);
|
||||
--maxw: 1200px;
|
||||
--mono: 'IBM Plex Mono', ui-monospace, monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
|
||||
body {
|
||||
font-family: 'Vazirmatn', system-ui, sans-serif;
|
||||
color: var(--body); background: var(--bg); direction: rtl; line-height: 1.85;
|
||||
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
|
||||
}
|
||||
img, svg { display: block; max-width: 100%; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
h1,h2,h3,h4 { color: var(--ink); font-weight: 700; line-height: 1.3; }
|
||||
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
|
||||
|
||||
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 32px; }
|
||||
|
||||
/* ===================== Buttons (pills) ===================== */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 9px; font-family: inherit;
|
||||
font-weight: 700; font-size: 13px; letter-spacing: .02em;
|
||||
padding: 14px 30px; border-radius: 100px; border: 2px solid transparent; cursor: pointer;
|
||||
transition: transform .2s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn svg { width: 17px; height: 17px; }
|
||||
.btn-coral { background: var(--coral); color: #fff; box-shadow: 0 10px 24px oklch(0.71 0.15 33 / 0.32); }
|
||||
.btn-coral:hover { background: var(--coral-deep); transform: translateY(-3px); box-shadow: 0 16px 30px oklch(0.71 0.15 33 / 0.40); }
|
||||
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 10px 24px oklch(0.58 0.185 277 / 0.32); }
|
||||
.btn-blue:hover { background: var(--blue-deep); transform: translateY(-3px); box-shadow: 0 16px 30px oklch(0.58 0.185 277 / 0.40); }
|
||||
.btn-ghost { background: transparent; color: var(--blue); border-color: oklch(0.58 0.185 277 / 0.30); }
|
||||
.btn-ghost:hover { background: var(--blue); color: #fff; transform: translateY(-3px); }
|
||||
.btn-light { background:#fff; color: var(--blue-deep); }
|
||||
.btn-light:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
|
||||
|
||||
.readmore {
|
||||
display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
|
||||
font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--blue);
|
||||
transition: gap .2s ease, color .2s ease;
|
||||
}
|
||||
.readmore svg { width: 15px; height: 15px; transition: transform .2s ease; }
|
||||
.readmore:hover { color: var(--coral); gap: 12px; }
|
||||
.readmore:hover svg { transform: translateX(-4px); } /* RTL: arrow points left */
|
||||
|
||||
/* ===================== Header ===================== */
|
||||
.site-header {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
background: oklch(1 0 0 / 0.82); backdrop-filter: blur(16px) saturate(1.3);
|
||||
transition: box-shadow .3s ease, background .3s ease;
|
||||
}
|
||||
.site-header.scrolled { box-shadow: 0 6px 26px oklch(0.4 0.08 285 / 0.07); background: oklch(1 0 0 / 0.92); }
|
||||
.nav { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 24px; }
|
||||
.brand { display: flex; align-items: baseline; gap: 3px; font-weight: 700; }
|
||||
.brand b { font-size: 26px; color: var(--ink); letter-spacing: -0.01em; }
|
||||
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); display: inline-block; transform: translateY(-1px); }
|
||||
.brand small { font-size: 12px; color: var(--muted); font-weight: 500; margin-inline-start: 8px; }
|
||||
|
||||
.nav-links { display: flex; align-items: center; gap: 30px; }
|
||||
.nav-links a { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink); position: relative; padding: 6px 0; transition: color .2s ease; }
|
||||
.nav-links a::after { content:''; position: absolute; bottom: -2px; inset-inline: 0; height: 2px; background: var(--coral); transform: scaleX(0); transition: transform .25s ease; }
|
||||
.nav-links a:hover { color: var(--coral); }
|
||||
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
|
||||
.nav-links a.active { color: var(--coral); }
|
||||
.nav-right { display: flex; align-items: center; gap: 18px; }
|
||||
.nav-ico { color: var(--ink); display: grid; place-items: center; cursor: pointer; background: none; border: none; }
|
||||
.nav-ico svg { width: 20px; height: 20px; }
|
||||
.nav-burger { width: 40px; height: 40px; border-radius: 10px; background: var(--blue); color: #fff; display: grid; place-items: center; border: none; cursor: pointer; }
|
||||
.nav-burger svg { width: 20px; height: 20px; }
|
||||
.nav-toggle { display: none; }
|
||||
|
||||
/* ===================== Hero ===================== */
|
||||
.hero { position: relative; padding: 70px 0 120px; overflow: hidden; }
|
||||
.hero::before {
|
||||
content:''; position: absolute; top: -28%; inset-inline-start: -10%;
|
||||
width: 1100px; height: 1100px; border-radius: 50%;
|
||||
background: radial-gradient(circle at 60% 60%, oklch(0.94 0.035 278) 0%, oklch(0.975 0.015 282) 55%, transparent 72%);
|
||||
z-index: -1;
|
||||
}
|
||||
.hero::after {
|
||||
content:''; position: absolute; top: 8%; inset-inline-start: 6%; width: 120px; height: 60px;
|
||||
background: radial-gradient(closest-side, oklch(0.90 0.05 278) 60%, transparent), radial-gradient(closest-side, oklch(0.90 0.05 278) 60%, transparent);
|
||||
background-size: 70px 40px, 60px 34px; background-position: 0 10px, 46px 0; background-repeat: no-repeat;
|
||||
border-radius: 50%; opacity: .8; z-index: -1;
|
||||
}
|
||||
.hero-grid { display: grid; grid-template-columns: 1fr 1.18fr; align-items: center; gap: 40px; }
|
||||
.hero-copy { max-width: 480px; }
|
||||
.hero h1 { font-size: clamp(36px, 5.2vw, 60px); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; }
|
||||
.hero p { font-size: 16px; color: var(--body); margin-top: 22px; line-height: 1.9; max-width: 420px; }
|
||||
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
|
||||
.hero-art { position: relative; width: 100%; }
|
||||
.hero-art > svg { width: 100%; height: auto; display: block; overflow: visible; }
|
||||
|
||||
/* float chips on hero art */
|
||||
.art-chip {
|
||||
position: absolute; z-index: 4; background:#fff; border-radius: 14px; box-shadow: var(--shadow);
|
||||
padding: 10px 14px; display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.art-chip .ci { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
|
||||
.art-chip .ci svg { width: 18px; height: 18px; }
|
||||
.art-chip b { font-size: 16px; color: var(--ink); line-height: 1; }
|
||||
.art-chip span { font-size: 11px; color: var(--muted); }
|
||||
.chip-1 { top: 12%; inset-inline-end: 2%; animation: floaty 5s ease-in-out infinite; }
|
||||
.chip-1 .ci { background: oklch(0.95 0.04 33); color: var(--coral); }
|
||||
.chip-2 { bottom: 16%; inset-inline-start: -2%; animation: floaty 6s ease-in-out infinite .9s; }
|
||||
.chip-2 .ci { background: var(--tint-blue); color: var(--blue); }
|
||||
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
|
||||
|
||||
/* ===================== Feature columns ===================== */
|
||||
.fcols { position: relative; padding: 30px 0 40px; }
|
||||
.fcols-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
|
||||
.fcol h3 { font-size: 19px; margin-bottom: 12px; }
|
||||
.fcol p { font-size: 14px; color: var(--muted); line-height: 1.85; }
|
||||
|
||||
/* ===================== Big soft circle band wrapper ===================== */
|
||||
.band { position: relative; overflow: hidden; }
|
||||
.band::before {
|
||||
content:''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
|
||||
width: 160vw; height: 160vw; max-width: 1700px; max-height: 1700px; border-radius: 50%;
|
||||
background: radial-gradient(circle, oklch(0.965 0.02 280) 0%, oklch(0.945 0.03 278) 45%, oklch(0.975 0.012 282) 70%, transparent 72%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* ===================== Icon row ===================== */
|
||||
.icons { padding: 80px 0 90px; }
|
||||
.icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
|
||||
.icon-cell { text-align: center; padding: 14px; }
|
||||
.icon-cell .ic-circ {
|
||||
width: 78px; height: 78px; margin: 0 auto 22px; display: grid; place-items: center;
|
||||
color: var(--blue); transition: transform .25s ease;
|
||||
}
|
||||
.icon-cell:hover .ic-circ { transform: translateY(-6px); }
|
||||
.icon-cell .ic-circ svg { width: 46px; height: 46px; stroke-width: 1.4; }
|
||||
.icon-cell h3 { font-size: 18px; margin-bottom: 10px; }
|
||||
.icon-cell p { font-size: 13.5px; color: var(--muted); line-height: 1.8; max-width: 220px; margin-inline: auto; }
|
||||
|
||||
/* ===================== Devices section ===================== */
|
||||
.devices { padding: 40px 0 90px; }
|
||||
.devices-grid { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 40px; }
|
||||
.devices-copy { max-width: 440px; }
|
||||
.devices-copy h2 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; line-height: 1.22; }
|
||||
.devices-copy p { font-size: 15.5px; color: var(--body); margin-top: 20px; line-height: 1.9; }
|
||||
.devices-art { width: 100%; }
|
||||
.devices-art > svg { width: 100%; height: auto; display: block; overflow: visible; }
|
||||
|
||||
/* ===================== Specialties (avatars) ===================== */
|
||||
.specs { padding: 70px 0 100px; position: relative; }
|
||||
.specs-head { text-align: center; max-width: 600px; margin: 0 auto 56px; }
|
||||
.specs-head .eyebrow { color: var(--coral); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
|
||||
.specs-head h2 { font-size: clamp(28px, 4vw, 42px); margin-top: 10px; }
|
||||
.specs-head p { font-size: 15px; color: var(--muted); margin-top: 14px; }
|
||||
.specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
|
||||
.spec-card { background:#fff; border-radius: 18px; padding: 36px 24px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft); transition: transform .25s ease, box-shadow .25s ease; }
|
||||
.spec-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
|
||||
.spec-card .av { width: 116px; height: 116px; margin: 0 auto 22px; border-radius: 50%; overflow: hidden; }
|
||||
.spec-card .av svg { width: 100%; height: 100%; }
|
||||
.spec-card h3 { font-size: 19px; margin-bottom: 6px; }
|
||||
.spec-card .role { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
|
||||
.spec-card .feats { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
|
||||
.spec-card .feats li { font-size: 13px; color: var(--body); display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
.spec-card .feats svg { width: 15px; height: 15px; color: var(--coral); flex-shrink: 0; }
|
||||
|
||||
/* ===================== App / phone CTA ===================== */
|
||||
.appcta { padding: 30px 0 110px; position: relative; }
|
||||
.appcta-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; }
|
||||
.appcta-art { display: flex; justify-content: center; width: 100%; }
|
||||
.appcta-art > svg { width: 100%; max-width: 420px; height: auto; display: block; overflow: visible; }
|
||||
.appcta-copy { max-width: 460px; }
|
||||
.appcta-copy .eyebrow { color: var(--coral); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
|
||||
.appcta-copy h2 { font-size: clamp(28px, 4vw, 44px); margin-top: 10px; line-height: 1.22; }
|
||||
.appcta-copy p { font-size: 15.5px; color: var(--body); margin-top: 18px; line-height: 1.9; }
|
||||
.dl-trust { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; }
|
||||
.dl-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
|
||||
.dl-trust svg { width: 17px; height: 17px; color: var(--blue); }
|
||||
.store-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
|
||||
.store-badge { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color:#fff; border-radius: 14px; padding: 11px 20px; transition: transform .2s ease, background .2s ease; cursor: pointer; }
|
||||
.store-badge:hover { transform: translateY(-3px); background: var(--ink-strong); }
|
||||
.store-badge svg { width: 26px; height: 26px; }
|
||||
.store-badge .sb-t { line-height: 1.2; }
|
||||
.store-badge .sb-t small { display: block; font-size: 10px; opacity: .8; }
|
||||
.store-badge .sb-t b { display: block; font-size: 15px; font-weight: 700; }
|
||||
|
||||
/* ===================== Footer ===================== */
|
||||
.site-footer { background: var(--navy); color: oklch(0.82 0.02 282); padding-top: 80px; position: relative; }
|
||||
.footer-grid { display: grid; grid-template-columns: 1.5fr 1.1fr 1.1fr 1.2fr; gap: 40px; padding-bottom: 56px; }
|
||||
.footer-col h4 { color:#fff; font-size: 15px; font-weight: 700; margin-bottom: 22px; letter-spacing: .02em; }
|
||||
.footer-brand .brand b { color:#fff; font-size: 28px; }
|
||||
.footer-brand p { font-size: 14px; line-height: 1.9; margin-top: 18px; color: oklch(0.78 0.02 282); max-width: 290px; }
|
||||
.foot-socials { display: flex; gap: 12px; margin-top: 22px; }
|
||||
.foot-socials a { width: 42px; height: 42px; border-radius: 50%; background: oklch(1 0 0 / 0.08); display: grid; place-items: center; transition: background .2s ease, transform .2s ease; }
|
||||
.foot-socials a:hover { background: var(--coral); transform: translateY(-3px); }
|
||||
.foot-socials a svg { width: 17px; height: 17px; color:#fff; }
|
||||
.foot-links { display: flex; flex-direction: column; gap: 13px; }
|
||||
.foot-links a { font-size: 14px; color: oklch(0.80 0.02 282); transition: color .2s ease, padding .2s ease; }
|
||||
.foot-links a:hover { color:#fff; padding-inline-end: 5px; }
|
||||
.foot-contact { display: flex; flex-direction: column; gap: 16px; }
|
||||
.foot-contact .fl { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.8; color: oklch(0.80 0.02 282); }
|
||||
.foot-contact .fl svg { width: 17px; height: 17px; color: var(--coral); flex-shrink: 0; margin-top: 4px; }
|
||||
.foot-contact .fl a:hover { color:#fff; }
|
||||
.foot-badges { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
|
||||
.footer-bottom { border-top: 1px solid oklch(1 0 0 / 0.08); padding: 26px 0; text-align: center; font-size: 13px; color: oklch(0.70 0.02 282); }
|
||||
.footer-bottom .heart { color: var(--coral); }
|
||||
|
||||
/* ===================== Reveal (always-visible, frozen-clock safe) ===================== */
|
||||
/* Resting state is fully visible. A gentle entrance plays via transform only —
|
||||
even if the animation clock is throttled, opacity never drops, so content
|
||||
is guaranteed to show. */
|
||||
.reveal { opacity: 1; }
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.js .reveal { animation: revealIn .65s cubic-bezier(.2,.7,.2,1) both; }
|
||||
.js .reveal.d1 { animation-delay: .08s; }
|
||||
.js .reveal.d2 { animation-delay: .16s; }
|
||||
.js .reveal.d3 { animation-delay: .24s; }
|
||||
}
|
||||
@keyframes revealIn { from { transform: translateY(22px); } to { transform: none; } }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.js .reveal { animation: none; }
|
||||
.chip-1, .chip-2 { animation: none; }
|
||||
html { scroll-behavior: auto; }
|
||||
}
|
||||
|
||||
/* ===================== Responsive ===================== */
|
||||
@media (max-width: 1000px) {
|
||||
.hero-grid, .devices-grid, .appcta-grid { grid-template-columns: 1fr; }
|
||||
.hero { padding-bottom: 80px; }
|
||||
.hero-copy, .devices-copy, .appcta-copy { max-width: 560px; margin-inline: auto; text-align: center; }
|
||||
.hero-actions, .dl-trust, .store-badges { justify-content: center; }
|
||||
.hero-art { max-width: 560px; margin: 20px auto 0; }
|
||||
.devices-art { order: -1; max-width: 520px; margin-inline: auto; }
|
||||
.fcols-grid { grid-template-columns: 1fr 1fr; gap: 30px 40px; }
|
||||
.icon-grid, .specs-grid { grid-template-columns: 1fr 1fr; gap: 40px 26px; }
|
||||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.wrap { padding-inline: 20px; }
|
||||
.nav-links { display: none; }
|
||||
.nav-toggle { display: grid; }
|
||||
.nav-ico.search { display: none; }
|
||||
.fcols-grid { grid-template-columns: 1fr; text-align: center; }
|
||||
.fcol p { max-width: 320px; margin-inline: auto; }
|
||||
.icon-grid, .specs-grid, .footer-grid { grid-template-columns: 1fr; }
|
||||
.hero-actions .btn { flex: 1; justify-content: center; }
|
||||
.art-chip { display: none; }
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<?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');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,509 @@
|
||||
<!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>
|
||||
|
||||
<!-- ===================== Header ===================== -->
|
||||
<header class="site-header" id="header">
|
||||
<div class="wrap nav">
|
||||
<a class="brand" href="#hero" aria-label="کلینیک پرو">
|
||||
<b>کلینیک پرو</b><span class="dot"></span>
|
||||
<small>مدیریت مطب</small>
|
||||
</a>
|
||||
|
||||
<nav class="nav-links" id="navLinks">
|
||||
<a href="#hero" class="active">خانه</a>
|
||||
<a href="#features">امکانات</a>
|
||||
<a href="#why">چرا کلینیک پرو</a>
|
||||
<a href="#download">دانلود</a>
|
||||
<a href="#contact">تماس با ما</a>
|
||||
</nav>
|
||||
|
||||
<div class="nav-right">
|
||||
<button class="nav-ico search" aria-label="جستجو">
|
||||
<svg viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/><path d="m20 20-3.2-3.2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
<button class="nav-burger nav-toggle" id="navToggle" aria-label="منو">
|
||||
<svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
<a href="#download" class="nav-burger" aria-label="دانلود" style="text-decoration:none">
|
||||
<svg viewBox="0 0 24 24" fill="none"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 19h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- ===================== Hero ===================== -->
|
||||
<section class="hero" id="hero">
|
||||
<div class="wrap hero-grid">
|
||||
<div class="hero-copy">
|
||||
<h1 class="reveal">نوبت، پرونده و حساب مطب،<br />همه یکجا</h1>
|
||||
<p class="reveal d1">کلینیک پرو کارهای روزمرهی مطب را سر و سامان میدهد؛ از نوبتدهی و پروندهی بیمار تا فاکتور و گزارش مالی. دیگر خبری از دفتر نوبت و کاغذبازی نیست.</p>
|
||||
<div class="hero-actions reveal d2">
|
||||
<a href="#download" class="btn btn-coral">دانلود رایگان</a>
|
||||
<a href="#contact" class="btn btn-blue">تماس با ما</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-art reveal d1">
|
||||
<div class="art-chip chip-1">
|
||||
<span class="ci"><svg viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-4.3-7-9.5A4 4 0 0 1 12 8a4 4 0 0 1 7 3.5C19 16.7 12 21 12 21Z" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></svg></span>
|
||||
<div><b class="mono">۹۵٪</b><span>رضایت بیماران</span></div>
|
||||
</div>
|
||||
<div class="art-chip chip-2">
|
||||
<span class="ci"><svg viewBox="0 0 24 24" fill="none"><path d="M8 7V5m8 2V5M4 9h16M5 7h14v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7Z" stroke="currentColor" stroke-width="1.9"/></svg></span>
|
||||
<div><b class="mono">۳۸</b><span>نوبت امروز</span></div>
|
||||
</div>
|
||||
|
||||
<svg viewBox="0 0 600 480" role="img" aria-label="تصویر مدیریت مطب">
|
||||
<ellipse cx="300" cy="438" rx="250" ry="30" fill="#e2e9fb"/>
|
||||
<circle cx="300" cy="244" r="184" fill="#eaeffb"/>
|
||||
<g fill="#dbe4fb"><ellipse cx="138" cy="150" rx="42" ry="20"/><ellipse cx="476" cy="120" rx="48" ry="22"/><ellipse cx="508" cy="250" rx="30" ry="15"/></g>
|
||||
|
||||
<rect x="196" y="184" width="208" height="152" rx="13" fill="#fff" stroke="#dde3f7" stroke-width="3"/>
|
||||
<rect x="210" y="198" width="180" height="124" rx="7" fill="#eef2fd"/>
|
||||
<rect x="223" y="211" width="68" height="9" rx="4.5" fill="#c4cef2"/>
|
||||
<circle cx="378" cy="216" r="6" fill="#f8b3a6"/>
|
||||
<path d="M223 272 h24 l9 -22 12 40 10 -28 8 14 h62" fill="none" stroke="#5666e0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<g fill="#cdd6f4"><rect x="226" y="292" width="14" height="22" rx="3"/><rect x="246" y="284" width="14" height="30" rx="3"/><rect x="266" y="298" width="14" height="16" rx="3"/></g>
|
||||
<rect x="330" y="288" width="50" height="26" rx="6" fill="#fde3df"/>
|
||||
<path d="M166 336 h268 l26 28 H140 z" fill="#cfd9f9"/>
|
||||
<path d="M166 336 h268 l6 6 H160 z" fill="#aab6ee"/>
|
||||
<rect x="268" y="350" width="64" height="6" rx="3" fill="#9aa8ea"/>
|
||||
|
||||
<g fill="#fff"><ellipse cx="300" cy="190" rx="58" ry="22"/><ellipse cx="258" cy="196" rx="26" ry="15"/><ellipse cx="342" cy="196" rx="26" ry="15"/></g>
|
||||
|
||||
<path d="M276 150 q-20 16 -15 42 l19 -11 z" fill="#3a3a7d"/>
|
||||
<path d="M324 150 q20 16 15 42 l-19 -11 z" fill="#3a3a7d"/>
|
||||
<rect x="278" y="70" width="44" height="118" rx="22" fill="#fff" stroke="#dfe4f7" stroke-width="2"/>
|
||||
<path d="M300 50 a22 22 0 0 1 22 26 h-44 a22 22 0 0 1 22 -26z" fill="#f17a6b"/>
|
||||
<circle cx="300" cy="106" r="13" fill="#cfe0fb" stroke="#5666e0" stroke-width="3"/>
|
||||
<g fill="#5666e0"><rect x="295" y="130" width="10" height="30" rx="3"/><rect x="285" y="140" width="30" height="10" rx="3"/></g>
|
||||
<path d="M289 188 q11 24 11 30 q0 -6 11 -30 z" fill="#f8b3a6"/>
|
||||
<g stroke="#bcc7f2" stroke-width="4" stroke-linecap="round"><path d="M250 92 h-20"/><path d="M258 112 h-13"/><path d="M350 92 h20"/><path d="M342 112 h13"/></g>
|
||||
|
||||
<g>
|
||||
<path d="M86 332 h36 l-2 86 a6 6 0 0 1 -12 0 l-4 -52 -4 52 a6 6 0 0 1 -12 0 z" fill="#3a3a7d"/>
|
||||
<ellipse cx="90" cy="420" rx="12" ry="6" fill="#2b2b5e"/>
|
||||
<ellipse cx="118" cy="420" rx="12" ry="6" fill="#2b2b5e"/>
|
||||
<path d="M80 262 q-14 30 -6 58" fill="none" stroke="#fff" stroke-width="15" stroke-linecap="round"/>
|
||||
<circle cx="76" cy="318" r="7" fill="#f3c6a5"/>
|
||||
<path d="M78 256 q26 -18 54 0 l8 80 h-70 z" fill="#fff" stroke="#dde3f7" stroke-width="2"/>
|
||||
<path d="M105 250 l-9 56 9 7 9 -7 -9 -56z" fill="#eef2fd"/>
|
||||
<path d="M99 254 q-12 28 9 42" fill="none" stroke="#5666e0" stroke-width="2.6"/>
|
||||
<circle cx="110" cy="298" r="5" fill="#5666e0"/>
|
||||
<path d="M128 260 q42 -6 66 -54" fill="none" stroke="#fff" stroke-width="15" stroke-linecap="round"/>
|
||||
<circle cx="196" cy="206" r="7.5" fill="#f3c6a5"/>
|
||||
<rect x="99" y="232" width="12" height="16" rx="4" fill="#e8b594"/>
|
||||
<circle cx="105" cy="218" r="22" fill="#f3c6a5"/>
|
||||
<path d="M83 216 q0 -30 31 -28 q19 1 21 22 q-13 -12 -30 -7 q-15 4 -22 13z" fill="#3a3a7d"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<path d="M478 332 h36 l-2 86 a6 6 0 0 1 -12 0 l-4 -52 -4 52 a6 6 0 0 1 -12 0 z" fill="#4f51a8"/>
|
||||
<ellipse cx="482" cy="420" rx="12" ry="6" fill="#34356f"/>
|
||||
<ellipse cx="510" cy="420" rx="12" ry="6" fill="#34356f"/>
|
||||
<path d="M512 258 q26 -16 30 -54" fill="none" stroke="#fff" stroke-width="15" stroke-linecap="round"/>
|
||||
<circle cx="543" cy="200" r="8" fill="#f3c6a5"/>
|
||||
<path d="M462 256 q26 -18 54 0 l6 80 h-66 z" fill="#fff" stroke="#dde3f7" stroke-width="2"/>
|
||||
<path d="M489 250 l-8 56 8 7 8 -7 -8 -56z" fill="#fde3df"/>
|
||||
<path d="M464 260 q-12 28 -6 54" fill="none" stroke="#fff" stroke-width="14" stroke-linecap="round"/>
|
||||
<circle cx="460" cy="316" r="7" fill="#f3c6a5"/>
|
||||
<rect x="483" y="232" width="12" height="16" rx="4" fill="#e8b594"/>
|
||||
<circle cx="489" cy="218" r="22" fill="#f3c6a5"/>
|
||||
<path d="M467 220 q-4 -32 28 -32 q24 0 22 30 q-2 14 -6 20 q4 -22 -8 -30 q4 12 -2 18 q-10 -20 -34 -6z" fill="#3a3a7d"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===================== Feature columns ===================== -->
|
||||
<section class="fcols" id="features">
|
||||
<div class="wrap fcols-grid">
|
||||
<div class="fcol reveal">
|
||||
<h3>پروندهی بیمار</h3>
|
||||
<p>سابقه، نسخه و آزمایش هر بیمار جای خودش است و هر وقت لازم شد، چند ثانیهای پیدایش میکنید.</p>
|
||||
<a href="#why" class="readmore">بیشتر بدانید <svg viewBox="0 0 24 24" fill="none"><path d="M14 6l-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
</div>
|
||||
<div class="fcol reveal d1">
|
||||
<h3>نوبتدهی آنلاین</h3>
|
||||
<p>بیمار خودش آنلاین نوبت میگیرد و پیامک یادآوری برایش میرود؛ نوبتهای فراموششده کمتر میشود.</p>
|
||||
<a href="#why" class="readmore">بیشتر بدانید <svg viewBox="0 0 24 24" fill="none"><path d="M14 6l-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
</div>
|
||||
<div class="fcol reveal d2">
|
||||
<h3>حساب و کتاب</h3>
|
||||
<p>فاکتور صادر کنید، درآمد و خرج را ثبت کنید و آخر ماه دقیق بدانید مطب چهقدر کار کرده است.</p>
|
||||
<a href="#why" class="readmore">بیشتر بدانید <svg viewBox="0 0 24 24" fill="none"><path d="M14 6l-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
</div>
|
||||
<div class="fcol reveal d3">
|
||||
<h3>+۵۰۰ مطب</h3>
|
||||
<p>همین حالا بیش از ۵۰۰ پزشک و کلینیک در شهرهای مختلف هر روز کارشان را با کلینیک پرو پیش میبرند.</p>
|
||||
<a href="#why" class="readmore">بیشتر بدانید <svg viewBox="0 0 24 24" fill="none"><path d="M14 6l-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===================== Icon row (band) ===================== -->
|
||||
<section class="band">
|
||||
<div class="icons" id="why">
|
||||
<div class="wrap icon-grid">
|
||||
<div class="icon-cell reveal">
|
||||
<div class="ic-circ"><svg viewBox="0 0 24 24" fill="none"><path d="M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9l-4 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" stroke="currentColor" stroke-linejoin="round"/><path d="M8.5 10.5h7M8.5 13h4" stroke="currentColor" stroke-linecap="round"/></svg></div>
|
||||
<h3>راهاندازی با شما</h3>
|
||||
<p>اول کار تنهایتان نمیگذاریم؛ تنظیمات اولیه و انتقال اطلاعات را با هم انجام میدهیم.</p>
|
||||
</div>
|
||||
<div class="icon-cell reveal d1">
|
||||
<div class="ic-circ"><svg viewBox="0 0 24 24" fill="none"><path d="M4 13v-1a8 8 0 0 1 16 0v1" stroke="currentColor" stroke-linecap="round"/><rect x="3" y="13" width="4" height="7" rx="2" stroke="currentColor"/><rect x="17" y="13" width="4" height="7" rx="2" stroke="currentColor"/><path d="M20 19v1a3 3 0 0 1-3 3h-3" stroke="currentColor" stroke-linecap="round"/></svg></div>
|
||||
<h3>پشتیبانی همیشگی</h3>
|
||||
<p>هر ساعت از شبانهروز که جایی گیر کردید، یک تماس یا پیام کافی است تا کنارتان باشیم.</p>
|
||||
</div>
|
||||
<div class="icon-cell reveal d2">
|
||||
<div class="ic-circ"><svg viewBox="0 0 24 24" fill="none"><path d="M7 11v9H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3Z" stroke="currentColor" stroke-linejoin="round"/><path d="M7 11l4.5-7a2 2 0 0 1 3.5 1.3V9h4.2a2 2 0 0 1 2 2.4l-1.3 7A2 2 0 0 1 17.9 20H7" stroke="currentColor" stroke-linejoin="round"/></svg></div>
|
||||
<h3>متناسب با مطب ایرانی</h3>
|
||||
<p>امکانات را طوری چیدهایم که با روال واقعی کار مطبها در ایران جور دربیاید.</p>
|
||||
</div>
|
||||
<div class="icon-cell reveal d3">
|
||||
<div class="ic-circ"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3a9 9 0 1 0 9 9h-9V3Z" stroke="currentColor" stroke-linejoin="round"/><path d="M14 3.5a8 8 0 0 1 6.5 6.5H14V3.5Z" stroke="currentColor" stroke-linejoin="round"/></svg></div>
|
||||
<h3>گزارشگیری دقیق</h3>
|
||||
<p>تحلیل عملکرد مطب با نمودارهای روشن، کاربردی و قابلفهم.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===================== Devices section ===================== -->
|
||||
<section class="devices">
|
||||
<div class="wrap devices-grid">
|
||||
<div class="devices-copy reveal">
|
||||
<h2>هرجا باشید،<br />مطب دستتان است</h2>
|
||||
<p>روی گوشی، تبلت یا کامپیوتر بازش کنید؛ اطلاعات خودش هماهنگ میماند و لازم نیست نگران جابهجایی بین دستگاهها باشید.</p>
|
||||
<a href="#download" class="btn btn-coral" style="margin-top:30px">بیشتر بدانید</a>
|
||||
</div>
|
||||
<div class="devices-art reveal d1">
|
||||
<svg viewBox="0 0 520 420" role="img" aria-label="کار روی همه دستگاهها">
|
||||
<ellipse cx="260" cy="384" rx="220" ry="26" fill="#e2e9fb"/>
|
||||
<circle cx="300" cy="120" r="22" fill="#fff" stroke="#cdd6f4" stroke-width="3"/>
|
||||
<path d="M294 120l4 4 8-9" stroke="#5666e0" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
<rect x="150" y="300" width="220" height="12" rx="6" fill="#cfd9f9"/>
|
||||
<rect x="168" y="312" width="10" height="58" rx="4" fill="#aab6ee"/>
|
||||
<rect x="342" y="312" width="10" height="58" rx="4" fill="#aab6ee"/>
|
||||
|
||||
<rect x="206" y="196" width="120" height="86" rx="9" fill="#fff" stroke="#dde3f7" stroke-width="3"/>
|
||||
<rect x="216" y="206" width="100" height="66" rx="5" fill="#eef2fd"/>
|
||||
<path d="M226 252 l16 -16 12 12 18 -22 16 18" fill="none" stroke="#5666e0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="226" cy="250" r="3.5" fill="#f17a6b"/>
|
||||
<rect x="252" y="300" width="28" height="8" rx="4" fill="#bcc7f2"/>
|
||||
|
||||
<g>
|
||||
<rect x="338" y="150" width="92" height="60" rx="10" fill="#fff" stroke="#e3e8fa" stroke-width="2"/>
|
||||
<rect x="350" y="162" width="22" height="22" rx="6" fill="#fde3df"/>
|
||||
<g fill="#f17a6b"><rect x="358" y="167" width="6" height="12" rx="2"/><rect x="355" y="170" width="12" height="6" rx="2"/></g>
|
||||
<rect x="380" y="164" width="40" height="7" rx="3.5" fill="#cdd6f4"/>
|
||||
<rect x="380" y="176" width="28" height="7" rx="3.5" fill="#e1e7f7"/>
|
||||
<rect x="350" y="192" width="70" height="7" rx="3.5" fill="#e1e7f7"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<path d="M120 300 q-2 -40 22 -40 q24 0 22 40 z" fill="#fff" stroke="#dde3f7" stroke-width="2"/>
|
||||
<path d="M118 268 q-22 -8 -26 -34" fill="none" stroke="#fff" stroke-width="13" stroke-linecap="round"/>
|
||||
<circle cx="91" cy="232" r="7" fill="#f3c6a5"/>
|
||||
<path d="M120 300 h44 l-2 64 a5 5 0 0 1 -10 0 l-10 -40 -10 40 a5 5 0 0 1 -10 0z" fill="#4f51a8"/>
|
||||
<rect x="135" y="244" width="12" height="16" rx="4" fill="#e8b594"/>
|
||||
<circle cx="141" cy="232" r="19" fill="#f3c6a5"/>
|
||||
<path d="M122 232 q-2 -26 24 -25 q18 1 17 22 q-12 -12 -26 -6 q-12 4 -15 9z" fill="#3a3a7d"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M356 300 q-2 -40 22 -40 q24 0 22 40 z" fill="#fff" stroke="#dde3f7" stroke-width="2"/>
|
||||
<path d="M398 268 q22 -6 24 -36" fill="none" stroke="#fff" stroke-width="13" stroke-linecap="round"/>
|
||||
<circle cx="423" cy="228" r="7" fill="#f3c6a5"/>
|
||||
<path d="M356 300 h44 l-2 64 a5 5 0 0 1 -10 0 l-10 -40 -10 40 a5 5 0 0 1 -10 0z" fill="#3a3a7d"/>
|
||||
<rect x="371" y="244" width="12" height="16" rx="4" fill="#e8b594"/>
|
||||
<circle cx="377" cy="232" r="19" fill="#f3c6a5"/>
|
||||
<path d="M358 234 q-4 -28 26 -27 q20 1 17 26 q-10 -16 -22 -12 q-12 4 -21 13z" fill="#2b2b5e"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<path d="M444 370 h26 l-4 -26 h-18 z" fill="#aab6ee"/>
|
||||
<path d="M457 344 q-14 -10 -10 -34 q12 6 12 22" fill="#bcc7f2"/>
|
||||
<path d="M457 344 q14 -12 10 -38 q-12 8 -12 24" fill="#cdd6f4"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- ===================== Specialties ===================== -->
|
||||
<section class="specs">
|
||||
<div class="wrap">
|
||||
<div class="specs-head reveal">
|
||||
<span class="eyebrow">هر تخصص، روال خودش</span>
|
||||
<h2>برای کار شما تنظیم میشود</h2>
|
||||
<p>فرقی نمیکند پزشک عمومی باشید یا دندانپزشک؛ کلینیک پرو خودش را با روال کارتان جور میکند.</p>
|
||||
</div>
|
||||
<div class="specs-grid">
|
||||
<div class="spec-card reveal">
|
||||
<div class="av">
|
||||
<svg viewBox="0 0 116 116"><circle cx="58" cy="58" r="58" fill="#e7ecfb"/><g><path d="M30 116 q0 -34 28 -34 q28 0 28 34z" fill="#fff"/><path d="M44 86 l14 18 14 -18 -6 -8 -8 6 -8 -6z" fill="#eef2fd"/><circle cx="58" cy="58" r="20" fill="#f3c6a5"/><path d="M37 58 q-2 -30 21 -29 q22 0 20 28 q-10 -14 -22 -9 q-13 4 -19 10z" fill="#3a3a7d"/><path d="M50 86 q-10 26 8 36" fill="none" stroke="#5666e0" stroke-width="2.4"/><circle cx="59" cy="120" r="4" fill="#5666e0"/></g></svg>
|
||||
</div>
|
||||
<h3>پزشک عمومی</h3>
|
||||
<div class="role">GENERAL</div>
|
||||
<ul class="feats">
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>پروندهی بیمار</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>نسخهنویسی سریع</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spec-card reveal d1">
|
||||
<div class="av">
|
||||
<svg viewBox="0 0 116 116"><circle cx="58" cy="58" r="58" fill="#fdeae6"/><g><path d="M30 116 q0 -34 28 -34 q28 0 28 34z" fill="#fff"/><circle cx="58" cy="58" r="20" fill="#f3c6a5"/><path d="M37 56 q-2 -28 21 -28 q23 0 20 30 q-6 -10 -10 -10 l-2 8 -6 -10 q-12 2 -23 10z" fill="#5a3b2e"/><path d="M40 116 q2 -18 18 -18 q16 0 18 18z" fill="#fde3df"/></g></svg>
|
||||
</div>
|
||||
<h3>دندانپزشک</h3>
|
||||
<div class="role">DENTAL</div>
|
||||
<ul class="feats">
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>نقشهی دندان</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>طرح درمان</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spec-card reveal d2">
|
||||
<div class="av">
|
||||
<svg viewBox="0 0 116 116"><circle cx="58" cy="58" r="58" fill="#e7ecfb"/><g><path d="M30 116 q0 -34 28 -34 q28 0 28 34z" fill="#fff"/><circle cx="58" cy="58" r="20" fill="#f3c6a5"/><path d="M36 60 q-2 -32 22 -31 q24 1 22 31 q-6 -8 -10 -8 q-2 -10 -12 -8 q-14 2 -22 16z" fill="#1f2452"/><path d="M40 116 q2 -18 18 -18 q16 0 18 18z" fill="#e7ecfb"/></g></svg>
|
||||
</div>
|
||||
<h3>متخصص پوست</h3>
|
||||
<div class="role">DERMATOLOGY</div>
|
||||
<ul class="feats">
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>گالری تصاویر</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>پیگیری درمان</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spec-card reveal d3">
|
||||
<div class="av">
|
||||
<svg viewBox="0 0 116 116"><circle cx="58" cy="58" r="58" fill="#fdeae6"/><g><path d="M30 116 q0 -34 28 -34 q28 0 28 34z" fill="#fff"/><circle cx="58" cy="58" r="20" fill="#f3c6a5"/><path d="M36 58 q-2 -30 22 -29 q24 1 21 29 q-10 -12 -21 -8 q-13 4 -22 8z" fill="#7a4a2e"/><path d="M48 84 q-8 24 10 34" fill="none" stroke="#f17a6b" stroke-width="2.4"/><circle cx="59" cy="119" r="4" fill="#f17a6b"/></g></svg>
|
||||
</div>
|
||||
<h3>متخصص اطفال</h3>
|
||||
<div class="role">PEDIATRICS</div>
|
||||
<ul class="feats">
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>نمودار رشد</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>یادآور واکسن</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===================== App / phone CTA ===================== -->
|
||||
<section class="appcta" id="download">
|
||||
<div class="wrap appcta-grid">
|
||||
<div class="appcta-art reveal">
|
||||
<svg viewBox="0 0 440 360" role="img" aria-label="نرمافزار دسکتاپ کلینیک پرو برای مک و ویندوز">
|
||||
<ellipse cx="220" cy="322" rx="180" ry="24" fill="#e2e9fb"/>
|
||||
<circle cx="220" cy="158" r="150" fill="#eef2fd"/>
|
||||
|
||||
<rect x="96" y="48" width="248" height="170" rx="14" fill="#fff" stroke="#dde3f7" stroke-width="3"/>
|
||||
<rect x="108" y="60" width="224" height="146" rx="8" fill="#f5f7fe"/>
|
||||
<path d="M108 68a8 8 0 0 1 8-8h208a8 8 0 0 1 8 8v14H108z" fill="#5666e0"/>
|
||||
<circle cx="122" cy="71" r="4" fill="#aebcff"/>
|
||||
<rect x="132" y="67" width="40" height="7" rx="3.5" fill="#aebcff"/>
|
||||
<circle cx="320" cy="71" r="5" fill="#aebcff"/>
|
||||
<rect x="108" y="82" width="32" height="124" fill="#eef2fd"/>
|
||||
<rect x="116" y="92" width="16" height="6" rx="3" fill="#c4cef2"/>
|
||||
<rect x="116" y="104" width="16" height="6" rx="3" fill="#5666e0"/>
|
||||
<rect x="116" y="116" width="16" height="6" rx="3" fill="#c4cef2"/>
|
||||
<rect x="116" y="128" width="16" height="6" rx="3" fill="#c4cef2"/>
|
||||
<g>
|
||||
<rect x="150" y="92" width="54" height="40" rx="7" fill="#fff" stroke="#e6eafa" stroke-width="1.6"/>
|
||||
<rect x="158" y="100" width="20" height="6" rx="3" fill="#cdd6f4"/>
|
||||
<rect x="158" y="112" width="30" height="10" rx="3" fill="#5666e0"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="212" y="92" width="54" height="40" rx="7" fill="#fff" stroke="#e6eafa" stroke-width="1.6"/>
|
||||
<rect x="220" y="100" width="20" height="6" rx="3" fill="#cdd6f4"/>
|
||||
<rect x="220" y="112" width="30" height="10" rx="3" fill="#f17a6b"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="274" y="92" width="50" height="40" rx="7" fill="#fff" stroke="#e6eafa" stroke-width="1.6"/>
|
||||
<rect x="282" y="100" width="20" height="6" rx="3" fill="#cdd6f4"/>
|
||||
<rect x="282" y="112" width="28" height="10" rx="3" fill="#4ca77a"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="150" y="140" width="108" height="58" rx="7" fill="#fff" stroke="#e6eafa" stroke-width="1.6"/>
|
||||
<rect x="160" y="180" width="10" height="10" rx="2" fill="#c4cef2"/>
|
||||
<rect x="176" y="172" width="10" height="18" rx="2" fill="#5666e0"/>
|
||||
<rect x="192" y="164" width="10" height="26" rx="2" fill="#c4cef2"/>
|
||||
<rect x="208" y="156" width="10" height="34" rx="2" fill="#5666e0"/>
|
||||
<rect x="224" y="168" width="10" height="22" rx="2" fill="#c4cef2"/>
|
||||
<rect x="240" y="150" width="10" height="40" rx="2" fill="#f17a6b"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="266" y="140" width="58" height="58" rx="7" fill="#fff" stroke="#e6eafa" stroke-width="1.6"/>
|
||||
<circle cx="278" cy="152" r="6" fill="#fde3df"/><rect x="288" y="149" width="28" height="6" rx="3" fill="#cdd6f4"/>
|
||||
<circle cx="278" cy="168" r="6" fill="#e0e6fb"/><rect x="288" y="165" width="28" height="6" rx="3" fill="#e1e7f7"/>
|
||||
<circle cx="278" cy="184" r="6" fill="#e6f0e6"/><rect x="288" y="181" width="22" height="6" rx="3" fill="#e1e7f7"/>
|
||||
</g>
|
||||
<path d="M70 218h300l22 26H48z" fill="#cfd9f9"/>
|
||||
<path d="M70 218h300l5 6H65z" fill="#aab6ee"/>
|
||||
<rect x="196" y="232" width="48" height="6" rx="3" fill="#9aa8ea"/>
|
||||
|
||||
<g>
|
||||
<rect x="34" y="92" width="92" height="46" rx="13" fill="#fff" stroke="#e3e8fa" stroke-width="2"/>
|
||||
<g transform="translate(46,104)" fill="#3a3a7d"><path d="M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.8-.8-3-.8-1.5 0-3 .9-3.7 2.3-1.6 2.8-.4 6.9 1.1 9.2.8 1.1 1.6 2.3 2.8 2.3 1.1 0 1.6-.7 2.9-.7 1.4 0 1.7.7 2.9.7 1.2 0 2-1.1 2.7-2.2.9-1.2 1.2-2.5 1.2-2.5s-2.3-.9-2.3-3.6ZM14.2 5.7c.6-.8 1-1.8.9-2.9-.9 0-2 .6-2.6 1.4-.6.7-1.1 1.7-.9 2.7 1 .1 2-.5 2.6-1.2Z"/></g>
|
||||
<rect x="74" y="105" width="40" height="7" rx="3.5" fill="#cdd6f4"/>
|
||||
<rect x="74" y="117" width="28" height="6" rx="3" fill="#e6eafa"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<rect x="300" y="250" width="100" height="46" rx="13" fill="#fff" stroke="#e3e8fa" stroke-width="2"/>
|
||||
<g transform="translate(312,262)" fill="#5666e0"><path d="M3 5.5 10.5 4.4v7.1H3V5.5Zm0 13L10.5 19.6v-7H3v6Zm8.5 1.3L21 21V12.5h-9.5v7.3Zm0-15.6V11.5H21V3l-9.5 1.2Z"/></g>
|
||||
<rect x="342" y="263" width="46" height="7" rx="3.5" fill="#cdd6f4"/>
|
||||
<rect x="342" y="275" width="30" height="6" rx="3" fill="#e6eafa"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<circle cx="360" cy="96" r="20" fill="#f17a6b"/>
|
||||
<path d="M360 86v16m0 0 6-6m-6 6-6-6M351 108h18" stroke="#fff" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="appcta-copy">
|
||||
<span class="eyebrow reveal">نرمافزار دسکتاپ</span>
|
||||
<h2 class="reveal d1">روی کامپیوتر مطب،<br />سریع و بیدردسر</h2>
|
||||
<p class="reveal d2">نسخهی دسکتاپ کلینیک پرو را برای مک یا ویندوز نصب کنید؛ نوبتها، پروندهها و حساب مطب همه روی سیستم خودتان و در دسترساند.</p>
|
||||
<div class="dl-trust reveal d2">
|
||||
<span><svg viewBox="0 0 24 24" fill="none"><path d="M12 3 4 6v5c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6l-8-3Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>کاملاً ایمن</span>
|
||||
<span><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>نصب آسان</span>
|
||||
<span><svg viewBox="0 0 24 24" fill="none"><path d="M4 17V9m5 8V5m5 12v-6m5 6V8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>آپدیت رایگان</span>
|
||||
</div>
|
||||
<div class="store-badges reveal d3">
|
||||
<a class="store-badge" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.8-.8-3-.8-1.5 0-3 .9-3.7 2.3-1.6 2.8-.4 6.9 1.1 9.2.8 1.1 1.6 2.3 2.8 2.3 1.1 0 1.6-.7 2.9-.7 1.4 0 1.7.7 2.9.7 1.2 0 2-1.1 2.7-2.2.9-1.2 1.2-2.5 1.2-2.5s-2.3-.9-2.3-3.6ZM14.2 5.7c.6-.8 1-1.8.9-2.9-.9 0-2 .6-2.6 1.4-.6.7-1.1 1.7-.9 2.7 1 .1 2-.5 2.6-1.2Z"/></svg>
|
||||
<span class="sb-t"><small>دانلود برای</small><b>مک · macOS</b></span>
|
||||
</a>
|
||||
<a class="store-badge" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 5.5 10.5 4.4v7.1H3V5.5Zm0 13L10.5 19.6v-7H3v6Zm8.5 1.3L21 21V12.5h-9.5v7.3Zm0-15.6V11.5H21V3l-9.5 1.2Z"/></svg>
|
||||
<span class="sb-t"><small>دانلود برای</small><b>ویندوز</b></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- ===================== Footer ===================== -->
|
||||
<footer class="site-footer" id="contact">
|
||||
<div class="wrap">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-col footer-brand">
|
||||
<a class="brand" href="#hero"><b>کلینیک پرو</b><span class="dot"></span></a>
|
||||
<p>کلینیک پرو را ساختیم تا پزشکها بهجای درگیری با دفتر و کاغذ، حواسشان به کار اصلیشان باشد: بیمار.</p>
|
||||
<div class="foot-socials">
|
||||
<a href="#" aria-label="اینستاگرام"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="1.8"/><circle cx="17.4" cy="6.6" r="1.2" fill="currentColor"/></svg></a>
|
||||
<a href="#" aria-label="تلگرام"><svg viewBox="0 0 24 24" fill="none"><path d="M21 4 3 11l5 2 2 6 3-4 5 4 3-15Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg></a>
|
||||
<a href="#" aria-label="واتساپ"><svg viewBox="0 0 24 24" fill="none"><path d="M4 20l1.4-4A8 8 0 1 1 9 18.6L4 20Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-col">
|
||||
<h4>دسترسی سریع</h4>
|
||||
<div class="foot-links">
|
||||
<a href="#features">امکانات</a>
|
||||
<a href="#why">چرا کلینیک پرو</a>
|
||||
<a href="#download">دانلود نرمافزار</a>
|
||||
<a href="#contact">تماس با ما</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-col">
|
||||
<h4>اطلاعات تماس</h4>
|
||||
<div class="foot-contact">
|
||||
<div class="fl"><svg viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-5.2-7-11a7 7 0 0 1 14 0c0 5.8-7 11-7 11Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><circle cx="12" cy="10" r="2.6" stroke="currentColor" stroke-width="1.7"/></svg><span>یاسوج، مهریان، خیابان شهید ستاره شیرازی، خیابان امامزاده احمد، پلاک ۸</span></div>
|
||||
<div class="fl"><svg viewBox="0 0 24 24" fill="none"><path d="M4 6.5C4 5 5 4 6.5 4h2c.6 0 1.1.4 1.3 1l1 3c.2.6 0 1.2-.5 1.6L9 11c1 2 2.5 3.5 4.5 4.5l1.4-1.3c.4-.4 1-.6 1.6-.4l3 1c.6.2 1 .7 1 1.3v2c0 1.5-1 2.5-2.5 2.4C10.5 20 4 13.5 4 6.5Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg><a href="tel:07491012178" class="mono" dir="ltr">۰۷۴۹۱۰۱۲۱۷۸</a></div>
|
||||
<div class="fl"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="m4 7 8 5 8-5" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg><a href="mailto:info@clinic-pro.ir" class="mono" dir="ltr">info@clinic-pro.ir</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-col">
|
||||
<h4>دانلود نرمافزار</h4>
|
||||
<div class="foot-badges">
|
||||
<a class="store-badge" href="#" style="background:oklch(1 0 0 / 0.08)">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.8-.8-3-.8-1.5 0-3 .9-3.7 2.3-1.6 2.8-.4 6.9 1.1 9.2.8 1.1 1.6 2.3 2.8 2.3 1.1 0 1.6-.7 2.9-.7 1.4 0 1.7.7 2.9.7 1.2 0 2-1.1 2.7-2.2.9-1.2 1.2-2.5 1.2-2.5s-2.3-.9-2.3-3.6ZM14.2 5.7c.6-.8 1-1.8.9-2.9-.9 0-2 .6-2.6 1.4-.6.7-1.1 1.7-.9 2.7 1 .1 2-.5 2.6-1.2Z"/></svg>
|
||||
<span class="sb-t"><small>دانلود برای</small><b>مک · macOS</b></span>
|
||||
</a>
|
||||
<a class="store-badge" href="#" style="background:oklch(1 0 0 / 0.08)">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 5.5 10.5 4.4v7.1H3V5.5Zm0 13L10.5 19.6v-7H3v6Zm8.5 1.3L21 21V12.5h-9.5v7.3Zm0-15.6V11.5H21V3l-9.5 1.2Z"/></svg>
|
||||
<span class="sb-t"><small>دانلود برای</small><b>ویندوز</b></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">© ۲۰۲۶ کلینیک پرو · ساختهشده در ایران برای پزشکان ایران</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
var FA = ['۰','۱','۲','۳','۴','۵','۶','۷','۸','۹'];
|
||||
function groupFa(n){ return String(n).replace(/\B(?=(\d{3})+(?!\d))/g,'،').replace(/\d/g,function(d){return FA[+d];}); }
|
||||
|
||||
var header = document.getElementById('header');
|
||||
function onScroll(){ header.classList.toggle('scrolled', window.scrollY > 12); }
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
onScroll();
|
||||
|
||||
var navToggle = document.getElementById('navToggle');
|
||||
var navLinks = document.getElementById('navLinks');
|
||||
if (navToggle) navToggle.addEventListener('click', function(){
|
||||
var open = navLinks.style.display === 'flex';
|
||||
navLinks.style.display = open ? '' : 'flex';
|
||||
if (!open) {
|
||||
navLinks.style.position='absolute'; navLinks.style.top='84px'; navLinks.style.insetInline='0';
|
||||
navLinks.style.flexDirection='column'; navLinks.style.background='#fff';
|
||||
navLinks.style.padding='20px 32px'; navLinks.style.gap='18px';
|
||||
navLinks.style.boxShadow='0 16px 30px oklch(0.4 0.08 285 / 0.1)';
|
||||
}
|
||||
});
|
||||
|
||||
var sections = ['hero','features','why','download','contact'];
|
||||
var links = Array.prototype.slice.call(document.querySelectorAll('.nav-links a'));
|
||||
function syncActive(){
|
||||
var y = window.scrollY + 120, cur = 'hero';
|
||||
sections.forEach(function(id){ var el=document.getElementById(id); if(el && el.offsetTop<=y) cur=id; });
|
||||
links.forEach(function(a){ a.classList.toggle('active', a.getAttribute('href')==='#'+cur); });
|
||||
}
|
||||
window.addEventListener('scroll', syncActive, { passive: true });
|
||||
syncActive();
|
||||
|
||||
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var reveals = Array.prototype.slice.call(document.querySelectorAll('.reveal'));
|
||||
function inView(el){ var r=el.getBoundingClientRect(); return r.top < (window.innerHeight||document.documentElement.clientHeight)-30 && r.bottom > 0; }
|
||||
function reveal(el){ el.classList.add('in'); }
|
||||
|
||||
if (reduce) { reveals.forEach(reveal); }
|
||||
else {
|
||||
reveals.forEach(function(el){ if(inView(el)) reveal(el); });
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ reveal(e.target); io.unobserve(e.target);} }); }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
|
||||
reveals.forEach(function(el){ if(!el.classList.contains('in')) io.observe(el); });
|
||||
}
|
||||
var ticking=false;
|
||||
function sweep(){ if(ticking) return; ticking=true; requestAnimationFrame(function(){ reveals.forEach(function(el){ if(inView(el)) reveal(el); }); ticking=false; }); }
|
||||
window.addEventListener('scroll', sweep, { passive: true });
|
||||
window.addEventListener('resize', sweep, { passive: true });
|
||||
setTimeout(function(){ reveals.forEach(reveal); }, 2800);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
{{ encore_entry_script_tags('home') }}
|
||||
</body>
|
||||
</html>
|
||||
@@ -10,6 +10,7 @@ Encore
|
||||
|
||||
.addEntry('app', './assets/app.js')
|
||||
.addEntry('admin', './assets/admin/index.tsx')
|
||||
.addEntry('home', './assets/home/index.js')
|
||||
|
||||
.splitEntryChunks()
|
||||
.enableSingleRuntimeChunk()
|
||||
|
||||
Reference in New Issue
Block a user