From 062356ea37fe2cee346257a1f4e234e33869cc84 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Mon, 3 May 2021 13:11:32 +0300
Subject: [PATCH] created stories section and stories component

---
 src/App.js                              |  2 +
 src/App.scss                            |  1 +
 src/commons/stories-section/stories.jsx | 58 +++++++++++++++++++++++++
 src/sass/components/_story.scss         | 54 +++++++++++++++++++++++
 src/sass/pages/_home.scss               |  5 +++
 5 files changed, 120 insertions(+)
 create mode 100644 src/sass/components/_story.scss

diff --git a/src/App.js b/src/App.js
index 4f8b9e9..06ef012 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import "./App.scss";
 import About from "./commons/about-section/about";
 import Feature from "./commons/feature-section/feature";
 import Header from "./commons/header/header.jsx";
+import Stories from "./commons/stories-section/stories";
 import Tours from "./commons/tours-section/tours";
 
 function App() {
@@ -11,6 +12,7 @@ function App() {
       <About />
       <Feature />
       <Tours />
+      <Stories />
     </div>
   );
 }
diff --git a/src/App.scss b/src/App.scss
index f415bf6..7288d68 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -11,6 +11,7 @@
 @import "./sass/components/composition";
 @import "./sass/components/feature-box";
 @import "./sass/components/card";
+@import "./sass/components/story";
 
 @import "./sass/layout/header";
 @import "./sass/layout/grid";
diff --git a/src/commons/stories-section/stories.jsx b/src/commons/stories-section/stories.jsx
index e69de29..ddfa864 100644
--- a/src/commons/stories-section/stories.jsx
+++ b/src/commons/stories-section/stories.jsx
@@ -0,0 +1,58 @@
+import ButtonSecondary from "../../components/button/button-secondary";
+import nat8 from "../images/nat-8.jpg";
+import nat9 from "../images/nat-9.jpg";
+
+function Stories() {
+  return (
+    <section className="section-stories">
+      <div className="u-center-text u-margin-bottom-big">
+        <h2 className="heading-secondary">We make people geniunely happy</h2>
+      </div>
+
+      <div className="row">
+        <div className="story">
+          <figure className="story__shape">
+            <img src={nat8} alt="Person on a tour" className="story__img" />
+            <figcaption className="story__caption">Mary Smith</figcaption>
+          </figure>
+          <div className="story__text">
+            <h3 className="heading-tertiary u-margin-bottom-small">
+              I had the best week ever with my family
+            </h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore,
+              amet. Ipsa fugiat consequatur amet esse deserunt natus. Blanditiis
+              ex similique harum adipisci voluptatem iste esse voluptates,
+              provident odio, vel quae!
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="row">
+        <div className="story">
+          <figure className="story__shape">
+            <img src={nat9} alt="Person on a tour" className="story__img" />
+            <figcaption className="story__caption">Jack Wilson</figcaption>
+          </figure>
+          <div className="story__text">
+            <h3 className="heading-tertiary u-margin-bottom-small">
+              WOW! My life is completely different now
+            </h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore,
+              amet. Ipsa fugiat consequatur amet esse deserunt natus. Blanditiis
+              ex similique harum adipisci voluptatem iste esse voluptates,
+              provident odio, vel quae!
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="u-center-text u-margin-top-huge">
+        <ButtonSecondary text={"Read all stories ➯"} />
+      </div>
+    </section>
+  );
+}
+
+export default Stories;
diff --git a/src/sass/components/_story.scss b/src/sass/components/_story.scss
new file mode 100644
index 0000000..106f05d
--- /dev/null
+++ b/src/sass/components/_story.scss
@@ -0,0 +1,54 @@
+.story {
+  width: 75%;
+  margin: 0 auto;
+  box-shadow: 0 3rem 6rem rgba($color-black, 0.1);
+  background-color: $color-white;
+  border-radius: 3px;
+  padding: 6rem;
+  padding-left: 9rem;
+  font-size: $default-font-size;
+  transform: skewX(-12deg);
+
+  &__shape {
+    width: 15rem;
+    height: 15rem;
+    float: left;
+    shape-outside: circle(50% at 50% 50%);
+    clip-path: circle(50% at 50% 50%);
+    transform: translateX(-3rem) skewX(12deg);
+    position: relative;
+  }
+
+  &__img {
+    height: 100%;
+    transform: translateX(-4rem) scale(1.4);
+    transition: all 0.5s;
+  }
+
+  &__text {
+    transform: skewX(12deg);
+  }
+
+  &__caption {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, 20%);
+    color: $color-white;
+    text-transform: uppercase;
+    font-size: 1.7rem;
+    text-align: center;
+    opacity: 0;
+    transition: all 0.5s;
+  }
+
+  &:hover &__caption {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+
+  &:hover &__img {
+    transform: translateX(-4rem) scale(1);
+    filter: blur(3px) brightness(80%);
+  }
+}
diff --git a/src/sass/pages/_home.scss b/src/sass/pages/_home.scss
index 2205bc1..511fadd 100644
--- a/src/sass/pages/_home.scss
+++ b/src/sass/pages/_home.scss
@@ -27,3 +27,8 @@
   padding: 25rem 0 15rem 0;
   margin-top: -12rem;
 }
+
+.section-stories {
+  padding: 15rem;
+  background-color: $color-grey-light-1;
+}