Task 17 : Landing Page - Githubissues

yogeshtakeo commented 1 year ago

Task: Create Landing Page for a School in React

Objective: Design and develop a landing page for a school in React, incorporating various components such as navigation bar, modal, toast, footer, cards displaying courses, and a slider.

Task Overview

Set up a new React project using a tool of your choice (e.g., Vite, Create React App, etc.).
Design and implement the landing page layout with the required components.
Style the landing page using Tailwind CSS or any other CSS framework.
Implement the functionality for the navigation bar, modal, toast, and slider.

Task Details

Project Setup:
- Set up a new React project using a tool of your choice.
- Install necessary dependencies for React and any CSS framework you choose (e.g., Tailwind CSS).
- Configure the project structure and necessary files.
Layout and Components:
- Create a navigation bar component (Navbar) and include it in the landing page.
- Design and implement a modal component (Modal) that can be invoked by a button command.
- Implement a toast component (Toast) that can be invoked by a button command.
- Create a footer component (Footer) and include it in the landing page.
- Design and implement cards (CourseCard) to display the courses taught in the school.
- Implement a slider component (ImageSlider) to display images on the landing page.
Styling with Tailwind CSS:
- Apply appropriate styles to the navigation bar, modal, toast, footer, cards, and slider components using Tailwind CSS classes.
- Ensure responsive design for different screen sizes.
- Utilize utility classes and custom styles to enhance the visual appeal of the landing page.
Functionality Implementation:
- Implement functionality for the navigation bar, such as active links and dropdown menus.
- Configure the modal component to open and close on button click, displaying relevant content.
- Implement the toast component to display notifications or alerts on button command.
- Make the slider component interactive, allowing users to navigate through the images.
Test and Refine:
- Start the development server and run the React project.
- Verify that the landing page layout is correctly implemented, and the components are styled as desired.
- Test the functionality of the navigation bar, modal, toast, and slider components to ensure they work as expected.
- Make adjustments and refinements to the styling or functionality as needed.

Task Submission

Take a screenshot of the web browser displaying the rendered React component . Share the screenshot Optionally, submit the code files (App.js and any other relevant files) for review with the GitHub Repository. .