Merge pull request #119 from Anas-Rehberlik/contact-us-page

feat: added contact-us page with responsive design

src/App.js

@@ -10,6 +10,8 @@ import Modal from './Modal';
 import Services from "./Pages/Services/Services";
 import Blogs from "./Pages/Blogs/Blogs";
 import BlogPost from "./Pages/Blogs/BlogPost";
+import Contact from './Pages/Contact/Contact';
+
 
 
 function App() {
@@ -23,6 +25,8 @@ function App() {
                   <Route path="/services" element={<Services />} />
                   <Route path="/blogs" element={<Blogs />} />
                   <Route path="/blogs/:id" element={<BlogPost />} />
+                  <Route path="/contact" element={<Contact />} />
+
               </Routes>
           </Router>
       </PreloaderContainer>

src/Navbar.js

@@ -129,7 +129,7 @@ function Navbar() {
                 </a>
               </li>
               <li className="navbar-item">
-                <a href="/#" className="navbar-link hover-underline">
+                <a href="/Contact" className="navbar-link hover-underline">
                   <div className="separator"></div>
                   <span className="span">Contact</span>
                 </a>

src/Pages/Contact/Contact.js

@@ -0,0 +1,36 @@
+import React from "react";
+import ContactInfo from "./ContactInfo";
+import DirectorInfo from "./DirectorInfo";
+import ContactForm from "./ContactForm";
+import Navbar from "../../Navbar";
+import styles from "../Contact/Contact.module.css";
+
+
+function Contact() {
+  return (
+    <div>
+
+                  <Navbar/>
+
+
+    <section className={styles.background}>
+      <div className={styles.container}>
+        <div className={styles.infoRow}>
+          <div className={styles.contactColumn}>
+            <ContactInfo />
+          </div>
+          <div className={styles.directorColumn}>
+            <DirectorInfo />
+          </div>
+        </div>
+        <div className={styles.formRow}>
+          <ContactForm />
+        </div>
+      </div>
+    </section>
+    </div>
+
+  );
+}
+
+export default Contact;

src/Pages/Contact/Contact.module.css

@@ -0,0 +1,174 @@
+.background {
+  background-color: var(--eerie-black-1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--section-space) 80px 263px;
+}
+
+
+.container {
+  width: 100%;
+  max-width: 1388px;
+  padding-top: 40px;
+}
+
+.infoRow {
+  display: flex;
+  justify-content: space-between;
+  gap: 50px;
+  margin-bottom: 40px;
+}
+
+.contactColumn, .directorColumn {
+  flex: 1;
+}
+
+.formRow {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.contactInfo, .directorInfo {
+  font-family: var(--fontFamily-forum);
+  color: var(--white);
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: var(--radius-24);
+}
+
+
+
+.title {
+  color: var(--white);
+  font-size: var(--fontSize-title-1);
+  line-height: var(--lineHeight-1);
+  margin-bottom: 46px;
+}
+
+  .highlight {
+    color: #eab308;
+    display: inline; 
+
+  }
+
+
+  .detailItem {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 18px;
+    color: var(--white);
+}
+
+  .icon {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+  }
+
+  .message, .directorMessage {
+    font-size: var(--fontSize-body-3);
+    line-height: var(--lineHeight-5);
+    margin-top: 45px;
+}
+
+  .directorImage {
+    width: 180px;
+    height: 180px;
+    object-fit: contain;
+  }
+
+  .directorName {
+    color: #eab308;
+    font-size: 30px;
+    font-weight: 600;
+    line-height: 1.2;
+    margin: 18px 0 24px;
+  }
+
+  .formWrapper {
+    background-color: var(--white);
+    border-radius: var(--radius-24);
+    box-shadow: var(--shadow-1);
+    padding: 36px;
+    width: 50%;
+}
+
+.formTitle {
+  font-family: var(--fontFamily-dm_sans);
+  color: var(--eerie-black-4);
+  font-size: var(--fontSize-title-2);
+  font-weight: var(--weight-bold);
+  text-align: center;
+  margin-bottom: 37px;
+}
+  .formGroup {
+    margin-bottom: 29px;
+  }
+
+  .label {
+    color: #374151;
+    font-size: 16px;
+    font-weight: 600;
+    display: block;
+    margin-bottom: 10px;
+  }
+
+  .input,
+  .select,
+  .textarea {
+    width: 100%;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    padding: 10px;
+  }
+
+  .textarea {
+    height: 114px;
+    resize: vertical;
+  }
+
+  .buttonGroup {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    margin-top: 31px;
+  }
+
+  .submitButton,
+  .resetButton {
+    border-radius: 8px;
+    font-weight: 700;
+    padding: 14px 20px;
+    cursor: pointer;
+  }
+
+  .submitButton {
+    background-color: #d1d5db;
+    color: #9ca3af;
+  }
+
+  .resetButton {
+    background-color: #e5e7eb;
+    color: #374151;
+  }
+
+  @media (max-width: 991px) {
+    .background {
+      padding: 100px 20px;
+    }
+
+    .infoRow {
+      flex-direction: column;
+    }
+
+    .contactColumn,
+    .directorColumn {
+      width: 100%;
+    }
+
+    .formWrapper {
+      width: 100%;
+    }
+  }
+

src/Pages/Contact/ContactForm.js

@@ -0,0 +1,52 @@
+import React from "react";
+import styles from "../Contact/Contact.module.css";
+
+function ContactForm() {
+  const formFields = [
+    { label: "Name", type: "text", required: true },
+    { label: "Phone", type: "tel", required: true },
+    { label: "Email", type: "email", required: true },
+    { label: "Preferred Location", type: "text", required: true },
+    { label: "Company", type: "text", required: true },
+    { label: "Number of Seats", type: "number", required: true },
+    { label: "Requirements", type: "select", required: true, options: ["Select an option"] },
+    { label: "Specifications", type: "textarea", required: false }
+  ];
+
+  return (
+    <div className={styles.formWrapper}>
+      <h2 className={styles.formTitle}>Contact Form</h2>
+      <form className={styles.contactForm}>
+        {formFields.map((field, index) => (
+          <div key={index} className={styles.formGroup}>
+            <label htmlFor={`field-${index}`} className={styles.label}>
+              {field.label}{field.required && "*"}
+            </label>
+            {field.type === "select" ? (
+              <select id={`field-${index}`} className={styles.select} required={field.required}>
+                {field.options.map((option, optionIndex) => (
+                  <option key={optionIndex} value={option}>{option}</option>
+                ))}
+              </select>
+            ) : field.type === "textarea" ? (
+              <textarea id={`field-${index}`} className={styles.textarea} required={field.required} />
+            ) : (
+              <input
+                type={field.type}
+                id={`field-${index}`}
+                className={styles.input}
+                required={field.required}
+              />
+            )}
+          </div>
+        ))}
+        <div className={styles.buttonGroup}>
+          <button type="submit" className={styles.submitButton}>Send</button>
+          <button type="reset" className={styles.resetButton}>Reset</button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default ContactForm;

src/Pages/Contact/ContactInfo.js

@@ -0,0 +1,41 @@
+import React from "react";
+import styles from "../Contact/Contact.module.css";
+
+function ContactInfo() {
+  const contactDetails = [
+    {
+      icon: "https://cdn.builder.io/api/v1/image/assets/TEMP/958699ee12c6a4ef3593b10d130a31ec8f048b417d213f80cccf13b236a4421a?placeholderIfAbsent=true&apiKey=1672e7c4d6074833a4108dd5d99bcb2e",
+      text: "Makhija Arcade, 35th Rd, Khar West, Mumbai, Maharashtra 400052",
+      alt: "Location icon"
+    },
+    {
+      icon: "https://cdn.builder.io/api/v1/image/assets/TEMP/fc0d0a2dccaa0032e1e5c427bfac491b92e861da7348cf967e59cbcbd187cd1c?placeholderIfAbsent=true&apiKey=1672e7c4d6074833a4108dd5d99bcb2e",
+      text: "sales@603thecoworkingspace.com",
+      alt: "Email icon"
+    },
+    {
+      icon: "https://cdn.builder.io/api/v1/image/assets/TEMP/a31c1d327de4de80b1f27deeb28757d4835338219cf9c11c367ebb72a1a32db2?placeholderIfAbsent=true&apiKey=1672e7c4d6074833a4108dd5d99bcb2e",
+      text: "+91 9136036603",
+      alt: "Phone icon"
+    }
+  ];
+
+  return (
+    <div className={styles.contactInfo}>
+      <h2 className={styles.title}>
+        Connect with <span className={styles.highlight}>603</span>
+      </h2>
+      {contactDetails.map((detail, index) => (
+        <div key={index} className={styles.detailItem}>
+          <img loading="lazy" src={detail.icon} alt={detail.alt} className={styles.icon} />
+          <div className={styles.detailText}>{detail.text}</div>
+        </div>
+      ))}
+      <p className={styles.message}>
+        Our team is dedicated to assisting you and answering any questions. We eagerly await the opportunity to connect with you.
+      </p>
+    </div>
+  );
+}
+
+export default ContactInfo;

src/Pages/Contact/DirectorInfo.js

@@ -0,0 +1,22 @@
+import React from "react";
+import styles from "../Contact/Contact.module.css";
+import directorimage from "../../images/directorimage.png"; 
+
+function DirectorInfo() {
+  return (
+    <div className={styles.directorInfo}>
+       <img
+        loading="lazy"
+        src={directorimage}  
+        alt="Kunal Kataria, Director"
+        className={styles.directorImage}
+      />
+      <h3 className={styles.directorName}>Kunal Kataria, Director</h3>
+      <p className={styles.directorMessage}>
+        At 603, we represent Success, Infinity, and Energy. Our mission is to foster your business's achievements and create a lasting impact. Should we be able to enhance your accomplishments even slightly, we would be honored to assist. With our dedicated team, we offer unparalleled support and commitment.
+      </p>
+    </div>
+  );
+}
+
+export default DirectorInfo;