"use client"; import React, { useRef } from "react"; import { motion, useScroll, useTransform } from "framer-motion"; import { Lightbulb, PenTool, Terminal, Rocket, ArrowRight } from "lucide-react"; const processSteps = [ { id: "01", title: "Discovery & Strategy", description: "Deep dive into your vision to define objectives and technical roadmaps.", icon: Lightbulb, tags: ["Research", "Planning"], }, { id: "02", title: "UI/UX Design", description: "Crafting intuitive and visually stunning interfaces with focus on user journey.", icon: PenTool, tags: ["Prototyping", "Aesthetics"], }, { id: "03", title: "Core Development", description: "Building scalability with cutting-edge frameworks and clean code.", icon: Terminal, tags: ["Frontend", "Backend"], }, { id: "04", title: "Launch & Deployment", description: "Battle-tested methodology for flawless release and global launch.", icon: Rocket, tags: ["QA Testing", "Cloud"], }, ]; export default function AnimatedProcessSteps() { const containerRef = useRef(null); const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start center", "end center"], }); return ( // Removimos bg-neutral-100 / dark:bg-[#050505] // Agregamos bg-transparent, border, rounded-3xl y shadow-sm para encapsular el componente

{/* El glow ambiental ahora está contenido dentro del borde */}

Workflow

From concept to reality.

We follow a rigorous methodology designed to build extraordinary digital products.

{processSteps.map((step, index) => { const Icon = step.icon; return (

{/* Aseguramos que los fondos internos de los nodos usen variables de tailwind base como bg-white / dark:bg-neutral-950 */}

{step.id}

{step.title}

{step.description}

{step.tags.map((tag, i) => ( {tag} ))}

Explore

); })}

); }