Merge pull request #10 from tedx-rit/section-contactus

Section contactus
tedxgecrit · Aug 17, 2023 · baccc2d · baccc2d
2 parents 7e7989a + 06d858a
commit baccc2d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 1 deletion.
diff --git a/src/app/page.js b/src/app/page.js
@@ -2,6 +2,7 @@ import Navbar from "@/components/Navbar";
 import LandingPage from "@/components/LandingPage";
 import Speakers from "@/components/Speakers";
 import Highlights from "@/components/Highlights";
+import ContactUs from "@/components/ContactUs";
 
 export default function Home() {
   return (
@@ -10,6 +11,7 @@ export default function Home() {
       <LandingPage />
       <Speakers />
       <Highlights />
+      <ContactUs />
     </main>
   );
 }
diff --git a/src/components/ContactUs.js b/src/components/ContactUs.js
@@ -0,0 +1,48 @@
+import Container from "@/components/utility/Container";
+import Heading from "@/components/utility/Heading";
+
+export default function ContactUs() {
+  return (
+    <Container section="contact">
+      <div className="h-screen w-full">
+        <Heading>Contact</Heading>
+        <div className="flex flex-col items-center text-center">
+          <div className="w-[73%] pt-[25px] text-center text-[20px] font-light md:w-[40%] md:text-[24px]">
+            Feel free to contact us if you have any questions, comments or
+            concerns
+          </div>
+          <form className="mt-10 h-[385px] w-full">
+            <div className="mb-[25px]">
+              <input
+                placeholder="Name"
+                type="text"
+                className="h-[45px] w-[82%] rounded-t-[5px] border-b-2  border-red bg-deepGrey pl-[10px] placeholder:text-[18px] placeholder:font-light focus:outline-none md:w-[50%]"
+                required
+              />
+            </div>
+            <div className="mb-[25px]">
+              <input
+                placeholder="Email/Phone"
+                type="text"
+                className="h-[45px] w-[82%] rounded-t-[5px] border-b-2  border-red bg-deepGrey pl-[10px] placeholder:text-[18px] placeholder:font-light focus:outline-none md:w-[50%]"
+                required
+              />
+            </div>
+            <textarea
+              placeholder="Your message..."
+              type="text"
+              className="h-[220px] w-[82%] resize-none rounded-t-[5px] border-b-2 border-red bg-deepGrey pl-[10px] pt-[10px] placeholder:text-[18px] placeholder:font-light  focus:outline-none md:w-[50%]"
+              required
+            />
+          </form>
+          <button
+            type="submit"
+            className="mt-[10px] h-[50px] w-[232px] rounded-[5px] bg-red text-[20px] font-semibold md:mt-[30px] md:w-[280px]"
+          >
+            SEND MESSAGE
+          </button>
+        </div>
+      </div>
+    </Container>
+  );
+}
diff --git a/src/components/Highlights.js b/src/components/Highlights.js
@@ -8,7 +8,7 @@ export default function Highlights() {
       <div className="mb-[550px] h-max">
         <Heading>Highlights</Heading>
         <div className="mt-[15px] flex h-auto w-full flex-col content-center items-center md:mt-[70px]">
-          <div className="mt-[110px absolute h-[130px] w-[95%] bg-[#DA0400] md:mt-[220px] md:h-[286px] md:w-[75%] lg:rounded-[5px]"></div>
+          <div className="mt-[110px absolute h-[130px] w-[95%] bg-red md:mt-[220px] md:h-[286px] md:w-[75%] lg:rounded-[5px]"></div>
           <div className="absolute h-[230px] w-[90%] md:h-[439px] md:w-[65%]">
             <VideoPlayer />
           </div>