Components
Interactive Tech Stack Builder
A highly interactive, 2.5D gamified onboarding component. Let users physically build their skill stack block by block. Features smooth physics, glassmorphism icons, and Framer Motion animations. Perfect for developer portfolios, SaaS setup flows, or premium profile pages.
"use client";
import { Component as LegoOnboarding } from "../components/ui/interactive-tech-stack-builder";
export default function LegoOnboardingDemo() {
return (
<div className="w-full h-screen bg-[#f8ece4] overflow-hidden">
<LegoOnboarding
onComplete={(stack) => {
console.log("Stack tecnológico seleccionado:", stack);
const stackNames = stack.map(m => m.name).join(' + ');
alert(`¡Onboarding Completado!\nStack elegido: ${stackNames}`);
}}
onSkip={() => {
console.log("El usuario ha saltado el onboarding");
alert("Onboarding saltado. Llevando al panel principal...");
}}
/>
</div>
);
}