Free Resources

Self-Awareness Worksheet

Download this worksheet to help you start your journey towards greater self-awareness.

The ABCs of Teams

Download this 1-pager to learn science-based tips for leading high-performing teams.

Free Mini Assessments

Take one of our free assessments to learn more about yourself.
const CardDeck = () => { const [isFlipped, setIsFlipped] = React.useState(false); const [isShuffling, setIsShuffling] = React.useState(false); const [currentPrompt, setCurrentPrompt] = React.useState(''); const [usedPrompts, setUsedPrompts] = React.useState(new Set()); const prompts = [ "What obstacle have you recently overcome?", "What is your company's vision?", "What need is highest priority right now?", "What skills are your strengths? What skills do you feel you need to improve?", "How much wood, would a woodchuck, chuck?" ]; const getRandomPrompt = () => { const availablePrompts = prompts.filter(prompt => !usedPrompts.has(prompt)); if (availablePrompts.length === 0) { setUsedPrompts(new Set()); return prompts[Math.floor(Math.random() * prompts.length)]; } const randomPrompt = availablePrompts[Math.floor(Math.random() * availablePrompts.length)]; setUsedPrompts(new Set([...usedPrompts, randomPrompt])); return randomPrompt; }; const handleClick = () => { if (isFlipped || isShuffling) return; setIsShuffling(true); setTimeout(() => { setCurrentPrompt(getRandomPrompt()); setIsFlipped(true); setIsShuffling(false); }, 1000); }; const handleReset = () => { setIsFlipped(false); }; const style = document.createElement('style'); style.textContent = ` @keyframes shuffle { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-10px) rotate(-2deg); } 75% { transform: translateY(10px) rotate(2deg); } } .animate-shuffle { animation: shuffle 1s ease-in-out; } `; document.head.appendChild(style); return e('div', { className: 'flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4' }, e('div', { className: 'relative w-80 h-96' }, [ // Back of deck e('div', { key: 'back', className: `absolute w-full h-full ${isShuffling ? 'animate-shuffle' : ''}`, onClick: handleClick, style: { perspective: '1000px' } }, e('div', { className: `w-full h-full ${!isFlipped ? 'cursor-pointer' : 'hidden'}` }, [ e('div', { className: 'absolute w-full h-full bg-white rounded-lg shadow-lg flex items-center justify-center p-4' }, e('div', { className: 'relative w-full h-full border-4 border-purple-600 rounded-lg flex items-center justify-center' }, [ e('div', { className: 'absolute inset-0 rounded-lg', style: { backgroundImage: 'repeating-linear-gradient(45deg, rgba(147, 51, 234, 0.1) 0px, rgba(147, 51, 234, 0.1) 10px, transparent 10px, transparent 20px)' } }), e('div', { className: 'text-purple-600 text-center font-bold z-10' }, 'Entrepreneurial Growth Prompts') ]) ), e('div', { className: 'absolute top-1 left-1 w-full h-full bg-white rounded-lg border-2 border-purple-600' }), e('div', { className: 'absolute top-2 left-2 w-full h-full bg-white rounded-lg border-2 border-purple-600' }) ]) ), // Flipped card with prompt e('div', { key: 'front', className: `absolute w-full h-full ${isFlipped ? 'block' : 'hidden'}`, onClick: handleReset, style: { transform: isFlipped ? 'rotateY(0deg)' : 'rotateY(180deg)', transition: 'transform 0.6s' } }, e('div', { className: 'w-full h-full bg-white rounded-lg shadow-lg p-6 cursor-pointer border-4 border-purple-600' }, e('div', { className: 'h-full flex items-center justify-center text-center text-gray-800 font-medium' }, currentPrompt) ) ) ]) ); }; // Render the component document.addEventListener('DOMContentLoaded', function() { const domContainer = document.getElementById('card-deck-root'); if (domContainer) { ReactDOM.render(e(CardDeck), domContainer); } }); Last edited 3 minutes ago