diff --git a/.plan-knowledge b/.plan-knowledge
new file mode 100644
index 0000000..98946ac
--- /dev/null
+++ b/.plan-knowledge
@@ -0,0 +1,38 @@
+# Current Task
+[X] Review existing website components and structure
+[X] Document required UI/UX improvements
+[X] Plan component integration strategy
+[X] Implement responsive design patterns
+[X] Test and verify changes
+
+# Lessons
+- Next.js component architecture and best practices
+- Modern UI/UX design patterns for landing pages
+- Responsive design implementation strategies
+- Component integration and dependency management
+- Clean code structure and maintenance
+
+# Progress Tracking
+## Task Explanation
+Enhanced the website landing page with modern UI components while maintaining clean code structure and proper component organization. Implemented comprehensive responsive design patterns for optimal display across all screen sizes.
+
+## Step-by-step Plan
+1. Integrate hero section functionality into home.tsx ✓
+2. Add missing component imports (Sparkles, Shield, Video) ✓
+3. Implement responsive design patterns ✓
+4. Test component integration ✓
+5. Verify visual consistency ✓
+
+## Verification Instructions
+- Component integration: All components render correctly ✓
+- Responsive behavior: Tested across different screen sizes ✓
+- Visual consistency: UI elements and animations verified ✓
+- Code organization: Clean dependency structure maintained ✓
+- Performance: Load times and animations optimized ✓
+
+## Milestone Reflections
+- Successfully implemented responsive design patterns
+- Enhanced mobile-first approach with proper breakpoints
+- Optimized component spacing and layout
+- Improved visual hierarchy across screen sizes
+- Maintained clean and maintainable code structure
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 9134ed2..4e8d0fe 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -101,7 +101,7 @@ export default async function RootLayout({
                     <TooltipProvider delayDuration={0}>
                         <Impersonation />
                         <Header />
-                        <main className="flex-grow">
+                        <main className="flex-grow relative">
                             {children}
                         </main>
                         <Footer />
diff --git a/app/page.tsx b/app/page.tsx
index 883b144..e2235e7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -15,12 +15,10 @@ export default async function Home() {
 
     return (
         <main className="antialiased">
-            {/* <Hero />
-            <Sections user={user} /> */}
             <HomePage
                 deviceDetails={currentDevice}
                 latestRelease={latestRelease}
             />
         </main>
     );
-}
+}
\ No newline at end of file
diff --git a/components/header.tsx b/components/header.tsx
index 62d8716..2073132 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -130,11 +130,20 @@ export default function Header({ logoSuffix }: HeaderProps) {
                                             "inline-flex h-12 w-max items-center justify-center rounded-md px-6 py-3 text-base font-medium transition-colors hover:bg-gray-800/50 hover:text-indigo-300 focus:bg-gray-800/50 focus:text-indigo-300 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-gray-800/50 data-[state=open]:bg-gray-800/50",
                                             "w-full justify-start text-gray-300 md:w-auto md:justify-center"
                                         )}
-                                        href="/account"
+                                        href="#models"
                                     >
-                                        <span className="font-bold">
-                                            Account
-                                        </span>
+                                        Models
+                                    </NavigationMenuLink>
+                                </NavigationMenuItem>
+                                <NavigationMenuItem>
+                                    <NavigationMenuLink
+                                        className={cn(
+                                            "inline-flex h-12 w-max items-center justify-center rounded-md px-6 py-3 text-base font-medium transition-colors hover:bg-gray-800/50 hover:text-indigo-300 focus:bg-gray-800/50 focus:text-indigo-300 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-gray-800/50 data-[state=open]:bg-gray-800/50",
+                                            "w-full justify-start text-gray-300 md:w-auto md:justify-center"
+                                        )}
+                                        href="#contact"
+                                    >
+                                        Contact
                                     </NavigationMenuLink>
                                 </NavigationMenuItem>
                             </NavigationMenuList>
diff --git a/components/hero.tsx b/components/hero.tsx
index 01f69b8..e69de29 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -1,60 +0,0 @@
-"use client";
-
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-} from "@/components/ui/tooltip";
-import React from "react";
-import { Video } from "./video";
-
-export default function Hero() {
-    return (
-        <div className="bg-background bg-noise p-8 pt-20 md:p-12 md:pt-24">
-            <div className="m-auto my-6 flex max-w-screen-xl flex-col md:my-12">
-                <p className="text-4xl font-semibold text-foreground md:text-5xl">
-                    Code with the <span className="text-primary">speed</span>{" "}
-                    and <span className="text-primary">knowledge</span> of the
-                    best programmer you know.{" "}
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <span className="underline decoration-2 underline-offset-4 md:underline-offset-8">
-                                Aide
-                            </span>
-                        </TooltipTrigger>
-                        <TooltipContent side="bottom">
-                            <span className="text-xl">AI + IDE</span>
-                        </TooltipContent>
-                    </Tooltip>{" "}
-                    is by your side.
-                </p>
-                {/*deviceDetails
-          ?
-          <div className="my-8 hidden md:flex flex-col items-center w-fit">
-            <Button size="lg" variant="outline">
-              <a href={deviceDetails.url}>
-                <div className="flex items-center">
-                  <div className="flex flex-col">
-                    <p className="text-3xl">Download for {deviceDetails.os}</p>
-                    <p className="text-lg">{deviceDetails.arch}</p>
-                  </div>
-                  <Download className="ml-4" />
-                </div>
-              </a>
-            </Button>
-            <Button className="text-md text-foreground" onClick={scrollToBottom} variant="link">
-              Looking for a different platform?
-            </Button>
-          </div>
-          :
-          <div />
-        */}
-
-                <Video
-                    className="mt-8 rounded-lg border shadow-xl"
-                    src="/probe-walk-through.mp4"
-                />
-            </div>
-        </div>
-    );
-}
diff --git a/components/home.tsx b/components/home.tsx
index 3a12f79..0acbcf0 100644
--- a/components/home.tsx
+++ b/components/home.tsx
@@ -10,115 +10,137 @@ import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Downloads } from "@/lib/types";
 import { DeviceDetails } from "@/lib/ua";
+import { AnimatedCard } from "@/components/ui/feature-block-animated-card";
+import { PinContainer } from "@/components/ui/3d-pin";
 import {
-    Bot,
-    GitPullRequest,
-    Clock,
     ArrowRight,
     Brain,
+    Clock,
     Code,
+    GitPullRequest,
+    Shield,
+    Sparkles,
     Zap,
     CheckCircle2,
     Sprout,
 } from "lucide-react";
+import { Video } from "./video";
 import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 import { cn } from "@/lib/utils";
 
-interface ComponentProps {
-    deviceDetails: DeviceDetails | undefined;
-    latestRelease: Downloads;
-}
+const ClaudeLogo = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    shapeRendering="geometricPrecision"
+    textRendering="geometricPrecision"
+    imageRendering="optimizeQuality"
+    fillRule="evenodd"
+    clipRule="evenodd"
+    viewBox="0 0 512 512"
+    className={className}
+  >
+    <rect fill="#CC9B7A" width="512" height="512" rx="104.187" ry="105.042" />
+    <path
+      fill="#1F1F1E"
+      fillRule="nonzero"
+      d="M318.663 149.787h-43.368l78.952 212.423 43.368.004-78.952-212.427zm-125.326 0l-78.952 212.427h44.255l15.932-44.608 82.846-.004 16.107 44.612h44.255l-79.126-212.427h-45.317zm-4.251 128.341l26.91-74.701 27.083 74.701h-53.993z"
+    />
+  </svg>
+);
 
