contactus

2026-06-13 18:03:22 +03:30
commit e9b3977c77
52 changed files with 18728 additions and 0 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -0,0 +1,15 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__claude_ai_Figma__get_screenshot",
+      "mcp__claude_ai_Figma__get_design_context",
+      "Bash(python *)",
+      "Bash(python3 -c \"import json; data=json.load\\(open\\(r'C:\\\\Users\\\\front\\\\.claude\\\\projects\\\\C--Users-front-Desktop-inova-contactus\\\\755e9ec7-7b43-4816-9ef8-598d32a0795e\\\\tool-results\\\\mcp-claude_ai_Figma-get_design_context-1781008336660.txt'\\)\\); print\\(len\\(data\\), [d['type'] for d in data[:5]]\\)\")",
+      "Bash(py -3 -c \"import json; data=json.load\\(open\\(r'C:\\\\Users\\\\front\\\\.claude\\\\projects\\\\C--Users-front-Desktop-inova-contactus\\\\755e9ec7-7b43-4816-9ef8-598d32a0795e\\\\tool-results\\\\mcp-claude_ai_Figma-get_design_context-1781008336660.txt'\\)\\); print\\(len\\(data\\), [d['type'] for d in data[:5]]\\)\")",
+      "PowerShell($data = Get-Content 'C:\\\\Users\\\\front\\\\.claude\\\\projects\\\\C--Users-front-Desktop-inova-contactus\\\\755e9ec7-7b43-4816-9ef8-598d32a0795e\\\\tool-results\\\\mcp-claude_ai_Figma-get_design_context-1781008336660.txt' -Raw | ConvertFrom-Json; Write-Host \"Count: $\\($data.Count\\)\"; $data | Select-Object -First 5 | ForEach-Object { Write-Host \"type=$\\($_.type\\) textLen=$\\($_.text.Length\\)\" })",
+      "PowerShell(Out-File *)",
+      "PowerShell($data = Get-Content 'C:\\\\Users\\\\front\\\\.claude\\\\projects\\\\C--Users-front-Desktop-inova-contactus\\\\755e9ec7-7b43-4816-9ef8-598d32a0795e\\\\tool-results\\\\figma_text0.txt' -Raw; $totalLines = \\($data -split \"`n\"\\).Count; Write-Host \"Total lines: $totalLines\")",
+      "Bash(npx vite *)"
+    ]
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,4 @@
+dist/
+node_modules/
+public/
+*.min.js
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1,13 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css"
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"],
+  "unwantedRecommendations": []
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,19 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "editor.tabSize": 2,
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "files.associations": {
+    "*.xml": "html",
+    "*.svg": "html"
+  }
+}
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,150 @@
+# Inova Frontend
+
+Persian (RTL) frontend for the Inova WordPress theme. Pages are built as standalone HTML/CSS/JS in Vite, then ported to WordPress. No JS framework.
+
+## Stack
+
+- **Build:** Vite 8.x (multi-page, ES modules)
+- **Formatter:** Prettier 3.x — singleQuote, semi, 2-space indent, LF
+- **Font:** Yekan Bakh FaNum Pro (Persian, 8 weights)
+- **Language:** Persian, RTL-first (`lang="fa" dir="rtl"`)
+
+## Folder Structure
+
+```
+src/
+  core/
+    fonts/yekanbakhpro/woff/ & woff2/   ← webfont files (8 weights each)
+    stylesheet/core.css                  ← PRIMARY source of truth for all styling
+    javascript/core.js                   ← shared JS utilities
+  assets/
+    icons/                               ← SVG icons
+    images/
+    css/[page].css                       ← page layout styles
+    css/[page]-responsive.css            ← page breakpoint overrides
+    js/[page].js                         ← page-specific JS
+  components/                            ← reusable HTML components
+  templates/                             ← page templates
+```
+
+## Core CSS — Source of Truth
+
+`src/core/stylesheet/core.css` defines everything global. **Always load it first**, before any page CSS.
+
+### Color Tokens
+
+```css
+--color-primary:     #0274b3   /* primary blue */
+--color-title:       #1a1a2e   /* headings */
+--color-text:        #505068   /* paragraph text */
+--color-body-text:   #6a6a6a   /* secondary body text */
+--bg-gray:           #f9f9f9   /* light gray backgrounds */
+--color-pastel-main: #c5d7ec   /* pastel blue accent */
+
+/* Blue scale */
+--blue-50 … --blue-800          /* lightest → darkest */
+--blue-500: #1796dc             /* default link color */
+--blue-600: #0274b3             /* = --color-primary */
+```
+
+### Typography Scale
+
+| Tag | Desktop | Mobile (≤767px) | Color |
+|-----|---------|-----------------|-------|
+| h1  | 36px    | 24px            | `--color-title` |
+| h2  | 24px    | 22px            | `--color-title` |
+| h3  | 22px    | 18px            | `--color-title` |
+| h4  | 20px    | 16px            | `--color-title` |
+| h5  | 15px    | 14px            | `--color-title` |
+| p   | 15px / line-height 1.75 | — | `--color-text` |
+| a   | color `--blue-500`, no underline | — | — |
+
+Font family and `direction: rtl` are applied globally — never redeclare them in page CSS.
+
+### Utility Classes (defined in core)
+
+- `.no-scrollbar` — hides scrollbar cross-browser
+
+### What Core Already Handles (do not repeat in page CSS)
+
+- `@font-face` declarations
+- `box-sizing: border-box` universal reset
+- `margin: 0; padding: 0` reset
+- `direction: rtl` on all elements
+- `scroll-behavior: smooth`
+- `button` reset (no border/outline/background)
+- `::selection` brand color
+- Number input spinner removal
+- Custom scrollbar styling
+
+## Adding a New Page
+
+1. Create `[page].html` in the project root
+2. Create `src/assets/css/[page].css` and `[page]-responsive.css`
+3. Create `src/assets/js/[page].js`
+4. Register in `vite.config.js → build.rollupOptions.input`
+5. Use this import order in HTML:
+
+```html
+<link rel="stylesheet" href="./src/core/stylesheet/core.css" />
+<link rel="stylesheet" href="./src/assets/css/[page].css" />
+<link rel="stylesheet" href="./src/assets/css/[page]-responsive.css" />
+<script type="module" src="./src/assets/js/[page].js" defer></script>
+```
+
+## CSS Conventions
+
+**Naming:** BEM-like, kebab-case — `.block-name`, `.block-element`, `.block--modifier`
+
+**Container pattern:** every section wraps content in `.container`:
+```css
+.container {
+  max-width: 1240px;
+  padding: 0 20px;
+  margin: 0 auto;
+}
+```
+
+**Breakpoints** (use raw px values in `@media` — no CSS variable support in media queries):
+
+| Alias | Value  |
+|-------|--------|
+| xxl   | 1400px |
+| xl    | 1200px |
+| lg    | 992px  |
+| md    | 768px  |
+| sm    | 576px  |
+
+Pre-stub all 5 breakpoints in the responsive file, even if empty.
+
+**Section comments** use `═══` ASCII dividers.
+
+**Tokens to use — and their correct names:**
+
+| Correct | Wrong (do not use) |
+|---------|--------------------|
+| `var(--color-title)` | `var(--clr-title)` |
+| `var(--color-text)` | `var(--clr-text)` |
+| `16px` (raw value) | `var(--sp-16)` — not defined |
+| inherited font | `var(--font-primary)` — not defined |
+
+## Vite Path Aliases
+
+```js
+@           → src/
+@core       → src/core/
+@components → src/components/
+```
+
+## HTML Conventions
+
+- `<html lang="fa" dir="rtl">`
+- `<div id="root">` wraps `<main>` in page HTML
+- Decorative elements get `aria-hidden="true"`
+- Section comments inside HTML use `═══` ASCII dividers
+
+## Known Issues
+
+1. `contactus.css` uses undefined variables (`--sp-16`, `--font-primary`, `--clr-title`, `--clr-text`) — use the correct core token names above.
+2. `@font-face` URLs for weights 800/900/950 in `core.css` have incorrect filenames with spaces — those font weights currently fail to load.
+3. `contactus.html` is registered as key `"footer"` in `vite.config.js` — should be `"contactus"`.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,32 @@
+# Inova - Frontend
+
+فرانت‌اند قالب وردپرس پروژه Inova
+
+## درباره پروژه
+
+این ریپوزیتوری بخش فرانت‌اند قالب وردپرس پروژه اصلی است. اینجا تمام طراحی‌ها، کامپوننت‌ها و assetها با استفاده از Vite توسعه داده می‌شود.
+
+## نحوه راه‌اندازی پروژه
+
+### پیش‌نیازها
+
+- Node.js نسخه 18 یا بالاتر (نسخه 22 پیشنهاد میشه)
+- ادیتور Vs Code
+- نصب بودن اکستنشن prettier روی vs code
+- نصب بودن git روی سیستم عامل
+
+### نصب و اجرا
+
+```bash
+# کلون کردن پروژه
+git clone https://dev.novindiyar.com/Inova-Agency/inova-frontend.git
+
+# ورود به پوشه
+cd inova-frontend
+
+# نصب وابستگی‌ها
+npm install
+
+# اجرای محیط توسعه
+npm run dev
+```
--- a/contactus.html
+++ b/contactus.html
@@ -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>
--- a/index.html
+++ b/index.html
@@ -0,0 +1,14 @@
+<!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" />
+    <title>Inova</title>
+  </head>
+  <body>
+    <main>
+      <h1>سلام دنیا</h1>
+    </main>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,889 @@
+{
+  "name": "inova-frontend",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "inova-frontend",
+      "version": "0.0.0",
+      "devDependencies": {
+        "prettier": "^3.8.3",
+        "vite": "^8.0.4"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmmirror.com/@emnapi/core/-/core-1.9.2.tgz",
+      "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmmirror.com/@emnapi/runtime/-/runtime-1.9.2.tgz",
+      "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
+      "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.124.0",
+      "resolved": "https://registry.npmmirror.com/@oxc-project/types/-/types-0.124.0.tgz",
+      "integrity": "sha512-VBFWMTBvHxS11Z5Lvlr3IWgrwhMTXV+Md+EQF0Xf60+wAdsGFTBx7X7K/hP4pi8N7dcm1RvcHwDxZ16Qx8keUg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-YYe6aWruPZDtHNpwu7+qAHEMbQ/yRl6atqb/AhznLTnD3UY99Q1jE7ihLSahNWkF4EqRPVC4SiR4O0UkLK02tA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-oArR/ig8wNTPYsXL+Mzhs0oxhxfuHRfG7Ikw7jXsw8mYOtk71W0OkF2VEVh699pdmzjPQsTjlD1JIOoHkLP1Fg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-YzeVqOqjPYvUbJSWJ4EDL8ahbmsIXQpgL3JVipmN+MX0XnXMeWomLN3Fb+nwCmP/jfyqte5I3XRSm7OfQrbyxw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-9Erhx956jeQ0nNTyif1+QWAXDRD38ZNjr//bSHrt6wDwB+QkAfl2q6Mn1k6OBPerznjRmbM10lgRb1Pli4xZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.15.tgz",
+      "integrity": "sha512-cVwk0w8QbZJGTnP/AHQBs5yNwmpgGYStL88t4UIaqcvYJWBfS0s3oqVLZPwsPU6M0zlW4GqjP0Zq5MnAGwFeGA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.15.tgz",
+      "integrity": "sha512-eBZ/u8iAK9SoHGanqe/jrPnY0JvBN6iXbVOsbO38mbz+ZJsaobExAm1Iu+rxa4S1l2FjG0qEZn4Rc6X8n+9M+w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.15.tgz",
+      "integrity": "sha512-ZvRYMGrAklV9PEkgt4LQM6MjQX2P58HPAuecwYObY2DhS2t35R0I810bKi0wmaYORt6m/2Sm+Z+nFgb0WhXNcQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.15.tgz",
+      "integrity": "sha512-VDpgGBzgfg5hLg+uBpCLoFG5kVvEyafmfxGUV0UHLcL5irxAK7PKNeC2MwClgk6ZAiNhmo9FLhRYgvMmedLtnQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.15.tgz",
+      "integrity": "sha512-y1uXY3qQWCzcPgRJATPSOUP4tCemh4uBdY7e3EZbVwCJTY3gLJWnQABgeUetvED+bt1FQ01OeZwvhLS2bpNrAQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.15.tgz",
+      "integrity": "sha512-023bTPBod7J3Y/4fzAN6QtpkSABR0rigtrwaP+qSEabUh5zf6ELr9Nc7GujaROuPY3uwdSIXWrvhn1KxOvurWA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.15.tgz",
+      "integrity": "sha512-witB2O0/hU4CgfOOKUoeFgQ4GktPi1eEbAhaLAIpgD6+ZnhcPkUtPsoKKHRzmOoWPZue46IThdSgdo4XneOLYw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-UCL68NJ0Ud5zRipXZE9dF5PmirzJE4E4BCIOOssEnM7wLDsxjc6Qb0sGDxTNRTP53I6MZpygyCpY8Aa8sPfKPg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.15.tgz",
+      "integrity": "sha512-ApLruZq/ig+nhaE7OJm4lDjayUnOHVUa77zGeqnqZ9pn0ovdVbbNPerVibLXDmWeUZXjIYIT8V3xkT58Rm9u5Q==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.9.2",
+        "@emnapi/runtime": "1.9.2",
+        "@napi-rs/wasm-runtime": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.15.tgz",
+      "integrity": "sha512-KmoUoU7HnN+Si5YWJigfTws1jz1bKBYDQKdbLspz0UaqjjFkddHsqorgiW1mxcAj88lYUE6NC/zJNwT+SloqtA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.15.tgz",
+      "integrity": "sha512-3P2A8L+x75qavWLe/Dll3EYBJLQmtkJN8rfh+U/eR3MqMgL/h98PhYI+JFfXuDPgPeCB7iZAKiqii5vqOvnA0g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.15.tgz",
+      "integrity": "sha512-UromN0peaE53IaBRe9W7CjrZgXl90fqGpK+mIZbA3qSTeYqg3pqpROBdIPvOG3F5ereDHNwoHBI2e50n1BDr1g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmmirror.com/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.10",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.10.tgz",
+      "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.8.3.tgz",
+      "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmmirror.com/rolldown/-/rolldown-1.0.0-rc.15.tgz",
+      "integrity": "sha512-Ff31guA5zT6WjnGp0SXw76X6hzGRk/OQq2hE+1lcDe+lJdHSgnSX6nK3erbONHyCbpSj9a9E+uX/OvytZoWp2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.124.0",
+        "@rolldown/pluginutils": "1.0.0-rc.15"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-rc.15",
+        "@rolldown/binding-darwin-arm64": "1.0.0-rc.15",
+        "@rolldown/binding-darwin-x64": "1.0.0-rc.15",
+        "@rolldown/binding-freebsd-x64": "1.0.0-rc.15",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.15",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.15",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.15",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.15",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.15",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.15",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.15",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.15",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.15",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.15",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.15"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/vite": {
+      "version": "8.0.8",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-8.0.8.tgz",
+      "integrity": "sha512-dbU7/iLVa8KZALJyLOBOQ88nOXtNG8vxKuOT4I2mD+Ya70KPceF4IAmDsmU0h1Qsn5bPrvsY9HJstCRh3hG6Uw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.8",
+        "rolldown": "1.0.0-rc.15",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.1.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "inova-frontend",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "prettier": "^3.8.3",
+    "vite": "^8.0.4"
+  }
+}
--- a/public/.gitkeep
+++ b/public/.gitkeep
--- a/public/images/.gitkeep
+++ b/public/images/.gitkeep
--- a/public/images/Map.png
+++ b/public/images/Map.png
--- a/public/images/logo
+++ b/public/images/logo
--- a/public/images/logo
+++ b/public/images/logo
--- a/public/images/logo
+++ b/public/images/logo
--- a/public/images/logo1.png
+++ b/public/images/logo1.png
--- a/public/images/logo2.png
+++ b/public/images/logo2.png
--- a/public/images/logo3.png
+++ b/public/images/logo3.png
--- a/public/images/logo7.png
+++ b/public/images/logo7.png
--- a/public/images/logo8.png
+++ b/public/images/logo8.png
--- a/src/assets/css/contactus-responsive.css
+++ b/src/assets/css/contactus-responsive.css
@@ -0,0 +1,174 @@
+/* ═══════════════════════════════════════════════════════
+   xxl — 1400px
+═══════════════════════════════════════════════════════ */
+@media screen and (max-width: 1400px) {
+}
+
+/* ═══════════════════════════════════════════════════════
+   xl — 1200px
+═══════════════════════════════════════════════════════ */
+@media screen and (max-width: 1200px) {
+  .hero-content {
+    width: 90%;
+    max-width: 673px;
+  }
+
+  .contact-info {
+    width: 460px;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════
+   lg — 992px
+═══════════════════════════════════════════════════════ */
+@media screen and (max-width: 992px) {
+  .hero-card {
+    height: auto;
+    min-height: 240px;
+    padding: 40px 24px;
+  }
+
+  .hero-h1 {
+    font-size: 28px;
+    line-height: 42px;
+  }
+
+  .contact-grid {
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  .contact-info {
+    width: 100%;
+  }
+
+  .contact-form-wrapper {
+    width: 100%;
+  }
+
+  .steps-row {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .step-card__title {
+    white-space: normal;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════
+   md — 768px
+═══════════════════════════════════════════════════════ */
+@media screen and (max-width: 768px) {
+  .hero-h1 {
+    font-size: 22px;
+    line-height: 36px;
+  }
+
+  .hero-sub {
+    font-size: 14px;
+  }
+
+  .contact-form-title__h2 {
+    font-size: 20px;
+    line-height: 30px;
+  }
+
+  .form-row {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .steps-header__title {
+    font-size: 20px;
+  }
+
+  .map-card {
+    height: 300px;
+    border-radius: 24px;
+  }
+
+  .map-card__img {
+    border-radius: 24px;
+  }
+
+  .map-card__nav {
+    right: 16px;
+    bottom: 16px;
+    gap: 8px;
+  }
+
+  .map-nav-btn {
+    padding: 6px 10px;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════
+   sm — 576px
+═══════════════════════════════════════════════════════ */
+@media screen and (max-width: 576px) {
+  .hero-section {
+    padding-top: 24px;
+    padding-bottom: 32px;
+  }
+
+  .hero-content {
+    width: 100%;
+  }
+
+  .hero-h1 {
+    font-size: 20px;
+    line-height: 32px;
+  }
+
+  .contact-item__label {
+    font-size: 13px;
+  }
+
+  .contact-item__value {
+    font-size: 12px;
+  }
+
+  .contact-social__icons {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .form-submit-btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .form-submit-row {
+    justify-content: stretch;
+  }
+
+  .steps-grid {
+    gap: 16px;
+  }
+
+  .step-card {
+    padding: 16px;
+  }
+
+  .map-card {
+    height: 240px;
+    border-radius: 16px;
+  }
+
+  .map-card__img {
+    border-radius: 16px;
+  }
+
+  .map-nav-btn span {
+    display: none;
+  }
+
+  .map-card__nav {
+    gap: 6px;
+  }
+
+  .map-nav-btn {
+    padding: 8px;
+  }
+}
--- a/src/assets/css/contactus.css
+++ b/src/assets/css/contactus.css
@@ -0,0 +1,960 @@
+/* ═══════════════════════════════════════════════════════
+   CONTAINER OVERRIDE
+═══════════════════════════════════════════════════════ */
+.container {
+  max-width: 1240px;
+  padding: 0 20px;
+  margin: 0 auto;
+}
+
+main {
+  padding-bottom: 80px;
+}
+
+/* ═══════════════════════════════════════════════════════
+   HERO
+═══════════════════════════════════════════════════════ */
+.hero-section {
+  padding-top: 80px;
+  padding-bottom: 50px;
+}
+
+.hero-card {
+  position: relative;
+  width: 100%;
+  height: 303px;
+  background-color: #eff6ff;
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+  width: 673px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  text-align: center;
+}
+
+.hero-h1 {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 54px;
+  color: var(--color-primary);
+}
+
+.hero-sub {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 26px;
+  color: var(--color-text);
+}
+
+.hero-circles {
+  position: absolute;
+  top: -59%;
+  right: 50%;
+  transform: translate(50%, -50%);
+  pointer-events: none;
+}
+
+.circle {
+  position: absolute;
+  border-radius: 50%;
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+.circle--1 { width: 698px; height: 698px; background-color:rgba(216, 233, 255, 0.2);}
+.circle--2 { width: 616px; height: 616px; background-color: rgba(216, 233, 255, 0.4); }
+.circle--3 { width: 534px; height: 534px; background-color: rgba(216, 233, 255, 0.6); }
+.circle--4 { width: 452px; height: 452px; background-color: rgba(216, 233, 255, 0.8); }
+
+
+.hero-hollow {
+  position: absolute;
+  width: 403px;
+  height: 403px;
+  border-radius: 50%;
+  background-color: rgba(2, 116, 179, 0.12);
+  top: 75%;
+  transform: translateY(-50%);
+  pointer-events: none;
+    filter: blur(250px);
+}
+.hero-hollow--left  {  
+  left: -290px;
+}
+.hero-hollow--right { 
+  right: -290px;
+ }
+
+.hero-dot-pattern {
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(circle, var(--color-pastel-main) 1px, transparent 1px);
+  background-size: 24px 24px;
+  pointer-events: none;
+  opacity: 0.4;
+}
+.contactus-hands{
+    position: absolute;
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+
+
+
+/* ═══════════════════════════════════════════════════════
+   CONTACT SECTION
+═══════════════════════════════════════════════════════ */
+.contact-section {
+  margin-bottom: 100px;
+}
+
+.contact-grid {
+  display: flex;
+  gap: 32px;
+  align-items: flex-start;
+}
+
+/* ── Contact Info (left column) ── */
+.contact-info {
+  width: 550px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding-top: 24px;
+}
+
+.contact-info__header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: right;
+}
+
+.contact-info__title {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 34px;
+  color: var(--color-title);
+}
+
+.contact-info__subtitle {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 26px;
+  color: var(--color-text);
+}
+
+.contact-items {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed #bdbdbd;
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background-color: #f0f5fe;
+  border-radius: 10px;
+  text-decoration: none;
+  color: inherit;
+  transition: opacity 0.2s;
+  overflow: hidden;
+  min-height: 64px;
+}
+
+.contact-item:hover {
+  opacity: 0.85;
+}
+
+.contact-item--tall {
+  align-items: flex-start;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.contact-item__link-btn {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 1000px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+
+.contact-item__body {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.contact-item__body--top {
+  align-items: center;
+}
+
+.contact-item__texts {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  text-align: right;
+  min-width: 0;
+}
+
+.contact-item__label {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 22px;
+  color: var(--color-title);
+}
+
+.contact-item__value {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--color-body-text);
+}
+
+.contact-item__value strong {
+  font-weight: 700;
+}
+
+.contact-item__icon {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  background-color: var(--color-primary);
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.contact-item__icon img {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+
+/* ── Social Media ── */
+.contact-social {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items:flex-start ;
+}
+
+.contact-social__label {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 22px;
+  color: var(--color-text);
+  text-align: right;
+}
+
+.contact-social__icons {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.social-icon {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  background-color: #f3f8ff;
+  border-radius: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: background-color 0.2s;
+}
+
+.social-icon:hover {
+  background-color: var(--color-pastel-main);
+}
+
+.social-icon img {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+/* ── Contact Form (right column) ── */
+.contact-form-wrapper {
+  flex: 1;
+  min-width: 0;
+  background-color: #fafcff;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.contact-form-title {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  text-align: right;
+}
+
+.contact-form-title__h2 {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 36px;
+  color: var(--color-primary);
+}
+
+.contact-form-title__sub {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 26px;
+  color: var(--color-text);
+}
+
+.form-input input,
+.form-text textarea {
+  border: 1px solid #ccc;
+  outline: none;
+  transition: all 0.3s ease;
+}
+
+.form-input input:focus,
+.form-text textarea:focus {
+  border-color: var(--color-primary);
+ background-color: #EAF7FF;
+}
+.error-message {
+  color: #DC2626;
+  font-size: 13px;
+  margin-top: 6px;
+  display: block;
+}
+
+.input-error {
+  background-color: #FFEBEB !important;
+  border-color: #ef4444 !important;
+}
+
+
+/* ── Brands logos scroll ── */
+.form-brands {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.form-brands__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.form-brands__line {
+  flex: 1;
+  height: 1px;
+  background-color: #e0e0e0;
+}
+
+.form-brands__label {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 22px;
+  color: var(--color-text);
+  white-space: nowrap;
+  text-align: right;
+}
+
+.form-brands__logos {
+  height: 32px;
+  overflow: hidden;
+  position: relative;
+  
+  mask-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    black 8%,
+    black 92%,
+    transparent 100%
+  );
+
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    black 8%,
+    black 92%,
+    transparent 100%
+  );
+}
+
+.logos-track {
+  display: flex;
+  align-items: center;
+  gap: 40px;
+  justify-content: right;
+  animation: logos-scroll 18s linear infinite;
+  white-space: transform;
+  width: max-content;
+}
+
+.logos-track img {
+  width: auto;
+  object-fit: contain;
+  flex-shrink: 0;
+  filter: grayscale(0.3);
+}
+
+@keyframes logos-scroll {
+  from { transform: translateX(-1%); }
+  to   { transform: translateX(50%); }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.form-input label,
+.required-label {
+  font-size: 14px;
+  margin-bottom: 8px;
+  display: block;
+  color: #1a1a2e;
+}
+.required-label::after {
+  content: '*';
+  color: #ff0000;
+  margin-left: 4px;
+}
+input,
+.select-box,
+textarea {
+  width: 100%;
+  border: 1px solid #dbdbdb;
+  border-radius: 8px;
+  padding: 0px 12px;
+  height: 38px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.8;
+  color: var(--color-title);
+  background-color: #f9f9f9;
+}
+textarea {
+  min-height: 114px;
+  resize: vertical;
+}
+.form-input {
+  flex-basis: 48%;
+  position: relative;
+}
+.label {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #222;
+}
+.custom-select {
+  position: relative;
+  width: 100%;
+  user-select: none;
+}
+.select-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: 0.25s;
+}
+.selected-text {
+  font-size: 14px;
+  color: #222;
+  font-weight: 500;
+}
+.arrow {
+  display: flex;
+  transition: 0.25s;
+}
+.custom-select.active .arrow {
+  transform: rotate(180deg);
+}
+.options {
+  position: absolute;
+  right: 0;
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  list-style: none;
+  border: 1px solid #dbdbdb;
+  opacity: 0;
+  visibility: hidden;
+  z-index: 100;
+}
+.custom-select.active .options {
+  opacity: 1;
+  visibility: visible;
+}
+.option {
+  padding: 0px 12px;
+  height: 38px;
+  font-size: 17px;
+  transition: 0.2s;
+  background-color: #f9f9f9;
+  display: flex;
+  align-items: center;
+}
+.option.active {
+  background: var(--color-primary);
+  color: #fff;
+}
+.form-text {
+  flex-basis: 98%;
+}
+.form-btn {
+  background-color: var(--color-primary);
+  border: none;
+  border-radius: 10px;
+  padding: 10px 12px 10px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: 0.3s ease;
+}
+.form-btn-icon {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+}
+.form-btn.loading .btn-icon-default {
+  display: none;
+}
+.form-btn.loading .btn-icon-loading {
+  display: flex;
+}
+.btn-icon-default {
+  display: flex;
+}
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 4px solid #c5d7ec;
+  border-top-color: transparent;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: spin 300ms linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.btn-text {
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 400;
+}
+.form-section-right {
+  flex: 0 1 45%;
+}
+.form-section-text h2 {
+  margin-bottom: 16px;
+}
+.form-section-text p {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.7;
+  color: var(--color-body-text);
+}
+.form-img {
+  position: relative;
+}
+.form-img p {
+  position: absolute;
+  top: 28%;
+  right: 16%;
+  font-size: 56px;
+  font-weight: 700;
+  color: #c8dff9;
+}
+.form-img img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+.end-form-img {
+  left: 184px;
+  top: -28px;
+}
+.success-message {
+  display: none;
+}
+.success-message p {
+  margin-top: 16px;
+}
+.success-message h3 {
+  margin-top: 24px;
+}
+.success-btn {
+  margin-top: 24px;
+  border: none;
+  border-radius: 10px;
+  background-color: var(--color-primary);
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 10px 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.success-message.visible {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+
+/* ═══════════════════════════════════════════════════════
+   PROCESS STEPS
+═══════════════════════════════════════════════════════ */
+.steps-section {
+  padding-bottom: 100px;
+
+}
+
+.steps-header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.steps-header__title {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 36px;
+  color: var(--color-title);
+}
+
+.steps-header__sub {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 26px;
+  color: var(--color-body-text);
+}
+
+.steps-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+
+.steps-row {
+  display: flex;
+  gap: 24px;
+}
+
+/* ─── Card base ─────────────────────────────────── */
+.step-card {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  background-color: #f0f4fd;
+  border-radius: 16px;
+  overflow: hidden;
+  text-align: right;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  background-image: url(/src/img/Vector\(1\).png);
+  z-index: 1;
+}
+/* .step-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+
+  background: var(--color-primary);
+
+  clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
+  transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+
+  z-index: 0;
+}
+
+.step-card:hover::before {
+    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
+} */
+ .step-card::before {
+  content: "";
+  position: absolute;
+
+  width: 400%;
+  height: 400%;
+
+  right: -200%;
+  bottom: -200%;
+
+  background: var(--color-primary);
+  border-radius: 50%;
+
+  transform: scale(0);
+  transform-origin: bottom right;
+
+  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
+  z-index: 0;
+}
+
+.step-card:hover::before {
+  transform: scale(1);
+}
+
+
+.step-card > * {
+  position: relative;
+  z-index: 2;
+}
+/* ─── Badge (default) ───────────────────────────── */
+.step-card__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 10px;
+  border-radius: 32px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+  border: 1px solid var(--color-primary);
+  color: var(--color-primary);
+  white-space: nowrap;
+  transition: border-color 0.3s ease, color 0.3s ease;
+}
+
+.step-card__icon {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+/* ─── Top wrapper ───────────────────────────────── */
+.step-card__top {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.step-card__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* ─── Title & description (default) ────────────── */
+.step-card__title {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 28px;
+  color: var(--color-text);
+  white-space: nowrap;
+  transition: color 0.3s ease;
+}
+
+.step-card__desc {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 26px;
+  color: var(--color-body-text);
+  transition: color 0.3s ease;
+}
+
+/* ─── Hover: ALL cards turn blue ────────────────── */
+
+.step-card:hover::after {
+  opacity: 0.15; /* dim the pattern so it doesn't clash with the blue bg */
+}
+.step-card__meta svg {
+  color: var(--color-primary) ;
+}
+.step-card:hover .step-card__meta svg {
+  color: #ffffff;
+}
+.step-card:hover .step-card__badge {
+  border-color: #ffffff;
+  color: #ffffff;
+}
+
+.step-card:hover .step-card__title {
+  color: #ffffff;
+}
+
+.step-card:hover .step-card__desc {
+  color: #ffffff;
+}
+
+/* ═══════════════════════════════════════════════════════
+   MAP
+═══════════════════════════════════════════════════════ */
+.map-section {
+  padding-bottom: 80px;
+}
+
+.map-card {
+  position: relative;
+  width: 100%;
+  height: 428px;
+  border-radius: 48px;
+  overflow: hidden;
+  box-shadow:
+    0px 9.5px 15.8px 6.3px rgba(255, 255, 255, 0.05),
+    0px 3.2px 4.7px 0px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.02);
+}
+
+.map-card__img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  border-radius: 48px;
+  pointer-events: none;
+}
+
+.map-card__location {
+  position: absolute;
+  left: 56%;
+  top: 50%;
+  transform: translate(-40%, -50%);
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+}
+
+.map-location-dot {
+  position: relative;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background-color: #0274B3;
+  border-radius: 50%;
+  border: 2.2px solid #ffffff;
+  z-index: 100;
+}
+.map-card__location::before,
+.map-card__location::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: #0274B3;
+  z-index: -1;
+  animation: locationPulse 2s infinite ease-out;
+  filter: blur(2px);
+}
+.map-location-dot::after {
+  animation-delay: 0s;
+}
+.map-card__location::after {
+  animation-delay: 0s;
+}
+@keyframes locationPulse {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.9;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(5);
+    opacity: 0;
+  }
+}
+.map-card__nav {
+  position: absolute;
+  right: 40px;
+  bottom: 40px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.map-nav-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--color-primary);
+  transition: box-shadow 0.2s;
+  white-space: nowrap;
+}
+
+.map-nav-btn:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+.map-nav-btn img {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
--- a/src/assets/icons/portfolioGallery.svg
+++ b/src/assets/icons/portfolioGallery.svg
@@ -0,0 +1,77 @@
+<svg>
+  <symbol id="expand" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M28 28L20 20M21.6 28H28V21.6M10.4 28H4V21.6M4 28L12 20M21.6 4H28V10.4M28 4L20 12M10.4 4H4V10.4M4 4L12 12"
+      stroke="#1A1A2E"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol id="eye" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M2.06202 12.348C1.97868 12.1235 1.97868 11.8765 2.06202 11.652C2.87372 9.68385 4.25153 8.00103 6.02079 6.81689C7.79004 5.63275 9.87106 5.00061 12 5.00061C14.129 5.00061 16.21 5.63275 17.9792 6.81689C19.7485 8.00103 21.1263 9.68385 21.938 11.652C22.0214 11.8765 22.0214 12.1235 21.938 12.348C21.1263 14.3161 19.7485 15.999 17.9792 17.1831C16.21 18.3672 14.129 18.9994 12 18.9994C9.87106 18.9994 7.79004 18.3672 6.02079 17.1831C4.25153 15.999 2.87372 14.3161 2.06202 12.348Z"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 15C13.6569 15 15 13.6568 15 12C15 10.3431 13.6569 8.99999 12 8.99999C10.3432 8.99999 9.00002 10.3431 9.00002 12C9.00002 13.6568 10.3432 15 12 15Z"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol id="play" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M0.75001 2.12914C0.749322 1.88513 0.809349 1.64531 0.92393 1.43432C1.03851 1.22332 1.20352 1.04874 1.40201 0.928505C1.6005 0.808269 1.82533 0.746706 2.05341 0.750136C2.2815 0.753566 2.50462 0.821866 2.69987 0.948024L9.12272 5.06888C9.31394 5.19079 9.47227 5.36374 9.58223 5.57079C9.69219 5.77783 9.75 6.01187 9.75 6.25C9.75 6.48812 9.69219 6.72217 9.58223 6.92921C9.47227 7.13626 9.31394 7.3092 9.12272 7.43112L2.69987 11.552C2.50453 11.6782 2.28129 11.7465 2.05309 11.7499C1.8249 11.7532 1.59998 11.6916 1.40145 11.5712C1.20291 11.4508 1.03793 11.276 0.923441 11.0648C0.808953 10.8536 0.749093 10.6136 0.75001 10.3695V2.12914Z"
+      fill="white"
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol id="t-blank" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M17 7H7V17M7 7L17 17"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" id="pause" viewBox="0 0 24 24">
+    <path d="M6.5,0A3.5,3.5,0,0,0,3,3.5v17a3.5,3.5,0,0,0,7,0V3.5A3.5,3.5,0,0,0,6.5,0Z" />
+    <path d="M17.5,0A3.5,3.5,0,0,0,14,3.5v17a3.5,3.5,0,0,0,7,0V3.5A3.5,3.5,0,0,0,17.5,0Z" />
+  </symbol>
+  <symbol id="left" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 12L6 8L10 4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+  </symbol>
+  <symbol id="chevrons-left" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.33333 11.3332L4 7.99984L7.33333 4.6665M12 11.3332L8.66667 7.99984L12 4.6665"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol id="chevrons-right" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M4 11.3332L7.33333 7.99984L4 4.6665M8.66667 11.3332L12 7.99984L8.66667 4.6665"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol id="right" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 12L10 8L6 4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+  </symbol>
+  <symbol id="arrow-left" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M10.0001 4.16675L4.16675 10.0001L10.0001 15.8334M4.16675 10.0001H15.8334"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+</svg>
--- a/src/assets/icons/portfolioP.svg
+++ b/src/assets/icons/portfolioP.svg
--- a/src/assets/images/.gitkeep
+++ b/src/assets/images/.gitkeep
--- a/src/assets/js/contactus.js
+++ b/src/assets/js/contactus.js
@@ -0,0 +1,109 @@
+// ===================================فرم==================================
+
+const form = document.getElementById('contactForm');
+const submitBtn = document.getElementById('submitBtn');
+const backBtn = document.getElementById('backBtn');
+const successMessage = document.getElementById('successMessage');
+const submitBtnText = submitBtn.querySelector('.btn-text');
+
+form.addEventListener('submit', function (event) {
+  event.preventDefault();
+
+  submitBtn.classList.add('loading');
+  submitBtnText.textContent = 'درحال ارسال فرم';
+  submitBtn.disabled = true;
+
+  setTimeout(() => {
+    form.style.display = 'none';
+
+    successMessage.classList.add('visible');
+  }, 1500);
+});
+
+backBtn.addEventListener('click', function () {
+  successMessage.classList.remove('visible');
+
+  form.style.display = 'flex';
+
+  submitBtn.disabled = false;
+  submitBtn.classList.remove('loading');
+  submitBtnText.textContent = 'ثبت درخواست';
+
+  form.reset();
+});
+
+const customSelect = document.getElementById('customSelect');
+const selectBox = customSelect.querySelector('.select-box');
+const options = customSelect.querySelectorAll('.option');
+const selectedText = customSelect.querySelector('.selected-text');
+
+selectBox.addEventListener('click', () => {
+  customSelect.classList.toggle('active');
+});
+
+options.forEach((option) => {
+  option.addEventListener('click', () => {
+    options.forEach((item) => {
+      item.classList.remove('active');
+    });
+
+    option.classList.add('active');
+    selectedText.textContent = option.textContent;
+    customSelect.classList.remove('active');
+  });
+});
+
+document.addEventListener('click', (e) => {
+  if (!customSelect.contains(e.target)) {
+    customSelect.classList.remove('active');
+  }
+});
+
+const nameInput = document.getElementById('name');
+const nameError = document.getElementById('nameError');
+
+nameInput.addEventListener('input', function () {
+  const hasNumber = /\d/.test(this.value);
+
+  if (hasNumber) {
+    this.classList.add('input-error');
+    nameError.textContent = '* فقط حروف فارسی و انگلیسی مجاز است';
+  } else {
+    this.classList.remove('input-error');
+    nameError.textContent = '';
+  }
+});
+
+const phoneInput = document.getElementById('phone');
+const phoneError = document.getElementById('phoneError');
+
+phoneInput.addEventListener('input', function () {
+  const hasLetter = /[a-zA-Zآ-ی]/.test(this.value);
+
+  if (hasLetter) {
+    this.classList.add('input-error');
+    phoneError.textContent = 'فقط عدد مجاز است';
+  } else {
+    this.classList.remove('input-error');
+    phoneError.textContent = '';
+  }
+  this.value = this.value.replace(/\D/g, '');
+});
+
+const emailInput = document.getElementById('email');
+const emailError = document.getElementById('emailError');
+
+emailInput.addEventListener('input', function () {
+  if (this.value !== '' && !this.value.includes('@')) {
+    this.classList.add('input-error');
+    emailError.textContent = 'ایمیل باید شامل @ باشد';
+  } else {
+    this.classList.remove('input-error');
+    emailError.textContent = '';
+  }
+});
+
+// ==================اسکرول لوگو=======================
+
+  const track = document.querySelector('.logos-track');
+  track.innerHTML += track.innerHTML;
--- a/src/components/.gitkeep
+++ b/src/components/.gitkeep
--- a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Black.woff
+++ b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Black.woff
--- a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Bold.woff
+++ b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Bold.woff
--- a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-ExtraBlack.woff
+++ b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-ExtraBlack.woff
--- a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-ExtraBold.woff
+++ b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-ExtraBold.woff
--- a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Light.woff
+++ b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Light.woff
--- a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Regular.woff
+++ b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Regular.woff
--- a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-SemiBold.woff
+++ b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-SemiBold.woff
--- a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Thin.woff
+++ b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Thin.woff
--- a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Black.woff2
+++ b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Black.woff2
--- a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Bold.woff2
+++ b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Bold.woff2
--- a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-ExtraBlack.woff2
+++ b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-ExtraBlack.woff2
--- a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-ExtraBold.woff2
+++ b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-ExtraBold.woff2
--- a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Light.woff2
+++ b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Light.woff2
--- a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Regular.woff2
+++ b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Regular.woff2
--- a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-SemiBold.woff2
+++ b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-SemiBold.woff2
--- a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Thin.woff2
+++ b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Thin.woff2
--- a/src/core/javascript/core.js
+++ b/src/core/javascript/core.js
--- a/src/core/stylesheet/core.css
+++ b/src/core/stylesheet/core.css
@@ -0,0 +1,232 @@
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: 100;
+  src:
+    url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-thin.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-thin.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-Light.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: normal;
+  src:
+    url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-Regular.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: 600;
+  src:
+    url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-SemiBold.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: bold;
+  src:
+    url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-Bold.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: 800;
+  src:
+    url('../fonts/yekanbakhpro/woff/Yekan Bakh FaNum-ExtraBold.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/Yekan Bakh FaNum-ExtraBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: 900;
+  src:
+    url('../fonts/yekanbakhpro/woff/Yekan Bakh FaNum-Black.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/Yekan Bakh FaNum-Black.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Yekan Bakh FaNum;
+  font-style: normal;
+  font-weight: 950;
+  src:
+    url('../fonts/yekanbakhpro/woff/Yekan Bakh FaNum-ExtraBlack.woff') format('woff'),
+    url('../fonts/yekanbakhpro/woff2/Yekan Bakh FaNum-ExtraBlack.woff2') format('woff2');
+}
+:root {
+  --color-primary: #0274b3;
+  --color-title: #1a1a2e;
+  --color-text: #505068;
+  --color-body-text: #6a6a6a;
+  --bg-gray: #f9f9f9;
+  --color-pastel-main: #c5d7ec;
+
+  --blue-50: #eaf7ff;
+  --blue-100: #c5eaff;
+  --blue-150: #a1ddff;
+  --blue-200: #7cd0ff;
+  --blue-300: #57c3ff;
+  --blue-400: #32b6ff;
+  --blue-500: #1796dc;
+  --blue-600: #0274b3; /* همان primary */
+  --blue-700: #00598a;
+  --blue-800: #003f61;
+
+  /* Breakpoints */
+  /* --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1200px;
+  --breakpoint-xxl: 1400px; */
+}
+* {
+  margin: 0;
+  padding: 0;
+  direction: rtl;
+  box-sizing: border-box;
+  font-family: 'Yekan Bakh FaNum', sans-serif;
+  font-weight: normal;
+}
+html {
+  scroll-behavior: smooth;
+  /* scrollbar-gutter: stable; */
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: bold;
+  line-height: 1.5;
+  color: var(--color-title);
+}
+h1 {
+  font-size: 36px;
+}
+h2 {
+  font-size: 24px;
+}
+h3 {
+  font-size: 22px;
+}
+h4 {
+  font-size: 20px;
+}
+h5 {
+  font-size: 15px;
+}
+p {
+  line-height: 1.75;
+  font-size: 15px;
+  color: var(--color-text);
+}
+a {
+  text-decoration: none;
+  line-height: 1.75;
+  color: var(--blue-500);
+}
+div,
+span,
+button,
+a,
+li {
+  line-height: inherit;
+}
+i {
+  font-style: normal;
+}
+/* برای Chrome، Edge و Safari */
+
+@media (max-width: 767px) {
+  h1 {
+    font-size: 24px;
+  }
+  h2 {
+    font-size: 22px;
+  }
+  h3 {
+    font-size: 18px;
+  }
+  h4 {
+    font-size: 16px;
+  }
+  h5 {
+    font-size: 14px;
+  }
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  *::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: #fff;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--color-primary);
+    border-radius: 10px;
+    border: 3px solid #fff;
+  }
+}
+
+/* برای Firefox */
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-primary) #fff;
+  }
+}
+
+::selection {
+  background: var(--color-primary);
+  color: #fff;
+}
+
+/* Hide number arrows */
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+button {
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+}
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
--- a/src/img/Vector(1).png
+++ b/src/img/Vector(1).png
--- a/src/img/massage-send.svg
+++ b/src/img/massage-send.svg
--- a/src/templates/.gitkeep
+++ b/src/templates/.gitkeep
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'), // @ → src/
+      '@core': resolve(__dirname, 'src/core'),
+      '@components': resolve(__dirname, 'src/components'),
+    },
+  },
+
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+        contactus: resolve(__dirname, 'contactus.html'),
+      },
+    },
+    manifest: true,
+    cssCodeSplit: true,
+  },
+
+  server: {
+    open: true,
+    port: 5173,
+  },
+});