diff --git a/frontend/public/Feature_images/Analytics_Dashboard.png b/frontend/public/Feature_images/Analytics_Dashboard.png
new file mode 100644
index 0000000..180fc94
Binary files /dev/null and b/frontend/public/Feature_images/Analytics_Dashboard.png differ
diff --git a/frontend/public/Feature_images/Auto_Commit_AI_Scheduling.png b/frontend/public/Feature_images/Auto_Commit_AI_Scheduling.png
new file mode 100644
index 0000000..3f9bbb0
Binary files /dev/null and b/frontend/public/Feature_images/Auto_Commit_AI_Scheduling.png differ
diff --git a/frontend/public/Feature_images/Contribution_Analytics.png b/frontend/public/Feature_images/Contribution_Analytics.png
new file mode 100644
index 0000000..81c9359
Binary files /dev/null and b/frontend/public/Feature_images/Contribution_Analytics.png differ
diff --git a/frontend/public/Feature_images/Enterprise_Security.png b/frontend/public/Feature_images/Enterprise_Security.png
new file mode 100644
index 0000000..64c2d62
Binary files /dev/null and b/frontend/public/Feature_images/Enterprise_Security.png differ
diff --git a/frontend/public/Feature_images/Github_README_AI.png b/frontend/public/Feature_images/Github_README_AI.png
new file mode 100644
index 0000000..4787cfb
Binary files /dev/null and b/frontend/public/Feature_images/Github_README_AI.png differ
diff --git a/frontend/public/Feature_images/Goal_Tracking.png b/frontend/public/Feature_images/Goal_Tracking.png
new file mode 100644
index 0000000..363989a
Binary files /dev/null and b/frontend/public/Feature_images/Goal_Tracking.png differ
diff --git a/frontend/public/Feature_images/Multi-Repository_Github_Tools.png b/frontend/public/Feature_images/Multi-Repository_Github_Tools.png
new file mode 100644
index 0000000..5772fe2
Binary files /dev/null and b/frontend/public/Feature_images/Multi-Repository_Github_Tools.png differ
diff --git a/frontend/public/Feature_images/README_Generation.png b/frontend/public/Feature_images/README_Generation.png
new file mode 100644
index 0000000..3fb3e78
Binary files /dev/null and b/frontend/public/Feature_images/README_Generation.png differ
diff --git a/frontend/public/Feature_images/Smart Notifications.png b/frontend/public/Feature_images/Smart Notifications.png
new file mode 100644
index 0000000..f4d8392
Binary files /dev/null and b/frontend/public/Feature_images/Smart Notifications.png differ
diff --git a/frontend/public/Implemenatation.txt b/frontend/public/Implemenatation.txt
index eae62b5..8bd43b5 100644
--- a/frontend/public/Implemenatation.txt
+++ b/frontend/public/Implemenatation.txt
@@ -11,713 +11,143 @@ Determine the default path for components and styles.
 If default path for components is not /components/ui, provide instructions on why it's important to create this folder
 Copy-paste this component to /components/ui folder:
 ```tsx
-compare.tsx
+container-scroll-animation.tsx
 "use client";
-import React, { useState, useEffect, useRef, useCallback } from "react";
-import { SparklesCore } from "@/components/ui/sparkles";
-import { AnimatePresence, motion } from "framer-motion";
-import { cn } from "@/lib/utils";
-import { IconDotsVertical } from "@tabler/icons-react";
-
-interface CompareProps {
-  firstImage?: string;
-  secondImage?: string;
-  className?: string;
-  firstImageClassName?: string;
-  secondImageClassname?: string;
-  initialSliderPercentage?: number;
-  slideMode?: "hover" | "drag";
-  showHandlebar?: boolean;
-  autoplay?: boolean;
-  autoplayDuration?: number;
-}
-export const Compare = ({
-  firstImage = "",
-  secondImage = "",
-  className,
-  firstImageClassName,
-  secondImageClassname,
-  initialSliderPercentage = 50,
-  slideMode = "hover",
-  showHandlebar = true,
-  autoplay = false,
-  autoplayDuration = 5000,
-}: CompareProps) => {
-  const [sliderXPercent, setSliderXPercent] = useState(initialSliderPercentage);
-  const [isDragging, setIsDragging] = useState(false);
-
-  const sliderRef = useRef<HTMLDivElement>(null);
-
-  const [isMouseOver, setIsMouseOver] = useState(false);
-
-  const autoplayRef = useRef<NodeJS.Timeout | null>(null);
-
-  const startAutoplay = useCallback(() => {
-    if (!autoplay) return;
-
-    const startTime = Date.now();
-    const animate = () => {
-      const elapsedTime = Date.now() - startTime;
-      const progress =
-        (elapsedTime % (autoplayDuration * 2)) / autoplayDuration;
-      const percentage = progress <= 1 ? progress * 100 : (2 - progress) * 100;
-
-      setSliderXPercent(percentage);
-      autoplayRef.current = setTimeout(animate, 16); // ~60fps
+import React, { useRef } from "react";
+import { useScroll, useTransform, motion, MotionValue } from "framer-motion";
+
+export const ContainerScroll = ({
+  titleComponent,
+  children,
+}: {
+  titleComponent: string | React.ReactNode;
+  children: React.ReactNode;
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+  });
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => {
+      window.removeEventListener("resize", checkMobile);
     };
-
-    animate();
-  }, [autoplay, autoplayDuration]);
-
-  const stopAutoplay = useCallback(() => {
-    if (autoplayRef.current) {
-      clearTimeout(autoplayRef.current);
-      autoplayRef.current = null;
-    }
   }, []);
 
-  useEffect(() => {
-    startAutoplay();
-    return () => stopAutoplay();
-  }, [startAutoplay, stopAutoplay]);
-
-  function mouseEnterHandler() {
-    setIsMouseOver(true);
-    stopAutoplay();
-  }
-
-  function mouseLeaveHandler() {
-    setIsMouseOver(false);
-    if (slideMode === "hover") {
-      setSliderXPercent(initialSliderPercentage);
-    }
-    if (slideMode === "drag") {
-      setIsDragging(false);
-    }
-    startAutoplay();
-  }
-
-  const handleStart = useCallback(
-    (clientX: number) => {
-      if (slideMode === "drag") {
-        setIsDragging(true);
-      }
-    },
-    [slideMode]
-  );
-
-  const handleEnd = useCallback(() => {
-    if (slideMode === "drag") {
-      setIsDragging(false);
-    }
-  }, [slideMode]);
+  const scaleDimensions = () => {
+    return isMobile ? [0.7, 0.9] : [1.05, 1];
+  };
 
-  const handleMove = useCallback(
-    (clientX: number) => {
-      if (!sliderRef.current) return;
-      if (slideMode === "hover" || (slideMode === "drag" && isDragging)) {
-        const rect = sliderRef.current.getBoundingClientRect();
-        const x = clientX - rect.left;
-        const percent = (x / rect.width) * 100;
-        requestAnimationFrame(() => {
-          setSliderXPercent(Math.max(0, Math.min(100, percent)));
-        });
-      }
-    },
-    [slideMode, isDragging]
-  );
+  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
+  const scale = useTransform(scrollYProgress, [0, 1], scaleDimensions());
+  const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);
 
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => handleStart(e.clientX),
-    [handleStart]
-  );
-  const handleMouseUp = useCallback(() => handleEnd(), [handleEnd]);
-  const handleMouseMove = useCallback(
-    (e: React.MouseEvent) => handleMove(e.clientX),
-    [handleMove]
-  );
-
-  const handleTouchStart = useCallback(
-    (e: React.TouchEvent) => {
-      if (!autoplay) {
-        handleStart(e.touches[0].clientX);
-      }
-    },
-    [handleStart, autoplay]
+  return (
+    <div
+      className="h-[60rem] md:h-[80rem] flex items-center justify-center relative p-2 md:p-20"
+      ref={containerRef}
+    >
+      <div
+        className="py-10 md:py-40 w-full relative"
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <Header translate={translate} titleComponent={titleComponent} />
+        <Card rotate={rotate} translate={translate} scale={scale}>
+          {children}
+        </Card>
+      </div>
+    </div>
   );
+};
 
-  const handleTouchEnd = useCallback(() => {
-    if (!autoplay) {
-      handleEnd();
-    }
-  }, [handleEnd, autoplay]);
-
-  const handleTouchMove = useCallback(
-    (e: React.TouchEvent) => {
-      if (!autoplay) {
-        handleMove(e.touches[0].clientX);
-      }
-    },
-    [handleMove, autoplay]
+export const Header = ({ translate, titleComponent }: any) => {
+  return (
+    <motion.div
+      style={{
+        translateY: translate,
+      }}
+      className="div max-w-5xl mx-auto text-center"
+    >
+      {titleComponent}
+    </motion.div>
   );
+};
 
+export const Card = ({
+  rotate,
+  scale,
+  children,
+}: {
+  rotate: MotionValue<number>;
+  scale: MotionValue<number>;
+  translate: MotionValue<number>;
+  children: React.ReactNode;
+}) => {
   return (
-    <div
-      ref={sliderRef}
-      className={cn("w-[400px] h-[400px] overflow-hidden", className)}
+    <motion.div
       style={{
-        position: "relative",
-        cursor: slideMode === "drag" ? "grab" : "col-resize",
+        rotateX: rotate,
+        scale,
+        boxShadow:
+          "0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003",
       }}
-      onMouseMove={handleMouseMove}
-      onMouseLeave={mouseLeaveHandler}
-      onMouseEnter={mouseEnterHandler}
-      onMouseDown={handleMouseDown}
-      onMouseUp={handleMouseUp}
-      onTouchStart={handleTouchStart}
-      onTouchEnd={handleTouchEnd}
-      onTouchMove={handleTouchMove}
+      className="max-w-5xl -mt-12 mx-auto h-[30rem] md:h-[40rem] w-full border-4 border-[#6C6C6C] p-2 md:p-6 bg-[#222222] rounded-[30px] shadow-2xl"
     >
-      <AnimatePresence initial={false}>
-        <motion.div
-          className="h-full w-px absolute top-0 m-auto z-30 bg-gradient-to-b from-transparent from-[5%] to-[95%] via-indigo-500 to-transparent"
-          style={{
-            left: `${sliderXPercent}%`,
-            top: "0",
-            zIndex: 40,
-          }}
-          transition={{ duration: 0 }}
-        >
-          <div className="w-36 h-full [mask-image:radial-gradient(100px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-gradient-to-r from-indigo-400 via-transparent to-transparent z-20 opacity-50" />
-          <div className="w-10 h-1/2 [mask-image:radial-gradient(50px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-gradient-to-r from-cyan-400 via-transparent to-transparent z-10 opacity-100" />
-          <div className="w-10 h-3/4 top-1/2 -translate-y-1/2 absolute -right-10 [mask-image:radial-gradient(100px_at_left,white,transparent)]">
-            <MemoizedSparklesCore
-              background="transparent"
-              minSize={0.4}
-              maxSize={1}
-              particleDensity={1200}
-              className="w-full h-full"
-              particleColor="#FFFFFF"
-            />
-          </div>
-          {showHandlebar && (
-            <div className="h-5 w-5 rounded-md top-1/2 -translate-y-1/2 bg-white z-30 -right-2.5 absolute   flex items-center justify-center shadow-[0px_-1px_0px_0px_#FFFFFF40]">
-              <IconDotsVertical className="h-4 w-4 text-black" />
-            </div>
-          )}
-        </motion.div>
-      </AnimatePresence>
-      <div className="overflow-hidden w-full h-full relative z-20 pointer-events-none">
-        <AnimatePresence initial={false}>
-          {firstImage ? (
-            <motion.div
-              className={cn(
-                "absolute inset-0 z-20 rounded-2xl flex-shrink-0 w-full h-full select-none overflow-hidden",
-                firstImageClassName
-              )}
-              style={{
-                clipPath: `inset(0 ${100 - sliderXPercent}% 0 0)`,
-              }}
-              transition={{ duration: 0 }}
-            >
-              <img
-                alt="first image"
-                src={firstImage}
-                className={cn(
-                  "absolute inset-0  z-20 rounded-2xl flex-shrink-0 w-full h-full select-none",
-                  firstImageClassName
-                )}
-                draggable={false}
-              />
-            </motion.div>
-          ) : null}
-        </AnimatePresence>
+      <div className=" h-full w-full  overflow-hidden rounded-2xl bg-gray-100 dark:bg-zinc-900 md:rounded-2xl md:p-4 ">
+        {children}
       </div>
-
-      <AnimatePresence initial={false}>
-        {secondImage ? (
-          <motion.img
-            className={cn(
-              "absolute top-0 left-0 z-[19]  rounded-2xl w-full h-full select-none",
-              secondImageClassname
-            )}
-            alt="second image"
-            src={secondImage}
-            draggable={false}
-          />
-        ) : null}
-      </AnimatePresence>
-    </div>
+    </motion.div>
   );
 };
 
-const MemoizedSparklesCore = React.memo(SparklesCore);
-
 
 demo.tsx
+"use client";
 import React from "react";
-import { Compare } from "@/components/ui/compare";
+import { ContainerScroll } from "@/components/ui/container-scroll-animation";
+import Image from "next/image";
 
-export function CompareDemo() {
+export function HeroScrollDemo() {
   return (
-    <div className="p-4 border rounded-3xl dark:bg-neutral-900 bg-neutral-100  border-neutral-200 dark:border-neutral-800 px-4">
-      <Compare
-        firstImage="https://assets.aceternity.com/code-problem.png"
-        secondImage="https://assets.aceternity.com/code-solution.png"
-        firstImageClassName="object-cover object-left-top"
-        secondImageClassname="object-cover object-left-top"
-        className="h-[250px] w-[200px] md:h-[500px] md:w-[500px]"
-        slideMode="hover"
-      />
+    <div className="flex flex-col overflow-hidden pb-[500px] pt-[1000px]">
+      <ContainerScroll
+        titleComponent={
+          <>
+            <h1 className="text-4xl font-semibold text-black dark:text-white">
+              Unleash the power of <br />
+              <span className="text-4xl md:text-[6rem] font-bold mt-1 leading-none">
+                Scroll Animations
+              </span>
+            </h1>
+          </>
+        }
+      >
+        <Image
+          src={`https://ui.aceternity.com/_next/image?url=%2Flinear.webp&w=3840&q=75`}
+          alt="hero"
+          height={720}
+          width={1400}
+          className="mx-auto rounded-2xl object-cover h-full object-left-top"
+          draggable={false}
+        />
+      </ContainerScroll>
     </div>
   );
 }
 
 ```
 
-Copy-paste these files for dependencies:
-```tsx
-aceternity/sparkles
-"use client";
-import React, { useId, useMemo } from "react";
-import { useEffect, useState } from "react";
-import Particles, { initParticlesEngine } from "@tsparticles/react";
-import type { Container, SingleOrMultiple } from "@tsparticles/engine";
-import { loadSlim } from "@tsparticles/slim";
-import { cn } from "@/lib/utils";
-import { motion, useAnimation } from "framer-motion";
-
-type ParticlesProps = {
-  id?: string;
-  className?: string;
-  background?: string;
-  particleSize?: number;
-  minSize?: number;
-  maxSize?: number;
-  speed?: number;
-  particleColor?: string;
-  particleDensity?: number;
-};
-export const SparklesCore = (props: ParticlesProps) => {
-  const {
-    id,
-    className,
-    background,
-    minSize,
-    maxSize,
-    speed,
-    particleColor,
-    particleDensity,
-  } = props;
-  const [init, setInit] = useState(false);
-  useEffect(() => {
-    initParticlesEngine(async (engine) => {
-      await loadSlim(engine);
-    }).then(() => {
-      setInit(true);
-    });
-  }, []);
-  const controls = useAnimation();
-
-  const particlesLoaded = async (container?: Container) => {
-    if (container) {
-      controls.start({
-        opacity: 1,
-        transition: {
-          duration: 1,
-        },
-      });
-    }
-  };
-
-  const generatedId = useId();
-  return (
-    <motion.div animate={controls} className={cn("opacity-0", className)}>
-      {init && (
-        <Particles
-          id={id || generatedId}
-          className={cn("h-full w-full")}
-          particlesLoaded={particlesLoaded}
-          options={{
-            background: {
-              color: {
-                value: background || "#0d47a1",
-              },
-            },
-            fullScreen: {
-              enable: false,
-              zIndex: 1,
-            },
-
-            fpsLimit: 120,
-            interactivity: {
-              events: {
-                onClick: {
-                  enable: true,
-                  mode: "push",
-                },
-                onHover: {
-                  enable: false,
-                  mode: "repulse",
-                },
-                resize: true as any,
-              },
-              modes: {
-                push: {
-                  quantity: 4,
-                },
-                repulse: {
-                  distance: 200,
-                  duration: 0.4,
-                },
-              },
-            },
-            particles: {
-              bounce: {
-                horizontal: {
-                  value: 1,
-                },
-                vertical: {
-                  value: 1,
-                },
-              },
-              collisions: {
-                absorb: {
-                  speed: 2,
-                },
-                bounce: {
-                  horizontal: {
-                    value: 1,
-                  },
-                  vertical: {
-                    value: 1,
-                  },
-                },
-                enable: false,
-                maxSpeed: 50,
-                mode: "bounce",
-                overlap: {
-                  enable: true,
-                  retries: 0,
-                },
-              },
-              color: {
-                value: particleColor || "#ffffff",
-                animation: {
-                  h: {
-                    count: 0,
-                    enable: false,
-                    speed: 1,
-                    decay: 0,
-                    delay: 0,
-                    sync: true,
-                    offset: 0,
-                  },
-                  s: {
-                    count: 0,
-                    enable: false,
-                    speed: 1,
-                    decay: 0,
-                    delay: 0,
-                    sync: true,
-                    offset: 0,
-                  },
-                  l: {
-                    count: 0,
-                    enable: false,
-                    speed: 1,
-                    decay: 0,
-                    delay: 0,
-                    sync: true,
-                    offset: 0,
-                  },
-                },
-              },
-              effect: {
-                close: true,
-                fill: true,
-                options: {},
-                type: {} as SingleOrMultiple<string> | undefined,
-              },
-              groups: {},
-              move: {
-                angle: {
-                  offset: 0,
-                  value: 90,
-                },
-                attract: {
-                  distance: 200,
-                  enable: false,
-                  rotate: {
-                    x: 3000,
-                    y: 3000,
-                  },
-                },
-                center: {
-                  x: 50,
-                  y: 50,
-                  mode: "percent",
-                  radius: 0,
-                },
-                decay: 0,
-                distance: {},
-                direction: "none",
-                drift: 0,
-                enable: true,
-                gravity: {
-                  acceleration: 9.81,
-                  enable: false,
-                  inverse: false,
-                  maxSpeed: 50,
-                },
-                path: {
-                  clamp: true,
-                  delay: {
-                    value: 0,
-                  },
-                  enable: false,
-                  options: {},
-                },
-                outModes: {
-                  default: "out",
-                },
-                random: false,
-                size: false,
-                speed: {
-                  min: 0.1,
-                  max: 1,
-                },
-                spin: {
-                  acceleration: 0,
-                  enable: false,
-                },
-                straight: false,
-                trail: {
-                  enable: false,
-                  length: 10,
-                  fill: {},
-                },
-                vibrate: false,
-                warp: false,
-              },
-              number: {
-                density: {
-                  enable: true,
-                  width: 400,
-                  height: 400,
-                },
-                limit: {
-                  mode: "delete",
-                  value: 0,
-                },
-                value: particleDensity || 120,
-              },
-              opacity: {
-                value: {
-                  min: 0.1,
-                  max: 1,
-                },
-                animation: {
-                  count: 0,
-                  enable: true,
-                  speed: speed || 4,
-                  decay: 0,
-                  delay: 0,
-                  sync: false,
-                  mode: "auto",
-                  startValue: "random",
-                  destroy: "none",
-                },
-              },
-              reduceDuplicates: false,
-              shadow: {
-                blur: 0,
-                color: {
-                  value: "#000",
-                },
-                enable: false,
-                offset: {
-                  x: 0,
-                  y: 0,
-                },
-              },
-              shape: {
-                close: true,
-                fill: true,
-                options: {},
-                type: "circle",
-              },
-              size: {
-                value: {
-                  min: minSize || 1,
-                  max: maxSize || 3,
-                },
-                animation: {
-                  count: 0,
-                  enable: false,
-                  speed: 5,
-                  decay: 0,
-                  delay: 0,
-                  sync: false,
-                  mode: "auto",
-                  startValue: "random",
-                  destroy: "none",
-                },
-              },
-              stroke: {
-                width: 0,
-              },
-              zIndex: {
-                value: 0,
-                opacityRate: 1,
-                sizeRate: 1,
-                velocityRate: 1,
-              },
-              destroy: {
-                bounds: {},
-                mode: "none",
-                split: {
-                  count: 1,
-                  factor: {
-                    value: 3,
-                  },
-                  rate: {
-                    value: {
-                      min: 4,
-                      max: 9,
-                    },
-                  },
-                  sizeOffset: true,
-                },
-              },
-              roll: {
-                darken: {
-                  enable: false,
-                  value: 0,
-                },
-                enable: false,
-                enlighten: {
-                  enable: false,
-                  value: 0,
-                },
-                mode: "vertical",
-                speed: 25,
-              },
-              tilt: {
-                value: 0,
-                animation: {
-                  enable: false,
-                  speed: 0,
-                  decay: 0,
-                  sync: false,
-                },
-                direction: "clockwise",
-                enable: false,
-              },
-              twinkle: {
-                lines: {
-                  enable: false,
-                  frequency: 0.05,
-                  opacity: 1,
-                },
-                particles: {
-                  enable: false,
-                  frequency: 0.05,
-                  opacity: 1,
-                },
-              },
-              wobble: {
-                distance: 5,
-                enable: false,
-                speed: {
-                  angle: 50,
-                  move: 10,
-                },
-              },
-              life: {
-                count: 0,
-                delay: {
-                  value: 0,
-                  sync: false,
-                },
-                duration: {
-                  value: 0,
-                  sync: false,
-                },
-              },
-              rotate: {
-                value: 0,
-                animation: {
-                  enable: false,
-                  speed: 0,
-                  decay: 0,
-                  sync: false,
-                },
-                direction: "clockwise",
-                path: false,
-              },
-              orbit: {
-                animation: {
-                  count: 0,
-                  enable: false,
-                  speed: 1,
-                  decay: 0,
-                  delay: 0,
-                  sync: false,
-                },
-                enable: false,
-                opacity: 1,
-                rotation: {
-                  value: 45,
-                },
-                width: 1,
-              },
-              links: {
-                blink: false,
-                color: {
-                  value: "#fff",
-                },
-                consent: false,
-                distance: 100,
-                enable: false,
-                frequency: 1,
-                opacity: 1,
-                shadow: {
-                  blur: 5,
-                  color: {
-                    value: "#000",
-                  },
-                  enable: false,
-                },
-                triangles: {
-                  enable: false,
-                  frequency: 1,
-                },
-                width: 1,
-                warp: false,
-              },
-              repulse: {
-                value: 0,
-                enabled: false,
-                distance: 1,
-                duration: 1,
-                factor: 1,
-                speed: 1,
-              },
-            },
-            detectRetina: true,
-          }}
-        />
-      )}
-    </motion.div>
-  );
-};
-
-```
-
 Install NPM dependencies:
 ```bash
