Merge pull request #1 from JohLeo/johanna

Button + location section

src/App.js

@@ -2,12 +2,14 @@ import React from 'react';
 import { Nav } from 'components/nav';
 import { Footer } from 'components/footer';
 import StartPage from 'components/StartPage';
+import { LocationSection } from 'components/LocationLink';
 
 export const App = () => {
   return (
     <div>
       <Nav />
       <StartPage />
+      <LocationSection />
       <Footer />
     </div>
   );

src/components/LocationLink.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { LocationImg } from './lib/LinkCard'
+
+export const LocationSection = () => {
+  return (
+    <div>
+      <LocationImg
+        src="https://i.postimg.cc/cLngP2Xc/apartments.png"
+        alt="Apartments"
+        ariaLabel="Find your new apartment"
+        locationText="Apartments" />
+
+      <LocationImg
+        src="https://i.postimg.cc/Bv58nDWL/house.png"
+        alt="Houses"
+        ariaLabel="Find your new House"
+        locationText="Houses" />
+
+      <LocationImg
+        src="https://i.postimg.cc/N0v9tDnv/vacationhome.png"
+        alt="Holiday housing"
+        ariaLabel="Find your new holiday house"
+        locationText="Holiday homes" />
+    </div>
+  )
+}

src/components/lib/Button.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const FadeButton = styled.button`
+  position: relative;
+  border: 1px solid black;
+  background-color: transparent;
+  padding: 8px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: black;
+    color: white;
+  }
+`;
+
+const Button = ({ text }) => {
+  return <FadeButton>{text}</FadeButton>;
+};
+
+export default Button;

src/components/lib/LinkCard.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const OverlayText = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+const LinkImage = styled.img`
+  width: 100%;
+  max-width: 350px;
+  height: 100%;
+  margin: 10px;
+`;
+
+const LocationText = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 10px 5rem;
+  background-color: rgba(255, 255, 255, 0.8);
+  color: #414142;
+  font-size: 14px;
+  text-transform: uppercase;
+  white-space: nowrap;
+`;
+
+export const LocationImg = ({ src, alt, ariaLabel, locationText }) => {
+  return (
+
+    <OverlayText>
+      <LinkImage src={src} alt={alt} aria-label={ariaLabel} />
+      <LocationText>{locationText}</LocationText>
+    </OverlayText>
+
+  );
+};
+

src/components/search.js

@@ -2,6 +2,7 @@
 // IMPORT MODULES
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import Button from './lib/Button'
 
 // COMPONENT
 
@@ -42,7 +43,9 @@ export const Search = () => {
           placeholder="Search..."
           value={searchTerm}
           onChange={handleSearchChange} />
-        <Button type="submit">Search</Button>
+        <Button
+          type="submit"
+          text="Search" />
       </Form>
 
       {/* Display search results */}
@@ -70,26 +73,12 @@ const Form = styled.form`
 `;
 
 const Input = styled.input`
-  padding: 10px;
+  padding: 8px;
   font-size: 16px;
   border: 1px solid #ccc;
   border-radius: 4px;
 `;
 
-const Button = styled.button`
-  padding: 10px 20px;
-  font-size: 16px;
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #0056b3;
-  }
-`;
-
 const ResultsContainer = styled.div`
   margin-top: 20px;