Sinusealpha / MedX

open source media platform for med people to explore, learn, share, and contribute to the world of health-tech.
https://sinusealpha.github.io/MedX/
4 stars 1 forks source link

Design Homepage #15

Open aref-asadi opened 3 months ago

aref-asadi commented 3 months ago

Responsibility:

@aref-asadi

Deadline:

18 Aug 2024

Description:

We need to design a homepage that effectively showcases the latest and most popular content. The layout should be user-friendly and visually appealing, ensuring easy navigation and access to key content.

Homepage Requirements:

  1. Banner for Latest Article:

    • A 16:9 aspect ratio banner should be placed on the right side of the page and allocate 50% of the screen width to itself including the image of the latest article.
    • inside the banner, display the title and metadata of the latest article, including the author, date, time of publication, and estimated reading time.
  2. List of Top 3 Most Viewed Articles of the Month:

    • On the left side, display a list of the top 3 most viewed articles of the month.
    • Each article should include the title and metadata (author, date, and reading time).
  3. Latest Articles Section:

    • Below the banner and top articles, in the center of the page, display the latest articles.
    • Articles should be presented in a grid layout with 3 columns and 5 rows.
    • Each article should be shown as a card containing a 16:9 aspect ratio image, title, and metadata.
  4. Pagination:

    • Below the latest articles, include pagination to navigate through pages of articles grid.
    • The pagination should include buttons for "First" and "Last" pages, "Next" and "Previous" pages, the current page number, and the numbers of the two pages before and after the current page.

Tasks:

aref-asadi commented 3 months ago

V.1: Homepage design