Merge pull request #64 from ManSangSin/Style-Artist-Section

#41-Style artist section

client/src/App.js

@@ -1,14 +1,13 @@
 import { Route, Routes } from "react-router-dom";
-
 import Home from "./pages/Home";
 import MapSection from "./components/MapSection";
 
 const App = () => (
 	<>
-		<Routes>
-			<Route path="/" element={<Home />} />
-			<Route path="/MapSection" element={<MapSection />}></Route>
-		</Routes>
+	<Routes>
+	<Route path="/" element={<Home />} />
+	<Route path="/MapSection" element={<MapSection />}></Route>
+	</Routes>
 	</>
 );
 

client/src/components/ArtistSection.css

@@ -0,0 +1,99 @@
+.artist-section{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .artist-text-container h4{
+    width: 602px;
+    font-family: 'Roboto';
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+  }
+
+  .artist-text-container p{
+    font-family: 'Roboto';
+    font-size: 21px;
+    font-style: normal;
+    font-weight: 400;
+    padding-top: 32px;
+    width: 585px;
+  }
+
+  .artist-text-container span{
+    font-family: 'Roboto';
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+  }
+
+  .artist-text-container{
+    width: 585px;
+  }
+
+  .artist-backgroundImage{
+    width: 100%;
+
+
+  }
+
+  .artist-image-container{
+    position: relative;
+    left: 15px;
+    width: 539px;
+    height: 539px;
+  }
+
+  .artist-portrait{
+    width: 396px;
+    height: 396px;
+    position: absolute;
+    border-radius: 198px;
+    margin-left: 16px;
+    margin-top: 72px;
+    margin-right: 207px;
+    margin-bottom: 175px;
+    top: 2%;
+    right: -15%;
+  }
+
+  .artist-learn{
+    width: 190px;
+    padding: 11px 30px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 8px;
+    background: #000;
+    margin-right: 91px;
+  }
+
+  .artist-contact{
+    width: 293px;
+    padding: 11px 30px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 8px;
+    background: #CB3100;
+  }
+
+  .artist-contact img {
+    margin-right: 10px;
+  }
+
+  .artist-section button{
+    margin-top: 64px;
+    font-weight: 500;
+    font-size: 24px;
+    color: white;
+    font-family: 'Roboto';
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+  }

client/src/components/ArtistSection.js

@@ -0,0 +1,35 @@
+import React from "react";
+import Group from "../images/Group.png";
+import Deidre from "../images/deidre_profile.png";
+import Dot from "../images/dot_background.png";
+import "./ArtistSection.css";
+
+const content={
+    title:"Artist & Dance Researcher Deidre Molloy",
+    subtitle: "Doctoral student at University College Cork",
+    paragraph: "Deirdre has always danced. Her research centres dance as a decolonizing resource of collective knowledge and innovation.This Afrocentric arts research is suited to film, photography, music and performance collaborations – so be in touch!",
+    learnLink: "https://www.ucc.ie/en/fmt/doctoralschool/phdcandidates/#deirdre-molloy",
+    contactLink: "https://www.linkedin.com/in/deirdre-clare-molloy/",
+};
+
+function ArtistSection(){
+    return <div className="artist-section">
+        <div className="artist-text-container">
+            <h4>{content.title}</h4>
+            <span>{content.subtitle}</span>
+            <p>{content.paragraph}</p>
+            <a href={content.learnLink}>
+            <button className="artist-learn">Learn more</button>
+            </a>
+            <a href={content.contactLink}>
+                <button className="artist-contact"><img src={Group} alt="envelope"></img>Get in touch</button>
+            </a>
+        </div>
+        <div className="artist-image-container" >
+            <img className="artist-backgroundImage" src={Dot} alt="dots"></img>
+            <img className="artist-portrait" src={Deidre} alt="Deidre Molloy"></img>
+        </div>
+    </div>;
+}
+
+export default ArtistSection;

client/src/pages/Home.css

@@ -5,7 +5,7 @@
 	padding: 0;
 	box-sizing: border-box;
 }
-
+  
 :root {
 	--font-roboto: "Roboto", sans-serif;
 	--copy-color: #cb3100;

client/src/pages/Home.js

@@ -1,13 +1,15 @@
 import "./Home.css";
 import MyMap from "../components/MyMap";
 import Header from "../components/Header";
+import ArtistSection from "../components/ArtistSection";
 import Footer from "../components/Footer";
 
 function Home() {
 	return (
 		<main role="main">
 			<Header />
 			<MyMap />
+      <ArtistSection />
 			<Footer />
 		</main>
 	);