init

dmtp/client/app/_sections/integrations-section.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Code2, Database, MessageSquare, Zap } from "lucide-react"
+
+export function IntegrationsSection() {
+  const integrations = [
+    {
+      icon: Code2,
+      title: "API Integration",
+      description: "Connect with your favorite tools to streamline workflows",
+    },
+    {
+      icon: Database,
+      title: "Data Sync",
+      description: "Seamless data synchronization across platforms",
+    },
+    {
+      icon: Zap,
+      title: "Automation",
+      description: "Automate repetitive tasks with intelligent workflows",
+    },
+    {
+      icon: MessageSquare,
+      title: "Communication",
+      description: "Real-time notifications and updates",
+    },
+  ]
+
+  return (
+    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white border-b-2 border-gray-200">
+      <div className="max-w-6xl mx-auto">
+        {/* Header */}
+        <motion.div
+          className="text-center mb-12"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+        >
+          <div className="inline-block mb-4 px-3 py-1.5 border-2 border-primary bg-green-50">
+            <span className="text-sm font-bold text-primary">INTEGRATIONS</span>
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-gray-900">
+            Seamless{" "}
+            <span className="text-primary">
+              Integrations
+            </span>
+          </h2>
+          <p className="text-base text-gray-600">Connect with your favorite tools to streamline workflows</p>
+        </motion.div>
+
+        {/* Integration Grid */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+          {integrations.map((integration, index) => {
+            const Icon = integration.icon
+            return (
+              <motion.div
+                key={index}
+                className="flex flex-col items-center text-center"
+                initial={{ opacity: 0, scale: 0.8 }}
+                whileInView={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                viewport={{ once: true }}
+              >
+                <div className="w-20 h-20 bg-primary border-2 border-primary flex items-center justify-center mb-4">
+                  <Icon className="w-10 h-10 text-white" />
+                </div>
+                <h3 className="font-bold text-base mb-2 text-gray-900">{integration.title}</h3>
+                <p className="text-sm text-gray-600 leading-relaxed">{integration.description}</p>
+              </motion.div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}