AzitaRahimi/contactus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

contactus

Browse Source
This commit is contained in:
Azita Rahimi
2026-06-13 18:03:22 +03:30
commit e9b3977c77
52 changed files with 18728 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

557
contactus.html Normal file
View File

@@ -0,0 +1,557 @@
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./src/core/stylesheet/core.css" />
<link rel="stylesheet" href="./src/assets/css/contactus.css" />
<link rel="stylesheet" href="./src/assets/css/contactus-responsive.css" />
<script type="module" src="./src/assets/js/contactus.js" defer></script>
<title>تماس با ما - اینوا</title>
</head>
<body>
<div id="root">
<main>
<!-- ═══════════════════════════════════════════
HERO
═══════════════════════════════════════════ -->
<section class="hero-section">
<div class="container">
<div class="hero-card">
<div class="hero-circles" aria-hidden="true">
<div class="circle circle--1"></div>
<div class="circle circle--2"></div>
<div class="circle circle--3"></div>
<div class="circle circle--4"></div>
</div>
<div class="hero-hollow hero-hollow--left" aria-hidden="true"></div>
<div class="hero-hollow hero-hollow--right" aria-hidden="true"></div>
<div class="hero-dot-pattern" aria-hidden="true"></div>
<svg class="contactus-hands" aria-hidden="true" width="977px" height="303px">
<use href="./src/assets/icons/portfolioP.svg#contactus-hands"></use>
</svg>
<div class="hero-content">
<h1 class="hero-h1">دغدغه و مسئله از شما، ایده و راه‌حل از ما!</h1>
<p class="hero-sub">
دعوتید به یک چای گرم در دفتر اینوا تا دغدغه‌های کسب‌وکارتان را بررسی کنیم و با
رویکردی خلاقانه و داده‌محور، برایشان راه‌حل‌های اجرایی پیدا کنیم.
</p>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════
CONTACT INFO + FORM
═══════════════════════════════════════════ -->
<section class="contact-section">
<div class="container">
<div class="contact-grid">
<!-- Right column: Contact Form -->
<div class="contact-form-wrapper">
<div class="contact-form-title">
<h2 class="contact-form-title__h2">برای شروع همکاری آماده‌اید؟</h2>
<p class="contact-form-title__sub">
در کمتر از ۲۴ ساعت ما با شما تماس خواهیم گرفت
</p>
</div>
<div class="form-section-left">
<form id="contactForm">
<div class="form-input">
<label class="required-label">نام و نام خانوادگی </label>
<input type="text" id="name" placeholder="مثال: آرمان بزرگی" required />
<small id="nameError" class="error-message"></small>
</div>
<div class="form-input">
<label class="label"> موضوع </label>
<div class="custom-select" id="customSelect">
<div class="select-box">
<span class="selected-text"> درخواست پروژه </span>
<span class="arrow">
<svg width="24" height="24" focusable="false">
<use href="./src/assets/icons/portfolioP.svg#down-arr"></use>
</svg>
</span>
</div>
<ul class="options">
<li class="option active">درخواست پروژه</li>
<li class="option">جلسه مشاوره</li>
<li class="option">همکاری با اینوا</li>
<li class="option">سایر موارد</li>
</ul>
</div>
</div>
<div class="form-input">
<label class="required-label">شماره تماس </label>
<input type="tel" id="phone" placeholder="33 22 111 0912" required />
<small id="phoneError" class="error-message"></small>
</div>
<div class="form-input">
<label>ایمیل</label>
<input type="email" id="email" placeholder="inova@gmail.com" />
<small id="emailError" class="error-message"></small>
</div>
<div class="form-text">
<label class="required-label">متن درخواست </label>
<textarea id="message"></textarea>
</div>
<button type="submit" class="form-btn" id="submitBtn">
<span class="btn-text">ثبت درخواست</span>
<span class="form-btn-icon btn-icon-default" aria-hidden="true">
<svg width="24" height="24" focusable="false" color="white">
<use href="./src/assets/icons/portfolioP.svg#arrow-left"></use>
</svg>
</span>
<span class="form-btn-icon btn-icon-loading" aria-hidden="true">
<span class="spinner"></span>
</span>
</button>
</form>
<div class="success-message" id="successMessage">
<img src="./src/img/massage-send.svg" class="end-form-img" />
<h3>درخواست شما با موفقیت ثبت شد</h3>
<p>
کارشناسان ما حداکثر تا ۲۴ ساعت آینده با شما تماس خواهند گرفت. جزئیات جلسه نیز
از طریق پیامک و ایمیل برای شما ارسال می‌شود.
</p>
<button type="button" class="success-btn" id="backBtn">
<span class="btn-text">بازگشت به فرم</span>
</button>
</div>
<div class="form-brands">
<div class="form-brands__header">
<span class="form-brands__label">مورد تایید برندهای خلاق</span>
<div class="form-brands__line"></div>
</div>
<div class="form-brands__logos">
<div class="logos-track">
<img src="./public/images/logo 4.png" />
<img src="./public/images/logo 5.png" />
<img src="./public/images/logo 6.png" />
<img src="./public/images/logo1.png" />
<img src="./public/images/logo2.png" />
<img src="./public/images/logo3.png" />
<img src="./public/images/logo7.png" />
<img src="./public/images/logo8.png" />
</div>
</div>
</div>
</div>
<!-- <form class="contact-form" novalidate>
<div class="form-row">
<div class="form-field">
<label class="form-label" for="fullname">
نام و نام خانوادگی <span class="form-required">*</span>
</label>
<input
class="form-input"
type="text"
id="fullname"
name="fullname"
placeholder="آرمان بزرگی"
required
/>
</div>
<div class="form-field">
<label class="form-label" for="subject">موضوع</label>
<div class="form-select-wrapper">
<span class="form-select-arrow" aria-hidden="true">
<img
src="https://www.figma.com/api/mcp/asset/0bdc64a3-5ca5-45c8-aacb-6ee14fdaccd4"
alt=""
/>
</span>
<select class="form-select" id="subject" name="subject">
<option value="cooperation">درخواست همکاری</option>
<option value="consultation">مشاوره</option>
<option value="project">پروژه جدید</option>
<option value="other">سایر</option>
</select>
</div>
</div>
</div>
<div class="form-row">
<div class="form-field">
<label class="form-label" for="phone">
شماره تماس <span class="form-required">*</span>
</label>
<input
class="form-input"
type="tel"
id="phone"
name="phone"
placeholder="09xxxxxxxxx"
required
/>
</div>
<div class="form-field">
<label class="form-label" for="email">ایمیل</label>
<input
class="form-input"
type="email"
id="email"
name="email"
placeholder="example@email.com"
/>
</div>
</div>
<div class="form-field form-field--full">
<label class="form-label" for="message">
متن درخواست <span class="form-required">*</span>
</label>
<textarea class="form-textarea" id="message" name="message" required></textarea>
</div>
<div class="form-submit-row">
<button type="submit" class="form-submit-btn">
<img
src="https://www.figma.com/api/mcp/asset/0b1c5271-d257-46ec-a5c4-c4a7a5d264e9"
alt=""
aria-hidden="true"
/>
ارسال درخواست
</button>
</div>
<div class="form-brands">
<div class="form-brands__header">
<div class="form-brands__line"></div>
<span class="form-brands__label">مورد تایید برندهای خلاق</span>
</div>
<div class="form-brands__logos">
<div class="logos-track">
<img
src="https://www.figma.com/api/mcp/asset/73fb7ac0-b82c-41f9-88a7-8610925e446f"
alt="اسنپ"
/>
<img
src="https://www.figma.com/api/mcp/asset/2e5ac459-bcbb-4c9a-bd04-ca614129ab4c"
alt="لوگو"
/>
<img
src="https://www.figma.com/api/mcp/asset/2cea5865-ff49-4e42-88c6-a4713d8cab00"
alt="فرداد"
/>
<img
src="https://www.figma.com/api/mcp/asset/639f3aa9-7a2a-4885-bd44-c5afd2d44005"
alt="انیل"
/>
<img
src="https://www.figma.com/api/mcp/asset/ce88af7c-35b5-4aaf-a6f3-4cb67792e589"
alt="زبانمهر"
/>
<img
src="https://www.figma.com/api/mcp/asset/73fb7ac0-b82c-41f9-88a7-8610925e446f"
alt="اسنپ"
/>
<img
src="https://www.figma.com/api/mcp/asset/2e5ac459-bcbb-4c9a-bd04-ca614129ab4c"
alt="لوگو"
/>
<img
src="https://www.figma.com/api/mcp/asset/2cea5865-ff49-4e42-88c6-a4713d8cab00"
alt="فرداد"
/>
<img
src="https://www.figma.com/api/mcp/asset/639f3aa9-7a2a-4885-bd44-c5afd2d44005"
alt="انیل"
/>
<img
src="https://www.figma.com/api/mcp/asset/ce88af7c-35b5-4aaf-a6f3-4cb67792e589"
alt="زبانمهر"
/>
</div>
</div>
</div>
</form> -->
</div>
<!-- Left column: Contact Info -->
<div class="contact-info">
<div class="contact-info__header">
<h2 class="contact-info__title">راه‌های ارتباطی با ما</h2>
<p class="contact-info__subtitle">
در هر زمان که نیاز داشتید، از طریق تلفن، ایمیل یا شبکه‌های اجتماعی با ما در
ارتباط باشید.
</p>
</div>
<div class="contact-items">
<a href="tel:02191096311" class="contact-item">
<div class="contact-item__icon">
<svg aria-hidden="true" width="48px" height="48px">
<use href="./src/assets/icons/portfolioP.svg#contact-phone"></use>
</svg>
</div>
<div class="contact-item__body">
<div class="contact-item__texts">
<span class="contact-item__label">تماس مستقیم با ما</span>
<span class="contact-item__value">
<strong>021-91096311</strong> | ساعت پاسخگویی: شنبه تا چهارشنبه: ۸ صبح تا
۵ عصر
</span>
</div>
<div class="contact-item__link-btn" aria-hidden="true">
<svg aria-hidden="true" width="24px" height="24px">
<use href="./src/assets/icons/portfolioP.svg#arr-contactus"></use>
</svg>
</div>
</div>
</a>
<a href="mailto:Info@inova-agency.com" class="contact-item">
<div class="contact-item__icon">
<svg aria-hidden="true" width="48px" height="48px">
<use href="./src/assets/icons/portfolioP.svg#contact-mail"></use>
</svg>
</div>
<div class="contact-item__body">
<div class="contact-item__texts">
<span class="contact-item__label">ایمیل</span>
<span class="contact-item__value">Info@inova-agency.com</span>
</div>
<div class="contact-item__link-btn" aria-hidden="true">
<svg aria-hidden="true" width="24px" height="24px">
<use href="./src/assets/icons/portfolioP.svg#arr-contactus"></use>
</svg>
</div>
</div>
</a>
<div class="contact-item">
<div class="contact-item__icon">
<svg aria-hidden="true" width="48px" height="48px">
<use href="./src/assets/icons/portfolioP.svg#contact-post"></use>
</svg>
</div>
<div class="contact-item__body">
<div class="contact-item__texts">
<span class="contact-item__label">کد پستی</span>
<span class="contact-item__value">1518633969</span>
</div>
<div class="contact-item__link-btn" aria-hidden="true">
<svg aria-hidden="true" width="24px" height="24px">
<use href="./src/assets/icons/portfolioP.svg#arr-contactus"></use>
</svg>
</div>
</div>
</div>
<div class="contact-item contact-item--tall">
<div class="contact-item__icon">
<svg aria-hidden="true" width="48px" height="48px">
<use href="./src/assets/icons/portfolioP.svg#contact-loc"></use>
</svg>
</div>
<div class="contact-item__body contact-item__body--top">
<div class="contact-item__texts">
<span class="contact-item__label">آدرس شرکت</span>
<span class="contact-item__value">
تهران، بلوار نلسون ماندلا (جردن)، پایین‌تر از جهان کودک، خیابان ناوک، پلاک
۱۲، طبقه سوم
</span>
</div>
<div class="contact-item__link-btn" aria-hidden="true">
<svg aria-hidden="true" width="24px" height="24px">
<use href="./src/assets/icons/portfolioP.svg#arr-contactus"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="contact-social">
<p class="contact-social__label">ما را در شبکه‌های اجتماعی دنبال کنید</p>
<div class="contact-social__icons">
<a href="#" class="social-icon">
<svg aria-hidden="true" width="32px" height="32px">
<use href="./src/assets/icons/portfolioP.svg#instagram1"></use>
</svg>
</a>
<a href="#" class="social-icon">
<svg aria-hidden="true" width="32px" height="32px">
<use href="./src/assets/icons/portfolioP.svg#linkedin1"></use>
</svg>
</a>
<a href="#" class="social-icon">
<svg aria-hidden="true" width="20px" height="20px">
<use href="./src/assets/icons/portfolioP.svg#bale"></use>
</svg>
</a>
<a href="#" class="social-icon">
<svg aria-hidden="true" width="32px" height="32px">
<use href="./src/assets/icons/portfolioP.svg#youtube1"></use>
</svg>
</a>
<a href="#" class="social-icon">
<svg aria-hidden="true" width="32px" height="32px">
<use href="./src/assets/icons/portfolioP.svg#telegram1"></use>
</svg>
</a>
<a href="#" class="social-icon">
<svg aria-hidden="true" width="32px" height="32px">
<use href="./src/assets/icons/portfolioP.svg#twitter1"></use>
</svg>
</a>
<a href="#" class="social-icon">
<svg aria-hidden="true" width="24px" height="24px">
<use href="./src/assets/icons/portfolioP.svg#aparat1"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════
PROCESS STEPS
═══════════════════════════════════════════ -->
<section class="steps-section">
<div class="container">
<div class="steps-header">
<h2 class="steps-header__title">مسیر ساده شروع همکاری با اینوا</h2>
<p class="steps-header__sub">
از ثبت درخواست جلسه تا آغاز همکاری، در چند مرحله کوتاه و شفاف کنار شما هستیم تا
بهترین مسیر برای رشد کسب‌وکارتان را مشخص کنیم.
</p>
</div>
<div class="steps-grid">
<div class="steps-row">
<!-- Step 1 -->
<div class="step-card">
<div class="step-card__top">
<div class="step-card__meta">
<svg aria-hidden="true" width="32px" height="32px">
<use href="./src/assets/icons/portfolioP.svg#file-spreadsheet"></use>
</svg>
<span class="step-card__badge">مرحله اول</span>
</div>
<p class="step-card__title">ثبت درخواست جلسه</p>
</div>
<p class="step-card__desc">
از طریق فرم درخواست جلسه، اطلاعات اولیه پروژه یا کسب‌وکار خود را برای ما ارسال
می‌کنید تا تیم اینوا دید اولیه‌ای نسبت به نیازها و اهداف شما داشته باشد.
</p>
</div>
<!-- Step 2 -->
<div class="step-card">
<div class="step-card__top">
<div class="step-card__meta">
<svg aria-hidden="true" width="32px" height="32px">
<use href="./src/assets/icons/portfolioP.svg#phone-32"></use>
</svg>
<span class="step-card__badge">مرحله دوم</span>
</div>
<p class="step-card__title">تماس و بررسی اولیه</p>
</div>
<p class="step-card__desc">
پس از دریافت درخواست، تیم ما با شما تماس می‌گیرد تا جزئیات بیشتری درباره نیازها،
اهداف و شرایط پروژه بررسی شود و زمان مناسب برای جلسه طبق بازه شما شکل گیرد.
</p>
</div>
</div>
<div class="steps-row">
<!-- Step 3 -->
<div class="step-card">
<div class="step-card__top">
<div class="step-card__meta">
<svg aria-hidden="true" width="32px" height="32px">
<use href="./src/assets/icons/portfolioP.svg#dis"></use>
</svg>
<span class="step-card__badge">مرحله سوم</span>
</div>
<p class="step-card__title">برگزاری جلسه مشاوره</p>
</div>
<p class="step-card__desc">
در جلسه مشاوره، وضعیت فعلی کسب‌وکار شما، فرصت‌های رشد و راهکارهای پیشنهادی اینوا
بررسی می‌شود تا بهترین مسیر همکاری مشخص گردد.
</p>
</div>
<!-- Step 4 -->
<div class="step-card">
<div class="step-card__top">
<div class="step-card__meta">
<svg aria-hidden="true" width="32px" height="32px">
<use href="./src/assets/icons/portfolioP.svg#rocket"></use>
</svg>
<span class="step-card__badge">مرحله چهارم</span>
</div>
<p class="step-card__title">نهایی‌سازی و شروع همکاری</p>
</div>
<p class="step-card__desc">
پس از توافق بر سر استراتژی و خدمات مورد نیاز، قرارداد همکاری تنظیم شده و پروژه
به صورت رسمی آغاز می‌شود.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════
MAP
═══════════════════════════════════════════ -->
<section class="map-section">
<div class="container">
<div class="map-card">
<img
class="map-card__img"
src="./public/images/Map.png"
alt="نقشه دفتر اینوا - خیابان ناوک، تهران"
/>
<div class="map-card__location" aria-hidden="true">
<span class="map-location-dot"></span>
</div>
<div class="map-card__nav">
<a href="#" class="map-nav-btn" target="_blank" rel="noopener">
<svg aria-hidden="true" width="24px" height="24px">
<use href="./src/assets/icons/portfolioP.svg#map"></use>
</svg>
<span>گوگل</span>
</a>
<a href="#" class="map-nav-btn" target="_blank" rel="noopener">
<span>نشان</span>
<svg aria-hidden="true" width="24px" height="24px">
<use href="./src/assets/icons/portfolioP.svg#neshan"></use>
</svg>
</a>
<a href="#" class="map-nav-btn" target="_blank" rel="noopener">
<span>بلد</span>
<svg aria-hidden="true" width="20px" height="20px">
<use href="./src/assets/icons/portfolioP.svg#balad"></use>
</svg>
</a>
</div>
</div>
</div>
</section>
</main>
</div>
</body>
</html>