Bp 7 build before and after component (#12)

* Added design for the homepage.

* Added Before and After photos and text.

* Styled the before and after component.

* Style before and after, add pathing and pictures out of public/

* Changed spacing in Before and After Component.

* Addressed Feedback, including style changes and font changes.

Co-authored-by: Minh Lu <[email protected]>

.env

@@ -1 +1,2 @@
-SASS_PATH=src/
+SASS_PATH=src/
+NODE_PATH=src/

src/App.js

@@ -1,12 +1,15 @@
 import React from "react";
 import Navigation from "./components/Navigation/Navigation";
 import ContactInfo from "./components/ContactInfo/ContactInfo";
+import BeforeAndAfter from "./components/BeforeAndAfter/BeforeAndAfter";
 
 export default function App() {
   return (
     <>
       <Navigation></Navigation>
-      <div style={{minHeight: "1000px"}}></div>
+      <div style={{minHeight: "507px"}}></div>
+      <BeforeAndAfter></BeforeAndAfter>
+      <div style={{minHeight: "400px"}}></div>
       <ContactInfo></ContactInfo>
     </>
   )

src/components/BeforeAndAfter/BeforeAndAfter.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import cn from './BeforeAndAfter.module.scss';
+import teethBefore from 'assets/before_and_after/teeth-before.png';
+import teethAfter from 'assets/before_and_after/teeth-after.png';
+
+const BeforeAndAfter = () => {
+  return (
+    <>
+      <div className={cn.BeforeAndAfter}>
+
+        <div className={cn.Images}>
+          <img src={teethBefore}></img>
+          <img src={teethAfter}></img>
+        </div>
+
+        <div className={cn.Text}>
+          <span className={cn.Header}>Creating Smiles with a Gentle touch.</span>
+          <span className={cn.Captions}>
+            <a href="#">Click here</a> to view our full smile gallery.
+          </span>
+        </div>
+
+      </div>
+    </>
+  )
+}
+
+export default BeforeAndAfter;

src/components/BeforeAndAfter/BeforeAndAfter.module.scss

@@ -0,0 +1,45 @@
+@import 'global.scss';
+
+.BeforeAndAfter {
+    display: flex;
+    justify-content: center;
+    background-color: $teriary-background-color;
+    min-height: 160px;
+    color: $primary-text;
+}
+
+.Images {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+}
+
+    .Images :nth-child(2) {
+        margin-left: 6%;
+    }
+
+.Text {
+    margin-left: 2%;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header {
+    font-family: PlayfairDisplay-Bold;
+    font-size: 30px;
+    margin-bottom: 0px;
+}
+
+.Captions {
+    font-family: PlayfairDisplay-Regular;
+    font-size: 27px;
+    color: $primary-text;
+    margin-top: 0;
+    display: inline-block;
+}   
+
+    .Captions a {
+        color: $primary-text;
+    }

src/components/ContactInfo/ContactInfo.module.scss

@@ -1,4 +1,4 @@
-@import 'scss/global.scss';
+@import 'global.scss';
 
 .ContactInfo {
     display: flex;
@@ -10,7 +10,7 @@
         line-height: 10px;
         font-size: 14px;
         letter-spacing: 0.02857em;
-        color: $primary-text;;
+        color: $primary-text;
         text-transform: uppercase;
     }
 

src/components/Navigation/Navigation.module.scss

@@ -1,4 +1,4 @@
-@import 'scss/global.scss';
+@import 'global.scss';
 
 .AppBar {
     background-color: $primary-background-color;
@@ -27,6 +27,6 @@
 }
 
 .Button {
-    background-color: $secondary-background-color;
+    background-color: $teriary-background-color;
     color: $primary-text;
 }

src/components/Navigation/TabDropdown/TabDropdown.module.scss

@@ -1,4 +1,4 @@
-@import 'scss/global.scss';
+@import 'global.scss';
 
 .TabUnderline {
     background-color: transparent !important;

src/global.scss

@@ -0,0 +1,47 @@
+// Background colors
+$primary-background-color: #304774 !important;
+$secondary-background-color: #E4EAF1 !important;
+$teriary-background-color: #73305B !important;
+
+// Texts
+$primary-text: white !important;
+
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+      monospace;
+  }
+
+  @font-face {
+    font-family: 'OpenSans-Regular';
+    src: local('OpenSans-Regular'), url(./assets/fonts/OpenSans-Regular.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'PlayfairDisplay-Bold';
+    src: local('PlayfairDisplay-Bold'), url(./assets/fonts/PlayfairDisplay-Bold.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'PlayfairDisplay-Regular';
+    src: local('PlayfairDisplay-Regular'), url(./assets/fonts/PlayfairDisplay-Regular.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'Raleway-Bold';
+    src: local('Raleway-Bold'), url(./assets/fonts/Raleway-Bold.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'Raleway-Regular';
+    src: local('Raleway-Regular'), url(./assets/fonts/Raleway-Regular.ttf) format('truetype');
+  }
+

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './global.scss';
 import App from './App';
 
 ReactDOM.render(