Skip to content

[Feature]: Add "How It Works" Section and Primary Call-to-Action on Landing Page #730

Description

@ArshiBansal

Problem or limitation

The landing page provides information about AlgoScope's mission, features, and team, but it does not clearly explain the learning workflow of the platform. New visitors may understand what AlgoScope is, but not how they can use it to learn Data Structures and Algorithms effectively.

Additionally, the hero section lacks a prominent call-to-action that encourages users to engage with the platform.

Proposed solution

Enhance the landing page by:

Adding a prominent primary CTA button in the hero section (e.g., Explore Algorithms, Start Learning, or Get Started).
Introducing a dedicated "How It Works" section below the Core Features section that visually explains the learning journey:
Select an algorithm or topic
Watch step-by-step visualization
Control playback speed and interactions
Understand concepts through visual learning
Practice and reinforce understanding
Using icons, illustrations, or a simple step-based layout to make the workflow easy to understand at a glance.

Alternatives considered

Another possible approach would be to expand the existing feature cards with more detailed descriptions. However, a dedicated "How It Works" section provides a clearer and more structured explanation of the user journey.

Use case

This would help when:

First-time visitors want to quickly understand how AlgoScope can help them learn DSA.
Students are comparing learning resources and need a clear overview of the platform's workflow.
Users want to understand the learning process before exploring individual modules.
Visitors need a clear next step after reading the project introduction.

Additional context

Suggested placement:

Hero Section → Add primary CTA button.
Below Core Features → Add a "How It Works" section with a visual step-by-step learning flow.

This would improve onboarding, communicate the platform's value more effectively, and help users understand the learning experience offered by AlgoScope.

Metadata

Metadata

Assignees

No one assigned

    Labels

    GSSoCOfficial issue for GSSoC contributors

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions