Modified the Hero Section UI

src/components/Visualisation/HeroAlgorithmMockup.jsx

@@ -0,0 +1,52 @@
+export default function HeroAlgorithmMockup() {
+  const values = [
+    12, 21, 43, 23, 17, 32, 29, 16,
+    45, 5, 18, 22, 28, 35, 42, 45,
+    19, 21, 48, 39, 37, 24, 29, 26,
+  ];
+
+  // Calculate SVG path for line graph
+  const maxValue = Math.max(...values);
+  const barWidth = 100 / values.length;
+  const points = values.map((value, index) => {
+    const x = (index + 0.5) * barWidth;
+    const y = 100 - (value / maxValue) * 65;
+    return `${x},${y}`;
+  }).join(" ");
+
+  return (
+    <div 
+      className="absolute inset-0 flex items-end justify-center overflow-hidden opacity-20 px-12"
+      style={{
+        maskImage: "linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%)",
+        WebkitMaskImage: "linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%)",
+      }}
+    >
+      <div className="flex h-full w-full max-w-8xl items-end justify-center gap-1 relative">
+        {/* Line Graph */}
+        <svg className="absolute inset-0 w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
+          <polyline
+            points={points}
+            fill="none"
+            stroke="rgba(255, 255, 255, 0.3)"
+            strokeWidth="0.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+
+        {/* Bars */}
+        {values.map((value, index) => (
+          <div
+            key={index}
+            className="flex-1 bg-gradient-to-t from-cyan-500/60 to-indigo-500/40"
+            style={{
+              height: `${value * 1.8}%`,
+              minWidth: "8px",
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/landing/Introduction.astro

@@ -1,20 +1,42 @@
 ---
+import HeroAlgorithmMockup from "../Visualisation/HeroAlgorithmMockup";
 ---
-<div
-  class="flex flex-col items-center justify-top h-100vh text-white w-[90%] sm:w-[80%] md:w-[60%] p-5 sm:p-10 md:p-20"
->
-  <h1
-    class="font-montserrat font-extrabold text-[250%] sm:text-[350%] md:text-[450%] p-[5%] [text-shadow:0px_4px_4px_#6745EB]"
-  >
-    TraceFlow
-  </h1>
-  <p
-    class="font-poppins text-[150%] sm:text-[100%] md:text-[150%] items-center text-center"
-  >
-    Understand data structures and algorithms through interactive visualizations
-    with beautiful animations and step-by-step execution
-  </p>
-</div>
+
+<section class="relative min-h-screen w-full overflow-hidden">
+  {/* Background Visualizer */}
+  <HeroAlgorithmMockup client:load />
+
+  {/* Content */}
+  <div class="relative z-10 flex min-h-screen items-center justify-center px-8 py-20 text-white">
+    <div class="flex flex-col items-center justify-center text-center max-w-3xl">
+      <h1
+        class="font-montserrat font-extrabold text-[250%] sm:text-[350%] md:text-[450%] mb-6 "
+      >
+        TraceFlow
+      </h1>
+      <p
+        class="font-poppins text-lg md:text-xl text-gray-300 mb-8"
+      >
+        Understand data structures and algorithms through interactive visualizations
+        with beautiful animations and step-by-step execution
+      </p>
+      <div class="flex gap-4">
+        <button 
+          id="explore-button"
+          class="cards border-mask relative rounded-2xl p-[2px] overflow-hidden cursor-pointer"
+        >
+          <div
+              class="relative px-8 py-3 flex items-center justify-center text-white text-lg font-[Poppins] z-10
+               rounded-2xl transition-all duration-300 ease-in-out hover:scale-[1.03]"
+              style="background-image: linear-gradient(to bottom right, rgba(6,182,212,0.04), rgba(14,116,144,0.02)), linear-gradient(to bottom right, rgba(15,23,42,0.06), rgba(20,20,20,0.03)); backdrop-filter: blur(6px);"
+          >
+            Start Visualizing
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</section>
 
 <script>
   document.addEventListener("DOMContentLoaded", () => {

src/layouts/Layout.astro

@@ -23,10 +23,10 @@ const { title } = Astro.props;
     </a>
 
     <div class="fixed inset-0 z-[-5] overflow-hidden">
-      <div
+      <!-- <div
         id="bg-layer-1"
         class="absolute w-[150%] rounded-[50%] bg-gradient-to-l from-[rgba(49,49,78,0.10)] to-[rgba(33,33,56,0.10)] aspect-[1995/1345] left-1/2 transform -translate-x-1/2"
-      >
+      > -->
       </div>
       <div
         id="bg-layer-2"

src/styles/global.css

@@ -12,7 +12,7 @@
   inset: 0;
   border-radius: 1rem;
   padding: 2px;
-  background: linear-gradient(var(--angle, 135deg), rgba(36, 35, 55, 0.5), #6E5FCB, #232234);
+  background: linear-gradient(var(--angle, 135deg), rgba(6, 182, 212, 0.3), rgba(6, 182, 212, 0.2), rgba(14, 116, 144, 0.2));
   -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);