Design a premium, black-background, pink-glass homepage focus section for a todo app that intelligently organizes Quick Add, Next Action, and How It Works into a single, calm, goal-driven experience. Implements React icons and Framer Motion for smooth animations.
This skill creates a premium, black-background, pink-glass homepage focus section that intelligently organizes Quick Add, Next Action, and How It Works into a single, calm, goal-driven experience.
This is NOT a marketing homepage. This is a "focus entry point" for a productivity app.
This section replaces random cards with a guided productivity flow.
Use when:
This skill creates ONE unified homepage section that contains:
All three feel like one story, not three widgets.
Single full-width section, vertically stacked with strong hierarchy.
👉 Let the user DO something immediately
whileHover prop👉 Reduce decision fatigue
👉 Build trust & understanding
whileHover prop)This creates visual hierarchy without noise.
initial, animate, and transition propswhileHover propmotion.div, motion.button, motion.input componentsprefers-reduced-motion settingOrder stays same:
USER OPENS APP
↓
Sees "Your Focus Today"
↓
Adds a task (Quick Add)
↓
Sees what matters next
↓
Understands simple system
↓
Feels calm + in control
This skill can generate:
This skill turns 3 disconnected components into: