"use client" import { MouseEvent as ReactMouseEvent } from "react" // shadcn import { Card } from "@/components/ui/card" // third-party import { motion, useMotionTemplate, useMotionValue } from "framer-motion" // assets import { CreditCard, Bot, ArrowUpRight } from "lucide-react" function SpotlightCard({ children, hoverBorderClass, glowColor, borderGlowColor, }: { children: React.ReactNode hoverBorderClass: string glowColor: string borderGlowColor: string }) { const mouseX = useMotionValue(0) const mouseY = useMotionValue(0) function handleMouseMove({ currentTarget, clientX, clientY, }: ReactMouseEvent) { const { left, top } = currentTarget.getBoundingClientRect() mouseX.set(clientX - left) mouseY.set(clientY - top) } return ( {/* Subtle Inner Glow */} {/* Shine Border Glow */} {children} ) } export default function Feature30() { return (

Developer tools that matter

{/* Card 1: MCP Support */}

MCP Support

Connect to any MCP server and extend your AI assistant with your data and tools.

{/* MCP Terminal Mockup */}

{/* Terminal top bar */}

mcp-server

{/* Commands and output */}

$ npm{" "} mcp connect database

✓ Connected to PostgreSQL

✓ Tools available (12)

{/* Status footer */}

Connected

latency: 14ms

{/* Card 2: Git Integration */}

Git Integration

Push with your repos directly. Commit, review, and push with confidence.

{/* Commit Mockup */}

Changes

2 files changed

src/utils/api.ts modified

src/components/Card.tsx added

{/* Card 3: Secure by Design */}

Secure by Design

Enterprise-grade security to keep your code and data protected.

{/* Security Mockup */}

{/* Security top bar */}

Security Checklist 100% Passed

{/* Security items list */}

✓ SOC 2 Type II Certified

✓ End-to-end encryption 256-bit AES

✓ Role-based access Enforced

✓ SSO & 2FA Enabled

) }