WIREFRAMES
ALL PAGES UI
LOADING
COMPONENTS
STYLE GUIDE
GO TO DESIGN FILE
GO TO DESIGN FILE
View →
WORK PROCESS
ATOMIC DESIGN SYSTEM
E-LEARNING PLATFORM ''SEEKERS''
User Story: As a user of the website, I want a homepage that provides easy access to all parts of the website, so I can navigate and find the information I need quickly.
Acceptance Criteria:
Navigating to the Homepage:
When I visit the website, I should be directed to the homepage.
The homepage should load quickly and display all the sections described below.
Header Section:
The header should include a logo representing the website.
It should have a categories menu that, when clicked, displays a list of available categories. Clicking on a category should redirect me to the page displaying all classes within that category.
The mentors option should redirect me to a page showing a list of all mentor users.
A search bar should be provided for searching classes by their title.
The language switcher should allow me to change the website language between English and Arabic.
The currency switcher should open a list of available currencies, and I should be able to select one to view class prices in the chosen currency.
If I'm not logged in, the header should display login and register buttons. Clicking on them should redirect me to the respective login and registration pages.
If I'm already logged in, the header should display "My Account" option, which, when clicked, should redirect me to my profile page for customers.
The pending purchase icon should redirect me to the pending purchase page.
Banner Area:
The banner area should display multiple banners in a slider format.
Each banner should include an image, title, text, and a button with a target URL. Clicking on the button should redirect me to the specified URL.
Short About Project:
This section should provide a brief overview of the project.
It should include an image, text, and a button. Clicking on the button should redirect me to the about us page.
Featured Classes:
The featured classes section should display a grid of featured classes.
Each class should include an image, title, mentor name, price, category (optional), and an enroll button.
Clicking on the enroll button should redirect me to the checkout flow page to purchase the specific class.
Trending Classes:
The trending classes section should display a grid of trending classes.
Each class should have the same information as mentioned in the featured classes section.
Upcoming Classes:
The upcoming classes section should display a grid of upcoming classes.
Each class should have the same information as mentioned in the featured classes section.
Become a Mentor Banner Block:
This section should provide information about the benefits of becoming a mentor.
It should include an image, title, text, and a button. Clicking on the button should redirect me to the become a mentor benefits page.
Footer Section:
The footer should include the website logo.
It should provide links to the about us page, become a mentor benefits page, privacy policy page, terms of use page, and payment terms page.
Contact information such as email address, phone number, Instagram, and Facebook should be displayed.