# Feature 27

> Feature 27 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-27).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-feature-27
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-feature-27-light-f5d7d48ab79fa69c.png
- Registry item: https://uiable.com/r/block-feature-27.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-27.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/badge`

## Files

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

```tsx
"use client"

// shadcn
import { Badge } from "@/components/ui/badge"

// third-party
import { motion } from "framer-motion"

// project-imports
import { SpotlightCard } from "@/components/uiable/blocks/landing/components/PortfolioSpotlightCard"

// assets
import {
  CheckCircle2,
  Coins,
  ShieldCheck,
  Scale,
  Sparkles,
  Landmark,
  ArrowUpRight,
  TrendingUp,
  Activity,
  FileCheck,
  Cpu,
  Percent,
  type LucideIcon,
} from "lucide-react"

// ============================================================================
// Types
// ============================================================================

export interface ServiceItem {
  number: string
  category: string
  badge: string
  icon: LucideIcon
  title: string
  description: string
  tags: string[]
  metric: {
    icon: LucideIcon
    label: string
  }
  widget: {
    type: "allocation" | "collar" | "tax" | "syndicate" | "trust"
    title: string
    subtitle?: string
    badge: string
    [key: string]: any
  }
}

export interface FeatureHeaderData {
  badge?: string
  titlePrefix?: string
  titleHighlight?: string
  titleSuffix?: string
  description?: string
  counterLabel?: string
  showCounter?: boolean
}

export interface Feature27Props {
  id?: string
  className?: string
  header?: Partial<FeatureHeaderData>
  services?: ServiceItem[]
}

// ============================================================================
// Dynamic JSON Data (Header & 5 Core Services in Same File)
// ============================================================================

export const FEATURE_HEADER_DATA: FeatureHeaderData = {
  badge: "My Advisory Disciplines & Experience",
  titlePrefix: "How I Structure & ",
  titleHighlight: "Advise Client Capital",
  titleSuffix: "",
  description:
    "Explore the five core strategic areas I specialize in for founders, executives, and family offices. Every mandate is discretionary, independent, and fiduciary-aligned.",
  counterLabel: "Strategic Disciplines",
  showCounter: true,
}

export const FEATURE_SERVICES: ServiceItem[] = [
  {
    number: "01",
    category: "Exit & Public Markets",
    badge: "Flagship Mandate",
    icon: Coins,
    title: "Tech Founder Liquidity & Core Portfolio Management",
    description:
      "I structure post-acquisition liquidity into a multi-asset compound engine across global index equities, private credit, and tactical cash reserves to sustain generational prosperity without sacrificing upside.",
    tags: [
      "Post-Exit Liquidity Blueprint",
      "Thematic Equity Models",
      "Quarterly Rebalancing",
    ],
    metric: {
      icon: TrendingUp,
      label: "Target Net Compound Rate: 9.2%–11.5%",
    },
    widget: {
      type: "allocation",
      title: "Discretionary Allocation Engine",
      badge: "LIVE MODEL",
      items: [
        { label: "Global Core Index Equities", value: "60% • $7.2M", pct: 60 },
        { label: "Private Senior Debt & Yield", value: "25% • $3.0M", pct: 25 },
        { label: "Tactical Cash & T-Bills", value: "15% • $1.8M", pct: 15 },
      ],
      stats: [
        { label: "Sharpe Ratio", value: "1.84" },
        { label: "Max Drawdown", value: "-7.2%" },
        { label: "Rebalance Drift", value: "Automated" },
      ],
    },
  },
  {
    number: "02",
    category: "Risk & Hedging",
    badge: "Risk Shield",
    icon: ShieldCheck,
    title: "Executive Stock Option Hedging & Downside Collars",
    description:
      "I design systematic derivative overlays, options collars, and non-correlated asset buffers to protect concentrated equity positions without triggering immediate taxable sales or losing upside participation.",
    tags: [
      "Concentrated Stock Hedging",
      "83(b) Optimization",
      "Downside Collars",
    ],
    metric: {
      icon: ShieldCheck,
      label: "Zero Forced Liquidation Risk",
    },
    widget: {
      type: "collar",
      title: "Zero-Cost Collar Risk Simulator",
      badge: "$8.5M TECH EQUITY",
      cards: [
        {
          label: "Downside Put Floor",
          value: "$92.00",
          note: "Max downside capped at -10%",
        },
        {
          label: "Upside Call Ceiling",
          value: "$138.00",
          note: "+35% upside retained",
        },
      ],
      rows: [
        { label: "Net Out-of-Pocket Cost:", value: "$0.00 (Zero Premium)" },
        { label: "Capital Gains Triggered:", value: "0% (Deferred)" },
      ],
    },
  },
  {
    number: "03",
    category: "Tax Efficiency",
    badge: "Algorithmic Engine",
    icon: Scale,
    title: "Automated Tax-Loss Harvesting & Asset Placement",
    description:
      "I execute continuous year-round algorithmic tax harvesting and strategic multi-entity account placement (taxable vs. tax-deferred vs. trusts) to convert market volatility into substantial tax alpha.",
    tags: ["Year-Round Harvesting", "Entity Structuring", "Retained Alpha"],
    metric: {
      icon: Cpu,
      label: "~1.4% Avg. Annual Retained Tax Alpha",
    },
    widget: {
      type: "tax",
      title: "Tax Harvest Telemetry • 2026 YTD",
      badge: "+$76,440 SAVINGS",
      rows: [
        { label: "Harvested Capital Losses", value: "-$218,400" },
        { label: "Offset Cap Gains Liability", value: "-$76,440 Taxes" },
        { label: "Tracking Error vs Benchmark", value: "0.02%" },
      ],
      footer: {
        label: "Algorithm Frequency: Continuous Automated Scan",
        status: "ACTIVE",
      },
    },
  },
  {
    number: "04",
    category: "Alternative Markets",
    badge: "Direct Co-Invest",
    icon: Sparkles,
    title: "Pre-IPO Allocations & Private Venture Syndicates",
    description:
      "I grant clients direct co-investment allocations into vetted Series B+ tech leaders, pre-IPO secondaries, and institutional private debt funds alongside top tier Sand Hill Road venture firms.",
    tags: ["Pre-IPO Access", "Direct Venture Flow", "Private Debt Yield"],
    metric: {
      icon: Sparkles,
      label: "Direct Cap Table Allocations",
    },
    widget: {
      type: "syndicate",
      title: "Private Syndicate Ticket #408",
      subtitle: "Enterprise AI Cloud Infrastructure",
      badge: "ALLOCATION OPEN",
      stats: [
        { label: "Round", value: "Series C Secondary" },
        { label: "Valuation", value: "$1.8B" },
        { label: "Discount", value: "18.5% Off" },
        { label: "Min Ticket", value: "$100,000" },
      ],
      footer: {
        label: "Co-investing alongside:",
        value: "Tier-1 Silicon Valley VC Partners",
      },
    },
  },
  {
    number: "05",
    category: "Estate & Legacy",
    badge: "Generational Wealth",
    icon: Landmark,
    title: "Family Office Governance & Succession Blueprints",
    description:
      "I advise families on intergenerational trust architecture, family constitutions, philanthropic foundations, and next-gen financial literacy governance to protect wealth across decades.",
    tags: ["Irrevocable Trusts", "Next-Gen Mentorship", "Legacy Governance"],
    metric: {
      icon: Landmark,
      label: "Multi-Generational Continuity Framework",
    },
    widget: {
      type: "trust",
      title: "Intergenerational Trust Architecture",
      badge: "DELAWARE JURISDICTION",
      primary: {
        title: "1. Primary Family Revocable Living Trust",
        tag: "Core Asset Hub",
        desc: "Total asset management & incapacity administration",
      },
      subTiers: [
        {
          title: "2. Dynasty Trust (GST-Exempt)",
          desc: "Shields descendants from estate taxes in perpetuity",
        },
        {
          title: "3. Philanthropic Foundation / DAF",
          desc: "Immediate 30% AGI tax deduction + legacy giving",
        },
      ],
      footer: {
        label: "Family Constitution: Ratified",
        value: "Annual Assembly Active",
      },
    },
  },
]

// ============================================================================
// Compact Feature Widget Renderer
// ============================================================================

function FeatureWidget({ widget }: { widget: ServiceItem["widget"] }) {
  return (
    <div className="rounded-xl border border-emerald-500/20 bg-[#060c09]/95 p-5 shadow-2xl backdrop-blur-xl sm:p-6">
      {/* Widget Header */}
      <div className="mb-4 flex items-center justify-between border-b border-white/5 pb-3">
        <div className="flex items-center gap-2">
          {widget.type === "allocation" && (
            <span className="h-2 w-2 animate-pulse rounded-full bg-emerald-400" />
          )}
          {widget.type === "collar" && (
            <Percent className="h-4 w-4 text-emerald-400" />
          )}
          {widget.type === "tax" && (
            <Activity className="h-4 w-4 text-emerald-400" />
          )}
          {widget.type === "trust" && (
            <FileCheck className="h-4 w-4 text-emerald-400" />
          )}
          <div>
            <div className="text-xs font-semibold text-zinc-200">
              {widget.title}
            </div>
            {widget.subtitle && (
              <div className="text-[11px] text-zinc-400">{widget.subtitle}</div>
            )}
          </div>
        </div>
        <span className="rounded bg-emerald-500/10 px-2 py-0.5 font-mono text-[10px] font-semibold text-emerald-400">
          {widget.badge}
        </span>
      </div>

      {/* 01. Allocation Widget */}
      {widget.type === "allocation" && (
        <div className="space-y-4">
          <div className="space-y-3">
            {widget.items?.map((item: any, i: number) => (
              <div key={i}>
                <div className="mb-1 flex justify-between text-xs">
                  <span className="text-zinc-300">{item.label}</span>
                  <span className="font-mono text-emerald-400">
                    {item.value}
                  </span>
                </div>
                <div className="h-2 w-full overflow-hidden rounded-full bg-white/5">
                  <div
                    className="h-full rounded-full bg-linear-to-r from-emerald-500 to-teal-400"
                    style={{ width: `${item.pct}%` }}
                  />
                </div>
              </div>
            ))}
          </div>
          <div className="grid grid-cols-3 gap-2 border-t border-white/5 pt-3 text-center">
            {widget.stats?.map((s: any, i: number) => (
              <div key={i} className="rounded-lg bg-white/[0.02] p-2">
                <div className="text-[10px] text-zinc-500 uppercase">
                  {s.label}
                </div>
                <div className="mt-0.5 font-mono text-xs font-bold text-emerald-400 sm:text-sm">
                  {s.value}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 02. Collar Widget */}
      {widget.type === "collar" && (
        <div className="space-y-3">
          <div className="grid grid-cols-2 gap-3">
            {widget.cards?.map((c: any, i: number) => (
              <div
                key={i}
                className={`rounded-lg p-3 ${
                  i === 0
                    ? "border border-emerald-500/30 bg-emerald-500/5"
                    : "border border-white/10 bg-white/[0.02]"
                }`}
              >
                <div className="text-xs text-zinc-400">{c.label}</div>
                <div className="mt-1 font-mono text-xl font-bold text-white">
                  {c.value}
                </div>
                <div className="mt-0.5 text-[11px] text-emerald-400">
                  {c.note}
                </div>
              </div>
            ))}
          </div>
          <div className="rounded-lg bg-white/[0.02] p-2.5 text-xs text-zinc-400">
            {widget.rows?.map((r: any, i: number) => (
              <div key={i} className="flex justify-between py-0.5 font-mono">
                <span className="text-zinc-400">{r.label}</span>
                <span className="text-emerald-400">{r.value}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 03. Tax Harvest Widget */}
      {widget.type === "tax" && (
        <div className="space-y-2.5">
          <div className="space-y-2 font-mono text-xs">
            {widget.rows?.map((r: any, i: number) => (
              <div
                key={i}
                className="flex items-center justify-between rounded-lg bg-white/[0.02] p-2"
              >
                <span className="text-zinc-300">{r.label}</span>
                <span className="font-bold text-emerald-400">{r.value}</span>
              </div>
            ))}
          </div>
          {widget.footer && (
            <div className="flex items-center justify-between rounded-lg border border-emerald-500/20 bg-emerald-500/5 px-3 py-1.5 text-[11px] text-emerald-300">
              <span>{widget.footer.label}</span>
              <span className="font-mono font-semibold">
                {widget.footer.status}
              </span>
            </div>
          )}
        </div>
      )}

      {/* 04. Syndicate Deal Widget */}
      {widget.type === "syndicate" && (
        <div className="space-y-3">
          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
            {widget.stats?.map((s: any, i: number) => (
              <div
                key={i}
                className="rounded-lg bg-white/[0.02] p-2 text-center"
              >
                <div className="text-[10px] text-zinc-500 uppercase">
                  {s.label}
                </div>
                <div className="mt-0.5 font-mono text-xs font-bold text-emerald-400">
                  {s.value}
                </div>
              </div>
            ))}
          </div>
          {widget.footer && (
            <div className="flex items-center justify-between rounded-lg border border-white/5 bg-white/[0.02] p-2.5 text-xs">
              <span className="text-zinc-400">{widget.footer.label}</span>
              <span className="font-semibold text-zinc-200">
                {widget.footer.value}
              </span>
            </div>
          )}
        </div>
      )}

      {/* 05. Trust Architecture Widget */}
      {widget.type === "trust" && (
        <div className="space-y-2 text-xs">
          {widget.primary && (
            <div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-2.5">
              <div className="flex justify-between font-semibold text-white">
                <span>{widget.primary.title}</span>
                <span className="font-mono text-emerald-400">
                  {widget.primary.tag}
                </span>
              </div>
              <div className="mt-0.5 text-[11px] text-zinc-400">
                {widget.primary.desc}
              </div>
            </div>
          )}
          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
            {widget.subTiers?.map((sub: any, i: number) => (
              <div
                key={i}
                className="rounded-lg border border-white/10 bg-white/[0.02] p-2.5"
              >
                <div className="font-semibold text-zinc-200">{sub.title}</div>
                <div className="mt-0.5 text-[11px] text-zinc-500">
                  {sub.desc}
                </div>
              </div>
            ))}
          </div>
          {widget.footer && (
            <div className="flex justify-between border-t border-white/5 pt-2 text-[11px] text-zinc-400">
              <span>{widget.footer.label}</span>
              <span className="font-mono text-emerald-400">
                {widget.footer.value}
              </span>
            </div>
          )}
        </div>
      )}
    </div>
  )
}

// ============================================================================
// Main Feature27 Component
// ============================================================================

export default function Feature27({
  id = "services",
  className = "",
  header,
  services = FEATURE_SERVICES,
}: Feature27Props) {
  const currentHeader = { ...FEATURE_HEADER_DATA, ...header }

  return (
    <section
      id={id}
      className={`dark relative overflow-hidden bg-[#070b09] py-8 text-white sm:py-12 lg:py-16 ${className}`.trim()}
    >
      {/* Background Ambient Glows */}
      <div className="pointer-events-none absolute -top-24 right-1/4 h-[550px] w-[550px] rounded-full bg-emerald-500/[0.04] blur-[150px]" />
      <div className="pointer-events-none absolute -bottom-24 left-1/4 h-[500px] w-[500px] rounded-full bg-teal-500/[0.03] blur-[140px]" />

      <div className="relative z-10 container mx-auto max-w-7xl px-4 sm:px-6">
        {/* Dynamic Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 25 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-60px" }}
          transition={{ duration: 0.6 }}
          className="mb-12 flex flex-col justify-between gap-6 md:flex-row md:items-end lg:mb-16"
        >
          <div className="max-w-2xl">
            {currentHeader.badge && (
              <Badge
                variant="default"
                className="mb-4 rounded-full border-emerald-500/30 bg-emerald-500/10 text-emerald-400 shadow-[0_0_12px_rgba(16,185,129,0.15)]"
              >
                {currentHeader.badge}
              </Badge>
            )}
            <h2 className="mb-4 text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl">
              {currentHeader.titlePrefix}
              {currentHeader.titleHighlight && (
                <span className="bg-linear-to-r from-emerald-400 to-teal-300 bg-clip-text text-transparent">
                  {currentHeader.titleHighlight}
                </span>
              )}
              {currentHeader.titleSuffix}
            </h2>
            {currentHeader.description && (
              <p className="text-base text-zinc-400 sm:text-lg">
                {currentHeader.description}
              </p>
            )}
          </div>

          {currentHeader.showCounter && currentHeader.counterLabel && (
            <div className="hidden shrink-0 items-center gap-2 rounded-full border border-white/10 bg-[#0c1410] px-4 py-2 text-xs whitespace-nowrap text-zinc-400 md:flex">
              <span className="h-2 w-2 shrink-0 animate-pulse rounded-full bg-emerald-400" />
              {services.length} {currentHeader.counterLabel}
            </div>
          )}
        </motion.div>

        {/* Dynamic Feature Cards Loop */}
        <div className="space-y-6 sm:space-y-8">
          {services.map((service, index) => {
            const Icon = service.icon
            const MetricIcon = service.metric.icon

            return (
              <SpotlightCard
                key={service.number}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-40px" }}
                transition={{ duration: 0.5, delay: index * 0.05 }}
                className="group relative rounded-2xl border border-white/10 bg-[#0a110d]/90 p-6 transition-all duration-300 hover:border-emerald-500/40 hover:bg-[#0c1712] hover:shadow-[0_0_35px_rgba(16,185,129,0.12)] sm:p-8"
              >
                <div className="grid grid-cols-1 gap-8 lg:grid-cols-12 lg:items-center lg:gap-10">
                  {/* Left Column: Feature Narrative */}
                  <div className="flex flex-col justify-center lg:col-span-5">
                    <div className="mb-4 flex flex-wrap items-center gap-2.5">
                      <span className="flex h-7 w-7 items-center justify-center rounded-lg border border-emerald-500/30 bg-emerald-500/10 font-mono text-xs font-bold text-emerald-400 shadow-[0_0_10px_rgba(16,185,129,0.15)] sm:h-8 sm:w-8 sm:text-sm">
                        {service.number}
                      </span>
                      <span className="rounded border border-emerald-500/20 bg-emerald-500/10 px-2.5 py-0.5 text-[11px] font-semibold tracking-wider text-emerald-400 uppercase">
                        {service.category}
                      </span>
                      <span className="font-mono text-[11px] text-zinc-500">
                        {service.badge}
                      </span>
                    </div>

                    <div className="mb-3 flex items-start gap-3.5">
                      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-emerald-500/25 bg-emerald-500/10 text-emerald-400 shadow-[0_0_15px_rgba(0,229,153,0.15)] transition-all duration-300 group-hover:scale-105 group-hover:border-emerald-400/40 group-hover:bg-emerald-500/20 group-hover:text-emerald-300">
                        <Icon className="h-5 w-5" />
                      </div>
                      <h3 className="text-xl font-bold tracking-tight text-white transition-colors group-hover:text-emerald-300 sm:text-2xl">
                        {service.title}
                      </h3>
                    </div>

                    <p className="mb-5 text-sm leading-relaxed text-zinc-400 sm:text-base">
                      {service.description}
                    </p>

                    <div className="mb-6 flex flex-wrap gap-2">
                      {service.tags.map((item, i) => (
                        <span
                          key={i}
                          className="inline-flex items-center gap-1.5 rounded-lg border border-white/5 bg-white/[0.03] px-2.5 py-1 text-xs font-medium text-zinc-300 transition-colors group-hover:border-emerald-500/20 group-hover:bg-emerald-500/5 group-hover:text-emerald-200"
                        >
                          <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-emerald-400" />
                          {item}
                        </span>
                      ))}
                    </div>

                    <div className="flex items-center justify-between border-t border-white/10 pt-3 text-xs text-zinc-400">
                      <span className="flex items-center gap-1.5 font-medium text-emerald-400/90 sm:text-sm">
                        <MetricIcon className="h-4 w-4 shrink-0 text-emerald-400" />
                        {service.metric.label}
                      </span>
                      <ArrowUpRight className="h-4 w-4 shrink-0 text-zinc-600 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-400" />
                    </div>
                  </div>

                  {/* Right Column: Visual Mockup Widget */}
                  <div className="lg:col-span-7">
                    <FeatureWidget widget={service.widget} />
                  </div>
                </div>
              </SpotlightCard>
            )
          })}
        </div>
      </div>
    </section>
  )
}
```

### `src/components/uiable/blocks/landing/components/PortfolioSpotlightCard.tsx`

```tsx
"use client"

