digital-alchemy-dashboard/
├── src/
│   ├── components/     # Reusable UI components
│   ├── pages/         # Route-based page components
│   ├── assets/        # Images, fonts, static files
│   ├── styles/        # Global styles and Tailwind config
│   ├── utils/         # Helper functions
│   ├── App.tsx        # Main app component with routing
│   └── main.tsx       # Entry point
├── public/            # Static assets served as-is
├── package.json
├── vite.config.ts     # Vite configuration
└── tsconfig.json      # TypeScript configuration

import { motion, AnimatePresence } from 'framer-motion';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={location.pathname}
        initial={{ opacity: 0, x: -20 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: 20 }}
        transition={{ duration: 0.3 }}
      >
        {/* Page content */}
      </motion.div>
    </AnimatePresence>
  );
}

import gsap from 'gsap';
import { useGSAP } from '@gsap/react';

function Hero() {
  useGSAP(() => {
    const tl = gsap.timeline();
    
    tl.from('.hero-title', {
      y: 100,
      opacity: 0,
      duration: 1,
      ease: 'power3.out'
    })
    .from('.hero-subtitle', {
      y: 50,
      opacity: 0,
      duration: 0.8,
      ease: 'power2.out'
    }, '-=0.5')
    .from('.hero-cta', {
      scale: 0.8,
      opacity: 0,
      duration: 0.5
    }, '-=0.3');
  });
  
  return (
    <div>
      <h1 className="hero-title">Welcome</h1>
      <p className="hero-subtitle">Digital Alchemy</p>
      <button className="hero-cta">Get Started</button>
    </div>
  );
}