refactor: simplify infinite-moving-cards and redesign agents page layout

- Removed getDirection callback in favor of inline style calculation for cleaner animation control
- Replaced BentoSection and AgentComponents with unified AgentBento component featuring video backgrounds and updated card structure
- Standardized border styling across CallToAction components (gray-700 → gray-800) for consistent visual hierarchy

src/pages/agents/DeploySection.tsx

@@ -46,8 +46,12 @@ const features = [
 
 export function DeploySection() {
   return (
-    <section id="benefits" className="relative bg-black px-4 pb-4 pt-12 text-white lg:px-12 lg:pt-24">
-      <div className="relative px-6 lg:px-12">
+    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      <div className="relative px-6 lg:px-12 py-12 bg-[#111111] border border-t-0 border-b-0 border-gray-800 max-w-7xl mx-auto">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -90,6 +94,8 @@ export function DeploySection() {
           ))}
         </motion.ul>
       </div>
+      <div className="w-full border-b border-gray-800 bg-[#121212]" />
+      
     </section>
   );
 }