# Feature 30

> Feature 30 variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-feature-30).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-feature-30
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-feature-30-light-9d589dd40ebfe8a6.png
- Registry item: https://uiable.com/r/block-feature-30.json
- Categories: feature
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-feature-30.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `framer-motion`, `lucide-react`
- Registry items: `@uiable/card`

## Files

### `src/components/uiable/blocks/feature/feature-30/feature-30.tsx`

```tsx
"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 (
    <Card
      className={`group relative mb-0 flex h-full flex-col overflow-hidden border-white/10 bg-[#0B0F19] p-5 transition-colors sm:p-8 ${hoverBorderClass}`}
      onMouseMove={handleMouseMove}
    >
      {/* Subtle Inner Glow */}
      <motion.div
        className="pointer-events-none absolute -inset-px z-0 opacity-0 transition duration-300 group-hover:opacity-100"
        style={{
          background: useMotionTemplate`
            radial-gradient(
              300px circle at ${mouseX}px ${mouseY}px,
              ${glowColor},
              transparent 80%
            )
          `,
        }}
      />

      {/* Shine Border Glow */}
      <motion.div
        className="pointer-events-none absolute inset-0 z-0 rounded-xl opacity-0 transition duration-300 group-hover:opacity-100"
        style={
          {
            background: useMotionTemplate`
            radial-gradient(
              250px circle at ${mouseX}px ${mouseY}px,
              ${borderGlowColor},
              transparent 100%
            )
          `,
            mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
            WebkitMask:
              "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
            WebkitMaskComposite: "xor",
            maskComposite: "exclude",
            padding: "2px",
          } as any
        }
      />
      {children}
    </Card>
  )
}

