Skip to content
Snippets Groups Projects
Commit 93adcbe0 authored by Ahmad Masoud Mzafar's avatar Ahmad Masoud Mzafar
Browse files

Refine and simplify About Us page layout and styling

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