From 9b15bb03d56196709cafc27e0793e34516ef2711 Mon Sep 17 00:00:00 2001
From: aajaleel <86304133+aajaleel@users.noreply.github.com>
Date: Fri, 4 Aug 2023 15:15:44 -0400
Subject: [PATCH] Feature/cit 31 contact developers (#47)

* added contact page

* completed contact page

* [CIT-31] Fix unescaped chars

---------

Co-authored-by: Ishaan <ishaanupadhyay1004@gmail.com>
---
 citrus/app/(users)/contact/page.tsx          |  33 ++++++
 citrus/app/(users)/contact/styles.module.css | 113 +++++++++++++++++++
 citrus/app/(users)/layout.tsx                |  12 +-
 3 files changed, 152 insertions(+), 6 deletions(-)
 create mode 100644 citrus/app/(users)/contact/page.tsx
 create mode 100644 citrus/app/(users)/contact/styles.module.css

diff --git a/citrus/app/(users)/contact/page.tsx b/citrus/app/(users)/contact/page.tsx
new file mode 100644
index 0000000..40ebc9f
--- /dev/null
+++ b/citrus/app/(users)/contact/page.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+const AboutUsPage: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.logoAndContentContainer}>
+        <div className={styles.center}>
+          <h1 className={styles.heading}>- ABOUT US -</h1>
+          <p className={styles.description}>
+            Welcome to Eventual - your gateway to meaningful connections and exciting events! 
+          </p>
+          <p className={styles.description}>
+            Our platform allows you to connect with like-minded individuals, attend events, and share your own gatherings with the community. Whether it&apos;s discovering new hobbies, exploring your city&apos;s hidden gems, or simply making new friends, Eventual is here to make it happen.
+          </p>
+          <p className={styles.description}>
+            We take pride in providing exceptional tech support, available 24/7, to ensure your experience with us is seamless and enjoyable. Our team is always ready to assist, so you can focus on what matters most - connecting, engaging, and having a great time!
+          </p>
+          <p className={styles.phoneNumber}>Join us today and become a part of our thriving community. Let&apos;s create lasting memories and build meaningful connections together!</p>
+          <p className={styles.phoneNumber}>-</p>
+
+          <p className={styles.phoneNumber}>Phone: 647-324-8322</p>
+          <p className={styles.phoneNumber}>Email: techsupport@eventual.com</p>
+        </div>
+        <div className={styles.logoContainer}>
+          <img src="/eventual_logo.svg" alt="Logo" width={150} height={150} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AboutUsPage;
diff --git a/citrus/app/(users)/contact/styles.module.css b/citrus/app/(users)/contact/styles.module.css
new file mode 100644
index 0000000..b732fb0
--- /dev/null
+++ b/citrus/app/(users)/contact/styles.module.css
@@ -0,0 +1,113 @@
+.container {
+    display: flex;
+    justify-content: center;
+    height: 100vh;
+    background-color: rgb(1, 1, 32);
+    
+  }
+  .center {
+    text-align: center;
+  }
+  
+  .heading {
+    font-size: 50px;
+    font-weight: bold;
+    color: white;
+    margin-bottom: 20px;
+  }
+  
+  .description {
+    font-size: 20px;
+    color: white;
+    margin-bottom: 20px;
+    margin-left: 100px;
+    margin-right: 100px;
+
+  }
+  
+  .phoneNumber {
+    font-size: 24px;
+    color: white;
+  }
+  
+  .custom-heading {
+    font-size: 50px;
+  }
+
+  .custom-background {
+    background-color: rgb(1, 1, 32);
+  }
+
+  .custom-input {
+    border: 1px solid #ccc;
+    padding: 0.5rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    color: black;
+  }
+  .custom-box {
+    border: 1px solid #ccc;
+    padding: 1rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+
+    /* height: 100%; */
+  }
+  .custom-acc-button {
+    border: 1px solid #ccc;
+    padding:  0.5rem;
+    border-radius: 4px;
+  }
+
+  .container2 {
+    margin: 3in;
+  }
+  
+  .center8 {
+    text-align: center;
+    margin: 3in;
+
+  }
+  
+  .heading2 {
+    font-size: 2em;
+    margin-bottom: 1em;
+  }
+  
+  .description2 {
+    font-size: 1.2em;
+    line-height: 1.6;
+    margin-bottom: 1.5em;
+  }
+  
+  .phoneNumber {
+    font-size: 1.1em;
+  }
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: rgb(1, 1, 32);
+}
+
+.logoAndContentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 1rem; /* Adjust the margin-top value to move everything higher */
+}
+
+.logoContainer {
+  /* Add styles for the logo container */
+  text-align: center;
+}
+
+.logoContainer img {
+  width: 150px; /* Adjust the width to your desired size */
+  height: 150px; /* Adjust the height to your desired size */
+  margin: 50px; /* Add margin around the logo */
+}
+
+/* Add other styles as you have in your existing CSS */
diff --git a/citrus/app/(users)/layout.tsx b/citrus/app/(users)/layout.tsx
index abc19da..b0be4a0 100644
--- a/citrus/app/(users)/layout.tsx
+++ b/citrus/app/(users)/layout.tsx
@@ -6,6 +6,7 @@ import { authOptions } from '@/app/api/auth/[...nextauth]/route'
 import { getServerSession } from 'next-auth/next';
 import NavBarLogin from '@/components/NavBarLogin'
 import SessionProviderWrapper from '@/components/SessionProvider'
+import Link from 'next/link'; // Import the Link component
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -39,9 +40,6 @@ export default async function RootLayout({
                 <li className='flex-1'>
                   <a href="/">Home</a>
                 </li>
-                <li>
-                  <a href="/create">Create</a>
-                </li>
                 <li className='flex-1'>
                   <a href="/experiences">Experiences</a>
                 </li>
@@ -55,12 +53,14 @@ export default async function RootLayout({
               </ul>
             </nav>
           </header>
-          <div className='flex-1'>
+          <div className="flex-1" style={{ flex: '1 0 auto' }}>
             {correctUserType ? children : <h1>You are not logged in as the correct type of user.</h1>}
           </div>
-          <footer className='flex justify-center space-x-4 bg-blue-600
+          <footer className='flex justify-center space-x-4 bg-navy text-xl sticky bottom-0
           text-xl'>
-            <p>Test</p>
+            <Link href="/contact"> {/* Replace "your-desired-page-url" with the actual URL */}
+                <button>Contact Us</button> {/* Replace <p> with <button> */}
+            </Link>
           </footer>
         </SessionProviderWrapper>
       </body>