This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:

Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piƱa coladas. (And gettin’ caught in the rain.)

…or something like this:

The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.

As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!

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