feat: added testimonials, enhanced visuals and bumped up deps

package.json

@@ -9,30 +9,32 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.3.13",
+    "@astrojs/mdx": "^5.0.4",
-    "@astrojs/netlify": "^6.6.4",
+    "@astrojs/netlify": "^7.0.8",
-    "@astrojs/react": "^4.4.2",
+    "@astrojs/react": "^5.0.4",
-    "@astrojs/sitemap": "^3.7.0",
+    "@astrojs/sitemap": "^3.7.2",
+    "@hugeicons/core-free-icons": "^4.1.1",
+    "@hugeicons/react": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
-    "@tailwindcss/vite": "^4.2.1",
+    "@tailwindcss/vite": "^4.2.4",
     "@types/canvas-confetti": "^1.9.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "astro": "^5.18.0",
+    "astro": "^6.2.1",
-    "astro-loading-indicator": "^0.7.1",
+    "astro-loading-indicator": "^0.8.0",
     "canvas-confetti": "^1.9.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.577.0",
+    "lucide-react": "^1.14.0",
-    "motion": "^12.35.1",
+    "motion": "^12.38.0",
     "next-themes": "^0.4.6",
-    "react": "^19.2.4",
+    "react": "^19.2.5",
-    "react-dom": "^19.2.4",
+    "react-dom": "^19.2.5",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.2.1"
+    "tailwindcss": "^4.2.4"
   },
   "devDependencies": {
     "tw-animate-css": "^1.4.0"

src/components/AllDowloadsSection.tsx

@@ -246,7 +246,7 @@ export default function AllDownloadsSection({ release }: { release: LatestReleas
                             <span className="text-xs">(x64 / ARM64) AUR Snapshot</span>
                         </SlidingButton>
                     </div>
-                    <div className="flex items-center justify-center text-start max-w-2xl px-4">
+                    <div className="flex items-center justify-center text-start max-w-2xl px-4 mt-14">
                         <Alert>
                             <TriangleAlert className="size-4 stroke-yellow-400" />
                             <AlertTitle>Experimental Binary Downloads!</AlertTitle>
@@ -257,7 +257,7 @@ export default function AllDownloadsSection({ release }: { release: LatestReleas
                     </div>
                 </div>
             </BackgroundLines>
-            <div className="flex flex-col items-center justify-center text-center gap-2 mt-10 sm:mt-65 z-20">
+            <div className="flex flex-col items-center justify-center text-center gap-2 mt-24 sm:mt-65 z-20">
                 <p className="mt-4 text-xl font-semibold">Install via Command Line</p>
                 <p className="text-sm text-muted-foreground">Install NeoDLP directly via command line by running the command below based on your platform</p>
             </div>

src/components/FeaturesSection.tsx

@@ -1,5 +1,5 @@
 import { GlowingEffect } from "@/components/ui/glowing-effect";
-import { Box, Globe, HeartHandshake, Lock, Search, Settings, Sparkles, Video } from "lucide-react";
+import { Globe, HeartHandshake, Settings, Sparkles, Video } from "lucide-react";
 
 interface GridItemProps {
     area: string;
@@ -41,9 +41,9 @@ const GridItem = ({ area, icon, title, description }: GridItemProps) => {
 
 export default function FeaturesSection() {
     return (
-        <section className="flex flex-col w-full" id="features">
+        <section className="flex flex-col w-full mb-26" id="features">
             <div className="flex flex-col relative items-center">
-                <div className="flex flex-col items-center justify-center gap-2 pt-40 pb-16">
+                <div className="flex flex-col items-center justify-center gap-2 pt-40 pb-26">
                     <h3 className="text-3xl lg:text-4xl font-bold">Features</h3>
                     <p className="text-sm lg:text-lg font-semibold text-muted-foreground">Take a look on NeoDLP's features and offerings</p>
                 </div>

src/components/HighlightSection.tsx

@@ -3,7 +3,7 @@ import { WobbleCard } from "@/components/ui/wobble-card";
 
 export default function HighlightSection() {
     return (
-        <section className="flex flex-col w-full">
+        <section className="flex flex-col w-full mb-20">
             <div className="flex flex-col relative">
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 max-w-7xl mx-auto w-full px-4">
                 <WobbleCard

src/components/TestimonialSection.tsx

@@ -0,0 +1,47 @@
+import { InfiniteMovingCards } from "@/components/ui/infinite-moving-cards";
+
+export default function TestimonialSection() {
+    const testimonials = [
+        {
+            quote: "This is brilliant. No fuss and works.",
+            name: "NBCGLX",
+            title: "Reddit User",
+        },
+        {
+            quote: "JESUS CHRIST, MAN!! THIS IS GOOD! The UI is straight-up better than Stacher and Nickvision Parabolic. It can easily embed subtitles and thumbnails, that’s seriously impressive work!",
+            name: "JustAnAlias404",
+            title: "Reddit User",
+        },
+        {
+            quote: "Just tried a video on YouTube that other sites wouldn't let me get (because it's over 2GB) and your app worked perfectly! I appreciate your hard work and making it available to us.",
+            name: "Stingrea51",
+            title: "Reddit User",
+        },
+        {
+            quote: "holy sh*t ur app was amazing, had no clue how to use yt-dlp but this worked perfectly in 30 sec",
+            name: "RiickyBird",
+            title: "Reddit User",
+        },
+        {
+            quote: "I've been really struggling with getting yt-dlp to work, and your app is working flawlessly on Linux Pop_OS. Thank you for your work!!",
+            name: "Kestrel991",
+            title: "Reddit User",
+        },
+    ];
+
+    return (
+        <section className="flex flex-col w-full mb-16" id="testimonials">
+            <div className="flex flex-col items-center justify-center gap-2 pt-40 pb-16">
+                <h3 className="text-3xl lg:text-4xl font-bold">Testimonials</h3>
+                <p className="text-sm lg:text-lg font-semibold text-muted-foreground">Let's see, what real users are saying!</p>
+            </div>
+            <div className="h-[20rem] rounded-md flex flex-col antialiased bg-white dark:bg-black dark:bg-grid-white/[0.05] items-center justify-center relative overflow-hidden">
+                <InfiniteMovingCards
+                    items={testimonials}
+                    direction="right"
+                    speed="slow"
+                />
+            </div>
+        </section>
+    );
+}

src/components/footer.tsx

@@ -1,12 +1,13 @@
 import { Mail } from "lucide-react";
+import { NeoDlpText } from "@/components/icons/neodlp-text";
 
 
 export default function Footer() {
     return (
-        <footer className="flex justify-center items-center relative z-40 mt-30">
+        <footer className="flex flex-col justify-center items-center relative z-40 mt-30">
-            <div className="grid grid-cols-2 lg:grid-cols-5 gap-4 max-w-7xl w-full px-4 py-10 border-t border-border">
+            <div className="grid grid-cols-2 lg:grid-cols-5 gap-4 max-w-7xl w-full px-4 pt-16 pb-10 border-t border-border">
-                <div className="flex flex-col gap-2 col-span-2 mb-8 lg:mb-0">
+                <div className="flex flex-col gap-2 lg:gap-3 col-span-2 mb-8 lg:mb-0">
-                    <div className="flex flex-col gap-2">
+                    <div className="flex flex-col gap-2 lg:gap-3">
                         <a className="flex items-center gap-4" href="/">
                             <img className="size-8" src="/neodlp.svg" alt="neodlp" />
                             <h5 className="text-2xl font-bold">NeoDLP</h5>
@@ -14,31 +15,34 @@ export default function Footer() {
                         <p className="text-sm text-muted-foreground">The Next-Gen Cross-Platform Video Downloader</p>
                         <p className="text-sm mt-1">NeoDLP &copy; 2025 - {new Date().getFullYear()} &#8226; All Rights Reserved &#8226; <a className="hover:underline" href="https://github.com/neosubhamoy/neodlp/blob/main/LICENSE" target="_blank">MIT License</a></p>
                     </div>
-                    <div className="flex flex-col gap-2">
+                    <div className="flex flex-col gap-2 lg:gap-3">
                         <a className="flex items-center text-xs text-muted-foreground hover:underline" href="mailto:support@neodlp.neosubhamoy.com">
                             <Mail className="size-4" />
                             <span className="ml-2 pb-[0.15rem]">support@neodlp.neosubhamoy.com</span>
                         </a>
                     </div>
                 </div>
-                <div className="flex flex-col gap-2">
+                <div className="flex flex-col gap-2 lg:gap-3">
                     <h5 className="font-semibold mb-2">Legal</h5>
                     <a className="text-sm text-muted-foreground hover:underline" href="/privacy-policy">Privacy Policy</a>
                     <a className="text-sm text-muted-foreground hover:underline" href="/terms-of-use">Terms Of Use</a>
                     <a className="text-sm text-muted-foreground hover:underline" href="/dmca">DMCA</a>
                 </div>
-                <div className="flex flex-col gap-2">
+                <div className="flex flex-col gap-2 lg:gap-3">
                     <h5 className="font-semibold mb-2">Sources</h5>
                     <a className="text-sm text-muted-foreground hover:underline" href="https://github.com/neosubhamoy/neodlp" target="_blank">NeoDLP</a>
                     <a className="text-sm text-muted-foreground hover:underline" href="https://github.com/neosubhamoy/neodlp-extension" target="_blank">NeoDLP Extension</a>
                     <a className="text-sm text-muted-foreground hover:underline" href="https://github.com/neosubhamoy/neodlp-website" target="_blank">NeoDLP Website</a>
                 </div>
-                <div className="flex flex-col gap-2">
+                <div className="flex flex-col gap-2 lg:gap-3">
                     <h5 className="font-semibold mb-2">More Products from Us</h5>
                     <a className="text-sm text-muted-foreground hover:underline" href="https://github.com/neosubhamoy/pytubepp" target="_blank">PytubePP</a>
                     <a className="text-sm text-muted-foreground hover:underline" href="https://prourl.eu.org" target="_blank">ProURL</a>
                 </div>
             </div>
+            <div className="flex justify-center max-w-7xl w-full pt-10 lg:pt-20 relative overflow-hidden">
+                <NeoDlpText className="w-[90%] size-full opacity-40 dark:opacity-60 translate-y-1 lg:translate-y-5" />
+            </div>
         </footer>
     );
 }

src/components/icons/neodlp-text.tsx

@@ -0,0 +1,11 @@
+export function NeoDlpText({ className }: { className?: string }) {
+    return (
+        <svg width="577" height="102" viewBox="0 0 577 102" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+            <mask id="path-1-outside-1_2042_3" maskUnits="userSpaceOnUse" x="0" y="0" width="577" height="102" fill="var(--foreground)">
+                <rect fill="var(--background)" width="577" height="102"/>
+                <path d="M51 1V26H26V101H1V1H51ZM76 26V101H51V26H76ZM176 1V26H151V51H126V76H176V101H101V1H176ZM276 1V101H201V1H276ZM226 26V76H251V26H226ZM351 1V26H326V76H351V101H301V1H351ZM376 26V76H351V26H376ZM426 1V76H476V101H401V1H426ZM576 1V76H526V101H501V1H576ZM526 26V51H551V26H526Z"/>
+            </mask>
+            <path d="M51 1H52V0H51V1ZM51 26V27H52V26H51ZM26 26V25H25V26H26ZM26 101V102H27V101H26ZM1 101H0V102H1V101ZM1 1V0H0V1H1ZM76 26H77V25H76V26ZM76 101V102H77V101H76ZM51 101H50V102H51V101ZM51 26V25H50V26H51ZM51 1H50V26H51H52V1H51ZM51 26V25H26V26V27H51V26ZM26 26H25V101H26H27V26H26ZM26 101V100H1V101V102H26V101ZM1 101H2V1H1H0V101H1ZM1 1V2H51V1V0H1V1ZM76 26H75V101H76H77V26H76ZM76 101V100H51V101V102H76V101ZM51 101H52V26H51H50V101H51ZM51 26V27H76V26V25H51V26ZM176 1H177V0H176V1ZM176 26V27H177V26H176ZM151 26V25H150V26H151ZM151 51V52H152V51H151ZM126 51V50H125V51H126ZM126 76H125V77H126V76ZM176 76H177V75H176V76ZM176 101V102H177V101H176ZM101 101H100V102H101V101ZM101 1V0H100V1H101ZM176 1H175V26H176H177V1H176ZM176 26V25H151V26V27H176V26ZM151 26H150V51H151H152V26H151ZM151 51V50H126V51V52H151V51ZM126 51H125V76H126H127V51H126ZM126 76V77H176V76V75H126V76ZM176 76H175V101H176H177V76H176ZM176 101V100H101V101V102H176V101ZM101 101H102V1H101H100V101H101ZM101 1V2H176V1V0H101V1ZM276 1H277V0H276V1ZM276 101V102H277V101H276ZM201 101H200V102H201V101ZM201 1V0H200V1H201ZM226 26V25H225V26H226ZM226 76H225V77H226V76ZM251 76V77H252V76H251ZM251 26H252V25H251V26ZM276 1H275V101H276H277V1H276ZM276 101V100H201V101V102H276V101ZM201 101H202V1H201H200V101H201ZM201 1V2H276V1V0H201V1ZM226 26H225V76H226H227V26H226ZM226 76V77H251V76V75H226V76ZM251 76H252V26H251H250V76H251ZM251 26V25H226V26V27H251V26ZM351 1H352V0H351V1ZM351 26V27H352V26H351ZM326 26V25H325V26H326ZM326 76H325V77H326V76ZM351 76H352V75H351V76ZM351 101V102H352V101H351ZM301 101H300V102H301V101ZM301 1V0H300V1H301ZM376 26H377V25H376V26ZM376 76V77H377V76H376ZM351 76H350V77H351V76ZM351 26V25H350V26H351ZM351 1H350V26H351H352V1H351ZM351 26V25H326V26V27H351V26ZM326 26H325V76H326H327V26H326ZM326 76V77H351V76V75H326V76ZM351 76H350V101H351H352V76H351ZM351 101V100H301V101V102H351V101ZM301 101H302V1H301H300V101H301ZM301 1V2H351V1V0H301V1ZM376 26H375V76H376H377V26H376ZM376 76V75H351V76V77H376V76ZM351 76H352V26H351H350V76H351ZM351 26V27H376V26V25H351V26ZM426 1H427V0H426V1ZM426 76H425V77H426V76ZM476 76H477V75H476V76ZM476 101V102H477V101H476ZM401 101H400V102H401V101ZM401 1V0H400V1H401ZM426 1H425V76H426H427V1H426ZM426 76V77H476V76V75H426V76ZM476 76H475V101H476H477V76H476ZM476 101V100H401V101V102H476V101ZM401 101H402V1H401H400V101H401ZM401 1V2H426V1V0H401V1ZM576 1H577V0H576V1ZM576 76V77H577V76H576ZM526 76V75H525V76H526ZM526 101V102H527V101H526ZM501 101H500V102H501V101ZM501 1V0H500V1H501ZM526 26V25H525V26H526ZM526 51H525V52H526V51ZM551 51V52H552V51H551ZM551 26H552V25H551V26ZM576 1H575V76H576H577V1H576ZM576 76V75H526V76V77H576V76ZM526 76H525V101H526H527V76H526ZM526 101V100H501V101V102H526V101ZM501 101H502V1H501H500V101H501ZM501 1V2H576V1V0H501V1ZM526 26H525V51H526H527V26H526ZM526 51V52H551V51V50H526V51ZM551 51H552V26H551H550V51H551ZM551 26V25H526V26V27H551V26Z" fill="var(--foreground)" mask="url(#path-1-outside-1_2042_3)"/>
+        </svg>
+    )
+}

src/components/navbar.tsx

@@ -1,6 +1,7 @@
-import { Button } from "@/components/ui/button";
+// import { Button } from "@/components/ui/button";
-import { ModeToggle } from "@/components/ModeToggle";
+// import { ModeToggle } from "@/components/ModeToggle";
-import { Github } from "lucide-react";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Github01Icon } from "@hugeicons/core-free-icons";
 import {
     Navbar as ResizableNavbar,
     NavBody,
@@ -35,10 +36,10 @@ export default function Navbar() {
                 <NavbarLogo />
                 <NavItems items={navItems} />
                 <div className="flex items-center gap-4">
-                    <NavbarButton variant="secondary" as="a" href="https://github.com/neosubhamoy/neodlp" target="_blank" aria-label="GitHub">
-                        <Github className="h-4 w-4" />
-                    </NavbarButton>
                     <SimpleModeToggle />
+                    <NavbarButton variant="secondary" as="a" href="https://github.com/neosubhamoy/neodlp" target="_blank" aria-label="GitHub">
+                        <HugeiconsIcon icon={Github01Icon} className="size-5" />
+                    </NavbarButton>
                     <NavbarButton variant="primary" as="a" href="/download">
                         Download
                     </NavbarButton>
@@ -78,7 +79,7 @@ export default function Navbar() {
                         target="_blank"
                         aria-label="GitHub"
                     >
-                        <Github className="h-4 w-4" />
+                        <HugeiconsIcon icon={Github01Icon} className="size-5" />
                         View in GitHub
                     </NavbarButton>
                     <NavbarButton

src/components/ui/container-scroll-animation.tsx

@@ -217,7 +217,7 @@ export const ContainerScroll = ({
           >
             <span className="font-semibold flex items-center gap-2">
               <ArrowDownToLine className="size-4" />
-              All Downloads
+              More Downloads
             </span>
             <span className="text-xs">Choose from all download options</span>
           </SlidingButton>

src/components/ui/infinite-moving-cards.tsx

@@ -0,0 +1,115 @@
+import { cn } from "@/lib/utils";
+import React, { useEffect, useState } from "react";
+
+export const InfiniteMovingCards = ({
+  items,
+  direction = "left",
+  speed = "fast",
+  pauseOnHover = true,
+  className,
+}: {
+  items: {
+    quote: string;
+    name: string;
+    title: string;
+  }[];
+  direction?: "left" | "right";
+  speed?: "fast" | "normal" | "slow";
+  pauseOnHover?: boolean;
+  className?: string;
+}) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const scrollerRef = React.useRef<HTMLUListElement>(null);
+
+  useEffect(() => {
+    addAnimation();
+  }, []);
+  const [start, setStart] = useState(false);
+  function addAnimation() {
+    if (containerRef.current && scrollerRef.current) {
+      const scrollerContent = Array.from(scrollerRef.current.children);
+
+      scrollerContent.forEach((item) => {
+        const duplicatedItem = item.cloneNode(true);
+        if (scrollerRef.current) {
+          scrollerRef.current.appendChild(duplicatedItem);
+        }
+      });
+
+      getDirection();
+      getSpeed();
+      setStart(true);
+    }
+  }
+  const getDirection = () => {
+    if (containerRef.current) {
+      if (direction === "left") {
+        containerRef.current.style.setProperty(
+          "--animation-direction",
+          "forwards",
+        );
+      } else {
+        containerRef.current.style.setProperty(
+          "--animation-direction",
+          "reverse",
+        );
+      }
+    }
+  };
+  const getSpeed = () => {
+    if (containerRef.current) {
+      if (speed === "fast") {
+        containerRef.current.style.setProperty("--animation-duration", "20s");
+      } else if (speed === "normal") {
+        containerRef.current.style.setProperty("--animation-duration", "40s");
+      } else {
+        containerRef.current.style.setProperty("--animation-duration", "80s");
+      }
+    }
+  };
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "scroller relative z-20 max-w-7xl overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",
+        className,
+      )}
+    >
+      <ul
+        ref={scrollerRef}
+        className={cn(
+          "flex w-max min-w-full shrink-0 flex-nowrap gap-4 py-4",
+          start && "animate-scroll",
+          pauseOnHover && "hover:[animation-play-state:paused]",
+        )}
+      >
+        {items.map((item, idx) => (
+          <li
+            className="relative w-[350px] max-w-full shrink-0 rounded-2xl border border-b-0 border-zinc-200 bg-[linear-gradient(180deg,#fafafa,#f5f5f5)] px-8 py-6 md:w-[450px] dark:border-zinc-700 dark:bg-[linear-gradient(180deg,#27272a,#18181b)]"
+            key={item.name}
+          >
+            <blockquote>
+              <div
+                aria-hidden="true"
+                className="user-select-none pointer-events-none absolute -top-0.5 -left-0.5 -z-1 h-[calc(100%_+_4px)] w-[calc(100%_+_4px)]"
+              ></div>
+              <span className="relative z-20 text-sm leading-[1.6] font-normal text-neutral-800 dark:text-gray-100">
+                {item.quote}
+              </span>
+              <div className="relative z-20 mt-6 flex flex-row items-center">
+                <span className="flex flex-col gap-1">
+                  <span className="text-sm leading-[1.6] font-normal text-neutral-500 dark:text-gray-400">
+                    {item.name}
+                  </span>
+                  <span className="text-sm leading-[1.6] font-normal text-neutral-500 dark:text-gray-400">
+                    {item.title}
+                  </span>
+                </span>
+              </div>
+            </blockquote>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

src/pages/index.astro

@@ -2,6 +2,7 @@
 import FeaturesSection from '@/components/FeaturesSection';
 import HeroSection from '@/components/HeroSection';
 import HighlightSection from '@/components/HighlightSection';
+import TestimonialSection from '@/components/TestimonialSection';
 import Main from '@/layouts/main.astro';
 
 // Default fallback data in case fetch fails
@@ -101,4 +102,5 @@ try {
 	<HeroSection release={data} client:load />
 	<HighlightSection client:load />
 	<FeaturesSection client:load />
+	<TestimonialSection client:load />
 </Main>

src/styles/global.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 @import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
@@ -39,6 +39,14 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  --animate-scroll: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite;
+ 
+  @keyframes scroll {
+    to {
+      transform: translate(calc(-50% - 0.5rem));
+    }
+  }
 }
 
 :root {

tsconfig.json

@@ -10,7 +10,6 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "react",
-    "baseUrl": ".",
     "paths": {
       "@/*": [
         "./src/*"