create the page of success-stories

templates/index.html

@@ -187,6 +187,50 @@
 <div class="w-full bg-[#5b6bf5] h-[10rem]"></div>
 
 
+<!-- Floating Social Bar -->
+<div
+  id="socialBar"
+  class="fixed left-5 top-24 z-50
+         flex flex-col items-center gap-5
+         bg-lime-400
+         px-3 py-4
+         rounded-full
+         shadow-lg
+         transition-transform duration-300 ease-out"
+>
+  <a href="#" class="text-black text-xl hover:scale-125 transition">
+    <i class="fab fa-instagram"></i>
+  </a>
+
+  <a href="#" class="text-black text-xl hover:scale-125 transition">
+    <i class="fab fa-youtube"></i>
+  </a>
+
+  <a href="#" class="text-black text-xl hover:scale-125 transition">
+    <i class="fab fa-tiktok"></i>
+  </a>
+
+  <a href="#" class="text-black text-xl hover:scale-125 transition">
+    <i class="fab fa-linkedin-in"></i>
+  </a>
+</div>
+
+<!-- Dummy content to test scrolling -->
+<div class="h-[2000px] p-20">
+  <h1 class="text-3xl font-bold">Scroll Down</h1>
+</div>
+
+
+<script>
+  const bar = document.getElementById("socialBar");
+
+  window.addEventListener("scroll", () => {
+    const y = window.scrollY * 0.3;
+    bar.style.transform = `translateY(${y}px)`;
+  });
+</script>
+
+