Added Contact Us Page

src/contactUs/ContactUs.css

@@ -0,0 +1,122 @@
+#contactUs {
+    background-color: #204E51;
+}
+
+#contactUs .info-container {
+    padding: min(6vw, 80px) 0;
+    max-width: 1920px;
+    margin: 0 auto;
+}
+
+#contactUs .container {
+    border-radius: 32px;
+    background-color: #fff;
+    max-width: min(94vw, 600px);
+    padding: min(5vw, 100px);
+    align-self: stretch;
+}
+
+#contactUs .left-col {
+    gap: 2rem !important;
+}
+
+.info-title {
+    font-size: 3rem;
+    margin-bottom: 1.5rem;
+}
+
+.info-description {
+    font-size: 2.5rem;
+    line-height: 1.4;
+}
+
+.info-description p {
+    margin-bottom: 0;
+}
+
+#contactUs a {
+    text-decoration: none;
+}
+
+.h3.text-break {
+    font-size: 1.5rem;
+}
+
+.email-us-btn {
+    color: #fff !important;
+    font-weight: bolder;
+    background-color: #204E51;
+    height: 45px;
+    width: 280px;
+    margin-top: -20px;
+    border: none;
+}
+
+.email-us-btn:hover {
+    background-color: #ADB5BD;
+}
+
+#contactUs #btn-show-on-mobile {
+    display: none;
+}
+
+@media (max-width: 992px) {
+    #contactUs {
+        padding-left: 6vw;
+        padding-right: 6vw;
+    }
+
+    .info-title {
+        font-size: 2rem;
+    }
+
+    .info-description {
+        font-size: 1.5rem;
+    }
+
+    #contactUs .left-col {
+        gap: 0.2rem !important;
+    }
+
+    .email-us-btn {
+        width: 22vw;
+        margin-top: 5px;
+    }
+}
+
+@media (max-width: 768px) {
+    #contactUs .container {
+        padding: min(3rem, 10vw);
+        max-width: 400px;
+    }
+
+    #contactUs .container .row {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2rem !important;
+    }
+
+    .info-title {
+        margin: 0 auto 5px;
+        font-size: 1.75rem;
+    }
+
+    .info-description {
+        font-size: 1.25rem;
+    }
+
+    #contactUs #btn-dont-show-on-mobile {
+        display: none;
+    }
+
+    #contactUs #btn-show-on-mobile {
+        display: block;
+        width: min(60vw, 240px);
+        margin: 2rem auto 0 !important;
+    }
+
+    #contactUs #btn-show-on-mobile button {
+        width: min(60vw, 240px);
+    }
+}

src/contactUs/ContactUs.jsx

@@ -1,5 +1,84 @@
 import React from "react";
+import { Container, Row, Col, Button } from "react-bootstrap";
+import { Mail } from "lucide-react";
+import "./ContactUs.css";
 
-export default function ContactUs() {
-  return <div>ContactUs</div>;
-}
+const EMAIL_TEMPLATE = {
+  mailto: "[email protected]",
+  subject: "Inquiry From AgriLens Website",
+  body: `Dear Team,
+
+I am reaching out to inquire about [specific topic or question]. I came across your platform and was particularly interested in [specific aspect or resource].
+
+Could you please provide more information on [specific request or question]?
+
+Thanks!
+[Your Name]
+[Your Affiliation]
+[Your Contact Information]`
+};
+
+const ContactUs = () => {
+  const handleEmailUs = (event) => {
+    const form = event.currentTarget;
+    if (form.checkValidity() === false) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
+  const mailtoLink = `mailto:${EMAIL_TEMPLATE.mailto}?subject=${encodeURIComponent(EMAIL_TEMPLATE.subject)}&body=${encodeURIComponent(EMAIL_TEMPLATE.body)}`;
+
+  return (
+    <div id="contactUs">
+      <div className="info-container">
+        <Container onSubmit={handleEmailUs}>
+          <Row className="mb-3 align-items-center">
+            <Col className="left-col p-0 d-flex flex-column">
+              <div className="info-title h1 text-primary">
+                Contact Us
+              </div>
+              <div className="info-description h6">
+                <p>
+                  Have a question? Want to learn more or get involved?
+                  <br />
+                  <br />
+                  Send us an email to get in touch with us!
+                </p>
+              </div>
+              <div className="d-flex align-items-center">
+                <div className="col-auto me-2 opacity-75 email-logo">
+                  <Mail size={24} />
+                </div>
+                <div>
+                  <p className="mb-0 h6 opacity-75">Email</p>
+                  <div className="h3 mb-0 text-break">
+                    {EMAIL_TEMPLATE.mailto}
+                  </div>
+                </div>
+              </div>
+              <a
+                href={mailtoLink}
+                id="btn-dont-show-on-mobile"
+              >
+                <Button className="email-us-btn" type="submit">
+                  Email Us!
+                </Button>
+              </a>
+            </Col>
+          </Row>
+          <a
+            href={mailtoLink}
+            id="btn-show-on-mobile"
+          >
+            <Button className="email-us-btn" type="submit">
+              Email Us!
+            </Button>
+          </a>
+        </Container>
+      </div>
+    </div>
+  );
+};
+
+export default ContactUs;