From 567a3173d867fd6e4941aca6bf22f65a3aca0a86 Mon Sep 17 00:00:00 2001
From: sanat <sanatjha4@gmail.com>
Date: Tue, 17 Dec 2024 20:42:04 +0530
Subject: [PATCH 1/4] Navbar links working #2

---
 index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 3b0e084..bc8a35c 100644
--- a/index.html
+++ b/index.html
@@ -19,14 +19,14 @@
     <div id="rectangle5"></div>
     <div id="rectangle6"></div>
     <div id="header-background"></div>
-    <img src="./logo1" id="logo1">
+    <img src="./resources/images/logo1.svg" id="logo1">
     <i class="fa fa-2x fa-bars" id="bars" onclick="show_hide()"> </i>
     <nav class="nav">
 
         <div class="main-nav">
             <ul>
-                <li><a href="./aboutus.html">About us</a></li>
-                <li><a href="./contactus.html">Contact us</a></li>
+                <li><a href="./resources/html/aboutus.html">About us</a></li>
+                <li><a href="./resources/html/contactus.html">Contact us</a></li>
                 <li id="li3"><a id="try" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Try us out</a></li>
 
             </ul>

From bc6cc6c7f1da32805977c9d358e16446a1249c2d Mon Sep 17 00:00:00 2001
From: sanat <sanatjha4@gmail.com>
Date: Tue, 17 Dec 2024 20:56:36 +0530
Subject: [PATCH 2/4] fixed navbar items alignment as in figma #1

---
 index.html                    |  7 +++----
 resources/css/landingpage.css | 14 +++++++-------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index bc8a35c..059b1ed 100644
--- a/index.html
+++ b/index.html
@@ -19,14 +19,13 @@
     <div id="rectangle5"></div>
     <div id="rectangle6"></div>
     <div id="header-background"></div>
-    <img src="./resources/images/logo1.svg" id="logo1">
     <i class="fa fa-2x fa-bars" id="bars" onclick="show_hide()"> </i>
     <nav class="nav">
-
+        <img src="./resources/images/logo1.svg" id="logo1">
         <div class="main-nav">
             <ul>
-                <li><a href="./resources/html/aboutus.html">About us</a></li>
-                <li><a href="./resources/html/contactus.html">Contact us</a></li>
+                <li><a href="./aboutus.html">About us</a></li>
+                <li><a href="./contactus.html">Contact us</a></li>
                 <li id="li3"><a id="try" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Try us out</a></li>
 
             </ul>
diff --git a/resources/css/landingpage.css b/resources/css/landingpage.css
index 7b600b7..a2cec53 100644
--- a/resources/css/landingpage.css
+++ b/resources/css/landingpage.css
@@ -1,7 +1,6 @@
 html,
 body {
     margin: 0px;
-    margin-top: 3px;
     width: 100%;
 }
 
