From 8b4eceebfaaaf07e38ea64c7fe015aec86ac754f Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 20 Oct 2025 05:51:05 -0500
Subject: [PATCH] refactor(homepage): rearrange tutorial demo layout side by
 side
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restructure "Learn by Doing" section to display tutorial and "What You'll
Learn" side by side. Items now display vertically instead of in a 2x2 grid.

Changes:
- Tutorial positioned on left with flex: 1
- "What You'll Learn" section positioned on right
- Items arranged vertically using stack layout
- Increased container max-width from 900px to 1200px
- Responsive: stacks vertically on mobile, side-by-side on md+ screens

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/page.tsx | 84 ++++++++++++++++++++++-----------------
 1 file changed, 47 insertions(+), 37 deletions(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 9d9fad9d..43f2fbbb 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -216,55 +216,65 @@ export default function HomePage() {
                 border: '1px solid',
                 borderColor: 'gray.700',
                 shadow: 'lg',
-                maxW: '900px',
+                maxW: '1200px',
                 mx: 'auto',
               })}
             >
-              {/* What you'll learn - above tutorial */}
               <div
                 className={css({
-                  mb: '8',
-                  pb: '6',
-                  borderBottom: '1px solid',
-                  borderColor: 'gray.700',
+                  display: 'flex',
+                  flexDirection: { base: 'column', md: 'row' },
+                  gap: '8',
+                  alignItems: { base: 'center', md: 'flex-start' },
                 })}
               >
-                <h3
+                {/* Tutorial on the left */}
+                <div className={css({ flex: '1' })}>
+                  <TutorialPlayer
+                    tutorial={friendsOf5Tutorial}
+                    isDebugMode={false}
+                    showDebugPanel={false}
+                    hideNavigation={true}
+                    hideTooltip={true}
+                    silentErrors={true}
+                    abacusColumns={1}
+                    theme="dark"
+                  />
+                </div>
+
+                {/* What you'll learn on the right */}
+                <div
                   className={css({
-                    fontSize: 'xl',
-                    fontWeight: 'bold',
-                    color: 'white',
-                    mb: '4',
-                    textAlign: 'center',
+                    flex: '0 0 auto',
+                    minW: '300px',
+                    maxW: { base: '100%', md: '350px' },
                   })}
                 >
-                  What You'll Learn
-                </h3>
-                <div className={grid({ columns: { base: 1, sm: 2 }, gap: '3' })}>
-                  {[
-                    'Read and set numbers on an abacus',
-                    'Add and subtract with "friends" techniques',
-                    'Multiply and divide fluently',
-                    'Calculate mentally without the abacus',
-                  ].map((skill, i) => (
-                    <div key={i} className={hstack({ gap: '3' })}>
-                      <span className={css({ color: 'yellow.400', fontSize: 'lg' })}>✓</span>
-                      <span className={css({ color: 'gray.300', fontSize: 'sm' })}>{skill}</span>
-                    </div>
-                  ))}
+                  <h3
+                    className={css({
+                      fontSize: 'xl',
+                      fontWeight: 'bold',
+                      color: 'white',
+                      mb: '4',
+                    })}
+                  >
+                    What You'll Learn
+                  </h3>
+                  <div className={stack({ gap: '3' })}>
+                    {[
+                      'Read and set numbers on an abacus',
+                      'Add and subtract with "friends" techniques',
+                      'Multiply and divide fluently',
+                      'Calculate mentally without the abacus',
+                    ].map((skill, i) => (
+                      <div key={i} className={hstack({ gap: '3' })}>
+                        <span className={css({ color: 'yellow.400', fontSize: 'lg' })}>✓</span>
+                        <span className={css({ color: 'gray.300', fontSize: 'sm' })}>{skill}</span>
+                      </div>
+                    ))}
+                  </div>
                 </div>
               </div>
-
-              <TutorialPlayer
-                tutorial={friendsOf5Tutorial}
-                isDebugMode={false}
-                showDebugPanel={false}
-                hideNavigation={true}
-                hideTooltip={true}
-                silentErrors={true}
-                abacusColumns={1}
-                theme="dark"
-              />
             </div>
           </section>