integrations-demo-2

1"use client"
2 
3import { motion } from "motion/react"
4 
5import Integrations from "@/registry/eldoraui/integrations"
6 
7export function IntegrationsDemo2() {
8  return (
9    <div className="bg-background relative h-[600px] w-full overflow-hidden rounded-lg border">
10      {/* Background Integrations Component */}
11      <div className="absolute inset-0 opacity-30">
12        <Integrations />
13      </div>
14 
15      {/* Fading Overlay */}
16      <div className="from-background/80 via-background/60 to-background/90 absolute inset-0 bg-gradient-to-b" />
17 
18      {/* Main Content */}
19      <div className="relative z-10 flex h-full flex-col items-center justify-center p-8 text-center">
20        <motion.div
21          initial={{ opacity: 0, y: 20 }}
22          animate={{ opacity: 1, y: 0 }}
23          transition={{ duration: 0.8, ease: "easeOut" }}
24          className="max-w-2xl space-y-6"
25        >
26          <h2 className="text-foreground text-4xl font-bold tracking-tight">
27            Seamless Integrations
28          </h2>
29          <p className="text-muted-foreground text-lg">
30            Connect with your favorite tools and services. Our platform
31            integrates with over 100+ applications to streamline your workflow
32            and boost productivity.
33          </p>
34          <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
35            <motion.button
36              whileHover={{ scale: 1.05 }}
37              whileTap={{ scale: 0.95 }}
38              className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg px-6 py-3 font-medium transition-colors"
39            >
40              Explore Integrations
41            </motion.button>
42            <motion.button
43              whileHover={{ scale: 1.05 }}
44              whileTap={{ scale: 0.95 }}
45              className="border-border hover:bg-accent rounded-lg border px-6 py-3 font-medium transition-colors"
46            >
47              View Documentation
48            </motion.button>
49          </div>
50        </motion.div>
51      </div>
52    </div>
53  )
54}