From c84d7122f3c9636a80313df2438ff91fdedf0e30 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Wed, 5 Nov 2025 13:27:42 -0600
Subject: [PATCH] feat(create): add worksheet creator card to hub page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add addition worksheet creator card with green accent
- Update grid layout to support 4 columns on xl screens
- Features: tunable difficulty, regrouping practice, PDF generation

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

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

diff --git a/apps/web/src/app/create/page.tsx b/apps/web/src/app/create/page.tsx
index a931cfc8..d48feb01 100644
--- a/apps/web/src/app/create/page.tsx
+++ b/apps/web/src/app/create/page.tsx
@@ -104,7 +104,12 @@ export default function CreateHubPage() {
           <div
             className={css({
               display: 'grid',
-              gridTemplateColumns: { base: '1fr', md: '1fr 1fr', lg: '1fr 1fr 1fr' },
+              gridTemplateColumns: {
+                base: '1fr',
+                md: '1fr 1fr',
+                lg: 'repeat(2, 1fr)',
+                xl: 'repeat(4, 1fr)',
+              },
               gap: 8,
             })}
           >
@@ -500,6 +505,202 @@ export default function CreateHubPage() {
               </div>
             </Link>
 
+            {/* Worksheet Creator */}
+            <Link href="/create/worksheets/addition">
+              <div
+                data-element="worksheets-card"
+                className={css({
+                  bg: 'white',
+                  borderRadius: '3xl',
+                  p: 8,
+                  boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
+                  cursor: 'pointer',
+                  transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                  position: 'relative',
+                  overflow: 'hidden',
+                  _hover: {
+                    transform: 'translateY(-12px) scale(1.02)',
+                    boxShadow: '0 30px 80px rgba(0,0,0,0.35)',
+                  },
+                  _before: {
+                    content: '""',
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: '6px',
+                    background: 'linear-gradient(90deg, #10b981 0%, #059669 100%)',
+                  },
+                })}
+              >
+                {/* Icon with gradient background */}
+                <div
+                  className={css({
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '4xl',
+                    mb: 5,
+                    width: '80px',
+                    height: '80px',
+                    borderRadius: '2xl',
+                    background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+                    boxShadow: '0 8px 24px rgba(16, 185, 129, 0.4)',
+                  })}
+                >
+                  📝
+                </div>
+
+                {/* Title */}
+                <h2
+                  className={css({
+                    fontSize: '2xl',
+                    fontWeight: 'extrabold',
+                    mb: 3,
+                    color: 'gray.900',
+                    letterSpacing: 'tight',
+                  })}
+                >
+                  {t('worksheets.title')}
+                </h2>
+
+                {/* Description */}
+                <p
+                  className={css({
+                    fontSize: 'md',
+                    color: 'gray.600',
+                    mb: 5,
+                    lineHeight: '1.7',
+                  })}
+                >
+                  {t('worksheets.description')}
+                </p>
+
+                {/* Features */}
+                <ul
+                  className={css({
+                    listStyle: 'none',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 3,
+                  })}
+                >
+                  <li
+                    className={css({
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 3,
+                      fontSize: 'sm',
+                      color: 'gray.700',
+                    })}
+                  >
+                    <span
+                      className={css({
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: 'full',
+                        bg: 'green.100',
+                        color: 'green.600',
+                        fontSize: 'xs',
+                        fontWeight: 'bold',
+                      })}
+                    >
+                      ✓
+                    </span>
+                    {t('worksheets.feature1')}
+                  </li>
+                  <li
+                    className={css({
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 3,
+                      fontSize: 'sm',
+                      color: 'gray.700',
+                    })}
+                  >
+                    <span
+                      className={css({
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: 'full',
+                        bg: 'green.100',
+                        color: 'green.600',
+                        fontSize: 'xs',
+                        fontWeight: 'bold',
+                      })}
+                    >
+                      ✓
+                    </span>
+                    {t('worksheets.feature2')}
+                  </li>
+                  <li
+                    className={css({
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 3,
+                      fontSize: 'sm',
+                      color: 'gray.700',
+                    })}
+                  >
+                    <span
+                      className={css({
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: 'full',
+                        bg: 'green.100',
+                        color: 'green.600',
+                        fontSize: 'xs',
+                        fontWeight: 'bold',
+                      })}
+                    >
+                      ✓
+                    </span>
+                    {t('worksheets.feature3')}
+                  </li>
+                </ul>
+
+                {/* CTA Button */}
+                <div
+                  className={css({
+                    mt: 7,
+                  })}
+                >
+                  <div
+                    className={css({
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: 2,
+                      px: 6,
+                      py: 3,
+                      borderRadius: 'xl',
+                      background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+                      color: 'white',
+                      fontWeight: 'bold',
+                      fontSize: 'md',
+                      boxShadow: '0 4px 15px rgba(16, 185, 129, 0.4)',
+                      transition: 'all 0.3s',
+                      _hover: {
+                        boxShadow: '0 6px 20px rgba(16, 185, 129, 0.5)',
+                        transform: 'translateX(4px)',
+                      },
+                    })}
+                  >
+                    <span>{t('worksheets.button')}</span>
+                    <span className={css({ fontSize: 'lg' })}>→</span>
+                  </div>
+                </div>
+              </div>
+            </Link>
+
             {/* Calendar Creator */}
             <Link href="/create/calendar">
               <div