-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'Anu27n:main' into main
- Loading branch information
Showing
14 changed files
with
762 additions
and
1,035 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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%; | ||
| } | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Oops, something went wrong.