chore: update dependencies and enhance component functionality

- Updated @types/node from 24.0.10 to 24.0.12 in package.json for improved type definitions.
- Integrated getDynamicStats function in HeroSection and Installation components to dynamically display the total number of components.
- Refactored Showcase component for improved readability and consistency in JSX formatting.
- Added new components: MagicalChatInput, SubandSup, and PixelLoadingAnimation.
- Introduced ComponentCounter utility for counting.

Author: Srijan-Baniyal

components/HeroSection.tsx

@@ -6,6 +6,7 @@ import { ArrowRight, Sparkles, Layers, Zap } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Pill } from "@/components/ui/pill";
 import { CountUp } from "@/components/vui/text/CountUp";
+import { getDynamicStats } from "@/lib/ComponentCounter";
 
 export default function HeroSection() {
   const [gridCells, setGridCells] = useState<boolean[]>([]);
@@ -204,7 +205,7 @@ export default function HeroSection() {
             <div>
               <div className="text-xl sm:text-2xl md:text-3xl font-bold text-foreground mb-1 bg-gradient-to-r from-primary to-secondary bg-clip-text">
                 <CountUp
-                  to={10}
+                  to={getDynamicStats().totalComponents}
                   suffix="+"
                   duration={2.5}
                   delay={0.5}

components/Installation.tsx

@@ -8,6 +8,7 @@ import {
   Rocket,
   Code,
 } from "lucide-react";
+import { getDynamicStats } from "@/lib/ComponentCounter";
 
 export default function Installation() {
   return (
@@ -287,7 +288,8 @@ export default function Installation() {
                           and patterns.
                         </p>
                         <div className="text-sm text-blue-600 font-medium">
-                          10+ Components Available →
+                          {getDynamicStats().totalComponents} Components
+                          Available →
                         </div>
                       </Card>
 

components/Showcase.tsx

@@ -1,37 +1,47 @@
-"use client"
+"use client";
 
-import { Button } from "@/components/ui/buttonShadcn"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { ExternalLink, Mail } from "lucide-react"
-import Image from "next/image"
-import Link from "next/link"
+import { Button } from "@/components/ui/buttonShadcn";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { ExternalLink, Mail } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
 
 type Project = {
-  id: number
-  name: string
-  description: string
-  image: string
-  url: string
-  category: string
-  technologies: string[]
-}
+  id: number;
+  name: string;
+  description: string;
+  image: string;
+  url: string;
+  category: string;
+  technologies: string[];
+};
 
-const showcaseProjects: Project[] = []
+const showcaseProjects: Project[] = [];
 
 const EmptyState = () => (
   <div className="flex flex-col items-center justify-center py-24">
-    <span className="text-6xl mb-4 animate-bounce" role="img" aria-label="Rocket">🚀</span>
-    <h3 className="text-2xl font-semibold mb-2">Cooking something delicious...</h3>
-    <p className="text-muted-foreground text-lg mb-4">Stay tuned! We are preparing some amazing showcases for you.</p>
-    <Button asChild size="lg" className="mt-2 animate-pulse">
-      <a href="mailto:[email protected]" aria-label="Email to get featured">
-        <Mail className="mr-2 h-4 w-4" />
-        Get Featured
-      </a>
-    </Button>
+    <span
+      className="text-6xl mb-4 animate-bounce"
+      role="img"
+      aria-label="Rocket"
+    >
+      🚀
+    </span>
+    <h3 className="text-2xl font-semibold mb-2">
+      Cooking something Beautiful...
+    </h3>
+    <p className="text-muted-foreground text-lg mb-4">
+      Stay tuned! We are preparing some amazing showcases for you.
+    </p>
   </div>
-)
+);
 
 export default function Showcase() {
   return (
@@ -42,8 +52,9 @@ export default function Showcase() {
           Projects in Production
         </h2>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-          Discover how businesses are leveraging our solutions to drive growth and innovation. See real implementations
-          making a difference across various industries.
+          Discover how businesses are leveraging our solutions to drive growth
+          and innovation. See real implementations making a difference across
+          various industries.
         </p>
       </div>
 
@@ -69,7 +80,10 @@ export default function Showcase() {
                     className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                   />
                   <div className="absolute top-3 right-3">
-                    <Badge variant="secondary" className="bg-white/90 text-black shadow">
+                    <Badge
+                      variant="secondary"
+                      className="bg-white/90 text-black shadow"
+                    >
                       {project.category}
                     </Badge>
                   </div>
@@ -86,7 +100,11 @@ export default function Showcase() {
                 {/* Technologies */}
                 <div className="flex flex-wrap gap-1 mb-4">
                   {project.technologies.map((tech: string) => (
-                    <Badge key={tech} variant="outline" className="text-xs border-primary/30">
+                    <Badge
+                      key={tech}
+                      variant="outline"
+                      className="text-xs border-primary/30"
+                    >
                       {tech}
                     </Badge>
                   ))}
@@ -116,12 +134,20 @@ export default function Showcase() {
             Want Your Project Featured Here?
           </h3>
           <p className="text-lg text-muted-foreground mb-8">
-            Join our showcase and let the world see how you&apos;re using our solutions to transform your business. Get in
-            touch to discuss featuring your implementation.
+            Join our showcase and let the world see how you&apos;re using our
+            solutions to transform your business. Get in touch to discuss
+            featuring your implementation.
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button asChild size="lg" className="inline-flex items-center animate-glow">
-              <a href="mailto:[email protected]" aria-label="Email to get featured">
+            <Button
+              asChild
+              size="lg"
+              className="inline-flex items-center animate-glow"
+            >
+              <a
+                href="mailto:[email protected]"
+                aria-label="Email to get featured"
+              >
                 <Mail className="mr-2 h-4 w-4" />
                 Email Me
               </a>
@@ -130,5 +156,5 @@ export default function Showcase() {
         </div>
       </div>
     </div>
-  )
+  );
 }

components/ui/ResizeAbleNavbar.tsx

@@ -52,10 +52,7 @@ interface MobileNavMenuProps {
 
 export const Navbar = ({ children, className }: NavbarProps) => {
   const ref = useRef<HTMLDivElement>(null);
-  const { scrollY } = useScroll({
-    target: ref,
-    offset: ["start start", "end start"],
-  });
+  const { scrollY } = useScroll();
   const [visible, setVisible] = useState<boolean>(false);
 
   useMotionValueEvent(scrollY, "change", (latest) => {

components/vui/PixelLoadingAnimation.tsx

@@ -0,0 +1,3 @@
+export default function MagicalChatInput() {
+  return <div>MagicalChatInput</div>;
+}