import { BarChart3, Globe, GitBranch, Lock, Timer, Webhook } from "lucide-react" import { Section, SectionHeader } from "@/registry/balick/ui/section" const header = { eyebrow: "Platform", title: "Built for the way you ship.", description: "Six building blocks that cover the whole path from commit to customer, without glue code.", } const features = [ { icon: GitBranch, title: "Git-based workflow", description: "Push to deploy. Every branch gets a preview URL your whole team can review.", }, { icon: Globe, title: "Global edge network", description: "Served from 312 locations, a few milliseconds away from every visitor.", }, { icon: BarChart3, title: "Real-time analytics", description: "Traffic, performance and conversions, live and without sampling.", }, { icon: Lock, title: "Secure by default", description: "Encryption, SSO and audit logs included on every plan, not sold as add-ons.", }, { icon: Timer, title: "Instant rollbacks", description: "Revert any deploy in one click. No rebuild, no waiting, no downtime.", }, { icon: Webhook, title: "Integrations", description: "Connect your database, payments and email, or build your own with webhooks.", }, ] export function Features02({ id = "features" }: { id?: string }) { return (

{/* Each cell draws its own right and bottom border, and the grid overflows by one pixel so the outer edges stay hidden. Any number of features works: an incomplete last row leaves blank space, not a filled cell. */}

{features.map(({ icon: Icon, title, description }) => (

{title}

{description}

))}

) }