@@ -93,13 +92,13 @@ body {
     left: 0px;
     top: 0px;
     z-index: -1;
-    background: rgba(62, 95, 79, 0.4);
     backdrop-filter: blur(32px);
 }
 
 
 nav {
     z-index: 100;
+    background: rgba(62, 95, 79, 0.4);
     display: flex;
     padding: 0% 0%;
     justify-content: space-between;
@@ -107,7 +106,6 @@ nav {
 }
 
 #logo1 {
-    position: absolute;
     padding-left: 20px;
     height: 40px;
     top: 10px;
@@ -115,26 +113,28 @@ nav {
 
 .main-nav {
     flex: 1;
-    text-align: left;
+    text-align: right;
 }
 
 .main-nav ul {
-    padding-right: 20px;
+    padding-right: 40px;
 }
 
 .main-nav ul li {
     list-style: none;
     display: inline-block;
-    padding: 0px 10px;
+    padding: 0px 20px;
     position: relative;
 }
 
 #li3 {
     list-style: none;
     display: inline-block;
-    padding: 0px 10px;
+    padding: 10px 20px;
+    margin-left: 10px;
     position: relative;
     background: #01AF57;
+    border-radius: 3px;
 }
 
 .main-nav ul li a {

From d357009da71c586da70ede54e9e773d02b542946 Mon Sep 17 00:00:00 2001
From: sanat <sanatjha4@gmail.com>
Date: Sat, 21 Dec 2024 19:21:23 +0530
Subject: [PATCH 3/4] navbar-alignment

---
 resources/css/landingpage.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/resources/css/landingpage.css b/resources/css/landingpage.css
index a2cec53..a233bb3 100644
--- a/resources/css/landingpage.css
+++ b/resources/css/landingpage.css
@@ -106,9 +106,9 @@ nav {
 }
 
 #logo1 {
-    padding-left: 20px;
+    padding-left: 60px;
     height: 40px;
-    top: 10px;
+    top: 9px;
 }
 
 .main-nav {
@@ -130,7 +130,10 @@ nav {
 #li3 {
     list-style: none;
     display: inline-block;
-    padding: 10px 20px;
+    height: 36px;
+    width: 121px;
+    text-align: center;
+    align-items: center;
     margin-left: 10px;
     position: relative;
     background: #01AF57;

From 0214e9e83967a77df426cbbbd37158a22953188b Mon Sep 17 00:00:00 2001
From: sanat <sanatjha4@gmail.com>
Date: Tue, 7 Jan 2025 16:58:58 +0530
Subject: [PATCH 4/4] fixed navbar on vertical devices

---
 index.html                                    |  25 +--
 resources/css/landingpage.css                 | 188 ++++++++++++++----
 resources/javascript/FAQsection.js            |  16 ++
 .../animations/countdown_animations.js        |  47 +++++
 resources/javascript/goToTopBtn.js            |  18 ++
 resources/javascript/menubutton.js            |  41 +++-
 6 files changed, 276 insertions(+), 59 deletions(-)
 create mode 100644 resources/javascript/FAQsection.js
 create mode 100644 resources/javascript/animations/countdown_animations.js
 create mode 100644 resources/javascript/goToTopBtn.js

diff --git a/index.html b/index.html
index 059b1ed..3748bfe 100644
--- a/index.html
+++ b/index.html
@@ -18,19 +18,20 @@
     <div id="rectangle4"></div>
     <div id="rectangle5"></div>
     <div id="rectangle6"></div>
-    <div id="header-background"></div>
-    <i class="fa fa-2x fa-bars" id="bars" onclick="show_hide()"> </i>
-    <nav class="nav">
-        <img src="./resources/images/logo1.svg" id="logo1">
-        <div class="main-nav">
-            <ul>
-                <li><a href="./aboutus.html">About us</a></li>
-                <li><a href="./contactus.html">Contact us</a></li>
-                <li id="li3"><a id="try" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Try us out</a></li>
+        <div id="header-background">
+            <nav class="nav">
+                <i class="fa fa-2x fa-bars" id="bars" onclick="show_hide()"> </i>
+            <img src="./resources/images/logo1.svg" id="logo1">
+            <div class="main-nav">
+                <ul>
+                    <li><a href="./aboutus.html">About us</a></li>
+                    <li><a href="./contactus.html">Contact us</a></li>
+                    <li id="li3"><a id="try" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Try us out</a></li>
 
-            </ul>
-        </div>
-    </nav>
+                </ul>
+            </div>
+        </nav>
+    </div>
 
     <div class="container1">
         <div id="box1">Now sell your products
diff --git a/resources/css/landingpage.css b/resources/css/landingpage.css
index a233bb3..6fc329a 100644
--- a/resources/css/landingpage.css
+++ b/resources/css/landingpage.css
@@ -83,24 +83,24 @@ body {
     width: 100%;
     margin-bottom: 250px;
 }
-
 #header-background {
-    z-index: 100;
-    position: absolute;
+    position: fixed;  /* Changed from absolute to fixed */
     width: 100%;
     height: 60px;
-    left: 0px;
-    top: 0px;
-    z-index: -1;
+    left: 0;
+    top: 0;
     backdrop-filter: blur(32px);
+    background: rgba(255, 255, 255, 0.8);  /* Added for better blur effect */
 }
 
-
 nav {
-    z-index: 100;
+    position: fixed;  /* Changed to fixed */
+    top: 0;
+    left: 0;
+    width: 100%;
     background: rgba(62, 95, 79, 0.4);
     display: flex;
-    padding: 0% 0%;
+    padding: 10px 0;
     justify-content: space-between;
     align-items: center;
 }
@@ -108,7 +108,6 @@ nav {
 #logo1 {
     padding-left: 60px;
     height: 40px;
-    top: 9px;
 }
 
 .main-nav {
@@ -118,22 +117,24 @@ nav {
 
 .main-nav ul {
     padding-right: 40px;
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
 }
 
 .main-nav ul li {
     list-style: none;
-    display: inline-block;
     padding: 0px 20px;
     position: relative;
 }
 
 #li3 {
     list-style: none;
-    display: inline-block;
+    display: inline-flex;  /* Changed from inline-block */
+    align-items: center;
+    justify-content: center;
     height: 36px;
     width: 121px;
-    text-align: center;
-    align-items: center;
     margin-left: 10px;
     position: relative;
     background: #01AF57;
@@ -145,6 +146,138 @@ nav {
     text-decoration: none;
 }
 
+#bars {
+    display: none;
+    cursor: pointer;
+    padding: 15px;
+    color: #1F2420;
+    position: fixed; 
+    right: 20px;
+    z-index: 2000;  
+}
+
+
+@media screen and (max-width: 768px) {
+    /* Header & Navigation */
+    #header-background {
+        z-index: 999;
+        position: fixed;
+        height: 60px;
+    }
+
+    nav {
+        z-index: 1000;
+        padding: 10px 0;
+    }
+
+    #logo1 {
+        padding-left: 15px;
+        height: 35px;
+    }
+
+    /* Hamburger Menu */
+    #bars {
+        display: block;
+        position: fixed;
+        right: 15px;
+        z-index: 2001;
+        cursor: pointer;
+        padding: 15px;
+        color: #1F2420;
+    }
+
+    /* Mobile Navigation Menu */
+    .main-nav {
+        position: fixed;
+        right: -100%;
+        top: 0;
+        background: rgba(62, 95, 79, 0.95);
+        height: 100vh;
+        width: 80%;  /* Changed to 80% for better UX */
+        padding-top: 60px;
+        transition: 0.3s ease-in-out;
+        z-index: 1000;
+    }
+
+    .main-nav.active {
+        right: 0;
+        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+    }
+
+    .main-nav ul {
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+        width: 100%;
+    }
+
+    .main-nav ul li {
+        padding: 12px 25px;
+        width: calc(100% - 50px);
+        text-align: left;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .main-nav ul li a {
+        color: #F6FFFA;
+        display: block;
+        width: 100%;
+    }
+
+    /* Menu Overlay */
+    .menu-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 998;
+        opacity: 0;
+        visibility: hidden;
+        transition: 0.3s ease-in-out;
+        display: none;
+    }
+
+    .menu-overlay.active {
+        opacity: 1;
+        visibility: visible;
+        display: block;
+    }
+
+    /* Content Containers */
+    .container1 {
+        margin-top: 80px;  /* Reduced to account for fixed header */
+        margin-bottom: 60px;
+    }
+
+    #box1, #box2 {
+        padding: 0 15px;
+        text-align: center;
+        word-wrap: break-word;
+        width: calc(100% - 30px);  /* Account for padding */
+    }
+
+    #box1 {
+        font-size: 24px;
+        margin-bottom: 15px;
+    }
+
+    #box2 {
+        font-size: 16px;
+    }
+
+    /* Try Us Out Button */
+    #li3 {
+        margin: 15px 25px;
+        width: calc(100% - 50px);
+        display: flex;
+        justify-content: center;
+    }
+}
+
+
+
 #try {
     color: #F6FFFA;
     background: #01AF57;
