new_layout/app/IconCircle.tsx

// IconCircle.tsx
'use client';
import React from 'react';
import { motion } from 'framer-motion';
import './IconCircle.css';

const iconClasses = [
    'bi bi-graph-up',
    'bi bi-lightning-fill',
    'bi bi-currency-exchange',
    'bi bi-globe2',
    'bi bi-bar-chart-line-fill',
    'bi bi-arrow-left-right',
    'bi bi-bank',
    'bi bi-boxes',
];

interface IconCircleProps {
    delay?: number;
}

const IconCircle: React.FC<IconCircleProps> = ({ delay = 0 }) => {
    return (
        <div className="icon-circle">
        <motion.div
            className="central-icon"
            initial={{ scale: 0 }}
            animate={{ scale: 1, rotate: 1080 }}
            transition={{ duration: 1, delay }}
        >
            <i className="bi bi-stars"></i>
        </motion.div>

        {iconClasses.map((iconClass, i) => (
            <motion.div
            key={i}
            className="floating-icon"
            initial={{
                transform: 'translate(0, 0) scale(0)',
                opacity: 0,
            }}
            animate={{
                transform: `rotate(${i * 45}deg) translate(130px) rotate(-${i * 45}deg)`,
                scale: 1,
                opacity: 1,
            }}
            transition={{
                delay: delay + 0.5 + i * 0.1, // empieza después del centro
                duration: 0.5,
                type: 'spring',
            }}
            >
            <i className={iconClass}></i>
            </motion.div>
        ))}
        </div>
    );
};

export default IconCircle;