contactus-v2

contactus-final
Initial commit
2026-06-15 09:22:16 +03:30 · 2026-06-14 10:26:08 +03:30 · 2026-06-13 14:16:16 +00:00
6 changed files with 139 additions and 106 deletions
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 # Inova - Frontend

 فرانت‌اند قالب وردپرس پروژه Inova
@@ -30,3 +31,7 @@ npm install
 # اجرای محیط توسعه
 npm run dev
 ```
+=======
+# contactus
+
+>>>>>>> 03a21c9ddbfa4f72d94be8d6392c258571cfc994
--- a/contactus.html
+++ b/contactus.html
@@ -16,7 +16,7 @@
             HERO
        ═══════════════════════════════════════════ -->
        <section class="hero-section">
-          <div class="container">
+          <div class="container-hero-section">
            <div class="hero-card">
              <div class="hero-circles" aria-hidden="true">
                <div class="circle circle--1"></div>
@@ -98,12 +98,12 @@
                    </div>

                    <div class="form-text">
-                      <label class="required-label">متن درخواست </label>
+                      <label>متن درخواست </label>
                      <textarea id="message"></textarea>
                    </div>

                    <button type="submit" class="form-btn" id="submitBtn">
-                      <span class="btn-text">ثبت درخواست</span>
+                      <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">
@@ -136,14 +136,14 @@
                    </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" />
+                        <img id="logo-customer1" src="./public/images/logo 4.png" />
+                        <img id="logo-customer2" src="./public/images/logo 5.png" />
+                        <img id="logo-customer3" src="./public/images/logo 6.png" />
+                        <img id="logo-customer4" src="./public/images/logo1.png" />
+                        <img id="logo-customer5" src="./public/images/logo2.png" />
+                        <img id="logo-customer6" src="./public/images/logo3.png" />
+                        <img id="logo-customer7" src="./public/images/logo7.png" />
+                        <img id="logo-customer8" src="./public/images/logo8.png" />
                      </div>
                    </div>
                  </div>
@@ -516,9 +516,10 @@
        <section class="map-section">
          <div class="container">
            <div class="map-card">
+              <span class="map-txt"> خیابان ناوک</span>
              <img
                class="map-card__img"
-                src="./public/images/Map.png"
+                src="./public/images/Map4X.png"
                alt="نقشه دفتر اینوا - خیابان ناوک، تهران"
              />

--- a/public/images/Map.png
+++ b/public/images/Map.png
--- a/public/images/Map4X.png
+++ b/public/images/Map4X.png
--- a/src/assets/css/contactus-responsive.css
+++ b/src/assets/css/contactus-responsive.css
@@ -108,27 +108,25 @@
 ═══════════════════════════════════════════════════════ */
@media screen and (max-width: 576px) {
  .hero-section {
-    padding-top: 24px;
-    padding-bottom: 32px;
+    padding-bottom: 50px;
  }
-
+.container-hero-section{
+  padding: 0 ;
+}
+.hero-card {
+  height: 400px;
+  border-radius: 0;
+}
  .hero-content {
    width: 100%;
  }
-
+.contact-form-wrapper{
+  padding: 0;
+}
  .hero-h1 {
-    font-size: 20px;
+    font-size: 24px;
    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;
--- a/src/assets/css/contactus.css
+++ b/src/assets/css/contactus.css
@@ -7,15 +7,15 @@
  margin: 0 auto;
 }

-main {
-  padding-bottom: 80px;
-}
-
 /* ═══════════════════════════════════════════════════════
   HERO
 ═══════════════════════════════════════════════════════ */
+.container-hero-section{
+    max-width: 1240px;
+  padding: 0 20px;
+  margin: 0 auto;
+}
 .hero-section {
-  padding-top: 80px;
  padding-bottom: 50px;
 }

@@ -31,7 +31,6 @@ main {
  justify-content: center;
 }

-
 .hero-content {
  position: relative;
  z-index: 1;
@@ -71,11 +70,26 @@ main {
  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); }
-
+.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;
@@ -86,14 +100,14 @@ main {
  top: 75%;
  transform: translateY(-50%);
  pointer-events: none;
-    filter: blur(250px);
+  filter: blur(250px);
 }
-.hero-hollow--left  {  
+.hero-hollow--left {
  left: -290px;
 }
-.hero-hollow--right { 
+.hero-hollow--right {
  right: -290px;
- }
+}

 .hero-dot-pattern {
  position: absolute;
@@ -103,15 +117,13 @@ main {
  pointer-events: none;
  opacity: 0.4;
 }
-.contactus-hands{
-    position: absolute;
+.contactus-hands {
+  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
 }

-
-
 /* ═══════════════════════════════════════════════════════
   CONTACT SECTION
 ═══════════════════════════════════════════════════════ */
@@ -199,7 +211,6 @@ main {
  overflow: hidden;
 }

-
 .contact-item__body {
  flex: 1;
  display: flex;
@@ -262,7 +273,7 @@ main {
  display: flex;
  flex-direction: column;
  gap: 16px;
-  align-items:flex-start ;
+  align-items: flex-start;
 }

 .contact-social__label {
@@ -345,21 +356,20 @@ main {
 .form-input input:focus,
 .form-text textarea:focus {
  border-color: var(--color-primary);
- background-color: #EAF7FF;
+  background-color: #eaf7ff;
 }
 .error-message {
-  color: #DC2626;
+  color: #dc2626;
  font-size: 13px;
  margin-top: 6px;
  display: block;
 }

 .input-error {
-  background-color: #FFEBEB !important;
+  background-color: #ffebeb !important;
  border-color: #ef4444 !important;
 }

-
 /* ── Brands logos scroll ── */
 .form-brands {
  display: flex;
@@ -393,22 +403,10 @@ main {
  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%
-  );
+  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 {
@@ -429,26 +427,16 @@ main {
 }

@keyframes logos-scroll {
-  from { transform: translateX(-1%); }
-  to   { transform: translateX(50%); }
+  from {
+    transform: translateX(-1%);
+  }
+  to {
+    transform: translateX(50%);
+  }
 }

-
-
-
-
-
-
-
-
-
-
-
-
-
-
 form {
-  display: flex;
+  /* display: flex; */
  flex-wrap: wrap;
  gap: 16px;
 }
@@ -476,7 +464,7 @@ textarea {
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-title);
-  background-color: #f9f9f9;
+  background-color: #ffffff;
 }
 textarea {
  min-height: 114px;
@@ -485,6 +473,7 @@ textarea {
 .form-input {
  flex-basis: 48%;
  position: relative;
+  margin-bottom: 16px;
 }
 .label {
  display: block;
@@ -536,7 +525,7 @@ textarea {
 .option {
  padding: 0px 12px;
  height: 38px;
-  font-size: 17px;
+  font-size: 13px;
  transition: 0.2s;
  background-color: #f9f9f9;
  display: flex;
@@ -548,12 +537,14 @@ textarea {
 }
 .form-text {
  flex-basis: 98%;
+  font-size: 14px;
+  margin-bottom: 16px;
 }
 .form-btn {
  background-color: var(--color-primary);
  border: none;
  border-radius: 10px;
-  padding: 10px 12px 10px 10px;
+  padding: 10px 24px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -657,13 +648,11 @@ textarea {
  text-align: center;
 }

-
 /* ═══════════════════════════════════════════════════════
   PROCESS STEPS
 ═══════════════════════════════════════════════════════ */
 .steps-section {
  padding-bottom: 100px;
-
 }

 .steps-header {
@@ -711,7 +700,9 @@ textarea {
  border-radius: 16px;
  overflow: hidden;
  text-align: right;
-  transition: background-color 0.3s ease, color 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
  background-image: url(/src/img/Vector\(1\).png);
  z-index: 1;
 }
@@ -731,8 +722,8 @@ textarea {
 .step-card:hover::before {
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
 } */
- .step-card::before {
-  content: "";
+.step-card::before {
+  content: '';
  position: absolute;

  width: 400%;
@@ -755,7 +746,6 @@ textarea {
  transform: scale(1);
 }

-
 .step-card > * {
  position: relative;
  z-index: 2;
@@ -773,7 +763,7 @@ textarea {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  white-space: nowrap;
-  transition: border-color 0.3s ease, color 0.3s ease;
+  /* transition: border-color 0.3s ease, color 0.3s ease; */
 }

 .step-card__icon {
@@ -803,7 +793,7 @@ textarea {
  line-height: 28px;
  color: var(--color-text);
  white-space: nowrap;
-  transition: color 0.3s ease;
+  /* transition: color 0.3s ease; */
 }

 .step-card__desc {
@@ -811,7 +801,7 @@ textarea {
  font-weight: 400;
  line-height: 26px;
  color: var(--color-body-text);
-  transition: color 0.3s ease;
+  /* transition: color 0.3s ease; */
 }

 /* ─── Hover: ALL cards turn blue ────────────────── */
@@ -820,7 +810,29 @@ textarea {
  opacity: 0.15; /* dim the pattern so it doesn't clash with the blue bg */
 }
 .step-card__meta svg {
-  color: var(--color-primary) ;
+  color: var(--color-primary);
+}
+/* .step-card {
+  color: var(--color-text);
+} */
+
+.step-card:hover {
+  color: #fff;
+}
+
+.step-card__title,
+.step-card__desc,
+.step-card__badge,
+.step-card__meta svg {
+  transition:
+    color ease 0.3s,
+    border-color ease 0.3s;
+}
+.step-card:hover .step-card__title,
+.step-card:hover .step-card__desc,
+.step-card:hover .step-card__badge,
+.step-card:hover .step-card__meta svg {
+  transition-delay: 0.3s;
 }
 .step-card:hover .step-card__meta svg {
  color: #ffffff;
@@ -841,9 +853,6 @@ textarea {
 /* ═══════════════════════════════════════════════════════
   MAP
 ═══════════════════════════════════════════════════════ */
-.map-section {
-  padding-bottom: 80px;
-}

 .map-card {
  position: relative;
@@ -867,7 +876,28 @@ textarea {
  border-radius: 48px;
  pointer-events: none;
 }
+.map-txt {
+  position: absolute;
+  top: 43%;
+  left: 56%;
+  transform: translate(-50%, -50%);
+  color: #556574;
+  font-size: 12px;
+  z-index: 10;

+  text-shadow:
+    -1px 0 #fff,
+    1px 0 #fff,
+    0 -1px #fff,
+    0 1px #fff,
+    -1px -1px #fff,
+    1px -1px #fff,
+    -1px 1px #fff,
+    1px 1px #fff;
+}
+.map-txt::before {
+  -webkit-text-stroke: 2px #fff;
+}
 .map-card__location {
  position: absolute;
  left: 56%;
@@ -878,22 +908,21 @@ textarea {
  display: flex;
  align-items: center;
  justify-content: center;
-  
 }

 .map-location-dot {
  position: relative;
  display: block;
-  width: 12px;
-  height: 12px;
-  background-color: #0274B3;
+  width: 18px;
+  height: 18px;
+  background-color: #0274b3;
  border-radius: 50%;
  border: 2.2px solid #ffffff;
  z-index: 100;
 }
 .map-card__location::before,
 .map-card__location::after {
-  content: "";
+  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
@@ -901,7 +930,7 @@ textarea {
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
-  background: #0274B3;
+  background: #0274b3;
  z-index: -1;
  animation: locationPulse 2s infinite ease-out;
  filter: blur(2px);
@@ -926,7 +955,7 @@ textarea {
 .map-card__nav {
  position: absolute;
  right: 40px;
-  bottom: 40px;
+  bottom: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
Author	SHA1	Message	Date
Azita Rahimi	c1e58add50	contactus-v2	2026-06-15 09:22:16 +03:30
Azita Rahimi	1d046fa445	contactus-final	2026-06-14 10:26:08 +03:30
AzitaRahimi	03a21c9ddb	Initial commit	2026-06-13 14:16:16 +00:00