you will have an array of cities in this page, generate the cities cards from this array and design other parts of this page, don't add the Navbar we will add it later
put this page inside Pages and then CitiesPage

This is the card for the cities, it will receive an object as a prop with an image path and title,
create Card folder inside components and inside it CityCard folder and then your CityCard.js file

class name is similar to other cards in the same home page is causing CSS problems

This is the item for the activity list, its a component by its self so we can reuse it when making the activity list

create button components that receive a prop called onChange and text, the button should be similar to the design so we can add it everywhere we need to without having to style it over

Design the footer component
inside components create a new folder Footer and then Footer.js

I'm gussing this receives 3 props icon, title and description

a problem occurred when i implemented the card in the actual grid

remember what it should receive as props

Same as the button component but it's a dropdown it will show a list when hovering, it will receive the dropdown items array as a prop

put together all component for the about page, you will also have to generate a list of team members and generate the members components

Design the Navbar with selected items being underlines and blue,
inside Components folder add Navbar and inside it Navbar.js and place your code there, icons can be in the same folder too or just search in google for where to put assets in react app

since the search is done, create the header add to it the search bar

a carousel that will receive a list of images

the pop-up modal that displays tour guide information

this card will be used in the activities in north lebanon component

install tailwindcss in the project, search on how to configure it maybe visit this link
https://tailwindcss.com/docs/configuration
set up the primary and secondary colors, border-radius, background colors, and anything you see necessary to be a base for everyone to use

Design the search input in the header in the home page,
create a new folder inside components called Search and inside it Search.js and put your code there

this library is for translating our website, add it and setup everything so we can be ready to translate the website later

The images need to be in a certain width and height to take the whole page space

We have a map in the activities page that when we select an activity it will show it on that map, figure out which map to use and how to implement this functionality

The item for the cities listed in the cities page, we are creating this component to reuse it later when making the cities list