558 lines
27 KiB
HTML
558 lines
27 KiB
HTML
<!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>
|