From d362a770d63405efee5ef8a896d34e783dd11de2 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 20 Oct 2025 17:18:10 -0500
Subject: [PATCH] refactor(homepage): streamline homepage sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Simplified homepage by removing redundant sections and elevating
the flashcard creator to a standalone section.

Changes:
- Remove 'For Kids & Families' section entirely
- Remove 'Interactive Abacus' pane from Additional Tools
- Promote 'Flashcard Creator' to standalone top-level section

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

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

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 9a936a43..0d784b19 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -320,49 +320,6 @@ export default function HomePage() {
               </div>
             </section>
 
-            {/* For Kids & Families Section */}
-            <section className={stack({ gap: '6', mb: '16' })}>
-              <div className={css({ textAlign: 'center' })}>
-                <h2
-                  className={css({
-                    fontSize: { base: '2xl', md: '3xl' },
-                    fontWeight: 'bold',
-                    color: 'white',
-                    mb: '2',
-                  })}
-                >
-                  For Kids & Families
-                </h2>
-                <p className={css({ color: 'gray.400', fontSize: 'md', maxW: '2xl', mx: 'auto' })}>
-                  Simple enough for kids to start on their own, structured enough for parents to
-                  trust
-                </p>
-              </div>
-
-              <div className={grid({ columns: { base: 1, lg: 2 }, gap: '8' })}>
-                <FeaturePanel
-                  icon="🧒"
-                  title="Self-Directed for Children"
-                  features={[
-                    'Big, obvious buttons and clear instructions',
-                    'Progress at your own pace',
-                    'Works with or without a physical abacus',
-                  ]}
-                  accentColor="purple"
-                />
-                <FeaturePanel
-                  icon="👨‍👩‍👧"
-                  title="Trusted by Parents"
-                  features={[
-                    'Structured curriculum following Japanese methods',
-                    'Traditional kyu/dan progression levels',
-                    'Track progress and celebrate achievements',
-                  ]}
-                  accentColor="blue"
-                />
-              </div>
-            </section>
-
             {/* Progression Visualization */}
             <section className={stack({ gap: '6', mb: '16' })}>
               <div className={css({ textAlign: 'center' })}>
@@ -523,47 +480,20 @@ export default function HomePage() {
               </Link>
             </section>
 
-            {/* Additional Tools Section */}
+            {/* Flashcard Generator Section */}
             <section className={stack({ gap: '6' })}>
-              <div className={css({ textAlign: 'center' })}>
-                <h2
-                  className={css({
-                    fontSize: { base: '2xl', md: '3xl' },
-                    fontWeight: 'bold',
-                    color: 'white',
-                    mb: '2',
-                  })}
-                >
-                  Additional Tools
-                </h2>
-              </div>
-
-              <div className={grid({ columns: { base: 1, lg: 2 }, gap: '8' })}>
-                <FeaturePanel
-                  icon="🎨"
-                  title="Flashcard Creator"
-                  features={[
-                    'Multiple formats: PDF, PNG, SVG, HTML',
-                    'Custom bead shapes, colors, and layouts',
-                    'All paper sizes: A3, A4, A5, US Letter',
-                  ]}
-                  accentColor="blue"
-                  ctaText="Create Flashcards →"
-                  ctaHref="/create"
-                />
-                <FeaturePanel
-                  icon="🧮"
-                  title="Interactive Abacus"
-                  features={[
-                    'Practice anytime in your browser',
-                    'Multiple color schemes and bead styles',
-                    'Sound effects and animations',
-                  ]}
-                  accentColor="purple"
-                  ctaText="Try the Abacus →"
-                  ctaHref="/guide"
-                />
-              </div>
+              <FeaturePanel
+                icon="🎨"
+                title="Flashcard Creator"
+                features={[
+                  'Multiple formats: PDF, PNG, SVG, HTML',
+                  'Custom bead shapes, colors, and layouts',
+                  'All paper sizes: A3, A4, A5, US Letter',
+                ]}
+                accentColor="blue"
+                ctaText="Create Flashcards →"
+                ctaHref="/create"
+              />
             </section>
           </div>
         </div>