contactus-v2

README.md

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 # Inova - Frontend
 
 فرانت‌اند قالب وردپرس پروژه Inova
@@ -30,3 +31,7 @@ npm install
 # اجرای محیط توسعه
 npm run dev
 ```
+=======
+# contactus
+
+>>>>>>> 03a21c9ddbfa4f72d94be8d6392c258571cfc994

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 id="logo-customer1" src="./public/images/logo 4.png" />
-                        <img src="./public/images/logo 5.png" />
+                        <img id="logo-customer2" src="./public/images/logo 5.png" />
-                        <img src="./public/images/logo 6.png" />
+                        <img id="logo-customer3" src="./public/images/logo 6.png" />
-                        <img src="./public/images/logo1.png" />
+                        <img id="logo-customer4" src="./public/images/logo1.png" />
-                        <img src="./public/images/logo2.png" />
+                        <img id="logo-customer5" src="./public/images/logo2.png" />
-                        <img src="./public/images/logo3.png" />
+                        <img id="logo-customer6" src="./public/images/logo3.png" />
-                        <img src="./public/images/logo7.png" />
+                        <img id="logo-customer7" src="./public/images/logo7.png" />
-                        <img src="./public/images/logo8.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="نقشه دفتر اینوا - خیابان ناوک، تهران"
               />
 

src/assets/css/contactus-responsive.css

@@ -108,27 +108,25 @@
 ═══════════════════════════════════════════════════════ */
 @media screen and (max-width: 576px) {
   .hero-section {
-    padding-top: 24px;
+    padding-bottom: 50px;
-    padding-bottom: 32px;
   }
-
+.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;

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--1 {
-.circle--2 { width: 616px; height: 616px; background-color: rgba(216, 233, 255, 0.4); }
+  width: 698px;
-.circle--3 { width: 534px; height: 534px; background-color: rgba(216, 233, 255, 0.6); }
+  height: 698px;
-.circle--4 { width: 452px; height: 452px; background-color: rgba(216, 233, 255, 0.8); }
+  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{
+.contactus-hands {
-    position: absolute;
+  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(
+  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
-    90deg,
+
-    transparent 0%,
+  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
-    black 8%,
-    black 92%,
-    transparent 100%
-  );
 }
 
 .logos-track {
@@ -429,26 +427,16 @@ main {
 }
 
 @keyframes logos-scroll {
-  from { transform: translateX(-1%); }
+  from {
-  to   { transform: translateX(50%); }
+    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 {
+.step-card::before {
-  content: "";
+  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;
+  width: 18px;
-  height: 12px;
+  height: 18px;
-  background-color: #0274B3;
+  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;