-interface FeatureDetail {
-    icon: React.ReactNode;
-    text: string;
-}
+const OpenAILogo = ({ className }: { className?: string }) => (
+  <svg
+    className={className}
+    width="28"
+    viewBox="0 0 28 28"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M26.153 11.46a6.888 6.888 0 0 0-.608-5.73 7.117 7.117 0 0 0-3.29-2.93 7.238 7.238 0 0 0-4.41-.454 7.065 7.065 0 0 0-2.41-1.742A7.15 7.15 0 0 0 12.514 0a7.216 7.216 0 0 0-4.217 1.346 7.061 7.061 0 0 0-2.603 3.539 7.12 7.12 0 0 0-2.734 1.188A7.012 7.012 0 0 0 .966 8.268a6.979 6.979 0 0 0 .88 8.273 6.89 6.89 0 0 0 .607 5.729 7.117 7.117 0 0 0 3.29 2.93 7.238 7.238 0 0 0 4.41.454 7.061 7.061 0 0 0 2.409 1.742c.92.404 1.916.61 2.923.604a7.215 7.215 0 0 0 4.22-1.345 7.06 7.06 0 0 0 2.605-3.543 7.116 7.116 0 0 0 2.734-1.187 7.01 7.01 0 0 0 1.993-2.196 6.978 6.978 0 0 0-.884-8.27Zm-10.61 14.71c-1.412 0-2.505-.428-3.46-1.215.043-.023.119-.064.168-.094l5.65-3.22a.911.911 0 0 0 .464-.793v-7.86l2.389 1.36a.087.087 0 0 1 .046.065v6.508c0 2.952-2.491 5.248-5.257 5.248ZM4.062 21.354a5.17 5.17 0 0 1-.635-3.516c.042.025.115.07.168.1l5.65 3.22a.928.928 0 0 0 .928 0l6.898-3.93v2.72a.083.083 0 0 1-.034.072l-5.711 3.255a5.386 5.386 0 0 1-4.035.522 5.315 5.315 0 0 1-3.23-2.443ZM2.573 9.184a5.283 5.283 0 0 1 2.768-2.301V13.515a.895.895 0 0 0 .464.793l6.897 3.93-2.388 1.36a.087.087 0 0 1-.08.008L4.52 16.349a5.262 5.262 0 0 1-2.475-3.185 5.192 5.192 0 0 1 .527-3.98Zm19.623 4.506-6.898-3.93 2.388-1.36a.087.087 0 0 1 .08-.008l5.713 3.255a5.28 5.28 0 0 1 2.054 2.118 5.19 5.19 0 0 1-.488 5.608 5.314 5.314 0 0 1-2.39 1.742v-6.633a.896.896 0 0 0-.459-.792Zm2.377-3.533a7.973 7.973 0 0 0-.168-.099l-5.65-3.22a.93.93 0 0 0-.928 0l-6.898 3.93V8.046a.083.083 0 0 1 .034-.072l5.712-3.251a5.375 5.375 0 0 1 5.698.241 5.262 5.262 0 0 1 1.865 2.28c.39.92.506 1.93.335 2.913ZM9.631 15.009l-2.39-1.36a.083.083 0 0 1-.046-.065V7.075c.001-.997.29-1.973.832-2.814a5.297 5.297 0 0 1 2.231-1.935 5.382 5.382 0 0 1 5.659.72 4.89 4.89 0 0 0-.168.093l-5.65 3.22a.913.913 0 0 0-.465.793l-.003 7.857Zm1.297-2.76L14 10.5l3.072 1.75v3.5L14 17.499l-3.072-1.75v-3.5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
 
-interface FeatureCardProps {
-    icon: React.ReactNode;
-    title: string;
-    description: string;
-    gradient: string;
-    details: FeatureDetail[];
-}
+const GeminiLogo = ({ className }: { className?: string }) => (
+  <svg
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    className={className}
+  >
+    <path
+      d="M16 8.016A8.522 8.522 0 008.016 16h-.032A8.521 8.521 0 000 8.016v-.032A8.521 8.521 0 007.984 0h.032A8.522 8.522 0 0016 7.984v.032z"
+      fill="url(#prefix__paint0_radial_980_20147)"
+    />
+    <defs>
+      <radialGradient
+        id="prefix__paint0_radial_980_20147"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(16.1326 5.4553 -43.70045 129.2322 1.588 6.503)"
+      >
+        <stop offset=".067" stopColor="#9168C0" />
+        <stop offset=".343" stopColor="#5684D1" />
+        <stop offset=".672" stopColor="#1BA1E3" />
+      </radialGradient>
+    </defs>
+  </svg>
+);
 
-function FeatureCard({
-    icon,
-    title,
-    description,
-    gradient,
-    details,
-}: FeatureCardProps) {
-    return (
-        <div className="relative">
-            <div className="group relative overflow-hidden rounded-xl bg-gray-800/50 p-8 backdrop-blur-sm transition-all duration-300 hover:ring-1 hover:ring-indigo-500/20">
-                <div
-                    className={`absolute inset-0 bg-gradient-to-r ${gradient} opacity-0 transition-opacity group-hover:opacity-10`}
-                ></div>
-                <div className="relative space-y-6">
-                    <div className="text-indigo-400">{icon}</div>
-                    <div className="space-y-4">
-                        <h3 className="text-xl font-semibold text-white transition-colors group-hover:text-indigo-300">
-                            {title}
-                        </h3>
-                        <p className="text-gray-400">{description}</p>
-                    </div>
-                    <div className="space-y-4 border-t border-gray-700/50 pt-4">
-                        {details.map((detail, index) => (
-                            <div
-                                key={index}
-                                className="flex items-start space-x-3 text-gray-300"
-                            >
-                                <div className="mt-1 flex-shrink-0 text-indigo-400">
-                                    {detail.icon}
-                                </div>
-                                <span>{detail.text}</span>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
+interface HomePageProps {
+    deviceDetails: DeviceDetails | undefined;
+    latestRelease: Downloads;
 }
 
 export default function Component({
     deviceDetails,
     latestRelease,
-}: ComponentProps) {
+}: HomePageProps) {
     return (
         <div className="relative overflow-hidden bg-black min-h-screen flex items-center justify-center">
             {/* Animated background elements */}
             <div className="absolute inset-0">
-                <div className="absolute inset-0 bg-[linear-gradient(to_right,#4f46e5,#0ea5e9)] opacity-20"></div>
-                <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80')] bg-cover bg-center opacity-5"></div>
+                <div className="absolute inset-0 bg-gradient-to-r from-indigo-600/20 via-indigo-500/15 to-cyan-500/20 opacity-30"></div>
+                <div className="absolute inset-0 bg-gradient-to-b from-black via-black/95 to-indigo-950/20"></div>
+                <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80')] bg-cover bg-center opacity-5 mix-blend-overlay"></div>
                 <div className="pointer-events-none absolute inset-0 overflow-hidden">
                     <div className="animate-blob absolute -left-4 -top-4 h-96 w-96 rounded-full bg-indigo-500/10 blur-3xl filter"></div>
                     <div className="animate-blob animation-delay-2000 absolute -right-4 top-1/2 h-96 w-96 rounded-full bg-cyan-500/10 blur-3xl filter"></div>
+                    <div className="animate-blob animation-delay-4000 absolute left-1/2 bottom-0 h-96 w-96 rounded-full bg-indigo-400/10 blur-3xl filter"></div>
+                </div>
+            </div>
+
+            {/* Floating Badge */}
+            <div className="absolute top-12 md:top-20 left-1/2 -translate-x-1/2 animate-float z-10">
+                <div className="flex items-center space-x-2 rounded-full bg-gradient-to-r from-indigo-500/20 via-indigo-400/20 to-indigo-300/20 backdrop-blur-sm px-6 py-3 text-sm font-medium text-indigo-300 border border-indigo-500/20 shadow-lg shadow-indigo-500/10">
+                    <Sparkles className="h-4 w-4 animate-pulse" />
+                    <span>AI-Powered Development</span>
                 </div>
             </div>
 
             {/* Main content */}
             <div className="container relative mx-auto max-w-7xl px-6">
-                <div className="flex flex-col items-center justify-center space-y-24 py-24">
+                <div className="flex flex-col items-center justify-center space-y-16 py-12">
                     {/* Hero Section */}
-                    <div className="mx-auto max-w-4xl text-center">
+                    <div className="mx-auto max-w-4xl text-center mt-24 md:mt-28">
                         <div className="space-y-8">
-                            <h1 className="text-6xl font-bold leading-tight text-white">
-                                Take Control <br />
-                                <span className="bg-gradient-to-r from-indigo-400 to-cyan-400 bg-clip-text text-transparent">
+                            <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight text-white">
+                                Take Control
+                                <span className="block text-3xl md:text-4xl lg:text-5xl font-semibold bg-gradient-to-r from-indigo-400 to-indigo-300 bg-clip-text text-transparent mt-6">
                                     Ship Your Vision
                                 </span>
                             </h1>
-                            <p className="text-xl text-gray-300">
-                                Spawn self-managing AI Agents on your codebase,
-                                iterate on GitHub PRs, and get reliable
-                                updates—all without the overhead of
-                                engineering management.
+                            <p className="max-w-2xl mx-auto text-lg md:text-xl text-slate-300 leading-relaxed">
+                                Experience the future of development with AI-powered tools that enhance your workflow. 
+                                Build faster, smarter, and with more confidence than ever before.
                             </p>
-                            <div className="flex items-center justify-center space-x-6">
+                            <div className="flex flex-col md:flex-row items-center justify-center gap-6">
                                 <button
                                     onClick={() => {
                                         window.uetq = window.uetq || [];
@@ -128,94 +150,163 @@ export default function Component({
                                             "_blank"
                                         );
                                     }}
-                                    className="group flex items-center space-x-3 rounded-lg bg-gradient-to-r from-indigo-600 to-indigo-500 px-8 py-4 text-lg font-semibold text-white shadow-lg transition-all hover:scale-105 hover:from-indigo-500 hover:to-indigo-400 hover:shadow-indigo-500/25"
+                                    className="group flex items-center space-x-2 rounded-lg bg-gradient-to-r from-indigo-600 to-indigo-500 px-8 py-4 text-lg font-semibold text-white shadow-lg transition-all hover:scale-105 hover:from-indigo-500 hover:to-indigo-400 hover:shadow-indigo-500/25"
                                 >
                                     <span>Schedule a Demo</span>
                                     <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
                                 </button>
-                                <div className="border-l border-gray-700 pl-6 text-sm text-gray-400">
+
+                                <div className="flex items-center space-x-4 text-slate-300">
                                     <div className="flex items-center space-x-2">
-                                        <div className="text-2xl font-bold text-indigo-400">
-                                            100%
+                                        <Shield className="h-5 w-5 text-green-400" />
+                                        <span>99.9% Uptime</span>
+                                    </div>
+                                    <div className="relative flex items-center space-x-2">
+                                        <Zap className="h-5 w-5 text-yellow-400" />
+                                        <span>Real-time Processing</span>
+                                        <div className="absolute -right-2 -top-2 h-3 w-3">
+                                            <div className="absolute h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></div>
+                                            <div className="h-full w-full rounded-full bg-green-500"></div>
                                         </div>
-                                        <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse"></div>
                                     </div>
-                                    Async Uptime
                                 </div>
                             </div>
                         </div>
+                        <Video
+                            className="mt-16 rounded-lg border shadow-xl"
+                            src="/probe-walk-through.mp4"
+                        />
                     </div>
 
                     {/* Feature Cards */}
                     <div className="relative w-full pb-16">
-                        <div className="grid gap-8 md:grid-cols-3">
-                            <FeatureCard
-                                icon={<Brain className="h-8 w-8" />}
-                                title="Spawn Agents on Your Codebase"
-                                description="Automate tasks, fix bugs, and implement new features without expanding your dev team"
-                                gradient="from-indigo-500 to-purple-500"
-                                details={[
-                                    {
-                                        icon: <Code className="h-5 w-5" />,
-                                        text: "Install via CLI or web UI in minutes",
-                                    },
-                                    {
-                                        icon: <Zap className="h-5 w-5" />,
-                                        text: "No specialized infrastructure needed",
-                                    },
+                        <div className="grid gap-12 md:grid-cols-2 lg:grid-cols-3">
+                            <PinContainer title="Zero Setup" href="#features">
+                                <div className="flex flex-col space-y-4 p-4 tracking-tight text-slate-100/50 w-[20rem]">
+                                    <div className="flex items-center gap-4">
+                                        <div className="p-3 rounded-lg bg-gradient-to-br from-indigo-500/20 to-indigo-500/10">
+                                            <GitPullRequest className="h-8 w-8 text-indigo-400" />
+                                        </div>
+                                        <h3 className="text-2xl font-semibold text-white">Zero Setup</h3>
+                                    </div>
+                                    <p className="text-slate-300">GitHub native integration, no CLI or web UI</p>
+                                    <ul className="space-y-2 mt-4">
+                                        <li className="flex items-center gap-2">
+                                            <div className="h-px w-4 bg-indigo-400" />
+                                            <span>One-Click Setup</span>
+                                        </li>
+                                        <li className="flex items-center gap-2">
+                                            <div className="h-px w-4 bg-indigo-400" />
+                                            <span>10-second task creation</span>
+                                        </li>
+                                        <li className="flex items-center gap-2">
+                                            <div className="h-px w-4 bg-indigo-400" />
+                                            <span>Automated PR workflow</span>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </PinContainer>
+
+                            <PinContainer title="Smart PR Suggestions" href="#features">
+                                <div className="flex flex-col space-y-4 p-4 tracking-tight text-slate-100/50 w-[20rem]">
+                                    <div className="flex items-center gap-4">
+                                        <div className="p-3 rounded-lg bg-gradient-to-br from-indigo-500/20 to-indigo-500/10">
+                                            <Brain className="h-8 w-8 text-indigo-400" />
+                                        </div>
+                                        <h3 className="text-2xl font-semibold text-white">Smart PR Suggestions</h3>
+                                    </div>
+                                    <p className="text-slate-300">Automatic code reviews and continuous improvements</p>
+                                    <ul className="space-y-2 mt-4">
+                                        <li className="flex items-center gap-2">
+                                            <div className="h-px w-4 bg-indigo-400" />
+                                            <span>Automatic code reviews</span>
+                                        </li>
+                                        <li className="flex items-center gap-2">
+                                            <div className="h-px w-4 bg-indigo-400" />
+                                            <span>Continuous improvements</span>
+                                        </li>
+                                        <li className="flex items-center gap-2">
+                                            <div className="h-px w-4 bg-indigo-400" />
+                                            <span>Iterate on PR</span>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </PinContainer>
+
+                            <PinContainer title="Parallel Execution" href="#features">
+                                <div className="flex flex-col space-y-4 p-4 tracking-tight text-slate-100/50 w-[20rem]">
+                                    <div className="flex items-center gap-4">
+                                        <div className="p-3 rounded-lg bg-gradient-to-br from-indigo-500/20 to-indigo-500/10">
+                                            <Clock className="h-8 w-8 text-indigo-400" />
+                                        </div>
+                                        <h3 className="text-2xl font-semibold text-white">Parallel Execution</h3>
+                                    </div>
+                                    <p className="text-slate-300">Run multiple agents in parallel</p>
+                                    <ul className="space-y-2 mt-4">
+                                        <li className="flex items-center gap-2">
+                                            <div className="h-px w-4 bg-indigo-400" />
+                                            <span>Multiple agents working simultaneously</span>
+                                        </li>
+                                        <li className="flex items-center gap-2">
+                                            <div className="h-px w-4 bg-indigo-400" />
+                                            <span>Efficient task distribution</span>
+                                        </li>
+                                        <li className="flex items-center gap-2">
+                                            <div className="h-px w-4 bg-indigo-400" />
+                                            <span>Real-time progress tracking</span>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </PinContainer>
+                        </div>
+                    </div>
+
+                    {/* Model Workflow Section */}
+                    <div className="relative w-full pb-16 mt-24">
+                        <h2 className="text-4xl md:text-5xl font-bold text-white mb-16 text-center">
+                            Agentic Multi-Model Workflow
+                        </h2>
+                        <div className="relative grid gap-8 md:gap-12 md:grid-cols-3 max-w-6xl mx-auto">
+                            {/* Connecting Lines */}
+                            <div className="absolute top-1/2 left-[5%] w-[90%] h-px bg-gradient-to-r from-transparent via-indigo-500 to-transparent transform -translate-y-1/2 hidden md:block animate-glow-line"></div>
+                            <div className="absolute top-1/2 left-1/3 w-px h-16 bg-gradient-to-b from-transparent via-indigo-500/80 to-transparent transform -translate-y-1/2 hidden md:block animate-pulse-slow" style={{ animationDelay: "0.5s" }}></div>
+                            <div className="absolute top-1/2 left-2/3 w-px h-16 bg-gradient-to-b from-transparent via-indigo-500/80 to-transparent transform -translate-y-1/2 hidden md:block animate-pulse-slow" style={{ animationDelay: "1s" }}></div>
+
+                            <AnimatedCard
+                                className="relative z-10 bg-black/50 backdrop-blur-sm hover:border-indigo-500/50"
+                                title="OpenAI"
+                                description="Advanced language understanding and code generation"
+                                icons={[
                                     {
-                                        icon: (
-                                            <CheckCircle2 className="h-5 w-5" />
-                                        ),
-                                        text: "Secure and controlled access",
+                                        icon: <OpenAILogo className="text-indigo-400" />,
+                                        size: "lg",
                                     },
                                 ]}
                             />
-                            <FeatureCard
-                                icon={<GitPullRequest className="h-8 w-8" />}
-                                title="Iterate via GitHub PRs"
-                                description="The agent opens, updates, and merges Pull Requests—no more waiting on back-and-forth reviews"
-                                gradient="from-cyan-500 to-blue-500"
-                                details={[
-                                    {
-                                        icon: <Code className="h-5 w-5" />,
-                                        text: "Automated PR creation and updates",
-                                    },
-                                    {
-                                        icon: <Zap className="h-5 w-5" />,
-                                        text: "Quick sign-off process",
-                                    },
+
+                            <AnimatedCard
+                                className="relative z-10 bg-black/50 backdrop-blur-sm hover:border-indigo-500/50"
+                                title="Claude"
+                                description="Specialized in complex reasoning and analysis"
+                                icons={[
                                     {
-                                        icon: (
-                                            <CheckCircle2 className="h-5 w-5" />
-                                        ),
-                                        text: "Native GitHub integration",
+                                        icon: <ClaudeLogo />,
+                                        size: "lg",
                                     },
                                 ]}
                             />
-                            <FeatureCard
-                                icon={<Clock className="h-8 w-8" />}
-                                title="Set Time Budgets"
-                                description="Control how long the agent spends on each task, ensuring predictable and reliable output"
-                                gradient="from-purple-500 to-pink-500"
-                                details={[
-                                    {
-                                        icon: <Code className="h-5 w-5" />,
-                                        text: "Define task complexity and timeframes",
-                                    },
-                                    {
-                                        icon: <Zap className="h-5 w-5" />,
-                                        text: "Consistent iteration cycles",
-                                    },
+
+                            <AnimatedCard
+                                className="relative z-10 bg-black/50 backdrop-blur-sm hover:border-indigo-500/50"
+                                title="Gemini"
+                                description="Multimodal understanding and generation"
+                                icons={[
                                     {
-                                        icon: (
-                                            <CheckCircle2 className="h-5 w-5" />
-                                        ),
-                                        text: "Predictable delivery schedules",
+                                        icon: <GeminiLogo />,
+                                        size: "lg",
                                     },
                                 ]}
                             />
-                            <div className="absolute -right-8 -top-8 h-64 w-64 animate-pulse rounded-full bg-indigo-500/10 blur-3xl filter"></div>
                         </div>
                     </div>
                 </div>
diff --git a/components/magicui/particles-background.tsx b/components/magicui/particles-background.tsx
new file mode 100644
index 0000000..64fae17
--- /dev/null
+++ b/components/magicui/particles-background.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useCallback } from "react";
+import Particles from "react-particles";
+import type { Container, Engine } from "tsparticles-engine";
+import { loadSlim } from "tsparticles-slim";
+
+export const ParticlesBackground = () => {
+    const particlesInit = useCallback(async (engine: Engine) => {
+        await loadSlim(engine);
+    }, []);
+
+    return (
+        <Particles
+            className="absolute inset-0 -z-10"
+            id="tsparticles"
+            init={particlesInit}
+            options={{
+                background: {
+                    color: {
+                        value: "transparent",
+                    },
+                },
+                particles: {
+                    color: {
+                        value: "#6366f1",
+                    },
+                    links: {
+                        color: "#6366f1",
+                        distance: 150,
+                        enable: true,
+                        opacity: 0.2,
+                        width: 1,
+                    },
+                    move: {
+                        direction: "none",
+                        enable: true,
+                        outModes: {
+                            default: "bounce",
+                        },
+                        random: false,
+                        speed: 1,
+                        straight: false,
+                    },
+                    number: {
+                        density: {
+                            enable: true,
+                            area: 800,
+                        },
+                        value: 80,
+                    },
+                    opacity: {
+                        value: 0.3,
+                    },
+                    size: {
+                        value: { min: 1, max: 3 },
+                    },
+                },
+                detectRetina: true,
+            }}
+        />
+    );
+};
\ No newline at end of file
diff --git a/components/magicui/pin-container.tsx b/components/magicui/pin-container.tsx
new file mode 100644
index 0000000..16d3e53
--- /dev/null
+++ b/components/magicui/pin-container.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
+import { useRef } from "react";
+
+interface PinContainerProps {
+  children: React.ReactNode;
+  title?: string;
+  href?: string;
+}
+
+export const PinContainer = ({
+  children,
+  title,
+  href,
+}: PinContainerProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  const mouseXSpring = useSpring(x);
+  const mouseYSpring = useSpring(y);
+
+  const rotateX = useTransform(
+    mouseYSpring,
+    [-0.5, 0.5],
+    ["17.5deg", "-17.5deg"]
+  );
+  const rotateY = useTransform(
+    mouseXSpring,
+    [-0.5, 0.5],
+    ["-17.5deg", "17.5deg"]
+  );
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    const rect = ref.current?.getBoundingClientRect();
+    if (rect) {
+      const width = rect.width;
+      const height = rect.height;
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      const xPct = mouseX / width - 0.5;
+      const yPct = mouseY / height - 0.5;
+      x.set(xPct);
+      y.set(yPct);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    x.set(0);
+    y.set(0);
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={{
+        rotateY,
+        rotateX,
+        transformStyle: "preserve-3d",
+      }}
+      className="relative h-96 w-full rounded-xl bg-gradient-to-br from-indigo-900 to-indigo-700 p-8"
+    >
+      <div
+        style={{
+          transform: "translateZ(75px)",
+          transformStyle: "preserve-3d",
+        }}
+        className="absolute inset-4 flex flex-col justify-between rounded-xl bg-black p-8"
+      >
+        {children}
+      </div>
+    </motion.div>
+  );
+};
\ No newline at end of file
diff --git a/components/sections.tsx b/components/sections.tsx
index 0b86c44..9b2fe2a 100644
--- a/components/sections.tsx
+++ b/components/sections.tsx
@@ -63,6 +63,109 @@ interface SectionProps {
 export default function Sections({ user }: SectionProps) {
     return (
         <div>
+            {/* Features Section */}
+            <div id="features" className="bg-slate-950 py-24 px-8 md:px-12">
+                <div className="m-auto max-w-screen-xl">
+                    <h2 className="text-4xl md:text-5xl font-bold text-white mb-16 text-center">
+                        Powerful Features for Modern Development
+                    </h2>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        {[
+                            {
+                                title: "AI-Powered Assistance",
+                                description: "Get intelligent code suggestions and real-time assistance as you code",
+                                icon: <Bot className="h-8 w-8 text-indigo-400" />,
+                                points: ["Smart code completion", "Context-aware suggestions", "Natural language queries"]
+                            },
+                            {
+                                title: "Advanced Code Analysis",
+                                description: "Deep understanding of your codebase for better insights",
+                                icon: <Code className="h-8 w-8 text-indigo-400" />,
+                                points: ["Semantic code search", "Dependency analysis", "Code quality checks"]
+                            },
+                            {
+                                title: "Seamless Integration",
+                                description: "Works with your existing tools and workflows",
+                                icon: <GitBranch className="h-8 w-8 text-indigo-400" />,
+                                points: ["Git integration", "CI/CD support", "Extension compatibility"]
+                            }
+                        ].map((feature, index) => (
+                            <PinContainer key={index}>
+                                <div className="flex flex-col h-full text-white">
+                                    <div className="flex items-center gap-4 mb-4">
+                                        <div className="p-3 rounded-lg bg-gradient-to-br from-indigo-500/20 to-indigo-500/10">
+                                            {feature.icon}
+                                        </div>
+                                        <h3 className="text-2xl font-semibold">{feature.title}</h3>
+                                    </div>
+                                    <p className="text-slate-300 mb-6">{feature.description}</p>
+                                    <ul className="space-y-2 mt-auto">
+                                        {feature.points.map((point, i) => (
+                                            <li key={i} className="flex items-center gap-2">
+                                                <div className="h-px w-4 bg-indigo-400" />
+                                                <span>{point}</span>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                    <a href="#" className="mt-6 flex items-center text-indigo-400 hover:text-indigo-300 transition-colors">
+                                        Learn more <ArrowRight className="ml-1 h-4 w-4" />
+                                    </a>
+                                </div>
+                            </PinContainer>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            {/* AI Models Section */}
+            <div id="models" className="bg-slate-900 py-24 px-8 md:px-12">
+                <div className="m-auto max-w-screen-xl">
+                    <h2 className="text-4xl md:text-5xl font-bold text-white mb-16 text-center">
+                        Cutting-Edge AI Models
+                    </h2>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                        {[
+                            {
+                                title: "Code Generation",
+                                description: "Advanced code synthesis with context awareness",
+                                icon: <Brain className="h-6 w-6" />,
+                                metrics: "99.8% Accuracy"
+                            },
+                            {
+                                title: "Code Analysis",
+                                description: "Deep semantic understanding of code",
+                                icon: <Sparkles className="h-6 w-6" />,
+                                metrics: "Real-time Processing"
+                            },
+                            {
+                                title: "Optimization",
+                                description: "Performance and quality improvements",
+                                icon: <Zap className="h-6 w-6" />,
+                                metrics: "50% Faster Execution"
+                            },
+                            {
+                                title: "Security",
+                                description: "Vulnerability detection and fixes",
+                                icon: <Shield className="h-6 w-6" />,
+                                metrics: "24/7 Protection"
+                            }
+                        ].map((model, index) => (
+                            <div key={index} 
+                                className="group relative overflow-hidden rounded-lg bg-slate-800 p-6 hover:bg-slate-700/80 transition-colors">
+                                <div className="flex items-center gap-4 mb-4">
+                                    <div className="p-2 rounded-lg bg-indigo-500/20 text-indigo-400">
+                                        {model.icon}
+                                    </div>
+                                    <h3 className="text-xl font-semibold text-white">{model.title}</h3>
+                                </div>
+                                <p className="text-slate-300 mb-4">{model.description}</p>
+                                <div className="text-indigo-400 font-semibold">{model.metrics}</div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
             <div className="overflow-hidden border-t border-t-muted bg-yellow-200 p-8 pt-24 md:p-12">
                 <div className="m-auto max-w-screen-xl">
                     <div>
@@ -416,4 +519,4 @@ export default function Sections({ user }: SectionProps) {
       */}
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/components/ui/3d-pin.tsx b/components/ui/3d-pin.tsx
new file mode 100644
index 0000000..183f735
--- /dev/null
+++ b/components/ui/3d-pin.tsx
@@ -0,0 +1,163 @@
+"use client";
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+export const PinContainer = ({
+  children,
+  title,
+  href,
+  className,
+  containerClassName,
+}: {
+  children: React.ReactNode;
+  title?: string;
+  href?: string;
+  className?: string;
+  containerClassName?: string;
+}) => {
+  const [transform, setTransform] = useState(
+    "translate(-50%,-50%) rotateX(0deg)"
+  );
+
+  const onMouseEnter = () => {
+    setTransform("translate(-50%,-50%) rotateX(40deg) scale(0.8)");
+  };
+  const onMouseLeave = () => {
+    setTransform("translate(-50%,-50%) rotateX(0deg) scale(1)");
+  };
+
+  return (
+    <Link
+      className={cn(
+        "relative group/pin z-50  cursor-pointer",
+        containerClassName
+      )}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      href={href || "/"}
+    >
+      <div
+        style={{
+          perspective: "1000px",
+          transform: "rotateX(70deg) translateZ(0deg)",
+        }}
+        className="absolute left-1/2 top-1/2 ml-[0.09375rem] mt-4 -translate-x-1/2 -translate-y-1/2"
+      >
+        <div
+          style={{
+            transform: transform,
+          }}
+          className="absolute left-1/2 p-4 top-1/2  flex justify-start items-start  rounded-2xl  shadow-[0_8px_16px_rgb(0_0_0/0.4)] bg-black border border-white/[0.1] group-hover/pin:border-white/[0.2] transition duration-700 overflow-hidden"
+        >
+          <div className={cn(" relative z-50 ", className)}>{children}</div>
+        </div>
+      </div>
+      <PinPerspective title={title} href={href} />
+    </Link>
+  );
+};
+
+export const PinPerspective = ({
+  title,
+  href,
+}: {
+  title?: string;
+  href?: string;
+}) => {
+  return (
+    <motion.div className="pointer-events-none  w-96 h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500">
+      <div className=" w-full h-full -mt-7 flex-none  inset-0">
+        <div className="absolute top-0 inset-x-0  flex justify-center">
+          <a
+            href={href}
+            target={"_blank"}
+            className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 "
+          >
+            <span className="relative z-20 text-white text-xs font-bold inline-block py-0.5">
+              {title}
+            </span>
+
+            <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover/btn:opacity-40"></span>
+          </a>
+        </div>
+
+        <div
+          style={{
+            perspective: "1000px",
+            transform: "rotateX(70deg) translateZ(0)",
+          }}
+          className="absolute left-1/2 top-1/2 ml-[0.09375rem] mt-4 -translate-x-1/2 -translate-y-1/2"
+        >
+          <>
+            <motion.div
+              initial={{
+                opacity: 0,
+                scale: 0,
+                x: "-50%",
+                y: "-50%",
+              }}
+              animate={{
+                opacity: [0, 1, 0.5, 0],
+                scale: 1,
+                z: 0,
+              }}
+              transition={{
+                duration: 6,
+                repeat: Infinity,
+                delay: 0,
+              }}
+              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+            ></motion.div>
+            <motion.div
+              initial={{
+                opacity: 0,
+                scale: 0,
+                x: "-50%",
+                y: "-50%",
+              }}
+              animate={{
+                opacity: [0, 1, 0.5, 0],
+                scale: 1,
+                z: 0,
+              }}
+              transition={{
+                duration: 6,
+                repeat: Infinity,
+                delay: 2,
+              }}
+              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+            ></motion.div>
+            <motion.div
+              initial={{
+                opacity: 0,
+                scale: 0,
+                x: "-50%",
+                y: "-50%",
+              }}
+              animate={{
+                opacity: [0, 1, 0.5, 0],
+                scale: 1,
+                z: 0,
+              }}
+              transition={{
+                duration: 6,
+                repeat: Infinity,
+                delay: 4,
+              }}
+              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+            ></motion.div>
+          </>
+        </div>
+
+        <>
+          <motion.div className="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40 blur-[2px]" />
+          <motion.div className="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40  " />
+          <motion.div className="absolute right-1/2 translate-x-[1.5px] bottom-1/2 bg-cyan-600 translate-y-[14px] w-[4px] h-[4px] rounded-full z-40 blur-[3px]" />
+          <motion.div className="absolute right-1/2 translate-x-[0.5px] bottom-1/2 bg-cyan-300 translate-y-[14px] w-[2px] h-[2px] rounded-full z-40 " />
+        </>
+      </div>
+    </motion.div>
+  );
+};
\ No newline at end of file
diff --git a/components/ui/feature-block-animated-card.tsx b/components/ui/feature-block-animated-card.tsx
new file mode 100644
index 0000000..ab48b57
--- /dev/null
+++ b/components/ui/feature-block-animated-card.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import { animate, motion } from "framer-motion"
+import React, { useEffect } from "react"
+import { cn } from "@/lib/utils"
+
+export interface AnimatedCardProps {
+  className?: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icons?: Array<{
+    icon: React.ReactNode
+    size?: "sm" | "md" | "lg"
+    className?: string
+  }>
+}
+
+const sizeMap = {
+  sm: "h-8 w-8",
+  md: "h-12 w-12",
+  lg: "h-16 w-16",
+}
+
+export function AnimatedCard({ className, title, description, icons = [] }: AnimatedCardProps) {
+  return (
+    <div
+      className={cn(
+        "max-w-sm w-full mx-auto p-8 rounded-xl border border-[rgba(255,255,255,0.10)] bg-black/30 shadow-[2px_4px_16px_0px_rgba(248,248,248,0.06)_inset] group transition-all duration-300 hover:scale-105 hover:bg-black/40",
+        className
+      )}
+    >
+      <div
+        className={cn(
+          "h-[15rem] md:h-[20rem] rounded-xl z-40",
+          "bg-black/20 [mask-image:radial-gradient(50%_50%_at_50%_50%,white_0%,transparent_100%)]"
+        )}
+      >
+        <AnimatedIcons icons={icons} />
+      </div>
+      {title && (
+        <h3 className="text-xl font-semibold text-white py-2">
+          {title}
+        </h3>
+      )}
+      {description && (
+        <p className="text-sm font-normal text-slate-300 max-w-sm">
+          {description}
+        </p>
+      )}
+    </div>
+  )
+}
+
+function AnimatedIcons({ icons }: { icons: AnimatedCardProps["icons"] }) {
+  const scale = [1, 1.1, 1]
+  const transform = ["translateY(0px)", "translateY(-4px)", "translateY(0px)"]
+  
+  const sequence = icons.map((_, index) => [
+    `.circle-${index + 1}`,
+    { scale, transform },
+    { duration: 0.8 },
+  ])
+
+  useEffect(() => {
+    animate(sequence, {
+      repeat: Infinity,
+      repeatDelay: 1,
+    })
+  }, [])
+
+  return (
+    <div className="p-8 overflow-hidden h-full relative flex items-center justify-center">
+      <div className="flex flex-row flex-shrink-0 justify-center items-center gap-2">
+        {icons.map((icon, index) => (
+          <Container
+            key={index}
+            className={cn(
+              sizeMap[icon.size || "lg"],
+              `circle-${index + 1}`,
+              icon.className
+            )}
+          >
+            {icon.icon}
+          </Container>
+        ))}
+      </div>
+      <AnimatedSparkles />
+    </div>
+  )
+}
+
+const Container = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      `rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)]
+      shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)]`,
+      className
+    )}
+    {...props}
+  />
+))
+Container.displayName = "Container"
+
+const AnimatedSparkles = () => (
+  <div className="h-40 w-px absolute top-20 m-auto z-40 bg-gradient-to-b from-transparent via-cyan-500 to-transparent animate-move">
+    <div className="w-10 h-32 top-1/2 -translate-y-1/2 absolute -left-10">
+      <Sparkles />
+    </div>
+  </div>
+)
+
+const Sparkles = () => {
+  const randomMove = () => Math.random() * 2 - 1
+  const randomOpacity = () => Math.random()
+  const random = () => Math.random()
+
+  return (
+    <div className="absolute inset-0">
+      {[...Array(12)].map((_, i) => (
+        <motion.span
+          key={`star-${i}`}
+          animate={{
+            top: `calc(${random() * 100}% + ${randomMove()}px)`,
+            left: `calc(${random() * 100}% + ${randomMove()}px)`,
+            opacity: randomOpacity(),
+            scale: [1, 1.2, 0],
+          }}
+          transition={{
+            duration: random() * 2 + 4,
+            repeat: Infinity,
+            ease: "linear",
+          }}
+          style={{
+            position: "absolute",
+            top: `${random() * 100}%`,
+            left: `${random() * 100}%`,
+            width: `2px`,
+            height: `2px`,
+            borderRadius: "50%",
+            zIndex: 1,
+          }}
+          className="inline-block bg-black dark:bg-white"
+        />
+      ))}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 06e7f62..c0a59c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,19 +26,21 @@
                 "bright": "^0.8.5",
                 "class-variance-authority": "^0.7.0",
                 "clsx": "^2.1.1",
-                "framer-motion": "^11.15.0",
+                "framer-motion": "^11.18.2",
                 "lucide-react": "^0.395.0",
                 "next": "14.2.5",
                 "next-mdx-remote": "^5.0.0",
                 "posthog-js": "^1.139.3",
                 "react": "^18",
                 "react-dom": "^18",
+                "react-particles": "^2.12.2",
                 "recharts": "^2.15.0",
                 "rehype-autolink-headings": "^7.1.0",
                 "rehype-slug": "^6.0.0",
                 "remark-gfm": "^4.0.0",
                 "tailwind-merge": "^2.3.0",
                 "tailwindcss-animate": "^1.0.7",
+                "tsparticles-slim": "^2.12.0",
                 "ua-parser-js": "2.0.0-rc.1",
                 "usehooks-ts": "^3.1.0",
                 "uuid": "^10.0.0"
@@ -4293,13 +4295,13 @@
             }
         },
         "node_modules/framer-motion": {
-            "version": "11.15.0",
-            "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz",
-            "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==",
+            "version": "11.18.2",
+            "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.2.tgz",
+            "integrity": "sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==",
             "license": "MIT",
             "dependencies": {
-                "motion-dom": "^11.14.3",
-                "motion-utils": "^11.14.3",
+                "motion-dom": "^11.18.1",
+                "motion-utils": "^11.18.1",
                 "tslib": "^2.4.0"
             },
             "peerDependencies": {
@@ -6945,15 +6947,18 @@
             }
         },
         "node_modules/motion-dom": {
-            "version": "11.14.3",
-            "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz",
-            "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==",
-            "license": "MIT"
+            "version": "11.18.1",
+            "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
+            "integrity": "sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==",
+            "license": "MIT",
+            "dependencies": {
+                "motion-utils": "^11.18.1"
+            }
         },
         "node_modules/motion-utils": {
-            "version": "11.14.3",
-            "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz",
-            "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==",
+            "version": "11.18.1",
+            "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.18.1.tgz",
+            "integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==",
             "license": "MIT"
         },
         "node_modules/ms": {
@@ -7837,6 +7842,34 @@
             "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
             "license": "MIT"
         },
+        "node_modules/react-particles": {
+            "version": "2.12.2",
+            "resolved": "https://registry.npmjs.org/react-particles/-/react-particles-2.12.2.tgz",
+            "integrity": "sha512-Bo9DdrBRPFy8uiT7BA8P36Rdmz6GhB/RG9kkWUyZGIsS8AxWyuUjpVxw9Lr23K0LVE2aenAJ0vnqEbbLDpBgQw==",
+            "deprecated": "@tsparticles/react is the new version, please use that",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/matteobruni"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/tsparticles"
+                },
+                {
+                    "type": "buymeacoffee",
+                    "url": "https://www.buymeacoffee.com/matteobruni"
+                }
+            ],
+            "hasInstallScript": true,
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            },
+            "peerDependencies": {
+                "react": ">=16"
+            }
+        },
         "node_modules/react-remove-scroll": {
             "version": "2.6.2",
             "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz",
@@ -9200,6 +9233,452 @@
             "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
             "license": "0BSD"
         },
+        "node_modules/tsparticles-basic": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-basic/-/tsparticles-basic-2.12.0.tgz",
+            "integrity": "sha512-pN6FBpL0UsIUXjYbiui5+IVsbIItbQGOlwyGV55g6IYJBgdTNXgFX0HRYZGE9ZZ9psEXqzqwLM37zvWnb5AG9g==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/matteobruni"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/tsparticles"
+                },
+                {
+                    "type": "buymeacoffee",
+                    "url": "https://www.buymeacoffee.com/matteobruni"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0",
+                "tsparticles-move-base": "^2.12.0",
+                "tsparticles-shape-circle": "^2.12.0",
+                "tsparticles-updater-color": "^2.12.0",
+                "tsparticles-updater-opacity": "^2.12.0",
+                "tsparticles-updater-out-modes": "^2.12.0",
+                "tsparticles-updater-size": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-engine": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.12.0.tgz",
+            "integrity": "sha512-ZjDIYex6jBJ4iMc9+z0uPe7SgBnmb6l+EJm83MPIsOny9lPpetMsnw/8YJ3xdxn8hV+S3myTpTN1CkOVmFv0QQ==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/matteobruni"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/tsparticles"
+                },
+                {
+                    "type": "buymeacoffee",
+                    "url": "https://www.buymeacoffee.com/matteobruni"
+                }
+            ],
+            "hasInstallScript": true,
+            "license": "MIT"
+        },
+        "node_modules/tsparticles-interaction-external-attract": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-attract/-/tsparticles-interaction-external-attract-2.12.0.tgz",
+            "integrity": "sha512-0roC6D1QkFqMVomcMlTaBrNVjVOpyNzxIUsjMfshk2wUZDAvTNTuWQdUpmsLS4EeSTDN3rzlGNnIuuUQqyBU5w==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-interaction-external-bounce": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-bounce/-/tsparticles-interaction-external-bounce-2.12.0.tgz",
+            "integrity": "sha512-MMcqKLnQMJ30hubORtdq+4QMldQ3+gJu0bBYsQr9BsThsh8/V0xHc1iokZobqHYVP5tV77mbFBD8Z7iSCf0TMQ==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-interaction-external-bubble": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-bubble/-/tsparticles-interaction-external-bubble-2.12.0.tgz",
+            "integrity": "sha512-5kImCSCZlLNccXOHPIi2Yn+rQWTX3sEa/xCHwXW19uHxtILVJlnAweayc8+Zgmb7mo0DscBtWVFXHPxrVPFDUA==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-interaction-external-connect": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-connect/-/tsparticles-interaction-external-connect-2.12.0.tgz",
+            "integrity": "sha512-ymzmFPXz6AaA1LAOL5Ihuy7YSQEW8MzuSJzbd0ES13U8XjiU3HlFqlH6WGT1KvXNw6WYoqrZt0T3fKxBW3/C3A==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-interaction-external-grab": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-grab/-/tsparticles-interaction-external-grab-2.12.0.tgz",
+            "integrity": "sha512-iQF/A947hSfDNqAjr49PRjyQaeRkYgTYpfNmAf+EfME8RsbapeP/BSyF6mTy0UAFC0hK2A2Hwgw72eT78yhXeQ==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-interaction-external-pause": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-pause/-/tsparticles-interaction-external-pause-2.12.0.tgz",
+            "integrity": "sha512-4SUikNpsFROHnRqniL+uX2E388YTtfRWqqqZxRhY0BrijH4z04Aii3YqaGhJxfrwDKkTQlIoM2GbFT552QZWjw==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-interaction-external-push": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-push/-/tsparticles-interaction-external-push-2.12.0.tgz",
+            "integrity": "sha512-kqs3V0dgDKgMoeqbdg+cKH2F+DTrvfCMrPF1MCCUpBCqBiH+TRQpJNNC86EZYHfNUeeLuIM3ttWwIkk2hllR/Q==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-interaction-external-remove": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-remove/-/tsparticles-interaction-external-remove-2.12.0.tgz",
+            "integrity": "sha512-2eNIrv4m1WB2VfSVj46V2L/J9hNEZnMgFc+A+qmy66C8KzDN1G8aJUAf1inW8JVc0lmo5+WKhzex4X0ZSMghBg==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-interaction-external-repulse": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-repulse/-/tsparticles-interaction-external-repulse-2.12.0.tgz",
+            "integrity": "sha512-rSzdnmgljeBCj5FPp4AtGxOG9TmTsK3AjQW0vlyd1aG2O5kSqFjR+FuT7rfdSk9LEJGH5SjPFE6cwbuy51uEWA==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-interaction-external-slow": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-slow/-/tsparticles-interaction-external-slow-2.12.0.tgz",
+            "integrity": "sha512-2IKdMC3om7DttqyroMtO//xNdF0NvJL/Lx7LDo08VpfTgJJozxU+JAUT8XVT7urxhaDzbxSSIROc79epESROtA==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-interaction-particles-attract": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-attract/-/tsparticles-interaction-particles-attract-2.12.0.tgz",
+            "integrity": "sha512-Hl8qwuwF9aLq3FOkAW+Zomu7Gb8IKs6Y3tFQUQScDmrrSCaeRt2EGklAiwgxwgntmqzL7hbMWNx06CHHcUQKdQ==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-interaction-particles-collisions": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-collisions/-/tsparticles-interaction-particles-collisions-2.12.0.tgz",
+            "integrity": "sha512-Se9nPWlyPxdsnHgR6ap4YUImAu3W5MeGKJaQMiQpm1vW8lSMOUejI1n1ioIaQth9weKGKnD9rvcNn76sFlzGBA==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-interaction-particles-links": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-links/-/tsparticles-interaction-particles-links-2.12.0.tgz",
+            "integrity": "sha512-e7I8gRs4rmKfcsHONXMkJnymRWpxHmeaJIo4g2NaDRjIgeb2AcJSWKWZvrsoLnm7zvaf/cMQlbN6vQwCixYq3A==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-move-base": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-move-base/-/tsparticles-move-base-2.12.0.tgz",
+            "integrity": "sha512-oSogCDougIImq+iRtIFJD0YFArlorSi8IW3HD2gO3USkH+aNn3ZqZNTqp321uB08K34HpS263DTbhLHa/D6BWw==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-move-parallax": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-move-parallax/-/tsparticles-move-parallax-2.12.0.tgz",
+            "integrity": "sha512-58CYXaX8Ih5rNtYhpnH0YwU4Ks7gVZMREGUJtmjhuYN+OFr9FVdF3oDIJ9N6gY5a5AnAKz8f5j5qpucoPRcYrQ==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-particles.js": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-particles.js/-/tsparticles-particles.js-2.12.0.tgz",
+            "integrity": "sha512-LyOuvYdhbUScmA4iDgV3LxA0HzY1DnOwQUy3NrPYO393S2YwdDjdwMod6Btq7EBUjg9FVIh+sZRizgV5elV2dg==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/matteobruni"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/tsparticles"
+                },
+                {
+                    "type": "buymeacoffee",
+                    "url": "https://www.buymeacoffee.com/matteobruni"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-plugin-easing-quad": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-plugin-easing-quad/-/tsparticles-plugin-easing-quad-2.12.0.tgz",
+            "integrity": "sha512-2mNqez5pydDewMIUWaUhY5cNQ80IUOYiujwG6qx9spTq1D6EEPLbRNAEL8/ecPdn2j1Um3iWSx6lo340rPkv4Q==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/matteobruni"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/tsparticles"
+                },
+                {
+                    "type": "buymeacoffee",
+                    "url": "https://www.buymeacoffee.com/matteobruni"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-shape-circle": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-shape-circle/-/tsparticles-shape-circle-2.12.0.tgz",
+            "integrity": "sha512-L6OngbAlbadG7b783x16ns3+SZ7i0SSB66M8xGa5/k+YcY7zm8zG0uPt1Hd+xQDR2aNA3RngVM10O23/Lwk65Q==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-shape-image": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-shape-image/-/tsparticles-shape-image-2.12.0.tgz",
+            "integrity": "sha512-iCkSdUVa40DxhkkYjYuYHr9MJGVw+QnQuN5UC+e/yBgJQY+1tQL8UH0+YU/h0GHTzh5Sm+y+g51gOFxHt1dj7Q==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-shape-line": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-shape-line/-/tsparticles-shape-line-2.12.0.tgz",
+            "integrity": "sha512-RcpKmmpKlk+R8mM5wA2v64Lv1jvXtU4SrBDv3vbdRodKbKaWGGzymzav1Q0hYyDyUZgplEK/a5ZwrfrOwmgYGA==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-shape-polygon": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-shape-polygon/-/tsparticles-shape-polygon-2.12.0.tgz",
+            "integrity": "sha512-5YEy7HVMt1Obxd/jnlsjajchAlYMr9eRZWN+lSjcFSH6Ibra7h59YuJVnwxOxAobpijGxsNiBX0PuGQnB47pmA==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-shape-square": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-shape-square/-/tsparticles-shape-square-2.12.0.tgz",
+            "integrity": "sha512-33vfajHqmlODKaUzyPI/aVhnAOT09V7nfEPNl8DD0cfiNikEuPkbFqgJezJuE55ebtVo7BZPDA9o7GYbWxQNuw==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-shape-star": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-shape-star/-/tsparticles-shape-star-2.12.0.tgz",
+            "integrity": "sha512-4sfG/BBqm2qBnPLASl2L5aBfCx86cmZLXeh49Un+TIR1F5Qh4XUFsahgVOG0vkZQa+rOsZPEH04xY5feWmj90g==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-shape-text": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-shape-text/-/tsparticles-shape-text-2.12.0.tgz",
+            "integrity": "sha512-v2/FCA+hyTbDqp2ymFOe97h/NFb2eezECMrdirHWew3E3qlvj9S/xBibjbpZva2gnXcasBwxn0+LxKbgGdP0rA==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-slim": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-slim/-/tsparticles-slim-2.12.0.tgz",
+            "integrity": "sha512-27w9aGAAAPKHvP4LHzWFpyqu7wKyulayyaZ/L6Tuuejy4KP4BBEB4rY5GG91yvAPsLtr6rwWAn3yS+uxnBDpkA==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/matteobruni"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/tsparticles"
+                },
+                {
+                    "type": "buymeacoffee",
+                    "url": "https://www.buymeacoffee.com/matteobruni"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-basic": "^2.12.0",
+                "tsparticles-engine": "^2.12.0",
+                "tsparticles-interaction-external-attract": "^2.12.0",
+                "tsparticles-interaction-external-bounce": "^2.12.0",
+                "tsparticles-interaction-external-bubble": "^2.12.0",
+                "tsparticles-interaction-external-connect": "^2.12.0",
+                "tsparticles-interaction-external-grab": "^2.12.0",
+                "tsparticles-interaction-external-pause": "^2.12.0",
+                "tsparticles-interaction-external-push": "^2.12.0",
+                "tsparticles-interaction-external-remove": "^2.12.0",
+                "tsparticles-interaction-external-repulse": "^2.12.0",
+                "tsparticles-interaction-external-slow": "^2.12.0",
+                "tsparticles-interaction-particles-attract": "^2.12.0",
+                "tsparticles-interaction-particles-collisions": "^2.12.0",
+                "tsparticles-interaction-particles-links": "^2.12.0",
+                "tsparticles-move-base": "^2.12.0",
+                "tsparticles-move-parallax": "^2.12.0",
+                "tsparticles-particles.js": "^2.12.0",
+                "tsparticles-plugin-easing-quad": "^2.12.0",
+                "tsparticles-shape-circle": "^2.12.0",
+                "tsparticles-shape-image": "^2.12.0",
+                "tsparticles-shape-line": "^2.12.0",
+                "tsparticles-shape-polygon": "^2.12.0",
+                "tsparticles-shape-square": "^2.12.0",
+                "tsparticles-shape-star": "^2.12.0",
+                "tsparticles-shape-text": "^2.12.0",
+                "tsparticles-updater-color": "^2.12.0",
+                "tsparticles-updater-life": "^2.12.0",
+                "tsparticles-updater-opacity": "^2.12.0",
+                "tsparticles-updater-out-modes": "^2.12.0",
+                "tsparticles-updater-rotate": "^2.12.0",
+                "tsparticles-updater-size": "^2.12.0",
+                "tsparticles-updater-stroke-color": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-updater-color": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-updater-color/-/tsparticles-updater-color-2.12.0.tgz",
+            "integrity": "sha512-KcG3a8zd0f8CTiOrylXGChBrjhKcchvDJjx9sp5qpwQK61JlNojNCU35xoaSk2eEHeOvFjh0o3CXWUmYPUcBTQ==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-updater-life": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-updater-life/-/tsparticles-updater-life-2.12.0.tgz",
+            "integrity": "sha512-J7RWGHAZkowBHpcLpmjKsxwnZZJ94oGEL2w+wvW1/+ZLmAiFFF6UgU0rHMC5CbHJT4IPx9cbkYMEHsBkcRJ0Bw==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-updater-opacity": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-updater-opacity/-/tsparticles-updater-opacity-2.12.0.tgz",
+            "integrity": "sha512-YUjMsgHdaYi4HN89LLogboYcCi1o9VGo21upoqxq19yRy0hRCtx2NhH22iHF/i5WrX6jqshN0iuiiNefC53CsA==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-updater-out-modes": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-updater-out-modes/-/tsparticles-updater-out-modes-2.12.0.tgz",
+            "integrity": "sha512-owBp4Gk0JNlSrmp12XVEeBroDhLZU+Uq3szbWlHGSfcR88W4c/0bt0FiH5bHUqORIkw+m8O56hCjbqwj69kpOQ==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-updater-rotate": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-updater-rotate/-/tsparticles-updater-rotate-2.12.0.tgz",
+            "integrity": "sha512-waOFlGFmEZOzsQg4C4VSejNVXGf4dMf3fsnQrEROASGf1FCd8B6WcZau7JtXSTFw0OUGuk8UGz36ETWN72DkCw==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-updater-size": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-updater-size/-/tsparticles-updater-size-2.12.0.tgz",
+            "integrity": "sha512-B0yRdEDd/qZXCGDL/ussHfx5YJ9UhTqNvmS5X2rR2hiZhBAE2fmsXLeWkdtF2QusjPeEqFDxrkGiLOsh6poqRA==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
+        "node_modules/tsparticles-updater-stroke-color": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/tsparticles-updater-stroke-color/-/tsparticles-updater-stroke-color-2.12.0.tgz",
+            "integrity": "sha512-MPou1ZDxsuVq6SN1fbX+aI5yrs6FyP2iPCqqttpNbWyL+R6fik1rL0ab/x02B57liDXqGKYomIbBQVP3zUTW1A==",
+            "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
+            "license": "MIT",
+            "dependencies": {
+                "tsparticles-engine": "^2.12.0"
+            }
+        },
         "node_modules/type-check": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index 071dd01..d285cce 100644
--- a/package.json
+++ b/package.json
@@ -29,19 +29,21 @@
         "bright": "^0.8.5",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
-        "framer-motion": "^11.15.0",
+        "framer-motion": "^11.18.2",
         "lucide-react": "^0.395.0",
         "next": "14.2.5",
         "next-mdx-remote": "^5.0.0",
         "posthog-js": "^1.139.3",
         "react": "^18",
         "react-dom": "^18",
+        "react-particles": "^2.12.2",
         "recharts": "^2.15.0",
         "rehype-autolink-headings": "^7.1.0",
         "rehype-slug": "^6.0.0",
         "remark-gfm": "^4.0.0",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7",
+        "tsparticles-slim": "^2.12.0",
         "ua-parser-js": "2.0.0-rc.1",
         "usehooks-ts": "^3.1.0",
         "uuid": "^10.0.0"
@@ -60,4 +62,4 @@
         "tailwindcss": "^3.4.1",
         "typescript": "^5"
     }
-}
+}
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 12463d6..7684e99 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -26,6 +26,10 @@ const config = {
                 "accordion-up": "accordion-up 0.2s ease-out",
                 shimmer: "shimmer 8s infinite",
                 pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+                "pulse-slow": "pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+                "glow-line": "glow 2s ease-in-out infinite",
+                float: "float 3s ease-in-out infinite",
+                move: "move 5s linear infinite",
             },
             backgroundImage: {
                 noise: "url('/noise-min.png')",
@@ -90,9 +94,21 @@ const config = {
                     },
                 },
                 pulse: {
+                    "0%, 100%": { opacity: "0.6" },
+                    "50%": { opacity: "0.3" },
+                },
+                glow: {
                     "0%, 100%": { opacity: "1" },
                     "50%": { opacity: "0.5" },
                 },
+                float: {
+                    "0%, 100%": { transform: "translateY(0) translateX(-50%)" },
+                    "50%": { transform: "translateY(-20px) translateX(-50%)" },
+                },
+                move: {
+                    "0%": { transform: "translateX(-200px)" },
+                    "100%": { transform: "translateX(200px)" },
+                },
             },
         },
     },