From 8b44dcdab5422ee38dba15fe80bebf2866415e24 Mon Sep 17 00:00:00 2001
From: Antima Mishra <114092138+Antima2004@users.noreply.github.com>
Date: Wed, 30 Oct 2024 10:30:50 +0530
Subject: [PATCH] add navbar

---
 views/contactUs.ejs | 162 ++------------------------------------------
 1 file changed, 4 insertions(+), 158 deletions(-)

diff --git a/views/contactUs.ejs b/views/contactUs.ejs
index b2201ceb..c255c10d 100644
--- a/views/contactUs.ejs
+++ b/views/contactUs.ejs
@@ -1,7 +1,3 @@
-<%- include('includes/PRE.ejs') %>
-  <%- include('includes/header.ejs') %>
-    <%- include('includes/navbar.ejs') %>
-      <%- include('includes/sidebar.ejs') %>
 
         <link rel="stylesheet" href="../public/css/style.css">
         <script src="https://kit.fontawesome.com/c4254e24a8.js"></script>
@@ -98,161 +94,11 @@
         </style>
         </head>
         <main>
-          <header>
-            <div class="navbar">
-              <div class="nav-container">
-                <!-- Dark mode toggle button -->
-                <div id="dark-mode-icon-mobile" class="dark-mode-toggle dark-mode-icon" onclick="toggleDarkMode()">
-                  <i class="fa-sharp fa-solid fa-sun"></i>
-                </div>
-                <div class="logo-image">
-                  <a href="/"><img src="imagine-ai-low-resolution-logo-color-on-transparent-background.png"
-                      class="home-logo" alt="home-logo" loading="lazy" />
-                  </a>
-                </div>
-                <div class="nav-links hide-sm nav-style" id="mainNav">
-                  <div class="left-nav-links navs">
-                    <div class="logo">
-                      <a class="AI white-color hover-effect <%= path === '/' ? 'active' : '' %>" href="/">HOME</a>
-                    </div>
-                    <div class="imagh">
-                      <a class="AI white-color hover-effect <%= path === '/generateImg' ? 'active' : '' %>"
-                        href="/generateImg">IMAGINE - AI</a>
-                    </div>
-                    <div class="abth">
-                      <a class="AI white-color hover-effect <%= path === '/aboutUs' ? 'active' : '' %>"
-                        class="AI white-color hover-effect <%= path === '/contactUs' ? 'active' : '' %>"
-                        href="/aboutUs">ABOUT - US</a>
-                    </div>
-                    <div class="conh">
-                      <a class="AI white-color hover-effect <%= path === '/contactUs' ? 'active' : '' %>"
-                        href="/contactUs">CONTACT - US</a>
-                    </div>
-                    <!-- Rest of the nav links -->
-                    <div class="team">
-                      <a class="AI white-color hover-effect <%= path === '/team' ? 'active' : '' %>"
-                        href="/team">COMMUNITY</a>
-                    </div>
-                    <!-- Rest of the right-nav-links -->
-
-                  </div>
-                  <div class="right-nav-links">
-                    <!-- Dark mode toggle button -->
-                    <div id="dark-mode-icon-desktop" class="dark-mode-toggle dark-mode-icon" onclick="toggleDarkMode()">
-                      <i class="fa-sharp fa-solid fa-sun"></i>
-                    </div>
-                    <div>
-                      <a class="AI white-color hover-effect" href="https://openai.com/dall-e-2/" target="_blank">DALL.E
-                        2 - OpenAI API</a>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <a class="login AI white-color" id="header-btn2" href="/login">Login</a>
-                </div>
-                <div onclick="toggleNavbar()" class="barIcon hide-lg hover-effect">
-                  <i class="fa-solid fa-bars"></i>
-                </div>
-              </div>
-            </div>
-          </header>
-
-          <style>
-            /*adjusting nav-bar elements*/
-            .nav-style {
-              display: flex;
-              justify-content: space-between;
-            }
-
-            .navs {
-              justify-content: space-evenly;
-            }
-
-            /*adding hover effects to each nav elements*/
-
-            .nav-container {
-              display: flex;
-              justify-content: space-evenly;
-              align-items: center;
-              width: 100%;
-            }
-
-            /* Light mode styles */
-            /* .light-mode {    } */
-            .AI {
-              display: inline-block;
-              padding: 10px;
-              margin-left: 25px;
-            }
-
-            /* Light mode styles
-          .light-mode {
-          } */
-
-            /* Dark mode styles */
-            .dark-mode {
-              background-color: #121212;
-              color: #ffffff;
-            }
-
-            /* Dark mode styles for navbar */
-            .dark-mode #navbar {
-              background-color: #121212;
-              color: #ffffff;
-            }
-
-            /* Dark mode styles for the about section */
-            .dark-mode .about {
-              background-color: #121212;
-              color: #ffffff;
-            }
-
-            /* Styles for the dark mode toggle button */
-            .dark-mode-toggle {
-              width: fit-content;
-              backdrop-filter: blur(4px);
-              padding: 5px;
-              border-radius: 50%;
-              cursor: pointer;
-              z-index: 999;
-            }
+          <%- include('includes/PRE.ejs') %>
+         <%- include('includes/header.ejs') %>
+         <%- include('includes/navbar.ejs') %>
+          <%- include('includes/sidebar.ejs') %>
 
-            .dark-mode-toggle i {
-              transition: transform 0.3s ease-in-out;
-              font-size: 1.1em;
-            }
-
-            #dark-mode-icon-mobile {
-              position: absolute;
-              right: 20%;
-              display: none;
-            }
-
-            #dark-mode-icon-desktop {
-              font-size: 1.1rem;
-              display: block;
-            }
-
-            @media (max-width: 989px) {
-              #dark-mode-icon-mobile {
-                display: block;
-              }
-
-              #dark-mode-icon-desktop {
-                display: none;
-              }
-            }
-
-            @media (max-width: 900px) {
-              .navbar {
-                display: none;
-              }
-
-              #dark-mode-icon-mobile {
-                display: block;
-              }
-            }
-          </style>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
           <section class="Contact-Us">
             <div class="contact-top" id="slide">