import { cn } from "@/lib/utils"; import type React from "react"; import { Badge } from "@/components/ui/badge"; import { TrendingUpIcon, SquareMousePointerIcon, BlocksIcon } from "lucide-react"; const features = [ { id: "setup", children: , className: "md:col-span-2", }, { id: "user-based-security", children: , className: "md:col-span-2", }, { id: "reports", children: , className: "sm:col-span-2 md:col-span-2", }, { id: "dashboard", children: , className: "sm:col-span-2 md:col-span-3 p-0", }, { id: "presence", children: , className: "sm:col-span-2 md:col-span-3 p-0", }, ]; export default function FeatureSection() { return (

{/* Header */}

{/* Badge */}

Features

{/* Heading and Description */}

The foundation for creative teams management

Lyra is evolving to be more than just the models. It supports an entire ecosystem helping developers and businesses innovate.

{/* Feature Grid */}

{features.map((feature) => ( {feature.children} ))}

); } function FeatureCard({ children, className, }: { children: React.ReactNode; className?: string; }) { return (

{children}

); } function FeatureTitle({ className, ...props }: React.ComponentProps<"h3">) { return (

); } function FeatureDescription({ className, ...props }: React.ComponentProps<"p">) { return (
); } function SetupVisual() { return ( <>

2 Minutes Setup Get your company's Account up and running in under 2 minutes.
); } function UserBasedSecurity() { return ( <>

User-Based Security Grant specific permissions to users based on their roles and responsibilities.
); } function ReportsVisual() { return ( <>

4.5%

Reports & Analytics Get detailed insights and analytics to make data-driven decisions.
); } function DashboardVisual() { return (

Sleek & Intuitive Design Manage & scale your business effortlessly using our user-friendly interface.

{/* Dashboard Screen */}

); } type LogoType = { src: string; alt: string; isInvertable?: boolean; }; type TileData = { row: number; col: number; logo?: LogoType; }; const logoTiles: TileData[] = [ { row: 0, col: 1 }, { row: 0, col: 3, logo: { src: "https://storage.efferd.com/logo/notion.svg", alt: "Notion Logo" } }, { row: 1, col: 0 }, { row: 1, col: 2, logo: { src: "https://storage.efferd.com/logo/cursor.svg", alt: "Cursor Logo", isInvertable: true } }, { row: 1, col: 4, logo: { src: "https://storage.efferd.com/logo/vercel.svg", alt: "Vercel Logo", isInvertable: true } }, { row: 2, col: 1, logo: { src: "https://storage.efferd.com/logo/planetscale.svg", alt: "Planetscale Logo", isInvertable: true } }, { row: 2, col: 3, logo: { src: "https://storage.efferd.com/logo/gmail.svg", alt: "Gmail Logo" } }, { row: 3, col: 0 }, { row: 3, col: 2, logo: { src: "https://storage.efferd.com/logo/supabase.svg", alt: "Supabase Logo" } }, { row: 3, col: 4, logo: { src: "https://storage.efferd.com/logo/canva.svg", alt: "Canva Logo" } }, { row: 4, col: 1, logo: { src: "https://storage.efferd.com/logo/adobe.svg", alt: "Adobe Logo" } }, { row: 4, col: 3, logo: { src: "https://storage.efferd.com/logo/polar.svg", alt: "Polar Logo" } }, ]; function IntegrationTile({ row, col, logo }: TileData) { return (
{logo && ( )}
); } function PresenceVisual() { return (

Seamless Integration Integrate with over 100+ tools and platforms to streamline your workflow and boost productivity.

{logoTiles.map((tile) => ( ))}

); } function CustomLockIcon(props: React.ComponentProps<"svg">) { return ( ); } function CustomTimerIcon(props: React.ComponentProps<"svg">) { return ( ); } function ReportsChartsSvg(props: React.ComponentProps<"svg">) { return ( ); }

Shadcn bento blocks