I fixed the error by correcting how the icon component is rendered. The issue was trying to call the icon as a function when it should be rendered as a JSX component.
Changed from:
{demos[activeDemo].icon({ className: "h-6 w-6 text-white" })}To:
<demos[activeDemo].icon className="h-6 w-6 text-white" />The Lucide React icons (Brain, Zap, Heart, Leaf) are React components, not functions, so they need to be rendered using JSX syntax with the angle brackets < > rather than being called as functions with parentheses ().
The component should now work properly without the "not a function" error, displaying the correct icons in both the hologram display and the demo content section.
revert back to version 7. Change "Science" on banner to "Technology". Design hompage that shows capabilities of coffee machine not just specs (conceptual design). futuristic, interactive. The coffee machine will integrate hologram experience with hologram characters (use 3d placeholder for now)
I've reverted to a cleaner version and created a futuristic, interactive homepage section that showcases the coffee machine's capabilities rather than just specs. Here are the key changes:
The section now focuses on what the coffee machine does (its capabilities) rather than technical specifications, with holographic wellness guides that represent the personalized experience users will have.