feat: mataba landing static site - production ready

2026-09-20 17:44:45 +03:30
parent b78e332966
commit 18280899a1
46 changed files with 1388 additions and 0 deletions
@@ -0,0 +1,206 @@
+<!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>
+<meta name="description" content="مطبا طراحی سایت اختصاصی پزشکان، دندانپزشکی و زیبایی با پنل نوبت‌دهی آنلاین، نمونه‌کار حرفه‌ای و سئو پایه. مشاوره: 08733730514">
+<link rel="canonical" href="https://mataba.ir/">
+<meta name="robots" content="index, follow">
+<meta property="og:type" content="website">
+<meta property="og:locale" content="fa_IR">
+<meta property="og:site_name" content="مطبا">
+<meta property="og:title" content="مطبا | طراحی سایت پزشکان و کلینیک با نوبت‌دهی آنلاین">
+<meta property="og:description" content="طراحی سایت پزشکی واکنش‌گرا برای پزشکان با معرفی تخصص، نوبت‌دهی آنلاین، گالری نمونه‌کار و سئو پایه.">
+<meta property="og:url" content="https://mataba.ir/">
+<meta property="og:image" content="https://mataba.ir/assets/images/personalsection.png">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="مطبا | طراحی سایت پزشکی">
+<meta name="twitter:description" content="طراحی سایت اختصاصی پزشک با نوبت‌دهی آنلاین و نمونه‌کار.">
+<meta name="twitter:image" content="https://mataba.ir/assets/images/personalsection.png">
+<link rel="icon" href="assets/images/navLogo.png" type="image/png">
+<link rel="preload" href="assets/fonts/Modam-Bold.ttf" as="font" type="font/ttf" crossorigin>
+<link rel="stylesheet" href="css/styles.css">
+<link rel="stylesheet" href="css/responsive.css">
+<link rel="stylesheet" href="css/utilities.css">
+<link rel="manifest" href="manifest.webmanifest">
+<script type="application/ld+json">
+{"@context":"https://schema.org","@graph":[
+{"@type":"Organization","@id":"https://mataba.ir/#org","name":"مطبا","alternateName":"Mataba","url":"https://mataba.ir/","logo":"https://mataba.ir/assets/images/navLogo.png"},
+{"@type":"WebSite","@id":"https://mataba.ir/#site","url":"https://mataba.ir/","name":"مطبا","inLanguage":"fa","publisher":{"@id":"https://mataba.ir/#org"}},
+{"@type":"WebPage","@id":"https://mataba.ir/#home","url":"https://mataba.ir/","name":"مطبا | طراحی سایت پزشکان و کلینیک با نوبت‌دهی آنلاین","inLanguage":"fa-IR","isPartOf":{"@id":"https://mataba.ir/#site"}},
+{"@type":"Service","name":"طراحی سایت اختصاصی پزشکان","provider":{"@id":"https://mataba.ir/#org"},"areaServed":"IR","inLanguage":"fa","description":"طراحی سایت واکنش‌گرا برای پزشکان، معرفی تخصص، نوبت‌دهی، گالری نمونه‌کار و سئوی پایه."}
+,
+{"@type":"BreadcrumbList","@id":"https://mataba.ir/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"خانه","item":"https://mataba.ir/"},{"@type":"ListItem","position":2,"name":"طراحی سایت پزشکی","item":"https://mataba.ir/#home"}]}]}
+</script>
+</head>
+<body>
+<a class="skip" href="#main">پرش به محتوای اصلی</a>
+<div class="wrap">
+<header class="site-header">
+  <button class="hamburger" id="hamburger" aria-expanded="false" aria-controls="mainNav" aria-label="باز کردن منو"><span class="bars" aria-hidden="true"><span></span><span></span><span></span></span><span>منو</span></button>
+  <a class="brand" href="./" aria-label="مطبا — صفحه اصلی"><span class="logo-mark" aria-hidden="true"><span>م</span></span><span class="logo-text-wrap"><span class="logo-text">مطبا</span><span class="logo-sub">mataba.ir</span></span></a>
+  <nav class="nav" id="mainNav" aria-label="ناوبری اصلی">
+    <span id="drawerClose" style="display:none"></span>
+    <a class="nav-link active" href="#home">صفحه اصلی</a>
+    <a class="nav-link" href="#samples">نمونه‌کارها</a>
+    <a class="nav-link" href="#packages">پکیج‌ها</a>
+    <a class="nav-link" href="#facilities">امکانات</a>
+    <a class="nav-link" href="about/">درباره ما</a>
+    <a class="nav-link" href="contact/">ارتباط با ما</a>
+  </nav>
+  <div class="header-actions">
+    <a class="btn-icon" href="#search" aria-label="جست‌وجوی دامنه"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 2.75C6.667 2.75 2.75 6.667 2.75 11.5c0 4.833 3.917 8.75 8.75 8.75 4.833 0 8.75-3.917 8.75-8.75 0-4.833-3.917-8.75-8.75-8.75ZM1.25 11.5C1.25 5.84 5.84 1.25 11.5 1.25c5.66 0 10.25 4.59 10.25 10.25 0 5.66-4.59 10.25-10.25 10.25C5.84 21.75 1.25 17.16 1.25 11.5Z" fill="#333"/></svg></a>
+  </div>
+</header>
+<div class="drawer-backdrop" id="drawerBackdrop"></div>
+
+<main id="main" class="hero-wrap">
+<!-- 1. HERO -->
+<section id="home" class="hero" aria-label="معرفی مطبا">
+  <div class="hero-text">
+    <p class="kicker">مطبا — طراحی یه سایت حرفه‌ای برای برند پزشکت</p>
+    <h1>فقط در سه مرحله، سایت<br>پزشکیت آماده‌ست!</h1>
+    <a class="btn btn-store" href="#contact">ساخت فروشگاه من <span aria-hidden="true">‹</span></a>
+    <p class="hero-seo">طراحی سایت پزشکی · وب‌سایت اختصاصی پزشک · برند شخصی پزشک · نوبت‌دهی آنلاین با مطبا</p>
+    <div class="hero-stats" role="list" aria-label="شاخص‌ها (نیازمند تایید کارفرما)">
+      <!-- TODO: ارقام زیر از ریپوی قبلی آمده و برای مطبا تایید نشده است -->
+      <div class="stat" role="listitem"><div><b>+۱,۲۰۰</b><span>سایت پزشکان</span></div></div>
+      <div class="stat" role="listitem"><div><b>٪۹۸</b><span>رضایت</span></div></div>
+      <div class="stat" role="listitem"><div><b>۷-۱۰</b><span>دقیقه تحویل</span></div></div>
+    </div>
+  </div>
+  <div class="hero-star" aria-label="۱۰ سال سابقه در زمینه پزشکی (نیازمند تایید)"><div><b>۱۰ سال</b><span>سابقه در زمینه پزشکی</span></div></div>
+  <img class="hero-hand-mobile" src="assets/images/dast.png" alt="" width="300" height="220" loading="eager">
+</section>
+
+<!-- 2. UNDER HERO -->
+<section class="hero-under" aria-label="مزایا و اعتماد">
+  <div class="mini-cards">
+    <div class="mini-card"><span class="ic"><svg width="32" height="32" viewBox="0 0 36 36" fill="none" aria-hidden="true"><path d="M12.8 6.5c.42.46.38 1.17-.08 1.59l-2.54 2.29c-1.18 1.06-1.98 1.78-2.49 2.4-.5.59-.6.93-.6 1.22s.1.64.6 1.23c.52.61 1.32 1.33 2.5 2.4l2.54 2.29c.46.41.49 1.13.08 1.59-.41.46-1.12.5-1.59.08l-2.6-2.34c-1.11-1-2.02-1.82-2.65-2.57-.66-.79-1.13-1.63-1.13-2.67s.47-1.89 1.13-2.68c.63-.75 1.54-1.57 2.65-2.57l2.6-2.34c.46-.42 1.17-.38 1.58.08Z" fill="#014224"/></svg></span><div><h3>طراحی اختصاصی</h3><p>بر اساس رنگ و برند شخصی شما</p></div></div>
+    <div class="mini-card"><span class="ic"><svg width="32" height="32" viewBox="0 0 36 36" fill="none" aria-hidden="true"><path d="M8 14h12M8 21h7" stroke="#014224" stroke-width="2" stroke-linecap="round"/><rect x="3" y="5" width="30" height="22" rx="4" stroke="#014224" stroke-width="2"/></svg></span><div><h3>بدون نیاز به کدنویسی</h3><p>فقط فرم رو پر کن، سایت آماده‌ست</p></div></div>
+    <div class="mini-card"><span class="ic"><svg width="32" height="32" viewBox="0 0 36 36" fill="none" aria-hidden="true"><circle cx="18" cy="18" r="15" stroke="#014224" stroke-width="2"/><path d="M18 13v6h6" stroke="#014224" stroke-width="2" stroke-linecap="round"/></svg></span><div><h3>سریع و حرفه‌ای</h3><p>تحویل کمتر از ۵ روز</p></div></div>
+  </div>
+  <div class="hand" aria-hidden="true"><img src="assets/images/dast.png" alt="" width="420" height="300" loading="lazy"></div>
+  <div class="doctors-card">
+    <div class="avatars"><img src="assets/images/person.jpg" alt="پزشک همکار مطبا" width="64" height="64" loading="lazy"><img src="assets/images/person3.jpg" alt="پزشک همکار مطبا" width="64" height="64" loading="lazy"><img src="assets/images/person2.jpg" alt="پزشک همکار مطبا" width="64" height="64" loading="lazy"></div>
+    <div><h3>+۸۰۰</h3><p>همکاری با پزشکان</p></div>
+  </div>
+</section>
+<div class="call-strip call-strip--hero" role="note" aria-label="تماس مشاوره"><p>سوالی داری؟ با مطبا تماس بگیر — طراحی سایت پزشکی با مشاوره رایگان <a href="tel:08733730514" class="ltr">08733730514</a></p><a href="tel:08733730514" class="btn btn-call">دریافت مشاوره</a></div>
+
+<!-- 3. STEPS + SEARCH -->
+<section id="search" class="section" aria-label="مراحل ساخت و جست‌وجوی دامنه">
+  <div class="toDown" aria-hidden="true"><svg width="18" height="14" viewBox="0 0 13 10" fill="none"><path d="M1 1l5.5 4.7L12 1" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg></div>
+  <div class="steps-bg">
+    <p class="eyebrow">مراحل ساخت وب‌سایت شما</p>
+    <h2 class="h2 treeStep">فقط در سه مرحله، سایت پزشکیت آماده‌ست!</h2>
+    <div class="steps">
+      <div class="step"><span class="ball"><svg width="52" height="52" viewBox="0 0 40 40" fill="none" aria-hidden="true"><rect x="8" y="4" width="24" height="32" rx="3" stroke="#014224" stroke-width="2"/><path d="M14 15h12M14 21h8" stroke="#014224" stroke-width="2" stroke-linecap="round"/></svg></span><div><p>مرحله اول</p><h3>ثبت اطلاعات مطب و تخصصت</h3></div></div>
+      <div class="step"><span class="ball"><svg width="52" height="52" viewBox="0 0 36 36" fill="none" aria-hidden="true"><path d="M10 26L24 6l4 3-14 20-5 1 1-4Z" stroke="#014224" stroke-width="2" stroke-linejoin="round"/></svg></span><div><p>مرحله دوم</p><h3>ارسال رنگ و سبک دلخواه برندت</h3></div></div>
+      <div class="step"><span class="ball"><svg width="52" height="52" viewBox="0 0 40 40" fill="none" aria-hidden="true"><rect x="6" y="8" width="28" height="20" rx="3" stroke="#014224" stroke-width="2"/><path d="M16 32h8" stroke="#014224" stroke-width="2" stroke-linecap="round"/></svg></span><div><p>مرحله سوم</p><h3>تحویل سایت آماده</h3></div></div>
+    </div>
+    <h2 class="h2 searchAfter" style="margin-top:40px">سلامتی از اعتماد شروع میشود، سایت تخصصی خودت رو همین حالا بساز :)</h2>
+    <form class="search-box" id="domainForm" role="search" aria-label="جست‌وجوی دامنه">
+      <label class="visually-hidden" for="domainInput">نام دامنه را جستجو کنید</label>
+      <input id="domainInput" name="domain" type="text" placeholder="نام دامنه را جستجو کنید ..." autocomplete="off">
+      <button class="search-go" type="submit" aria-label="جست‌وجو"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"/><path d="M16 16l4 4" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg></button>
+    </form>
+    <p id="domainMsg" class="ferr center" role="status"></p>
+    <div class="domains" aria-label="پسوندهای پیشنهادی">
+      <button type="button" class="domain ltr">.ir</button><button type="button" class="domain ltr">.com</button><button type="button" class="domain ltr">.net</button><button type="button" class="domain ltr">.doctor</button><button type="button" class="domain ltr">.site</button><button type="button" class="domain ltr">.shop</button>
+    </div>
+  </div>
+</section>
+
+<!-- 4. SAMPLES -->
+<section id="samples" class="section" aria-label="نمونه‌کارها">
+  <p class="eyebrow">نمونه طراحی‌های مطبا — طراحی سایت پزشکی با مطبا</p>
+  <h2 class="h2 SampleAfter">طراحی‌هایی مطابق با هویت برند پزشکان با مطبا</h2>
+  <div class="cards">
+    <article class="sample-card"><div class="stars" aria-hidden="true">★★★</div><h3>دندانپزشکی</h3><div class="sample-img"><img src="assets/images/samplePage/1.png" alt="نمونه طراحی سایت دندانپزشکی مطبا" width="400" height="520" loading="lazy"></div><button class="sample-view" type="button">مشاهده</button></article>
+    <article class="sample-card"><div class="stars" aria-hidden="true">★★★</div><h3>پزشک عمومی</h3><div class="sample-img"><img src="assets/images/samplePage/2.png" alt="نمونه طراحی سایت پزشک عمومی مطبا" width="400" height="520" loading="lazy"></div><button class="sample-view" type="button">مشاهده</button></article>
+    <article class="sample-card"><div class="stars" aria-hidden="true">★★★</div><h3>پزشک زیبایی</h3><div class="sample-img"><img src="assets/images/samplePage/3.png" alt="نمونه طراحی سایت پزشک زیبایی مطبا" width="400" height="520" loading="lazy"></div><button class="sample-view" type="button">مشاهده</button></article>
+    <article class="sample-card"><div class="stars" aria-hidden="true">★★★</div><h3>جراح</h3><div class="sample-img"><img src="assets/images/samplePage/4.png" alt="نمونه طراحی سایت جراح مطبا" width="400" height="520" loading="lazy"></div><button class="sample-view" type="button">مشاهده</button></article>
+  </div>
+</section>
+<div class="call-strip call-strip--samples" role="note" aria-label="مشاهده نمونه‌کار"><p>نمونه‌کار پزشکی دیدی؟ برای وب‌سایت اختصاصی پزشک — سئو و نمونه‌کار حرفه‌ای <a href="tel:08733730514" class="ltr">08733730514</a></p><a href="tel:08733730514" class="btn btn-call">مشاهده نمونه‌کارها</a></div>
+
+<!-- 5. FACILITIES -->
+<section id="facilities" class="facilities" aria-label="امکانات">
+  <img class="fac-circle" src="assets/images/circle.png" alt="" width="280" height="200" loading="lazy">
+  <div class="fac-head"><p>امکانات وب‌سایت پزشکان با مطبا</p><h2 class="facilityAfter">هر چیزی که برای حضور آنلاین با مطبا نیاز داری</h2></div>
+  <div class="fac-grid">
+    <div class="fac"><span aria-hidden="true">✔</span><p>صفحه معرفی تخصص</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>بخش تماس و نوبت‌دهی</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>فروش محصوات پزشکی</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>گالری نمونه‌کار و نتایج</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>سئو و بهینه‌سازی</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>اتصال به گوگل</p></div>
+  </div>
+</section>
+
+<!-- 6. BRAND CTA -->
+<section class="brand-cta" aria-label="برند شخصی">
+  <div class="overlay"><div><h2>برند شخصی پزشکیت رو با مطبا<br>همین امروز بساز</h2><p>مطبا — طراحی سایت اختصاصی پزشک؛ تو فقط کارت رو بده، ما برات هویت دیجیتال می‌سازیم.</p></div><a class="btn btn-white" href="#contact">ساخت وب‌سایت من همین حالا</a></div>
+</section>
+
+<!-- 7. PACKAGES -->
+<section id="packages" class="section" aria-label="پکیج‌ها و قیمت‌ها">
+  <p class="eyebrow">پکیج‌ها و قیمت‌ها</p>
+  <h2 class="h2 btmBorder">پکیج مناسب تخصص خودت رو انتخاب کن</h2>
+  <div class="packages mt-4">
+    <div class="svc"><div class="svc-head"><div><p class="eyebrow">دریافت سرویس</p><h3>جزئیات سرویس‌ها</h3></div><span aria-hidden="true">↓</span></div>
+      <div class="svc-panel"><ul>
+        <li>طراحی اختصاصی لوگو</li><li>ساخت سایت واکنش‌گرا</li><li>دامنه و هاست رایگان</li><li>پنل مدیریت ساده</li><li>درگاه پرداخت آنلاین</li><li>فرم نوبت‌دهی سریع</li><li>سئو و بهینه‌سازی پایه</li><li>پشتیبانی فنی رایگان</li><li>امکان افزودن وبلاگ</li><li>اتصال به واتساپ و اینستاگرام</li>
+      </ul></div>
+    </div>
+    <div class="plan featured"><div class="top"><p><b>پلن پایه</b></p><p class="price">۱۱۳,۵۴۶,۰۰۰ <span class="per">/ماهانه</span></p><p>شامل ۹ گزینه</p></div><div class="rows" aria-hidden="true"><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✘</span><span>✔</span></div><a class="btn btn-dark" href="#contact">انتخاب پکیج</a></div>
+    <div class="plan featured"><div class="top"><p><b>پلن پایه</b></p><p class="price">۱۱۳,۵۴۶,۰۰۰ <span class="per">/ماهانه</span></p><p>شامل ۹ گزینه</p></div><div class="rows" aria-hidden="true"><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✘</span><span>✔</span></div><a class="btn btn-dark" href="#contact">انتخاب پکیج</a></div>
+    <div class="plan featured"><div class="top"><p><b>پلن پایه</b></p><p class="price">۱۱۳,۵۴۶,۰۰۰ <span class="per">/ماهانه</span></p><p>شامل ۹ گزینه</p></div><div class="rows" aria-hidden="true"><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✘</span><span>✔</span></div><a class="btn btn-dark" href="#contact">انتخاب پکیج</a></div>
+  </div>
+</section>
+<div class="call-strip call-strip--packages" role="note" aria-label="انتخاب پکیج"><p>برای انتخاب پکیج و پنل نوبت‌دهی آنلاین سوالی داری؟ <a href="tel:08733730514" class="ltr">08733730514</a> — پشتیبانی مطبا</p><a href="tel:08733730514" class="btn btn-call">گفت‌وگو با کارشناس</a></div>
+
+<!-- 8. CONTACT -->
+<section id="contact" class="contact-sec has-bg" aria-label="تماس">
+  <div class="contact-text"><h2>با ما در ارتباط باشید ...</h2><p>سوال یا درخواستی دارید؟ تیم مطبا آماده پاسخگویی به شماست! از طریق فرم روبه‌رو با ما در ارتباط باشید.</p>
+    <div class="social"><a href="#" aria-label="اینستاگرام مطبا"><img src="assets/images/instagraam.png" alt="" width="24" height="24"></a><a href="#" aria-label="تلگرام مطبا"><img src="assets/images/telegram.png" alt="" width="24" height="24"></a><a href="#" aria-label="واتساپ مطبا"><img src="assets/images/whatsap.png" alt="" width="24" height="24"></a></div>
+  </div>
+  <div class="form-card"><p class="sub">شروع طراحی وب‌سایت اختصاصی من</p><h2>فرم ثبت درخواست</h2>
+    <form id="leadForm" novalidate>
+      <div class="frow"><label class="visually-hidden" for="ln">نام و نام خانوادگی پزشک</label><input id="ln" name="name" type="text" placeholder="نام و نام خانوادگی پزشک" autocomplete="name"><label class="visually-hidden" for="lm">شماره تماس</label><input id="lm" name="mobile" type="tel" inputmode="numeric" placeholder="شماره تماس" autocomplete="tel"></div>
+      <div class="frow"><label class="visually-hidden" for="ls">تخصص</label><input id="ls" name="spec" type="text" placeholder="تخصص"><label class="visually-hidden" for="lc">رنگ سازمانی</label><input id="lc" name="color" type="text" placeholder="رنگ سازمانی"></div>
+      <label class="visually-hidden" for="ld">توضیحات دلخواه</label><textarea id="ld" name="desc" placeholder="توضیحات دلخواه"></textarea>
+      <p class="ferr" role="alert"></p><p class="fok" role="status"></p>
+      <div style="display:flex;justify-content:flex-end"><button class="btn btn-form" type="submit">ارسال درخواست</button></div>
+    </form>
+  </div>
+</section>
+
+<!-- 9. VOICES -->
+<section id="voices" class="voices" aria-label="نظرات پزشکان">
+  <p class="eyebrow">نظرات پزشکان</p>
+  <h2 class="DoctorCmH">نظر پزشکانی که به ما اعتماد کردند</h2>
+  <div class="carousel"><div class="car-nav"><button id="tPrev" aria-label="قبلی">‹</button><button id="tNext" aria-label="بعدی">›</button></div>
+    <div class="track" id="tTrack">
+      <article class="tcard"><blockquote>«طراحی سایت من دقیقاً مطابق کارت ویزیتم بود. هویت برندم کاملاً حوظ شد.»</blockquote><div class="tperson"><img src="assets/images/dcm1.jpg" alt="دکتر مریم صادقی" width="90" height="90" loading="lazy"><b>دکتر مریم صادقی</b><span>دندان‌پزشک زیبایی</span><span class="trate" aria-label="۵ از ۵">★★★★★</span></div></article>
+      <article class="tcard"><blockquote>«بیماران راحت‌تر من را پیدا می‌کنند و نوبت‌گیری ساده شده است.»</blockquote><div class="tperson"><img src="assets/images/dcm2.jpg" alt="دکتر رضا قنبری" width="90" height="90" loading="lazy"><b>دکتر رضا قنبری</b><span>متخصص پوست و مو</span><span class="trate" aria-label="۵ از ۵">★★★★★</span></div></article>
+      <article class="tcard"><blockquote>«پنل مدیریت ساده است و پشتیبانی سریع پاسخ می‌دهد.»</blockquote><div class="tperson"><img src="assets/images/dcm3.jpg" alt="دکتر نرگس مرادی" width="90" height="90" loading="lazy"><b>دکتر نرگس مرادی</b><span>فیزیوتراپیست</span><span class="trate" aria-label="۵ از ۵">★★★★★</span></div></article>
+    </div>
+  </div>
+</section>
+</main>
+
+<footer class="site-footer"><div class="foot-panel">
+  <span class="brand" style="gap:10px"><span class="logo-mark" style="width:38px;height:38px;border-radius:12px;font-size:18px"><span>م</span></span><span class="logo-text-wrap"><span class="logo-text" style="font-size:22px">مطبا</span><span class="logo-sub">mataba.ir</span></span></span>
+  <p class="lead">مطبا با هدف ساده‌تر کردن حضور آنلاین پزشکان، پلتفرمی طراحی کرده که از طراحی لوگو تا ساخت کامل وب‌سایت اختصاصی پزشک را تنها با چند کلیک انجام می‌دهد. تلاش ما این است که هر پزشک با مطبا هویت منحصربه‌فردی در فضای دیجیتال داشته باشد.</p>
+  <div class="social"><a href="#" aria-label="اینستاگرام"><img src="assets/images/instagraam.png" alt="" width="24" height="24"></a><a href="#" aria-label="تلگرام"><img src="assets/images/telegram.png" alt="" width="24" height="24"></a><a href="#" aria-label="واتساپ"><img src="assets/images/whatsap.png" alt="" width="24" height="24"></a></div>
+  <p class="foot-small">تمامی حقوق مادی و معنوی این وب‌سایت متعلق به «مطبا» است. هرگونه کپی‌برداری بدون اجازه کتبی پیگرد قانونی دارد.</p>
+  <nav aria-label="پیوندهای داخلی"><a href="#samples">نمونه‌کارها</a> · <a href="#packages">پکیج‌ها</a> · <a href="about/">درباره ما</a> · <a href="contact/">ارتباط با ما</a></nav>
+</div></footer>
+</div>
+
+<script src="js/main.js" defer></script>
+</body>
+</html>