export default function Feature30() {
  return (
    <section className="dark relative bg-slate-950 py-10 text-white md:py-12">
      <div className="container mx-auto px-4">
        <div className="mb-10 text-center md:mb-12">
          <h2 className="mb-4 text-3xl font-bold tracking-tight text-white md:text-4xl">
            Developer tools that matter
          </h2>
        </div>

        <div className="grid grid-cols-1 items-stretch gap-6 lg:grid-cols-3">
          {/* Card 1: MCP Support */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="flex h-full flex-col"
          >
            <SpotlightCard
              hoverBorderClass="hover:border-red-500/50"
              glowColor="rgba(239, 68, 68, 0.2)"
              borderGlowColor="rgba(239, 68, 68, 1)"
            >
              <div className="relative z-10 mb-8">
                <div className="mb-6 flex h-10 w-10 items-center justify-center rounded-xl border border-red-500/20 bg-red-500/10">
                  <CreditCard className="h-5 w-5 text-red-400" />
                </div>
                <h3 className="mb-2 text-xl font-bold text-white">
                  MCP Support
                </h3>
                <p className="text-sm text-gray-400">
                  Connect to any MCP server and extend your AI assistant with
                  your data and tools.
                </p>
              </div>

              {/* MCP Terminal Mockup */}
              <div className="relative z-10 mt-auto flex h-[200px] flex-col justify-between rounded-xl border border-white/5 bg-black/50 p-4 font-mono text-xs">
                {/* Terminal top bar */}
                <div className="flex items-center justify-between border-b border-white/5 pb-2 text-[11px] text-gray-500">
                  <div className="flex items-center gap-1.5">
                    <span className="h-2 w-2 rounded-full bg-red-500/70" />
                    <span className="h-2 w-2 rounded-full bg-yellow-500/70" />
                    <span className="h-2 w-2 rounded-full bg-green-500/70" />
                  </div>
                  <span className="font-mono text-[10px] text-gray-400">
                    mcp-server
                  </span>
                </div>

                {/* Commands and output */}
                <div className="space-y-1.5 text-gray-400">
                  <div>
                    $ <span className="text-purple-400">npm</span>{" "}
                    <span className="text-blue-300">mcp connect database</span>
                  </div>
                  <div className="text-green-400">
                    ✓ Connected to PostgreSQL
                  </div>
                  <div className="text-green-400">✓ Tools available (12)</div>
                </div>

                {/* Status footer */}
                <div className="flex items-center justify-between border-t border-white/5 pt-2 text-[11px]">
                  <div className="flex items-center gap-2 text-green-400">
                    <span className="h-2 w-2 animate-pulse rounded-full bg-green-500" />
                    Connected
                  </div>
                  <span className="text-[10px] text-gray-500">
                    latency: 14ms
                  </span>
                </div>
              </div>
            </SpotlightCard>
          </motion.div>

          {/* Card 2: Git Integration */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="flex h-full flex-col"
          >
            <SpotlightCard
              hoverBorderClass="hover:border-cyan-500/50"
              glowColor="rgba(6, 182, 212, 0.2)"
              borderGlowColor="rgba(6, 182, 212, 1)"
            >
              <div className="relative z-10 mb-8">
                <div className="mb-6 flex h-10 w-10 items-center justify-center rounded-xl border border-cyan-500/20 bg-cyan-500/10">
                  <Bot className="h-5 w-5 text-cyan-400" />
                </div>
                <h3 className="mb-2 text-xl font-bold text-white">
                  Git Integration
                </h3>
                <p className="text-sm text-gray-400">
                  Push with your repos directly. Commit, review, and push with
                  confidence.
                </p>
              </div>

              {/* Commit Mockup */}
              <div className="relative z-10 mt-auto flex h-[200px] flex-col justify-between rounded-xl border border-white/5 bg-black/50 p-4">
                <div>
                  <div className="mb-2.5 flex items-center justify-between">
                    <div className="text-sm font-medium text-white">
                      Changes
                    </div>
                    <div className="text-xs text-gray-400">2 files changed</div>
                  </div>
                  <div className="space-y-2 font-mono text-xs">
                    <div className="flex justify-between text-gray-300">
                      <span>src/utils/api.ts</span>
                      <span className="text-amber-400">modified</span>
                    </div>
                    <div className="flex justify-between text-gray-300">
                      <span>src/components/Card.tsx</span>
                      <span className="text-green-400">added</span>
                    </div>
                  </div>
                </div>

                <button className="w-full rounded-md bg-purple-600 py-2 text-sm font-medium text-white transition-colors hover:bg-purple-700 active:scale-[0.99]">
                  Commit & Push
                </button>
              </div>
            </SpotlightCard>
          </motion.div>

          {/* Card 3: Secure by Design */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="flex h-full flex-col"
          >
            <SpotlightCard
              hoverBorderClass="hover:border-green-500/50"
              glowColor="rgba(34, 197, 94, 0.2)"
              borderGlowColor="rgba(34, 197, 94, 1)"
            >
              <div className="relative z-10 mb-8">
                <div className="mb-6 flex h-10 w-10 items-center justify-center rounded-xl border border-green-500/20 bg-green-500/10">
                  <ArrowUpRight className="h-5 w-5 text-green-400" />
                </div>
                <h3 className="mb-2 text-xl font-bold text-white">
                  Secure by Design
                </h3>
                <p className="text-sm text-gray-400">
                  Enterprise-grade security to keep your code and data
                  protected.
                </p>
              </div>

              {/* Security Mockup */}
              <div className="relative z-10 mt-auto flex h-[200px] flex-col justify-between rounded-xl border border-white/5 bg-black/50 p-4">
                {/* Security top bar */}
                <div className="flex items-center justify-between border-b border-white/5 pb-2 text-xs">
                  <span className="font-medium text-white">
                    Security Checklist
                  </span>
                  <span className="flex items-center gap-1 rounded-full border border-green-500/20 bg-green-500/10 px-2 py-0.5 text-[10px] font-medium text-green-400">
                    <span className="h-1.5 w-1.5 rounded-full bg-green-400" />
                    100% Passed
                  </span>
                </div>

                {/* Security items list */}
                <div className="space-y-2 text-xs text-gray-300">
                  <div className="flex items-center justify-between">
                    <span className="flex items-center gap-2">
                      <span className="text-green-400">✓</span> SOC 2 Type II
                    </span>
                    <span className="text-[10px] text-gray-400">Certified</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="flex items-center gap-2">
                      <span className="text-green-400">✓</span> End-to-end
                      encryption
                    </span>
                    <span className="text-[10px] text-gray-400">
                      256-bit AES
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="flex items-center gap-2">
                      <span className="text-green-400">✓</span> Role-based
                      access
                    </span>
                    <span className="text-[10px] text-gray-400">Enforced</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="flex items-center gap-2">
                      <span className="text-green-400">✓</span> SSO & 2FA
                    </span>
                    <span className="text-[10px] text-gray-400">Enabled</span>
                  </div>
                </div>
              </div>
            </SpotlightCard>
          </motion.div>
        </div>
      </div>
    </section>
  )
}
```