feat(ui): enhance contact form messaging and particle background animation

- Improved the contact form's message generation with more professional and detailed templates
- Replaced the grid-based background animation with a WebGL-powered particle system using OGL
- Added GSAP for advanced animation capabilities
- Adjusted layout styling for better centering and spacing across components
- Enhanced visual feedback and interactivity of the animated background

This change significantly upgrades the user experience and visual appeal of the contact section while maintaining performance through efficient rendering techniques.

app/page.tsx

@@ -1,7 +1,8 @@
 import dynamic from "next/dynamic";
 import { Header } from "./components/Header";
-import { Squares } from "@/components/magicui/squares";
+import Squares from "@/components/Squares";
 import { WorkModalities } from "./components/WorkModalities"; // Importar WorkModalities
+import DotGrid from "@/components/DotGrid";
 
 // Lazy load components for better performance
 const Hero = dynamic(() => import("./components/Hero"), {
@@ -55,14 +56,15 @@ const Contact = dynamic(() => import("./components/Contact"), {
 export default function Home() {
   return (
     <div className="min-h-screen bg-black text-white relative">
-      <Squares
-        direction="diagonal"
-        speed={0.5}
-        borderColor="#374151"
-        hoverFillColor="#1e40af"
-        squareSize={30}
-        className="absolute inset-0 opacity-30"
-      />
+      <div className="fixed inset-0 z-0 opacity-50">
+        <Squares
+          speed={0.5}
+          squareSize={40}
+          direction="diagonal" // up, down, left, right, diagonal
+          borderColor="#271E37"
+          hoverFillColor="#222222"
+        />
+      </div>
       <Header />
       <main className="relative z-10">
         <Hero />