added contact page an removed some lorem content

assets/css/main.css

@@ -368,7 +368,7 @@ h6 {
     color: var(--nav-dropdown-color);
     padding: 10px 20px;
     font-family: var(--nav-font);
-    font-size: 17px;
+    font-size: 14px;
     font-weight: 500;
     display: flex;
     align-items: center;
@@ -457,6 +457,13 @@ h6 {
   .mobile-nav-active .navmenu>ul {
     display: block;
   }
+  .navmenu .dropdown.mega-menu ul{
+    display: none !important;
+    padding: 0px !important;
+  }
+  .navmenu .dropdown.mega-menu>.dropdown-active{
+    display: block !important;
+  }
 }
 
 /*--------------------------------------------------------------

assets/js/main.js

@@ -150,6 +150,18 @@
         }, 100);
       }
     }
+    const page = window.location.pathname;
+    document.querySelectorAll('#navmenu li').forEach(item => {
+      // Your logic here
+      debugger;
+      const link = item.querySelector('a');
+      let route = link.getAttribute('href');
+      if(page !== '/')
+        route = '/'+route;
+      if(route === page)
+        link.classList.add('active')
+      console.log(item.textContent); // Example: logs the text content of each <li>
+  });
   });
 
   /**

assets/js/navbar.js

@@ -9,7 +9,7 @@ const html = `<div
 
     <nav id="navmenu" class="navmenu">
         <ul>
-            <li><a href="/" class="active">Home</a></li>
+            <li><a href="/">Home</a></li>
             <li><a href="about.html">About</a></li>
             <li class="dropdown"><a href="#"><span>Products</span> <i
                         class="bi bi-chevron-down toggle-dropdown"></i></a>
@@ -17,15 +17,15 @@ const html = `<div
                     <li><a href="zeno-aio-landing.html">Laptops</a></li>
                     <li><a href="zeno-aio-landing.html">All In One's</a></li>
                     <li><a href="#">Servers</a></li>
-                    <li><a href="#">AI NVR (Coming Soon)</a></li>
-                    <li><a href="#">Racks</a></li>
+                    <li class="d-none"><a href="#">AI NVR (Coming Soon)</a></li>
+                    <li class="d-none"><a href="#">Racks</a></li>
                 </ul>
             </li>
             <li class="dropdown mega-menu"><a href="#"><span>Solutions</span> <i
                         class="bi bi-chevron-down toggle-dropdown"></i></a>
                 <ul>
-                    <li>
-                        <span class="text-primary ps-2">Supply Chain Solutions</span>
+                    <li class="mt-md-0 mt-3">
+                        <h6 class="text-primary ps-2 mb-2">Supply Chain Solutions</h6>
                         <div>
                             <div><a href="dealer-automation.html">Dealer Automation</a></div>
                             <div><a href="secondary-sales.html">Secodary Sales </a></div>
@@ -35,15 +35,15 @@ const html = `<div
                             <div><a href="track-and-trace.html">Track and Trace </a></div>
                         </div>
                     </li>
-                    <li>
-                        <span class="text-primary ps-2">Process Automation</span>
+                    <li class="mt-md-0 mt-3">
+                        <h6 class="text-primary ps-2 mb-2">Process Automation</h6>
                         <div>
                             <div><a href="enterprises.html">Enterprises</a></div>
                             <div><a href="govermnets.html">Governments</a></div>
                             <div><a href="small-businesses.html">Small Businesses</a></div>
                         </div>
                     </li>
-                    <li><span class="text-primary ps-2">VMS</span>
+                    <li class="mt-md-0 mt-3"><h6 class="text-primary ps-2 mb-2">VMS</h6>
                         <div>
                             <div><a href="integrated-video-solutions.html">Integrated Video Solutions</a></div>
                             <div><a href="video-storage-solutions.html">Video Storage Solutions</a></div>
@@ -80,12 +80,12 @@ const html = `<div
                 </ul>
             </li>
                 <li><a href="#">Investors</a></li>
-                <li><a href="#">Contact</a></li>
+                <li><a href="contact.html">Contact</a></li>
         </ul>
         <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
     </nav>
 
-    <a class="btn-getstarted d-none" href="#">Get Started</a>
+    <a class="btn-getstarted" href="#">Get Started</a>
 
 </div>`;
     document.getElementById('header').innerHTML = html;

contact.html

@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta content="width=device-width, initial-scale=1.0" name="viewport">
+  <title>ADM - ARIA Digital Machines</title>
+  <meta name="description" content="">
+  <meta name="keywords" content="">
+
+  <!-- Favicons -->
+  <link href="assets/img/favicon.png" rel="icon">
+  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
+
+  <!-- Fonts -->
+  <link href="https://fonts.googleapis.com" rel="preconnect">
+  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet">
+
+  <!-- Vendor CSS Files -->
+  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
+  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
+  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
+  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
+
+  <!-- Main CSS File -->
+  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
+  <link href="assets/css/main.css" rel="stylesheet">
+</head>
+
+<body class="index-page">
+
+  <header id="header" class="header d-flex align-items-center fixed-top">
+  </header>
+
+  <main class="main">
+
+    <!-- Hero Section -->
+    <section id="hero" class="hero section">
+
+      <div class="container" data-aos="fade-up" data-aos-delay="100">
+
+        <div class="row align-items-center">
+          <div class="col-lg-6">
+            <div class="hero-content" data-aos="fade-up" data-aos-delay="200">
+              <h1 class="mb-4">
+                Get in Touch
+              </h1>
+
+              <p class="mb-4 mb-md-5">
+                We’re here to help you! Whether you have a question, need assistance, or want to learn more about our
+                services, feel free to contact us. Our team is dedicated to providing the support you need to succeed in
+                the digital age.
+              </p>
+            </div>
+          </div>
+
+          <div class="col-lg-6">
+            <div class="hero-image" data-aos="zoom-out" data-aos-delay="300">
+              <img src="assets/img/contact.png" alt="Contact Us" class="img-fluid">
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </section><!-- /Hero Section -->
+
+    <!-- Contact Section -->
+    <section id="contact" class="contact section light-background">
+
+      <!-- Section Title -->
+      <div class="container section-title" data-aos="fade-up">
+        <h2>Contact</h2>
+        <p>Have a question? Need support? Reach out to us through the details below or send us a message using the form.
+        </p>
+      </div><!-- End Section Title -->
+
+      <div class="container" data-aos="fade-up" data-aos-delay="100">
+
+        <div class="row g-4 g-lg-5">
+          <div class="col-lg-5">
+            <div class="info-box" data-aos="fade-up" data-aos-delay="200">
+              <h3>Contact Information</h3>
+              <p>We are here to assist you. Feel free to reach out through any of the provided contact methods.</p>
+
+              <div class="info-item" data-aos="fade-up" data-aos-delay="300">
+                <div class="icon-box">
+                  <i class="bi bi-geo-alt"></i>
+                </div>
+                <div class="content">
+                  <h4>Our Locations</h4>
+                  <p>San Francisco</p>
+                  <p>Kabul</p>
+                  <p>Dubai</p>
+                  <p>Hyderabad</p>
+                </div>
+              </div>
+
+              <div class="info-item" data-aos="fade-up" data-aos-delay="400">
+                <div class="icon-box">
+                  <i class="bi bi-telephone"></i>
+                </div>
+                <div class="content">
+                  <h4>Phone</h4>
+                  <a href="tel:+1 510-566-5747 ">+1 510-566-5747 </a>
+                  <!-- <p>+91 12345 67890</p> -->
+                </div>
+              </div>
+
+              <div class="info-item" data-aos="fade-up" data-aos-delay="500">
+                <div class="icon-box">
+                  <i class="bi bi-envelope"></i>
+                </div>
+                <div class="content">
+                  <h4>Email</h4>
+                  <a href="mailto:sarwari@ariadigitalmachines.com">sarwari@ariadigitalmachines.com</a>
+                  <!-- <p>info@ariadigitalmachines.com</p> -->
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-lg-7">
+            <div class="contact-form" data-aos="fade-up" data-aos-delay="300">
+              <h3>Send Us a Message</h3>
+              <p>Have questions or feedback? Fill out the form below, and we’ll get back to you as soon as possible.</p>
+
+              <form action="forms/contact.php" method="post" class="php-email-form" data-aos="fade-up"
+                data-aos-delay="200">
+                <div class="row gy-4">
+
+                  <div class="col-md-6">
+                    <input type="text" name="name" class="form-control" placeholder="Your Name" required="">
+                  </div>
+
+                  <div class="col-md-6">
+                    <input type="email" class="form-control" name="email" placeholder="Your Email" required="">
+                  </div>
+
+                  <div class="col-12">
+                    <input type="text" class="form-control" name="subject" placeholder="Subject" required="">
+                  </div>
+
+                  <div class="col-12">
+                    <textarea class="form-control" name="message" rows="6" placeholder="Your Message"
+                      required=""></textarea>
+                  </div>
+
+                  <div class="col-12 text-center">
+                    <div class="loading">Loading...</div>
+                    <div class="error-message"></div>
+                    <div class="sent-message">Your message has been sent. Thank you!</div>
+
+                    <button type="submit" class="btn btn-primary">Send Message</button>
+                  </div>
+
+                </div>
+              </form>
+
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+    </section><!-- /Contact Section -->
+
+  </main>
+
+
+  <footer id="footer" class="footer">
+  </footer>
+
+  <!-- Scroll Top -->
+  <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i
+      class="bi bi-arrow-up-short"></i></a>
+
+  <!-- Vendor JS Files -->
+  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+  <script src="assets/vendor/php-email-form/validate.js"></script>
+  <script src="assets/vendor/aos/aos.js"></script>
+  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
+  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
+  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
+
+  <!-- Main JS File -->
+
+  <!-- header and footer js files  -->
+  <script src="assets/js/navbar.js"></script>
+  <script src="assets/js/footer.js"></script>
+  <script src="assets/js/main.js"></script>
+
+</body>
+
+</html>

index.html

@@ -225,7 +225,7 @@
       <!-- Section Title -->
       <div class="container section-title" data-aos="fade-up">
         <h2>What's New</h2>
-        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
+        <!-- <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p> -->
       </div><!-- End Section Title -->
 
       <div class="container">
@@ -744,7 +744,7 @@
       <!-- Section Title -->
       <div class="container section-title" data-aos="fade-up">
         <h2>Pre-configured Workflows</h2>
-        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
+        <!-- <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p> -->
       </div><!-- End Section Title -->
 
       <div class="container" data-aos="fade-up" data-aos-delay="100">
@@ -760,7 +760,7 @@
                 <h3>Pre-Sales</h3>
                 <p>Rigid CRM does not work for every business, which is why our pre-sales workflows are adaptable to
                   your business needs and customers.</p>
-                <a href="service-details.html" class="read-more">Read More <i class="bi bi-arrow-right"></i></a>
+                <a href="#" class="read-more">Read More <i class="bi bi-arrow-right"></i></a>
               </div>
             </div>
           </div><!-- End Service Card -->
@@ -774,7 +774,7 @@
                 <h3>Sales</h3>
                 <p>Our sales tools enable B2B and B2C functions to operate E-commerce style, offering complete control
                   according to the business workflow.</p>
-                <a href="service-details.html" class="read-more">Read More <i class="bi bi-arrow-right"></i></a>
+                <a href="#" class="read-more">Read More <i class="bi bi-arrow-right"></i></a>
               </div>
             </div>
           </div><!-- End Service Card -->
@@ -789,7 +789,7 @@
                 <p>Maximize profit margins and improve efficiency to stay cost competitive, mapping out your procurement
                   practice effectively with intelligent demand forecasting that optimizes the inventory flow with more
                   cash rotation cycles.</p>
-                <a href="service-details.html" class="read-more">Read More <i class="bi bi-arrow-right"></i></a>
+                <a href="#" class="read-more">Read More <i class="bi bi-arrow-right"></i></a>
               </div>
             </div>
           </div><!-- End Service Card -->
@@ -803,7 +803,7 @@
                 <h3>Marketing</h3>
                 <p>Get the entire team on a single platform to manage the campaigns with an effective way of approach
                   and visibility to stakeholders, leading to increase in the profits.</p>
-                <a href="service-details.html" class="read-more">Read More <i class="bi bi-arrow-right"></i></a>
+                <a href="#" class="read-more">Read More <i class="bi bi-arrow-right"></i></a>
               </div>
             </div>
           </div><!-- End Service Card -->
@@ -1172,11 +1172,11 @@
   <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
 
   <!-- Main JS File -->
-  <script src="assets/js/main.js"></script>
-
+  
   <!-- header and footer js files  -->
   <script src="assets/js/navbar.js"></script>
   <script src="assets/js/footer.js"></script>
+  <script src="assets/js/main.js"></script>
 
 </body>
 

service-details.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
-  <title>Service Details - iLanding Bootstrap Template</title>
+  <title>ADM - ARIA Digital Machines</title>
   <meta name="description" content="">
   <meta name="keywords" content="">