import React, { useRef, useState, useCallback } from "react"

// third-party
import { motion, type HTMLMotionProps } from "framer-motion"

// project-imports
import { cn } from "@/lib/utils"

interface SpotlightCardProps extends HTMLMotionProps<"div"> {
  children: React.ReactNode
  className?: string
  spotlightColor?: string
}

export function SpotlightCard({
  children,
  className,
  spotlightColor = "rgba(0, 229, 153, 0.14)",
  ...props
}: SpotlightCardProps) {
  const divRef = useRef<HTMLDivElement>(null)
  const [position, setPosition] = useState<{ x: number; y: number }>({
    x: 0,
    y: 0,
  })
  const [opacity, setOpacity] = useState(0)

  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
    if (!divRef.current) return

    const rect = divRef.current.getBoundingClientRect()
    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top })
  }, [])

  const handleFocus = useCallback(() => {
    setOpacity(1)
  }, [])

  const handleBlur = useCallback(() => {
    setOpacity(0)
  }, [])

  const handleMouseEnter = useCallback(() => {
    setOpacity(1)
  }, [])

  const handleMouseLeave = useCallback(() => {
    setOpacity(0)
  }, [])

  return (
    <motion.div
      ref={divRef}
      onMouseMove={handleMouseMove}
      onFocus={handleFocus}
      onBlur={handleBlur}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className={cn(
        "relative overflow-hidden rounded-2xl border border-white/10 bg-[#0c1410]/80 p-6 backdrop-blur-xl transition-all duration-300 hover:border-emerald-500/35 hover:shadow-[0_0_30px_rgba(0,229,153,0.12)]",
        className
      )}
      {...props}
    >
      {/* Mouse Reveal Spotlight Layer */}
      <div
        className="pointer-events-none absolute -inset-px rounded-2xl transition-opacity duration-300"
        style={{
          opacity,
          background: `radial-gradient(400px circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 70%)`,
        }}
      />
      {children}
    </motion.div>
  )
}

export const PortfolioSpotlightCard = SpotlightCard
```