"use client"; import * as React from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; /* ═══════════════════════════════════════════════════════════ Split Feature Showcase — Rauno-minimal. Two cells in a sharp-cornered container, no border chrome: Left: Conversation thread (sender + reply bubbles, online pulse) Right: Bare text list — even hierarchy, subtle stagger animation Dependencies: motion. ═══════════════════════════════════════════════════════════ */ const S = { type: "spring" as const, stiffness: 300, damping: 28 }; const S_SNAP = { type: "spring" as const, stiffness: 440, damping: 26 }; const S_SOFT = { type: "spring" as const, stiffness: 260, damping: 24 }; const S_MICRO = { type: "spring" as const, stiffness: 500, damping: 30 }; export interface SplitFeatureShowcaseProps { leftTitle?: string; leftDescription?: string; rightTitle?: string; rightDescription?: string; className?: string; } const WORKFLOW_ITEMS = [ "Alerts", "Lead routing", "Re-engage cold leads", "New Deal email campaign flow", "Lead form submissions", "Health scoring", "Upsell", ]; export function SplitFeatureShowcase({ leftTitle = "Conversations that convert.", leftDescription = "Collaborate in real time with threaded messages, presence indicators, and instant reactions every exchange captured in context.", rightTitle = "Automate your entire pipeline.", rightDescription = "From lead capture to customer success, every workflow runs on autopilot, so your team can focus on closing deals.", className, }: SplitFeatureShowcaseProps) { return (

{/* ── Left cell ──────────────────────────────────── */}

Irung 2m ago

Hey{" "} @bernard , I've updated the dashboard metrics.

🔥

The conversion rate looks great

Read

{leftTitle} {" "} {leftDescription}

{/* ── Right cell: Bare text, even hierarchy ──────── */}

{rightTitle} {" "} {rightDescription}