Merge pull request 'Refactoring and removing unused things' (#29) from refactor/removeThigns into main

frontend/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, Component } from "react";
+import React from "react";
 import Navbar from "./components/Navbar";
 import "./App.css";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

frontend/src/components/CardItem.js

@@ -1,25 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-
-function CardItem(props) {
-  return (
-    <>
-      <li className="cards__item">
-        <Link className="cards__item__link" to={props.path}>
-          <figure className="cards__item__pic-wrap" data-category={props.label}>
-            <img
-              src={props.src}
-              alt="Travel Image"
-              className="cards__item__img"
-            />
-          </figure>
-          <div className="cards__item__info">
-            <h5 className="cards__item__text">{props.text}</h5>
-          </div>
-        </Link>
-      </li>
-    </>
-  );
-}
-
-export default CardItem;

frontend/src/components/Cards.css

@@ -1,118 +0,0 @@
-.cards {
-  padding: 4rem;
-  background: #fff;
-}
-
-h1 {
-  text-align: center;
-}
-
-.cards__container {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  max-width: 1120px;
-  width: 90%;
-  margin: 0 auto;
-}
-
-.cards__wrapper {
-  position: relative;
-  margin: 50px 0 45px;
-}
-
-.cards__items {
-  margin-bottom: 24px;
-}
-
-.cards__item {
-  display: flex;
-  flex: 1;
-  margin: 0 1rem;
-  border-radius: 10px;
-}
-
-.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: 12px;
-  font-weight: 700;
-  color: #fff;
-  background-color: #1f98f4;
-  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;
-}
-
-@media only screen and (min-width: 1200px) {
-  .content__blog__container {
-    width: 84%;
-  }
-}
-
-@media only screen and (min-width: 1024px) {
-  .cards__items {
-    display: flex;
-  }
-}
-
-@media only screen and (max-width: 1024px) {
-  .cards__item {
-    margin-bottom: 2rem;
-  }
-}

frontend/src/components/Cards.js

@@ -1,51 +0,0 @@
-import React from "react";
-import CardItem from "./CardItem";
-import "./Cards.css";
-
-function Cards() {
-  return (
-    <div className="cards">
-      <h1>Check out these EPIC Destinations</h1>
-      <div className="cards__container">
-        <div className="cards__wrapper">
-          <ul className="cards__items">
-            <CardItem
-              src="/images/img-4.jpg"
-              text="Explore the hidden waterfall deep inside the Amazon Jungle"
-              label="Adventure"
-              path="/services"
-            />
-            <CardItem
-              src="/images/img-4.jpg"
-              text="Travel through the Islands of Bali in a Private Cruise"
-              label="Luxury"
-              path="/services"
-            />
-          </ul>
-          <ul className="cards__items">
-            <CardItem
-              src="/images/img-4.jpg"
-              text="Explore the hidden waterfall deep inside the Amazon Jungle"
-              label="Adventure"
-              path="/services"
-            />
-            <CardItem
-              src="/images/img-4.jpg"
-              text="Travel through the Islands of Bali in a Private Cruise"
-              label="Luxury"
-              path="/services"
-            />
-            <CardItem
-              src="/images/img-4.jpg"
-              text="Travel through the Islands of Bali in a Private Cruise"
-              label="Luxury"
-              path="/services"
-            />
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Cards;

frontend/src/components/pages/Home.js

@@ -1,7 +1,6 @@
 import React from "react";
 import "../../App.css";
 import HeroSection from "../HeroSection";
-import Cards from "../Cards";
 import Footer from "../../Footer";
 
 function Home() {