Merge pull request carolineabreu#47 from ZihSilva/new-design

New design

Author: ZihSilva

README.md

@@ -1,12 +1,15 @@
-# [TSW - Travel Safety for Woman](https://tsw.netlify.app/)
+# [TSW - Travel Safety for Women](https://tsw.netlify.app/)
 
 ![image](./src/images/main-page.png)
 ![image](./src/images/desktop-size.png)
 
-Project made for the second project of IronHack's Web Development Bootcamp São Paulo - Remote.
+Welcome to our project, created as part of the second project of IronHack's Web Development Bootcamp São Paulo - Remote!
 
-We use **ReactJS, HTML, CSS, JavaScript** and the libraries **Axios, ant design, material UI, and grommet**.
+Our goal with this project was to create a website that helps women travel safely and confidently. We understand that women often face unique challenges when traveling alone, from cultural and religious beliefs to health and security concerns.
 
-Women travel for countless reasons, whether to discover new frontiers, pursue business opportunities, or simply to rest and relax – but not unlike men. There’s a huge difference between women and men, when it comes to health and security, and how travelers are affected by the religious and cultural beliefs of the foreign countries they visit. The truth is that women face greater obstacles, especially when traveling alone. Considering that, our project is a website with information about the security of countries, aimed to help women to travel safely. It contains the "GeoSure" ranking, which explains if a country is secure and if it is not, the reasons for it. Also, In TSW you can check the comments of women describing their experiences and impressions while traveling to a certain country, as well as other important information.
+The website features the GeoSure ranking, which explains the safety of a particular country, and reasons why a country may be deemed unsafe. Additionally, it also includes comments from other women who have traveled to a specific country, providing real-life perspectives and experiences.
+
+The website is built using ReactJS, HTML, CSS, JavaScript, and the libraries Axios, ant design, material UI, and grommet. 
+We hope that this website serves as a valuable resource for women planning their next trip.
 
 Made by [Caroline](https://github.com/carolineabreu), [Larissa](https://github.com/larissambn) and [Zimarlen](https://github.com/ZihSilva).

src/components/Navbar/Navbar.css

@@ -77,7 +77,7 @@
 
 .nav-list-btn {
   display: block;
-  justify-contesnt: center;
+  justify-content: center;
   text-align: center;
   border-radius: 20px;
   text-decoration: none;
@@ -108,6 +108,7 @@
   font-size: 1.5rem;
   display: flex;
   align-items: center;
+  padding-left: 20px;
   font-family: "Fira Sans Extra Condensed", sans-serif;
 }
 

src/components/Navbar/Navbar.js

@@ -39,7 +39,7 @@ function Navbar() {
               <Link to="/comments"
                 className="nav-list"
                 onClick={closeMobileMenu}>
-                Testimonial
+                Comments
               </Link>
             </li>
             <li className="nav-item">

src/pages/AboutUs/AboutUs.module.css

@@ -23,6 +23,72 @@
   line-height: 2;
 }
 
+.cards-item-link {
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+  box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
+  -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
+  filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
+  border-radius: 10px;
+  overflow: hidden;
+  text-decoration: none;
+}
+.cards-item-pic-wrap {
+  position: relative;
+  width: 100%;
+  padding-top: 67%;
+  overflow: hidden;
+}
+
+.fade-img {
+  animation-name: fade-img;
+  animation-duration: 2s;
+}
+
+.cards-item-pic-wrap::after {
+  content: attr(data-category);
+  position: absolute;
+  bottom: 0;
+  margin-left: 10px;
+  padding: 6px 8px;
+  max-width: calc((100%) - 60px);
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff;
+  background-color:  #2d712799;
+  box-sizing: border-box;
+}
+
+.cards-item-img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  object-fit: cover;
+  transition: all 0.2s linear;
+}
+
+.cards-item-img:hover {
+  transform: scale(1.1);
+}
+
+.cards-item-info {
+  padding: 20px 30px 30px;
+}
+
+.cards-item-text {
+  color: #252e48;
+  font-size: 18px;
+  line-height: 24px;
+}
+
 .h1 {
   font-size: 40px;
   color: rgb(14, 82, 59);
@@ -31,6 +97,8 @@
   justify-content: center;
 }
 
+
+
 @media only screen and (min-width: 1200px) {
   .container {
     width: 74%;

src/pages/Comment/Comment.css

@@ -24,7 +24,7 @@
 
 .form {
   background-color: #ffff;
-  box-shadow: 2px 3px  #b484a8;
+  /* box-shadow: 2px 3px  #; */
   padding-bottom: 25px;
   color: #5cbdb9; 
   border: 50px;

src/pages/CountryInfo/CountryInfo.module.css

@@ -37,10 +37,14 @@ ul {
 li {
   padding: 3px;
   color: black;
-  list-style-type: square;
+  list-style-type: none;
   padding-top: 10px;
 }
 
+ul li {
+  list-style-type: square;
+}
+
 /* a {
   color: #5cbdb9;
 } */