Design Section

Design and implement a UI section using the AntiGravity 5-dimension framework.

Section request: $ARGUMENTS

Before Starting

1. Read src/app/globals.css to understand the current design tokens (CSS variables)
2. Read src/lib/config/tenant.config.ts to understand tenant theming
3. Read 1-2 existing pages in src/app/(public)/ that are similar to what's being requested

The 5 Dimensions

For each section you build, explicitly decide on all 5 dimensions:

1. PATTERN & LAYOUT (The Skeleton)

Choose a functional pattern based on the content type:

• Content Hub: Hero + Featured Grid + Category Filters + Load More
• Detail Page: Hero + Content Body + Related Items + CTA
• Landing/Sales: Hero + Features + Social Proof + Pricing + CTA
• Dashboard/Bento: Modular card grid, varying sizes, consistent gaps (16-24px)
• Course/Learning: Sidebar nav + Content area + Progress indicators
• Listing: Filter bar + Card grid + Pagination

2. STYLE & AESTHETIC (The Skin)

This project uses a warm, scholarly aesthetic. Apply these principles:

• Subtle depth through shadow layers, not heavy borders
• Rounded corners (use design token --radius from globals.css)
• Clean card-based layouts using shadcn Card component
• Generous whitespace — let content breathe
• Never glassmorphism or brutalism — this is a thought leader platform

3. COLOR & THEME (The Palette)

STRICT RULES — never hardcode colors:

• Use semantic Tailwind classes only: bg-primary, text-muted-foreground, border-border
• All color values come from CSS variables in globals.css
• Support both light and dark mode via the existing token system
• Follow 60-30-10 rule: 60% background, 30% surface/card, 10% accent/CTA
• Ensure WCAG AA compliance (4.5:1 contrast for text)

4. TYPOGRAPHY (The Voice)

Use the project's existing type scale (defined in globals.css and Tailwind config):

• Headings: Use Tailwind prose classes or explicit sizes from the scale
• Body: text-base or text-sm with text-foreground or text-muted-foreground
• Never import new fonts without explicit approval
• Maximum 3 font sizes per section for visual clarity

5. ANIMATIONS & INTERACTIONS (The Soul)

Use GSAP (already in the project) for scroll animations. Follow these rules:

• Micro-interactions: 150-300ms duration, ease-out easing
• Scroll reveals: Fade up (opacity 0->1, translateY 20px->0), stagger 100ms
• Card hovers: translateY(-2px) + shadow increase via Tailwind hover: utilities
• ALWAYS include prefers-reduced-motion support
• Never animate width/height/position — use transform and opacity only
• No animations longer than 500ms for user interactions
• Parallax: Subtle only, max 20-30px movement

Implementation Rules

• Use shadcn/ui components (Card, Button, Badge, etc.) — never raw HTML with inline styles
• Use tenantConfig for any text that could vary per tenant
• Check feature flags before rendering optional sections
• Keep the page/layout as a Server Component; push "use client" to leaf interactive components
• Images: Use Next.js <Image> with WebP, lazy loading, proper width/height to avoid CLS

Anti-Patterns to Avoid

• No more than 3 primary colors visible at once
• No more than 2 font families
• No light grey text on white backgrounds
• No hover-only interactions (must work on touch)
• No auto-playing media
• Tap targets minimum 44x44px
• No layout shifts — always set explicit dimensions on media