feat(create): add worksheet creator card to hub page
- 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>
This commit is contained in:
Thomas Hallock
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user