Todo App Homepage Focus Section UI Skill (Senior UI/UX Design)

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.

Design Philosophy (Senior Designer Thinking)

This is NOT a marketing homepage. This is a "focus entry point" for a productivity app.

Principles

• One screen = one mental goal
• User should instantly understand:
  • What can I do now?
  • What should I do next?
  • How does this app help me?
• No repeated cards
• No feature overload
• Calm > Fancy
• Direction > Decoration

This section replaces random cards with a guided productivity flow.

When to Use This Skill

Use when:

• User wants to organize homepage components
• App is a todo / productivity tool
• Theme is black + pink glass
• User wants high-level UX clarity
• Components already exist but feel disconnected
• Goal is focus, not feature listing

High-Level Section Purpose

This skill creates ONE unified homepage section that contains:

• Immediate Action → QuickAddTaskCard
• Priority Direction → What's Next
• System Understanding → How It Works

All three feel like one story, not three widgets.

Overall Layout Structure (Desktop)

Single full-width section, vertically stacked with strong hierarchy.

FOCUS SECTION (Dark Canvas)

• [ Micro Headline ]
• "Your Focus Today"
• [ Primary Action ]
• Quick Add Task (Glass)
• [ Direction Layer ]
• What's Next? (Guided priority)
• [ Understanding Layer ]
• How It Works (Minimal steps)

1️⃣ QuickAddTaskCard (Primary Action Layer)

Purpose

👉 Let the user DO something immediately

Position

• Top-center of the section
• Visually strongest element
• Slightly larger than others

Design Rules

• Pink-tinted glass card
• Rounded: 18–24px
• Soft neon pink glow
• No clutter inside

Content Hierarchy

• Icon: React Plus Icon (e.g., PlusIcon from react-icons or heroicons)
• Title: Add a task
• Helper text (very short)

UX Rules

• This is the only obvious action
• On hover (using Framer Motion):
  • Glow increases
  • Slight lift (2–4px) via Framer Motion's

    whileHover

    prop
  • Keyboard focus supported
• This card answers: "What can I do right now?"

2️⃣ What's Next? (Decision Guidance Layer)

Purpose

👉 Reduce decision fatigue

Position

• Directly under QuickAddTaskCard
• Left-aligned or centered, but quieter

Design Style

• NOT a card
• No heavy background
• Text-first UI

Visual Treatment

• Small pink label: WHAT'S NEXT
• Task title (medium emphasis)
• Meta info:
  • Priority badge
  • Due date
• One subtle text CTA: "Continue →"

UX Rules

• Only one task shown
• No list
• No scrolling
• This section should feel like advice, not data
• This answers: "What deserves my attention?"

3️⃣ How It Works (Mental Model Layer)

Purpose

👉 Build trust & understanding

Position

• Bottom of the section
• Lowest visual weight

Design Style

• Minimal
• Icon + label only
• No cards
• No borders

Structure

• 3 steps horizontally (desktop)
• Vertical on mobile

Example:

• React Plus Icon (e.g., PlusIcon) Add tasks
• React Calendar Icon (e.g., CalendarIcon) Plan your day
• React Check Icon (e.g., CheckIcon) Get things done

Rules

• Icons: React icons (outline or soft filled from react-icons library)
• Pink accent only on active/hover (using Framer Motion's

  whileHover

  prop)
• No descriptions longer than 2–3 words
• Implement hover animations with Framer Motion for smooth transitions

This answers:

• "Is this app simple?"

Color & Glass System (Shared)

Background

• Deep black / charcoal
• Subtle radial pink glow in center

Glass Rules

• Only QuickAdd uses full glass
• What's Next uses text + badge
• How It Works uses no glass

This creates visual hierarchy without noise.

Typography Hierarchy

Section Heading

• Size: 22–26px
• Weight: 600
• Color: White

Primary Action Title

• Size: 18–20px
• Weight: 600

Supporting Text

• Size: 13–14px
• Opacity: 70–80%

Interaction & Motion (Very Important)

Entry animation:

• Top → Bottom using Framer Motion
• 100–150ms stagger
• Use Framer Motion's

  initial

  ,

  animate

  , and

  transition

  props

Hover animations:

• Only on QuickAdd & icons
• Implement with Framer Motion's

  whileHover

  prop
• No infinite animations
• Motion should feel professional, not playful

Technical Implementation:

• Use Framer Motion for all micro-interactions
• Leverage

  motion.div

  ,

  motion.button

  ,

  motion.input

  components
• Use spring-based easing for natural movement
• Ensure accessibility by respecting

  prefers-reduced-motion

  setting

Responsive Rules

Mobile

Order stays same:

• Quick Add
• What's Next
• How It Works

Rules:

• Full-width QuickAdd
• Larger tap targets
• Icons stacked vertically

UX Flow Diagram (Senior-Level)

USER OPENS APP
      ↓
Sees "Your Focus Today"
      ↓
Adds a task (Quick Add)
      ↓
Sees what matters next
      ↓
Understands simple system
      ↓
Feels calm + in control

Strict Design Constraints

Do NOT include:

• ❌ No repeated feature cards
• ❌ No stats here
• ❌ No dashboard data
• ❌ No heavy borders everywhere
• ❌ No competing CTAs

DO include:

• ✅ One action
• ✅ One direction
• ✅ One explanation

Output Deliverables

This skill can generate:

• Unified homepage layout
• Component hierarchy rules
• Spacing & alignment system
• Motion guidelines using Framer Motion
• Tailwind / CSS structure
• React icon implementation specifications
• UX justification for each component

Senior Designer Summary

This skill turns 3 disconnected components into:

• One calm productivity moment
• Not flashy.
• Not crowded.
• Just clear, confident, and premium.