new_layout/app/page.tsx

'use client';

import './globals.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import IconCircle from './IconCircle';
import { motion } from 'framer-motion';

const Home = () => {
    return (
        <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 1 }}
            className="page-wrapper"
        >

        <div className="circle-background">
            {[150, 300, 450, 600].map((size, i) => (
                <motion.div
                key={i}
                className="circle"
                initial={{ scale: 0 }}
                animate={{ scale: 3 }}
                transition={{
                    delay: 1 + i * 0.3, // empieza después de la animación del texto
                    duration: 2,
                    ease: 'easeOut',
                }}
                style={{
                    width: size,
                    height: size,
                }}
                />
            ))}
        </div>

      {/* ⬇️ Tu contenido principal */}
      <motion.header
        initial={{ x: -100, opacity: 0 }}
        animate={{ x: 0, opacity: 1 }}
        transition={{ duration: 1.5, ease: 'easeOut' }}
      >
        <div className="first-child">Alchemy Markets</div>
        <div className="nav-links">
          <a href="">Trading</a>
          <a href="">Platforms</a>
          <a href="">Tools & Education</a>
          <a href="">About Us</a>
          <a href="">Partners</a>
        </div>
        <div className="first-child">
          <button className="first-of-type">Log in</button>
          <button className="first-of-type">Sign up</button>
        </div>
      </motion.header>

      <motion.main
        initial={{ y: 50, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ delay: 1, duration: 1 }}
      >
        <IconCircle delay={2} />

        <strong>Explore markets ready for trading</strong>
        <p>
          Explore 300+ trading instruments across 10+ asset classes with Alchemy Markets. Trade Forex, Stocks, Indices, and more!
        </p>

        <div>
          <button>Start Trading</button>
          <div>
            <i></i>
            <p>Years of reliability</p>
          </div>
        </div>

        <p>SCROLL TO EXPLORE</p>
      </motion.main>
    </motion.div>
  );
};

export default Home;