An animated orbital feature showcase: feature bubbles rotate around a central hub, connected by a dashed ring with electric pulses along the connectors. Click the center to collapse or expand the bubbles. Good for hero sections and product highlights. The number of features, the
import {
BarChart3,
DollarSign,
Heart,
Package,
Calculator,
UtensilsCrossed,
} from "lucide-react";
import { OrbitFeatures } from "@/components/ui/orbit-features";
const settings = {
title: "Core Highlights",
accentColor: "#A1CC3A",
rotationDuration: 60,
pulseInterval: 5000,
defaultExpanded: true,
};
const features = [
{ icon: Calculator, label: "Touch Screen\nPOS Billing" },
{ icon: UtensilsCrossed, label: "Kitchen & Bar Order\nAutomation" },
{ icon: Package, label: "Inventory & Recipe\nCost Control" },
{ icon: Heart, label: "Loyalty, Reservations &\nEvent Management" },
{ icon: DollarSign, label: "Multi-Outlet & Multi-\nCurrency Support" },
{ icon: BarChart3, label: "Complete Accounting &\nFinancial Reports" },
];
export default function DemoOne(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="flex min-h-svh w-full items-center justify-center overflow-hidden bg-background p-6">
<OrbitFeatures features={features} {...s} />
</div>
);
}