feat: new content for the home page

src/pages/HomePage.tsx

@@ -1,36 +1,36 @@
 import Container from '@mui/material/Container';
 import { Typography } from "@mui/material";
-import { Button } from "@mui/material";
-import { Link } from "react-router-dom";
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import FlagIcon from '@mui/icons-material/Flag';
 
 export default function HomePage() {
     return (
         <>
             <Container maxWidth="lg">
-                <Typography variant="h4" sx={{margin: '4rem 0', fontSize: {xs: '1.2rem', md: '1.7rem'}, fontWeight: 700}}>
-                    Discover Nutripatrol: the moderation tool currently in development for Open Food Facts.
+                <Typography variant="h4" sx={{margin: '3rem 0', fontSize: {xs: '1.2rem', md: '1.7rem'}, fontWeight: 700}}>
+                    What is Nutripatrol?
                 </Typography>
-                <Typography variant="body1" sx={{margin: '2rem 0', fontSize: {xs: '0.8rem', md: '1.2rem'}}}>
-                    Nutripatrol simplifies the moderation of food products by offering an intuitive ticketing platform. You can quickly report errors, inconsistencies, or missing information on listed food products.
+                <Typography variant="body1" sx={{margin: '1rem 0', fontSize: {xs: '0.8rem', md: '1.2rem'}}}>
+                    NutriPatrol is a specialized ticketing application designed to streamline moderation on OpenFoodFacts.
+                    It helps the community flag and address issues in the product database, ensuring the accuracy and reliability of the information.
+                    With NutriPatrol, moderators can review, track, and resolve tickets submitted by contributors and users efficiently, maintaining the integrity of OpenFoodFacts.
                 </Typography>
-                <Typography variant="body1" sx={{margin: '2rem 0', fontSize: {xs: '0.8rem', md: '1.2rem'}}}>
-                    Join us in contributing to the improvement of the Open Food Facts database and helping consumers worldwide make informed decisions about their diet.
+                <Typography variant="h4" sx={{margin: '3rem 0', fontSize: {xs: '1.2rem', md: '1.7rem'}, fontWeight: 700}}>
+                    Reporting a Product on OpenFoodFacts
                 </Typography>
-                <Typography variant="body1" sx={{margin: '2rem 0', fontSize: {xs: '0.8rem', md: '1.2rem'}}}>
-                    You can start by moderating images of food products. Click the button below to get started.
+                <Typography variant="body1" sx={{margin: '1rem 0', fontSize: {xs: '0.8rem', md: '1.2rem'}}}>
+                    Found an error or problematic content? You can easily report it directly on the <a href='https://world.openfoodfacts.org'>OpenFoodFacts website</a>!
+                    Each product page and images includes an option to flag issues.
+                    These reports are sent to NutriPatrol, where moderators can review and act upon them.
+                    Your vigilance plays a vital role in improving the quality of the database
+                </Typography>
+                <Typography variant="h4" sx={{margin: '3rem 0', fontSize: {xs: '1.2rem', md: '1.7rem'}, fontWeight: 700}}>
+                    How to Become a Moderator
+                </Typography>
+                <Typography variant="body1" sx={{margin: '1rem 0', fontSize: {xs: '0.8rem', md: '1.2rem'}}}>
+                    Becoming a moderator is a rewarding way to deepen your involvement with OpenFoodFacts.
+                    Start by contributing to the database: scan products, complete their details, and help categorize them.
+                    With consistent participation and as you gain experience in the community, you can request to become a moderator.
+                    Moderators are selected based on their dedication, understanding of the platform, and commitment to OpenFoodFacts’ mission.
                 </Typography>
-                <Link to="/tutorial" >
-                    <Button variant='contained' color='inherit' sx={{margin: '1rem'}} endIcon={<PlayArrowIcon />}>
-                        Get started
-                    </Button>
-                </Link>
-                <Link to="/flag" >
-                    <Button variant='contained' color='inherit' sx={{margin: '1rem'}} endIcon={<FlagIcon />}>
-                        Flag a product
-                    </Button>
-                </Link>
             </Container>
         </>
     )