diff --git a/turorienteringapp/frontend/src/components/AboutUs.css b/turorienteringapp/frontend/src/components/AboutUs.css index fe93795506aa9d7e20f6f17c293b87cf646b37bb..c955c38b01c07e33163f46dd5be7f12c99fee9e3 100644 --- a/turorienteringapp/frontend/src/components/AboutUs.css +++ b/turorienteringapp/frontend/src/components/AboutUs.css @@ -1,38 +1,34 @@ -.aboutus-container { - display: flex; - flex-direction: column; - align-items: center; - padding: 40px; - max-width: 800px; - margin: 0 auto; - position: relative; /* position the logo relative to the container */ +body, html { + margin: 0; + padding: 0; + overflow: hidden; /* Prevent scrolling on the page */ } -.aboutus-title { - font-size: 2rem; - margin-bottom: 30px; - text-align: center; - text-shadow: 1px 1px #2aeb0c; - font-weight: bold; /* Bold font */ +.aboutus-container { + padding: 20px; + max-width: 800px; + margin: 0 auto; /* Center the container horizontally */ } -.aboutus-segment { - margin-bottom: 20px; /*create space outside the element segment, space between texts*/ - border-bottom: 1px solid #2aeb0c; - padding-bottom: 20px; /* create space inside the element segment, space beteen texts*/ +.aboutus-title { + font-size: 1.5rem; + text-align: center; /* Center the title */ + font-weight: bold; } -.aboutus-conclusion { - font-weight: bold; - margin-top: 20px; +.aboutus-text { + font-size: 1rem; + line-height: 2.9; /* line spacing */ + margin-bottom: 20px; /* Space between the text and the logo */ } .aboutus-logo { - font-family: 'Pacifico', cursive; - font-size: 38px; - font-weight: bold; + font-family: 'Pacifico', cursive; + font-size: 2rem; color: #4CAF50; - text-align: center; - margin-top: 40px; - cursor: pointer; /*When hover on the logo change to hand*/ + position: absolute; + bottom: 10px; + right: 10px; + cursor: pointer; + font-weight: bold; } diff --git a/turorienteringapp/frontend/src/components/AboutUs.js b/turorienteringapp/frontend/src/components/AboutUs.js index e09e8d82ccb2adab068b90bcce09656aa59b8fad..e337af8f8c74a3d698ace2ee1c10c79d6f2b1ab4 100644 --- a/turorienteringapp/frontend/src/components/AboutUs.js +++ b/turorienteringapp/frontend/src/components/AboutUs.js @@ -1,39 +1,31 @@ import React from 'react'; -import { useNavigate } from 'react-router-dom'; // Importing the useNavigate hook +import { useNavigate } from 'react-router-dom'; import './AboutUs.css'; - -/* function to create segments*/ function AboutUs() { - const text = { - welcome: `About Us`, - precision: `Our platform has a big map of the whole world. You can see names, places, and addresses everywhere.`, - tailored: `You can draw lines on the map to make routes from one place to another. Our tool figures out how far it is and keeps the info safe for you.`, - updates: `You can keep your routes private if you don't want others to see them. We care about your privacy.`, - share: `Our tool helps you find the quickest way between two places. Just tell it where to go, and it shows you the way.`, - voice: `Our app is easy to use and looks nice. It's made for everyone to enjoy using.`, - sustainable: `We keep all your data safe. You can trust us with your routes and information.`, - conclusion: `Our platform is more than just maps. It's a tool for exploring the world easily to make your travel easy, efficient, and enjoyable.` - }; + // Text for the about us section + const aboutText = ` + TurRuter has a big map of the whole world. You can see names, places, and addresses everywhere. + You can draw lines on the map to make routes from one place to another. Our tool figures out how far it is and + keeps the info safe for you. You can keep your routes private if you don't want others to see them. We care about + your privacy. Our tool helps you find the quickest way between two places. Just tell it where to go, and it shows + you the way. Our app is easy to use and looks nice. It's made for everyone to enjoy using. We keep all your data + safe. You can trust us with your routes and information. Our application is more than just maps. It's a tool for + exploring the world easily to make your travel easy, efficient, and enjoyable. + `; - //Navigate Function + // Navigate function from react-router-dom const navigate = useNavigate(); - // Function to handle the logo click + // Handle logo click to navigate to the homepage const handleLogoClick = () => { - navigate('/'); // Navigates to the homepage + navigate('/'); }; return ( <div className="aboutus-container"> - <div className="aboutus-title">{text.welcome}</div> - <div className="aboutus-segment">{text.precision}</div> - <div className="aboutus-segment">{text.tailored}</div> - <div className="aboutus-segment">{text.updates}</div> - <div className="aboutus-segment">{text.share}</div> - <div className="aboutus-segment">{text.voice}</div> - <div className="aboutus-segment">{text.sustainable}</div> - <div className="aboutus-conclusion">{text.conclusion}</div> + <div className="aboutus-title">About Us</div> + <div className="aboutus-text">{aboutText}</div> <div className="aboutus-logo" onClick={handleLogoClick}>TurRuter</div> </div> );