Featured Startup: Well-Paid Maids

Featured Startup: Well-Paid Maids At Blackhawke, we come into contact with countless entrepreneurs that are building impressive companies that we believe are on their way to make significant impact on society. In this regular feature, we invite startup founders and founder teams to share their story and tell us more about their company. In this […]

Subscribe to the Blackhawke Newsletter to receive a 15% discount
on your next EVP purchase.

Blackhawke Behavior Science

(c) 2016 – 2021. All rights reserved.

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