-framer-motion, @tabler/icons-react, @tsparticles/slim, @tsparticles/react, @tsparticles/engine
+framer-motion
 ```
 
 Implementation Guidelines
diff --git a/frontend/public/images/After.png b/frontend/public/images/After.png
index c40dffd..9a6efa3 100644
Binary files a/frontend/public/images/After.png and b/frontend/public/images/After.png differ
diff --git a/frontend/public/images/Before.png b/frontend/public/images/Before.png
index 9a6efa3..c40dffd 100644
Binary files a/frontend/public/images/Before.png and b/frontend/public/images/Before.png differ
diff --git a/frontend/public/images/Framemobile.png b/frontend/public/images/Framemobile.png
new file mode 100644
index 0000000..d77baf6
Binary files /dev/null and b/frontend/public/images/Framemobile.png differ
diff --git a/frontend/public/images/Frameweb.png b/frontend/public/images/Frameweb.png
new file mode 100644
index 0000000..7b12763
Binary files /dev/null and b/frontend/public/images/Frameweb.png differ
diff --git a/frontend/public/images/MobileAfter.png b/frontend/public/images/MobileAfter.png
index cf29bfd..840e2e0 100644
Binary files a/frontend/public/images/MobileAfter.png and b/frontend/public/images/MobileAfter.png differ
diff --git a/frontend/public/images/MobileBefore.png b/frontend/public/images/MobileBefore.png
index 840e2e0..cf29bfd 100644
Binary files a/frontend/public/images/MobileBefore.png and b/frontend/public/images/MobileBefore.png differ
diff --git a/frontend/src/components/ui/HeroScrollDemo.jsx b/frontend/src/components/ui/HeroScrollDemo.jsx
new file mode 100644
index 0000000..c04c847
--- /dev/null
+++ b/frontend/src/components/ui/HeroScrollDemo.jsx
@@ -0,0 +1,40 @@
+"use client";
+import React from "react";
+import { ContainerScroll } from "./container-scroll-animation";
+
+export function HeroScrollDemo() {
+  return (
+    <div className="flex flex-col overflow-hidden">
+      <ContainerScroll
+        titleComponent={
+          <>
+            <h1 className="text-4xl font-semibold text-black dark:text-white">
+              Experience the power of <br />
+              <span className="text-4xl md:text-[6rem] font-bold mt-1 leading-none gradient-text">
+                AutoMaxLib
+              </span>
+            </h1>
+            <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 mt-6 max-w-2xl mx-auto">
+              Transform your GitHub presence with intelligent automation, beautiful analytics, and professional README generation.
+            </p>
+          </>
+        }
+      >
+        {/* Desktop Image */}
+        <img
+          src="/images/Frameweb.png"
+          alt="AutoMaxLib dashboard showing GitHub analytics, commit automation, and README generation tools"
+          className="mx-auto rounded-2xl object-contain h-full w-full hidden md:block"
+          draggable={false}
+        />
+        {/* Mobile Image */}
+        <img
+          src="/images/Framemobile.png"
+          alt="AutoMaxLib mobile dashboard"
+          className="mx-auto rounded-2xl object-contain h-full w-full block md:hidden"
+          draggable={false}
+        />
+      </ContainerScroll>
+    </div>
+  );
+}
diff --git a/frontend/src/components/ui/ScrollytellingFeatureShowcase.jsx b/frontend/src/components/ui/ScrollytellingFeatureShowcase.jsx
new file mode 100644
index 0000000..d9ee07f
--- /dev/null
+++ b/frontend/src/components/ui/ScrollytellingFeatureShowcase.jsx
@@ -0,0 +1,304 @@
+import React, { useState, useEffect, useRef, forwardRef } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+
+const ScrollytellingFeatureShowcase = forwardRef(({ features, title, subtitle }, ref) => {
+  const [activeFeature, setActiveFeature] = useState(0)
+  const [imageLoaded, setImageLoaded] = useState({})
+  const containerRef = useRef(null)
+  const featureRefs = useRef([])
+  const isScrolling = useRef(false)
+  const lastScrollTime = useRef(0)
+  const scrollTimeout = useRef(null)
+  const isContinuousScrolling = useRef(false)
+
+  // Map features to their corresponding images (exact order from LandingPage.jsx)
+  const getFeatureImage = (index) => {
+    const imageMap = {
+      0: '/Feature_images/Auto_Commit_AI_Scheduling.png', // Auto Commit AI Scheduling ✅
+      1: '/Feature_images/Multi-Repository_Github_Tools.png', // Multi-Repository GitHub Tools ✅
+      2: '/Feature_images/Github_README_AI.png', // GitHub README AI ✅
+      3: '/Feature_images/Contribution_Analytics.png', // Contribution Analytics ✅
+      4: '/Feature_images/Enterprise_Security.png', // Enterprise Security ✅
+      5: '/Feature_images/Goal_Tracking.png', // Goal Tracking ✅
+      6: '/Feature_images/Analytics_Dashboard.png', // Analytics Dashboard ✅
+      7: '/Feature_images/Smart Notifications.png', // Smart Notifications ✅
+      8: '/Feature_images/README_Generation.png', // README Generation ✅
+    }
+    return imageMap[index] || '/Feature_images/Analytics_Dashboard.png' // Default fallback
+  }
+
+  // Preload images
+  useEffect(() => {
+    features.forEach((_, index) => {
+      const img = new Image()
+      img.src = getFeatureImage(index)
+      img.onload = () => {
+        setImageLoaded(prev => ({ ...prev, [index]: true }))
+      }
+    })
+  }, [features])
+
+  useEffect(() => {
+    const observers = []
+
+    featureRefs.current.forEach((featureRef, index) => {
+      if (featureRef) {
+        const observer = new IntersectionObserver(
+          ([entry]) => {
+            if (entry.isIntersecting) {
+              setActiveFeature(index)
+            }
+          },
+          {
+            root: null,
+            rootMargin: '-30% 0px -30% 0px',
+            threshold: [0.3, 0.7]
+          }
+        )
+
+        observer.observe(featureRef)
+        observers.push(observer)
+      }
+    })
+
+    // Scroll snap behavior for both wheel and keyboard
+    const scrollToFeature = (index) => {
+      if (featureRefs.current[index]) {
+        featureRefs.current[index].scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        })
+      }
+    }
+
+    const handleWheel = (e) => {
+      const now = Date.now()
+      const timeSinceLastScroll = now - lastScrollTime.current
+
+      // Detect if user is continuously scrolling (fast) or deliberate scrolling (slow)
+      if (timeSinceLastScroll < 150) {
+        isContinuousScrolling.current = true
+        // Allow normal scrolling for continuous/fast scrolling
+        return
+      }
+
+      // For deliberate/slow scrolling, use snap behavior
+      if (isScrolling.current) return
+
+      e.preventDefault()
+      isScrolling.current = true
+      lastScrollTime.current = now
+      isContinuousScrolling.current = false
+
+      const direction = e.deltaY > 0 ? 1 : -1
+      const nextIndex = Math.max(0, Math.min(features.length - 1, activeFeature + direction))
+
+      if (nextIndex !== activeFeature) {
+        scrollToFeature(nextIndex)
+      }
+
+      setTimeout(() => {
+        isScrolling.current = false
+      }, 800)
+    }
+
+    // Auto-snap when user stops scrolling
+    const handleScroll = () => {
+      if (isScrolling.current) return
+
+      clearTimeout(scrollTimeout.current)
+
+      scrollTimeout.current = setTimeout(() => {
+        if (!isContinuousScrolling.current) return
+
+        // Find the closest feature to current scroll position
+        let closestIndex = 0
+        let minDistance = Infinity
+
+        featureRefs.current.forEach((ref, index) => {
+          if (ref) {
+            const rect = ref.getBoundingClientRect()
+            const distance = Math.abs(rect.top + rect.height / 2 - window.innerHeight / 2)
+            if (distance < minDistance) {
+              minDistance = distance
+              closestIndex = index
+            }
+          }
+        })
+
+        // Auto-snap to closest feature
+        if (closestIndex !== activeFeature) {
+          scrollToFeature(closestIndex)
+        }
+
+        isContinuousScrolling.current = false
+      }, 500) // Wait 500ms after user stops scrolling
+    }
+
+    const handleKeyDown = (e) => {
+      if (isScrolling.current) return
+
+      let nextIndex = activeFeature
+
+      if (e.key === 'ArrowDown' || e.key === 'PageDown') {
+        e.preventDefault()
+        nextIndex = Math.min(features.length - 1, activeFeature + 1)
+      } else if (e.key === 'ArrowUp' || e.key === 'PageUp') {
+        e.preventDefault()
+        nextIndex = Math.max(0, activeFeature - 1)
+      } else {
+        return
+      }
+
+      if (nextIndex !== activeFeature) {
+        isScrolling.current = true
+        scrollToFeature(nextIndex)
+
+        setTimeout(() => {
+          isScrolling.current = false
+        }, 600)
+      }
+    }
+
+    const container = containerRef.current
+    if (container) {
+      container.addEventListener('wheel', handleWheel, { passive: false })
+      window.addEventListener('scroll', handleScroll, { passive: true })
+      document.addEventListener('keydown', handleKeyDown)
+    }
+
+    return () => {
+      observers.forEach(observer => observer.disconnect())
+      clearTimeout(scrollTimeout.current)
+      if (container) {
+        container.removeEventListener('wheel', handleWheel)
+        window.removeEventListener('scroll', handleScroll)
+        document.removeEventListener('keydown', handleKeyDown)
+      }
+    }
+  }, [activeFeature, features.length])
+
+  return (
+    <section ref={ref} className="bg-gray-50 py-16 md:py-32 dark:bg-transparent">
+      <div className="mx-auto max-w-7xl px-6">
+        {/* Header */}
+        <div className="text-center mb-16 animate-fade-in-up">
+          <h2 className="text-3xl font-semibold text-gray-900 dark:text-white mb-6">
+            {title}
+          </h2>
+          <p className="text-lg text-foreground max-w-2xl mx-auto">
+            {subtitle}
+          </p>
+        </div>
+
+        {/* Two Column Layout */}
+        <div className="grid lg:grid-cols-[45%_55%] gap-12 lg:gap-16">
+          {/* Content Column - Scrollable */}
+          <div className="space-y-12 lg:space-y-[50vh]" ref={containerRef}>
+            {features.map((feature, index) => (
+              <div
+                key={index}
+                ref={el => featureRefs.current[index] = el}
+                className={`transition-all duration-700 ease-in-out transform ${
+                  activeFeature === index
+                    ? 'opacity-100 scale-100 translate-y-0'
+                    : 'opacity-30 scale-95 translate-y-4'
+                }`}
+              >
+                <div className={`rounded-xl border bg-card text-card-foreground shadow-lg overflow-hidden transition-all duration-500 group p-8 ${
+                  activeFeature === index
+                    ? 'shadow-2xl border-primary-500/20 bg-primary-50/5 dark:bg-primary-950/10'
+                    : 'hover:shadow-xl hover-glow'
+                }`}>
+                  <div className="flex items-start gap-6">
+                    <div className={`relative flex aspect-square size-16 rounded-full border transition-all duration-500 flex-shrink-0 ${
+                      activeFeature === index
+                        ? 'border-primary-500 bg-primary-500/10 scale-110'
+                        : 'border-muted group-hover:border-primary-500/50'
+                    }`}>
+                      <feature.icon className={`m-auto size-6 transition-all duration-500 ${
+                        activeFeature === index
+                          ? 'text-primary-600 scale-110'
+                          : 'text-muted-foreground group-hover:text-primary-600'
+                      }`} strokeWidth={1.5} />
+                    </div>
+                    <div className="space-y-3 flex-1">
+                      <h3 className={`text-2xl lg:text-3xl font-bold transition-all duration-500 ${
+                        activeFeature === index
+                          ? 'text-primary-600'
+                          : 'text-foreground group-hover:text-primary-600'
+                      }`}>
+                        {feature.title}
+                      </h3>
+                      <p className="text-muted-foreground text-base lg:text-lg leading-relaxed">
+                        {feature.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Visual Column - Sticky */}
+          <div className="lg:sticky lg:top-[20vh] lg:h-[60vh] order-first lg:order-last">
+            <div className="relative w-full aspect-[3/2] bg-gray-100 dark:bg-gray-800 rounded-2xl border shadow-xl overflow-hidden">
+              {/* Render all images with opacity transitions */}
+              {features.map((feature, index) => (
+                <motion.img
+                  key={index}
+                  src={getFeatureImage(index)}
+                  alt={feature?.title || 'Feature preview'}
+                  className="absolute inset-0 w-full h-full object-cover rounded-2xl"
+                  initial={{ opacity: 0 }}
+                  animate={{
+                    opacity: activeFeature === index ? 1 : 0,
+                    scale: activeFeature === index ? 1 : 1.05
+                  }}
+                  transition={{
+                    duration: 0.5,
+                    ease: [0.25, 0.46, 0.45, 0.94],
+                    opacity: { duration: 0.4 },
+                    scale: { duration: 0.6 }
+                  }}
+                  style={{
+                    zIndex: activeFeature === index ? 2 : 1,
+                    display: imageLoaded[index] ? 'block' : 'none'
+                  }}
+                  onError={(e) => {
+                    console.error('Failed to load feature image:', getFeatureImage(index))
+                    e.target.style.display = 'none'
+                  }}
+                />
+              ))}
+
+              {/* Loading fallback */}
+              {!imageLoaded[activeFeature] && (
+                <div className="absolute inset-0 flex items-center justify-center text-muted-foreground bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900">
+                  <div className="text-center p-8">
+                    <div className={`w-24 h-24 rounded-2xl mx-auto mb-6 flex items-center justify-center bg-gradient-to-r ${features[activeFeature]?.color || 'from-primary-500 to-secondary-500'}`}>
+                      {React.createElement(features[activeFeature]?.icon, {
+                        className: "w-12 h-12 text-white",
+                        strokeWidth: 1.5
+                      })}
+                    </div>
+                    <h4 className="text-xl font-semibold text-foreground mb-3">
+                      {features[activeFeature]?.title}
+                    </h4>
+                    <p className="text-sm text-muted-foreground max-w-sm">
+                      Loading preview...
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+})
+
+ScrollytellingFeatureShowcase.displayName = 'ScrollytellingFeatureShowcase'
+
+export default ScrollytellingFeatureShowcase
diff --git a/frontend/src/components/ui/animated-testimonials.jsx b/frontend/src/components/ui/animated-testimonials.jsx
new file mode 100644
index 0000000..8343499
--- /dev/null
+++ b/frontend/src/components/ui/animated-testimonials.jsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useEffect, useState } from "react";
+import { cn } from "../../utils/cn";
+
+export const AnimatedTestimonials = ({
+  testimonials,
+  autoplay = false,
+  className,
+}) => {
+  const [active, setActive] = useState(0);
+
+  const handleNext = () => {
+    setActive((prev) => (prev + 1) % testimonials.length);
+  };
+
+  const handlePrev = () => {
+    setActive((prev) => (prev - 1 + testimonials.length) % testimonials.length);
+  };
+
+  const isActive = (index) => {
+    return index === active;
+  };
+
+  useEffect(() => {
+    if (autoplay) {
+      const interval = setInterval(handleNext, 5000);
+      return () => clearInterval(interval);
+    }
+  }, [autoplay]);
+
+  const randomRotateY = () => {
+    return Math.floor(Math.random() * 21) - 10;
+  };
+
+  return (
+    <div className={cn("max-w-sm md:max-w-4xl mx-auto px-4 md:px-8 lg:px-12 py-8", className)}>
+      <div className="relative grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16">
+        <div>
+          <div className="relative h-64 md:h-80 w-full">
+            <AnimatePresence>
+              {testimonials.map((testimonial, index) => (
+                <motion.div
+                  key={testimonial.src}
+                  initial={{
+                    opacity: 0,
+                    scale: 0.9,
+                    z: -100,
+                    rotate: randomRotateY(),
+                  }}
+                  animate={{
+                    opacity: isActive(index) ? 1 : 0.7,
+                    scale: isActive(index) ? 1 : 0.95,
+                    z: isActive(index) ? 0 : -100,
+                    rotate: isActive(index) ? 0 : randomRotateY(),
+                    zIndex: isActive(index)
+                      ? 999
+                      : testimonials.length + 2 - index,
+                    y: isActive(index) ? [0, -80, 0] : 0,
+                  }}
+                  exit={{
+                    opacity: 0,
+                    scale: 0.9,
+                    z: 100,
+                    rotate: randomRotateY(),
+                  }}
+                  transition={{
+                    duration: 0.4,
+                    ease: "easeInOut",
+                  }}
+                  className="absolute inset-0 origin-bottom"
+                >
+                  <img
+                    src={testimonial.src}
+                    alt={testimonial.name}
+                    draggable={false}
+                    className="h-full w-full rounded-3xl object-cover object-center"
+                  />
+                </motion.div>
+              ))}
+            </AnimatePresence>
+          </div>
+        </div>
+        <div className="flex justify-between flex-col py-4">
+          <motion.div
+            key={active}
+            initial={{
+              y: 20,
+              opacity: 0,
+            }}
+            animate={{
+              y: 0,
+              opacity: 1,
+            }}
+            exit={{
+              y: -20,
+              opacity: 0,
+            }}
+            transition={{
+              duration: 0.2,
+              ease: "easeInOut",
+            }}
+          >
+            <h3 className="text-2xl font-bold text-foreground">
+              {testimonials[active].name}
+            </h3>
+            <p className="text-sm text-muted-foreground">
+              {testimonials[active].designation}
+            </p>
+            <motion.p className="text-lg text-muted-foreground mt-8">
+              {testimonials[active].quote.split(" ").map((word, index) => (
+                <motion.span
+                  key={index}
+                  initial={{
+                    filter: "blur(10px)",
+                    opacity: 0,
+                    y: 5,
+                  }}
+                  animate={{
+                    filter: "blur(0px)",
+                    opacity: 1,
+                    y: 0,
+                  }}
+                  transition={{
+                    duration: 0.2,
+                    ease: "easeInOut",
+                    delay: 0.02 * index,
+                  }}
+                  className="inline-block"
+                >
+                  {word}&nbsp;
+                </motion.span>
+              ))}
+            </motion.p>
+          </motion.div>
+          <div className="flex gap-4 pt-12 md:pt-0">
+            <button
+              onClick={handlePrev}
+              className="h-7 w-7 rounded-full bg-secondary flex items-center justify-center group/button"
+            >
+              <IconArrowLeft className="h-5 w-5 text-foreground group-hover/button:rotate-12 transition-transform duration-300" />
+            </button>
+            <button
+              onClick={handleNext}
+              className="h-7 w-7 rounded-full bg-secondary flex items-center justify-center group/button"
+            >
+              <IconArrowRight className="h-5 w-5 text-foreground group-hover/button:-rotate-12 transition-transform duration-300" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/components/ui/container-scroll-animation.jsx b/frontend/src/components/ui/container-scroll-animation.jsx
new file mode 100644
index 0000000..7e49f19
--- /dev/null
+++ b/frontend/src/components/ui/container-scroll-animation.jsx
@@ -0,0 +1,87 @@
+"use client";
+import React, { useRef } from "react";
+import { useScroll, useTransform, motion } from "framer-motion";
+
+export const ContainerScroll = ({
+  titleComponent,
+  children,
+}) => {
+  const containerRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+  });
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
+  }, []);
+
+  const scaleDimensions = () => {
+    return isMobile ? [0.7, 0.9] : [1.05, 1];
+  };
+
+  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
+  const scale = useTransform(scrollYProgress, [0, 1], scaleDimensions());
+  const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);
+
+  return (
+    <div
+      className="h-[50rem] md:h-[60rem] flex items-center justify-center relative p-2 md:p-10"
+      ref={containerRef}
+    >
+      <div
+        className="py-5 md:py-20 w-full relative"
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <Header translate={translate} titleComponent={titleComponent} />
+        <Card rotate={rotate} translate={translate} scale={scale}>
+          {children}
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export const Header = ({ translate, titleComponent }) => {
+  return (
+    <motion.div
+      style={{
+        translateY: translate,
+      }}
+      className="div max-w-5xl mx-auto text-center"
+    >
+      {titleComponent}
+    </motion.div>
+  );
+};
+
+export const Card = ({
+  rotate,
+  scale,
+  children,
+}) => {
+  return (
+    <motion.div
+      style={{
+        rotateX: rotate,
+        scale,
+        boxShadow:
+          "0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003",
+      }}
+      className="max-w-5xl -mt-12 mx-auto h-auto w-auto border-4 border-[#6C6C6C] p-3 bg-[#222222] rounded-[30px] shadow-2xl"
+    >
+      <div className="overflow-hidden rounded-2xl bg-transparent flex items-center justify-center">
+        {children}
+      </div>
+    </motion.div>
+  );
+};
diff --git a/frontend/src/components/ui/pricing.jsx b/frontend/src/components/ui/pricing.jsx
index 7804f08..612cb2c 100644
--- a/frontend/src/components/ui/pricing.jsx
+++ b/frontend/src/components/ui/pricing.jsx
@@ -78,8 +78,8 @@ export const PricingCard = ({
               size="lg"
               className={cn(
                 "w-full group transition-all duration-300 text-sm font-medium py-3 px-6",
-                buttonVariant === "default" && "bg-indigo-600 hover:bg-indigo-700 text-white border-0 hover:scale-[1.02] shadow-lg",
-                buttonVariant === "outline" && "border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 hover:scale-[1.02]"
+                buttonVariant === "default" && "bg-indigo-600 hover:bg-indigo-700 text-white dark:text-white border-0 hover:scale-[1.02] shadow-lg dark:bg-indigo-600 dark:hover:bg-indigo-700",
+                buttonVariant === "outline" && "bg-indigo-600 hover:bg-indigo-700 text-white dark:text-white border-0 hover:scale-[1.02] shadow-lg dark:bg-indigo-600 dark:hover:bg-indigo-700"
               )}
             >
               <span className="flex items-center justify-center gap-2">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 202b89c..f920d6a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1064,6 +1064,23 @@
     animation-delay: calc(var(--stagger-delay, 0) * 100ms);
   }
 
+  /* Continuous arrow bounce animation */
+  .animate-arrow-bounce {
+    animation: arrowBounce 2s ease-in-out infinite;
+  }
+
+  @keyframes arrowBounce {
+    0%, 20%, 50%, 80%, 100% {
+      transform: translateX(0);
+    }
+    40% {
+      transform: translateX(4px);
+    }
+    60% {
+      transform: translateX(2px);
+    }
+  }
+
   /* Enhanced focus states */
   .focus-ring-inset {
     @apply focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500;
diff --git a/frontend/src/pages/LandingPage.jsx b/frontend/src/pages/LandingPage.jsx
index 258fa8e..3db70c9 100644
--- a/frontend/src/pages/LandingPage.jsx
+++ b/frontend/src/pages/LandingPage.jsx
@@ -3,7 +3,9 @@ import { useAuth } from '@clerk/clerk-react'
 import { useEffect, useRef, useState } from 'react'
 import FeatureShowcase from '../components/FeatureShowcase'
 import { PricingCard } from '../components/ui/pricing'
-import { CircularTestimonials } from '../components/ui/circular-testimonials'
+import { AnimatedTestimonials } from '../components/ui/animated-testimonials'
+import ScrollytellingFeatureShowcase from '../components/ui/ScrollytellingFeatureShowcase'
+import { HeroScrollDemo } from '../components/ui/HeroScrollDemo'
 import { useScrollAnimation } from '../hooks/useScrollAnimation'
 import { CompareSection } from '../components/CompareShowcase'
 import SEOHead from '../components/SEOHead'
@@ -40,6 +42,7 @@ const LandingPage = () => {
   const { isSignedIn } = useAuth()
   const [repositoryUrl, setRepositoryUrl] = useState('')
   const [validationError, setValidationError] = useState('')
+  const [counters, setCounters] = useState({ 0: 0, 1: 0, 2: 0, 3: 0 })
 
   // Scroll animation refs
   const heroRef = useScrollAnimation()
@@ -125,13 +128,85 @@ const LandingPage = () => {
     }
   ]
 
+  const scrollytellingSteps = [
+    {
+      id: "smart-automation",
+      title: "Smart Commit Automation",
+      description: "Our AI analyzes your coding patterns and generates meaningful commits that maintain your GitHub streak. Never worry about breaking your consistency again - AutoMaxLib intelligently schedules commits based on your workflow and preferences.",
+      visualAsset: {
+        type: "placeholder",
+        src: "/placeholder-feature-1.jpg",
+        altText: "Smart commit automation dashboard"
+      }
+    },
+    {
+      id: "flexible-scheduling",
+      title: "Flexible Scheduling",
+      description: "Set your preferred commit times and let AutoMaxLib adapt to your schedule. Whether you're a night owl or early bird, our intelligent scheduling ensures your commits happen when it makes sense for your workflow.",
+      visualAsset: {
+        type: "placeholder",
+        src: "/placeholder-feature-2.jpg",
+        altText: "Flexible scheduling interface"
+      }
+    },
+    {
+      id: "advanced-analytics",
+      title: "Advanced Analytics",
+      description: "Track your coding patterns, streak statistics, and productivity metrics with beautiful, detailed insights. Understand your development habits and optimize your workflow with data-driven decisions.",
+      visualAsset: {
+        type: "placeholder",
+        src: "/placeholder-feature-3.jpg",
+        altText: "Advanced analytics dashboard"
+      }
+    },
+    {
+      id: "secure-reliable",
+      title: "Secure & Reliable",
+      description: "Enterprise-grade security with 99.9% uptime ensures your automation runs smoothly. Your code and data are protected with industry-standard encryption and security practices.",
+      visualAsset: {
+        type: "placeholder",
+        src: "/placeholder-feature-4.jpg",
+        altText: "Security and reliability features"
+      }
+    }
+  ]
+
   const stats = [
-    { number: "100+", label: "Active Developers", icon: Users },
-    { number: "1000+", label: "Commits Generated", icon: GitBranch },
-    { number: "99.9%", label: "Uptime Reliability", icon: Shield },
-    { number: "365", label: "Days Automated", icon: Calendar }
+    { number: "100+", label: "Active Developers", icon: Users, target: 100 },
+    { number: "1000+", label: "Commits Generated", icon: GitBranch, target: 1000 },
+    { number: "99.9%", label: "Uptime Reliability", icon: Shield, target: 99.9 },
+    { number: "365", label: "Days Automated", icon: Calendar, target: 365 }
   ]
 
+  // Count animation effect
+  useEffect(() => {
+    const animateCounters = () => {
+      stats.forEach((stat, index) => {
+        const duration = 2000 // 2 seconds
+        const steps = 60
+        const increment = stat.target / steps
+        let current = 0
+
+        const timer = setInterval(() => {
+          current += increment
+          if (current >= stat.target) {
+            current = stat.target
+            clearInterval(timer)
+          }
+
+          setCounters(prev => ({
+            ...prev,
+            [index]: current
+          }))
+        }, duration / steps)
+      })
+    }
+
+    // Start animation after component mounts with delay
+    const timeout = setTimeout(animateCounters, 1000)
+    return () => clearTimeout(timeout)
+  }, [])
+
   const testimonials = [
     {
       quote: "AutoMaxLib has been a game-changer for maintaining my coding consistency. The intelligent scheduling means I never have to worry about breaking my streak, even during busy periods.",
@@ -161,7 +236,7 @@ const LandingPage = () => {
       period: "15 days",
       description: "Perfect for testing the automated commit experience",
       buttonText: "Start 15-Day Free Trial",
-      buttonVariant: "outline",
+      buttonVariant: "default",
       cta: "Start 15-Day Free Trial",
       popular: false,
       features: [
@@ -244,8 +319,10 @@ const LandingPage = () => {
       />
       <div className="min-h-screen">
       {/* Hero Section */}
-      <section ref={heroRef} className="bg-gray-50 py-16 md:py-32 dark:bg-transparent">
-        <div className="mx-auto max-w-3xl lg:max-w-5xl px-6">
+      <section ref={heroRef} className="bg-gray-50 py-16 md:py-32 dark:bg-transparent relative overflow-hidden">
+        {/* Left Side Gradient Glow */}
+        <div className="absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r from-sky-400/40 via-blue-500/30 to-orange-400/20 dark:from-blue-600/30 dark:via-indigo-600/20 dark:to-orange-600/15 blur-3xl opacity-80 dark:opacity-40"></div>
+        <div className="mx-auto max-w-3xl lg:max-w-5xl px-6 relative z-10">
           <div className="text-center space-y-8">
             {/* Main Headline */}
             <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold text-gray-900 dark:text-white leading-tight animate-fade-in-up">
@@ -263,10 +340,10 @@ const LandingPage = () => {
               {isSignedIn ? (
                 <Link
                   to="/dashboard"
-                  className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-lg font-medium ring-offset-background transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 hover:scale-105 hover-glow px-8 py-4"
+                  className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-lg font-medium ring-offset-background transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 hover:scale-105 hover-glow px-8 py-4 group"
                 >
                   Go to Dashboard
-                  <ArrowRight className="w-5 h-5 ml-2 transition-transform group-hover:translate-x-1" />
+                  <ArrowRight className="w-5 h-5 ml-2 transition-transform group-hover:translate-x-1 animate-arrow-bounce" />
                 </Link>
               ) : (
                 <>
@@ -296,8 +373,10 @@ const LandingPage = () => {
                   className="text-center transform transition-all duration-300 hover:scale-105 animate-fade-in-up"
                   style={{ animationDelay: `${0.8 + index * 0.1}s` }}
                 >
-                  <div className="text-2xl md:text-3xl font-semibold text-gray-900 dark:text-white mb-1 bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent">
-                    {stat.number}
+                  <div className="text-2xl md:text-3xl font-semibold mb-1 bg-gradient-to-r from-primary-600 to-secondary-600 dark:from-primary-400 dark:to-secondary-400 bg-clip-text text-transparent">
+                    {index === 2 ? `${counters[index].toFixed(1)}%` :
+                     index === 0 || index === 1 ? `${Math.floor(counters[index])}+` :
+                     Math.floor(counters[index])}
                   </div>
                   <div className="text-sm text-muted-foreground">
                     {stat.label}
@@ -310,46 +389,16 @@ const LandingPage = () => {
 
       </section>
 
-      {/* Features Section */}
-      <section ref={featuresRef} className="bg-gray-50 py-16 md:py-32 dark:bg-transparent">
-        <div className="mx-auto max-w-3xl lg:max-w-5xl px-6">
-          <div className="text-center mb-16 animate-fade-in-up">
-            <h2 className="text-3xl font-semibold text-gray-900 dark:text-white mb-6">
-              Everything You Need to Succeed
-            </h2>
-            <p className="text-lg text-foreground max-w-2xl mx-auto">
-              From intelligent automation to beautiful analytics, AutoMaxLib provides all the tools
-              you need to maintain consistency and build a professional developer profile.
-            </p>
-          </div>
+      {/* Features Section - Scrollytelling */}
+      <ScrollytellingFeatureShowcase
+        ref={featuresRef}
+        features={features}
+        title="Everything You Need to Succeed"
+        subtitle="From intelligent automation to beautiful analytics, AutoMaxLib provides all the tools you need to maintain consistency and build a professional developer profile."
+      />
 
-          <div className="grid grid-cols-6 gap-3">
-            {features.map((feature, index) => (
-              <div
-                key={index}
-                className="col-span-full sm:col-span-3 lg:col-span-2 animate-fade-in-up"
-                style={{ animationDelay: `${0.2 + index * 0.1}s` }}
-              >
-                <div className="rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden hover:shadow-lg hover:scale-105 transition-all duration-300 hover-glow group h-full flex flex-col">
-                  <div className="p-6 pt-6 flex-1 flex flex-col">
-                    <div className="relative flex aspect-square size-12 rounded-full border before:absolute before:-inset-2 before:rounded-full before:border dark:border-white/10 dark:before:border-white/5 mb-6 group-hover:scale-110 transition-transform duration-300">
-                      <feature.icon className="m-auto size-5 group-hover:text-primary-600 transition-colors duration-300" strokeWidth={1} />
-                    </div>
-                    <div className="space-y-2 flex-1 flex flex-col">
-                      <h3 className="text-lg font-medium transition group-hover:text-primary-600">
-                        {feature.title}
-                      </h3>
-                      <p className="text-foreground text-sm flex-1">
-                        {feature.description}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
+      {/* Hero Scroll Animation Section */}
+      <HeroScrollDemo />
 
       {/* Repository README Generation Section */}
       <section className="py-16 md:py-24 bg-gray-50 dark:bg-transparent">
@@ -504,7 +553,7 @@ const LandingPage = () => {
       {/* Testimonials Section */}
       <section className="section bg-gradient-to-br from-neutral-50 to-primary-50/30 dark:from-neutral-900 dark:to-primary-950/30">
         <div className="container-custom">
-          <div className="text-center mb-20">
+          <div className="text-center mb-8">
             <div className="inline-flex items-center gap-2 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full px-4 py-2 mb-6">
               <Quote className="w-4 h-4" />
               <span className="text-sm font-semibold">What Developers Say</span>
@@ -519,25 +568,10 @@ const LandingPage = () => {
             </p>
           </div>
 
-          <CircularTestimonials
+          <AnimatedTestimonials
             testimonials={testimonials}
             autoplay={true}
-            autoplayInterval={6000}
-            colors={{
-              name: "rgb(10, 10, 10)",
-              designation: "rgb(115, 115, 115)",
-              testimony: "rgb(64, 64, 64)",
-              arrowBackground: "transparent",
-              arrowForeground: "rgb(0, 0, 0)",
-              arrowHoverBackground: "rgb(255, 255, 255)",
-            }}
-            fontSizes={{
-              name: "24px",
-              designation: "16px",
-              quote: "18px",
-            }}
             className="animate-fade-in-up"
-            hideDots={true}
           />
         </div>
       </section>
@@ -631,7 +665,7 @@ const LandingPage = () => {
                 </Link>
                 <Link
                   to="/sign-in"
-                  className="border border-white/30 text-white hover:bg-white/10 font-medium py-3 px-6 rounded-md transition-colors duration-150 text-base inline-flex items-center gap-2"
+                  className="border border-gray-300 dark:border-white/30 text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-white/10 font-medium py-3 px-6 rounded-md transition-colors duration-150 text-base inline-flex items-center gap-2 bg-white/80 dark:bg-transparent"
                 >
                   <Github className="w-4 h-4" />
                   Sign In
diff --git a/query b/query
new file mode 100644
index 0000000..df37c12
--- /dev/null
+++ b/query
@@ -0,0 +1 @@
+MongoDB