From 57d863960419750860360a8175a4eaebf7d3f899 Mon Sep 17 00:00:00 2001
From: Ayushswirlon <ayushcarpenter7777@gmail.com>
Date: Wed, 17 Jul 2024 15:38:44 +0530
Subject: [PATCH] had undo changes and add an arrow

---
 index.html | 135 +++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 94 insertions(+), 41 deletions(-)

diff --git a/index.html b/index.html
index affb452..f2eac50 100644
--- a/index.html
+++ b/index.html
@@ -111,23 +111,34 @@
 .image-wrapper:hover .ripple-effect {
   opacity: 1;
 }
+
    body {
     font-family: 'Roboto', sans-serif;
     /* background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); */
 }
 
 .intro-section {
-  display: flex;
-  align-items: center;
   min-height: 100vh;
-  padding: 2rem 0;
-  overflow: hidden;
-
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+    padding-bottom: 60px;
+            overflow: hidden;
+            opacity: 0;
+            transition: opacity 1s ease-out;
 }
 
 .intro-section.fade-in {
     opacity: 1;
 }
+.scroll-arrow-container{
+  position: relative;
+  height: 60px;
+  margin-top: 20px;
+  bottom:20px;
+}
+
 
 .floating-shape {
     position: absolute;
@@ -232,8 +243,8 @@
 }
 
 .landing-animate {
-opacity: 0;
-animation: fadeIn 1s ease-out forwards;
+    opacity: 0;
+    animation: landingAnimation 0.8s ease-out forwards;
 }
 
 .text-container.landing-animate {
@@ -260,7 +271,36 @@
     padding-top: 5rem; /* Adjust based on your navbar height */
   }
 }
+.scroll-arrow {
+    position: absolute;
+    bottom:-8px;
+    left: 50%;
+    /* transform: translateX(-50%); */
+    font-size: 2rem;
+    opacity: 1;
+    color: rgb(219, 127, 219);
+    animation: bounce 2s infinite;
+    /* transition: opacity 0.3s ease; */
+    cursor: pointer;
+        }
 
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% {
+                transform: translateY(0) translateX(-50%);
+            }
+            40% {
+                transform: translateY(-20px) translateX(-50%);
+            }
+            60% {
+                transform: translateY(-10px) translateX(-50%);
+            }
+        }
+        @media (max-width: 768px) {
+    .scroll-arrow {
+        bottom: 10px; 
+        font-size: 1.5rem;
+    }
+}
   </style>
 </head>
 
@@ -346,49 +386,47 @@
 
  
 
-      <div class="intro-section min-h-screen flex items-center" id="home-section">
-        <div class="floating-shape shape-1"></div>
-        <div class="floating-shape shape-2"></div>
-        <div class="floating-shape shape-3"></div>
-        <div class="floating-shape shape-4"></div>
-      
-        <div class="container mx-auto px-4">
-          <div class="flex flex-col md:flex-row items-center justify-between">
-            <div class="w-full md:w-1/2 mb-8 md:mb-0">
-              <div class="text-container landing-animate">
-                <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-black mb-4 animate-fade-in-up">
-                  <span class="block">The <span style="color: rgb(219, 127, 219);">#1</span> Sorting</span>
-                  <span class="block">Visualization Tool</span>
+      <div class="flex p-5 items-center justify-center ml-5 mr-5">
+        <div class="sm:w-full md:w-2/4">
+            <div class="mr-5 text-container landing-animate">
+                <h1 class="text-4xl font-semibold sm:text-5xl md:text-6xl text-black mb-4 animate-fade-in-up">
+                    The <span style="color: rgb(219, 127, 219);">#1</span> Sorting 
+                    <span class="whitespace-nowrap">Visualization Tool</span>
                 </h1>
-                
-                <p class="mb-6 text-sm sm:text-base text-gray-700 animate-fade-in-up delay-100">
-                  <i class="fas fa-chart-bar feature-icon"></i>Interactive visualization
-                  <br>
-                  <i class="fas fa-tachometer-alt feature-icon"></i>Understand algorithm efficiency
-                  <br>
-                  <i class="fas fa-lightbulb feature-icon"></i>Learn sorting techniques
+                <p class="mb-4 text-base sm:text-sm md:text-lg text-black animate-fade-in-up delay-100">
+                  Sorting algorithm visualisation tool which provides an interactive way to visualize various sorting algorithm.
                 </p>
-              </div>
-              <div class="button-container animate-fade-in-up delay-200">
-                <a class="inline-block mr-4 px-6 py-3 rounded-full font-semibold text-white transition duration-300 ease-in-out hover:shadow-lg" style="background: rgb(219, 127, 219);" href="visual.html">
-                  <span>Get Started</span>
+                <p class="mb-4 text-base sm:text-sm md:text-lg text-black animate-fade-in-up delay-100">
+                    <i class="fas fa-chart-bar feature-icon"></i>Interactive visualization
+                    <br>
+                    <i class="fas fa-tachometer-alt feature-icon"></i>Understand algorithm efficiency
+                    <br>
+                    <i class="fas fa-lightbulb feature-icon"></i>Learn sorting techniques
+            </div>
+            <div class="button-container animate-fade-in-up delay-200">
+                <a class="mr-3 p-2 rounded-md font-semibold text-white" style="background: rgb(219, 127, 219);" href="visual.html">
+                    <span>Get Started</span>
                 </a>
-                <a class="inline-block px-6 py-3 bg-gray-200 rounded-full font-semibold text-gray-700 transition duration-300 ease-in-out hover:bg-gray-300 hover:text-purple-700" href="#programs-section">
-                  <span>Explore</span>
+                <a class="mr-3 bg-gray-300 p-2 rounded-md font-semibold hover:text-purple-700" href="#programs-section">
+                    <span class="items-center">Explore</span>
                 </a>
-              </div>
             </div>
-            <div class="w-full md:w-1/2 image-container animate-fade-in-up delay-300">
-              <div class="image-wrapper">
+        </div>
+        <div class="w-2/4 md:flex hidden image-container animate-fade-in-up delay-300">
+            <div class="image-wrapper">
                 <div class="image-inner">
-                  <img src="./images/home.png" alt="Sorting Visualization" class="main-image w-full h-auto max-w-md mx-auto">
-                  <div class="ripple-effect"></div>
+                    <img src="./images/home.png" alt="" class="main-image">
+                    <div class="ripple-effect"></div>
                 </div>
-              </div>
             </div>
-          </div>
         </div>
-      </div>
+    </div>
+    <div class="scroll-arrow-container">
+    <div class="scroll-arrow">
+      <i class="fas fa-chevron-down"></i>
+  </div>
+  </div>
+</div>
 
     <div class="site-section algorithm-title" id="algorithm-section">
       <div class="container">
@@ -1390,6 +1428,21 @@ <h5>Legal</h5>
             behavior: 'smooth'  
         });
     };
+    document.addEventListener('DOMContentLoaded', function() {
+            const arrow = document.querySelector('.scroll-arrow');
+            const heroSection = document.getElementById('home-section');
+
+            window.addEventListener('scroll', function() {
+                const heroBottom = heroSection.getBoundingClientRect().bottom;
+                const windowHeight = window.innerHeight;
+
+                if (window.scrollY > 200 || heroBottom < 0) {
+                    arrow.style.opacity = '0';
+                } else {
+                    arrow.style.opacity = '1';
+                }
+            });
+        });
 </script>