scambi family component - Paul

src/family-page/Family.css

@@ -0,0 +1,177 @@
+.main-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  padding: 0px;
+  gap: 104px;
+
+  position: absolute;
+  width: 100%;
+  height: 492px;
+  left: 82px;
+  top: 0px;
+}
+
+.left-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 38px;
+
+  width: 566px;
+  height: 420px;
+}
+
+.text-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 20px;
+
+  width: 532px;
+  height: 336px;
+}
+
+.title {
+  width: 346px;
+  height: 76px;
+
+  /* H2 Headline, Light, 64px */
+
+  font-family: "Londrina Solid";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 64px;
+  line-height: 76px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+
+  /* Greyscale palette/Dark */
+
+  color: #323338;
+}
+
+.content {
+  width: 532px;
+  height: 240px;
+
+  /* Body, Regular, 16px */
+
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  /* or 150% */
+
+  display: flex;
+  align-items: center;
+
+  color: #000000;
+}
+
+.button-container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 38px;
+
+  width: 517px;
+  height: 46px;
+}
+
+.left-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 40px;
+  gap: 8px;
+
+  width: 257px;
+  height: 46px;
+
+  background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0) 69.78%
+    ),
+    #69088d;
+  /* Button/Primary/Dropshadow */
+
+  box-shadow: 0px 4px 3px rgba(47, 4, 63, 0.7);
+  border-radius: 16px;
+}
+
+.left-label {
+  width: 177px;
+  height: 22px;
+
+  /* Button Text, Semi bold, 16px */
+
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 22px;
+  /* identical to box height, or 138% */
+
+  /* Light/--text-color-on-primary */
+
+  color: #ffffff;
+}
+
+.right-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 40px;
+  gap: 8px;
+
+  width: 271px;
+  height: 46px;
+
+  /* Main UI Colors/Primary/Purple */
+
+  border: 2px solid #69088d;
+  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25));
+  border-radius: 16px;
+}
+
+.right-label {
+  width: 191px;
+  height: 22px;
+
+  /* Button Text, Semi bold, 16px */
+
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 22px;
+  /* identical to box height, or 138% */
+
+  /* Light/--primary-text-color */
+
+  color: #323338;
+}
+
+.right-container {
+  flex-flow: column;
+  width: 645px;
+  height: 492px;
+
+  background: url(../images/7.png);
+  /* Large Elements */
+
+  filter: drop-shadow(0px 15px 50px rgba(0, 0, 0, 0.3));
+  border-radius: 16px;
+}

src/family-page/family.js

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import "./Family.css";
+
+class Family extends Component {
+  render() {
+    return (
+      <div className="main-container">
+        <div className="left-container">
+          <div className="text-container">
+            <div className="title">Scambi Family</div>
+            <div className="content">
+              We are a group of under 25s coming from every corner of Europe.
+              After lots of videocalls, thousand doubts and just as many ideas,
+              our team has become a family. We are proud of our diversity and
+              passion, enthusiastic in sharing inspiration and in continuously
+              proposing new perspectives. We will be waiting for you in Sanremo,
+              to introduce ourselves properly. In the meanwhile, learn more
+              about us following the link below
+            </div>
+          </div>
+          <div className="button-container">
+            <div className="left-button">
+              <div className="left-label">Learn about our team</div>
+            </div>
+            <div className="right-button">
+              <div className="right-label">Volunteer with us</div>
+            </div>
+          </div>
+        </div>
+        <div className="right-container"></div>
+      </div>
+    );
+  }
+}
+
+export default Family;

src/home-page/Home.js

@@ -1,15 +1,17 @@
-import React, { Component } from 'react';
-import UserTest from './UserTest';
-import NLSubscribe from './NLSubscribe';
+import React, { Component } from "react";
+import UserTest from "./UserTest";
+import Family from "../family-page/family";
 
 class Home extends Component {
-    render() {
-        return <div>
-            <div>Home</div>
-            <UserTest />
-            <NLSubscribe />
-        </div>
-    }
+  render() {
+    return (
+      <div>
+        <div>Home</div>
+        <UserTest />
+        <Family />
+      </div>
+    );
+  }
 }
 
-export default Home;
+export default Home;