@@ -646,32 +779,7 @@ nav {
         display: none;
     }
 
-    .nav {
-        justify-content: flex-end;
-        padding-left: 80%;
-    }
-
-    .main-nav {
-        display: none;
-        flex-direction: column;
-        text-align: center;
-        padding-top: 2px;
-        padding-bottom: 2px;
-        background: #01AF57;
-        z-index: 10;
-    }
-
-    #li3 {
-        color: #000000;
-    }
-
-    #bars {
-        padding-top: 10px;
-        margin: auto;
-        width: 90%;
-        display: flex;
-        justify-content: flex-end;
-    }
+    
 
     #rectangle1 {
         width: 28.974358974358978%;
diff --git a/resources/javascript/FAQsection.js b/resources/javascript/FAQsection.js
new file mode 100644
index 0000000..fc88f42
--- /dev/null
+++ b/resources/javascript/FAQsection.js
@@ -0,0 +1,16 @@
+let container = document.querySelector(".container5");
+let containerItems = container.querySelectorAll(".faqBox");
+
+for(let i=0; i<containerItems.length; i++){
+    let questionItem = containerItems[i].querySelector(".ques1");
+    questionItem.addEventListener("click", function(){
+        if(containerItems[i].classList.contains("active")){
+            containerItems[i].classList.remove("active");
+        }else{
+            try{
+                container.querySelector(".active").classList.remove("active");
+            } catch(msg){}
+            containerItems[i].classList.add("active");
+        }
+    });
+}
\ No newline at end of file
diff --git a/resources/javascript/animations/countdown_animations.js b/resources/javascript/animations/countdown_animations.js
new file mode 100644
index 0000000..5c1de24
--- /dev/null
+++ b/resources/javascript/animations/countdown_animations.js
@@ -0,0 +1,47 @@
+function animateCounter(element, end, duration) {
+    let startTime = null;
+
+    function updateCounter(currentTime) {
+      if (!startTime) startTime = currentTime;
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const displayValue = Math.floor(progress * end).toLocaleString();
+      element.innerText = displayValue;
+
+      if (progress < 1) {
+        requestAnimationFrame(updateCounter);
+      } else {
+        element.innerText = end.toLocaleString();
+      }
+    }
+
+    requestAnimationFrame(updateCounter);
+  }
+
+  function isElementInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }
+
+  function startCounterWhenVisible() {
+    const counterElement = document.querySelector(".counteranimation");
+    const targetValue = 60000;
+
+    const checkVisibility = () => {
+      if (isElementInViewport(counterElement)) {
+        animateCounter(counterElement, targetValue, 1000);
+        window.removeEventListener("scroll", checkVisibility);
+      }
+    };
+
+    window.addEventListener("scroll", checkVisibility);
+    checkVisibility();
+  }
+
+  window.onload = startCounterWhenVisible;
+  
\ No newline at end of file
diff --git a/resources/javascript/goToTopBtn.js b/resources/javascript/goToTopBtn.js
new file mode 100644
index 0000000..56a16fc
--- /dev/null
+++ b/resources/javascript/goToTopBtn.js
@@ -0,0 +1,18 @@
+const scrollTOP = document.querySelector("#scrollTOP");
+      scrollTOP.addEventListener("click", function () {
+        window.scrollTo({
+          top: 0,
+          left: 0,
+          behavior: "smooth",
+        });
+      });
+
+window.addEventListener("scroll", minHeight)
+
+function minHeight(){
+    if(window.scrollY > 300){
+        scrollTOP.style.display = "block";
+    }else{
+        scrollTOP.style.display = "none";
+    }
+}
diff --git a/resources/javascript/menubutton.js b/resources/javascript/menubutton.js
index d770265..88af32b 100644
--- a/resources/javascript/menubutton.js
+++ b/resources/javascript/menubutton.js
@@ -1,11 +1,38 @@
-var i = 0;
+// Add overlay div to the body
+const overlay = document.createElement('div');
+overlay.className = 'menu-overlay';
+document.body.appendChild(overlay);
 
 function show_hide() {
-    if (i == 1) {
-        document.querySelector('.main-nav').style.display = "flex";
-        return i = 0;
+    const nav = document.querySelector('.main-nav');
+    const bars = document.getElementById('bars');
+    const overlay = document.querySelector('.menu-overlay');
+    
+    nav.classList.toggle('active');
+    overlay.classList.toggle('active');
+    
+    // Prevent body scroll when menu is open
+    if (nav.classList.contains('active')) {
+        document.body.style.overflow = 'hidden';
     } else {
-        document.querySelector('.main-nav').style.display = "none";
-        return i = 1;
+        document.body.style.overflow = '';
     }
-}
\ No newline at end of file
+}
+
+// Close menu when clicking overlay
+document.querySelector('.menu-overlay').addEventListener('click', () => {
+    const nav = document.querySelector('.main-nav');
+    if (nav.classList.contains('active')) {
+        show_hide();
+    }
+});
+
+// Close menu when clicking a link
+document.querySelectorAll('.main-nav a').forEach(link => {
+    link.addEventListener('click', () => {
+        const nav = document.querySelector('.main-nav');
+        if (nav.classList.contains('active')) {
+            show_hide();
+        }
+    });
+});
\ No newline at end of file