From 9ec0a71546ee483233ed7866dae97345bf2384d7 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 20 Oct 2025 19:17:10 -0500
Subject: [PATCH] feat(homepage): make skills section responsive with emojis
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update "What You'll Learn" section to display in a responsive grid:
- One column on mobile/tablet
- Two columns on larger screens (lg breakpoint)
- Increased padding and height on two-column layout
- Added emojis to skill titles for better visual appeal

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

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

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 125e9be1..f49d9ba7 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -201,10 +201,10 @@ export default function HomePage() {
                     >
                       What You'll Learn
                     </h3>
-                    <div className={stack({ gap: '5' })}>
+                    <div className={grid({ columns: { base: 1, lg: 2 }, gap: '5' })}>
                       {[
                         {
-                          title: 'Read and set numbers',
+                          title: '📖 Read and set numbers',
                           desc: 'Master abacus number representation from zero to thousands',
                           example: '0-9999',
                           badge: 'Foundation',
@@ -212,7 +212,7 @@ export default function HomePage() {
                           columns: 3,
                         },
                         {
-                          title: 'Friends techniques',
+                          title: '🤝 Friends techniques',
                           desc: 'Add and subtract using complement pairs and mental shortcuts',
                           example: '5 = 2+3',
                           badge: 'Core',
@@ -220,7 +220,7 @@ export default function HomePage() {
                           columns: 1,
                         },
                         {
-                          title: 'Multiply & divide',
+                          title: '✖️ Multiply & divide',
                           desc: 'Fluent multi-digit calculations with advanced techniques',
                           example: '12×34',
                           badge: 'Advanced',
@@ -228,7 +228,7 @@ export default function HomePage() {
                           columns: 2,
                         },
                         {
-                          title: 'Mental calculation',
+                          title: '🧠 Mental calculation',
                           desc: 'Visualize and compute without the physical tool (Anzan)',
                           example: 'Speed math',
                           badge: 'Expert',
@@ -246,7 +246,7 @@ export default function HomePage() {
                                 ? 'linear-gradient(135deg, rgba(250, 204, 21, 0.15), rgba(250, 204, 21, 0.08))'
                                 : 'linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03))',
                               borderRadius: 'xl',
-                              p: '4',
+                              p: { base: '4', lg: '5' },
                               border: '1px solid',
                               borderColor: isSelected
                                 ? 'rgba(250, 204, 21, 0.4)'
@@ -275,7 +275,7 @@ export default function HomePage() {
                                 className={css({
                                   fontSize: '3xl',
                                   width: '75px',
-                                  height: '115px',
+                                  height: { base: '115px', lg: '140px' },
                                   display: 'flex',
                                   alignItems: 'center',
                                   justifyContent: 'center',