styled review section

src/App.scss

@@ -4,6 +4,7 @@
 @import "./SASS/abstracts/include-media";
 
 @import "./SASS/components/buttons";
+@import "./SASS/components/components";
 
 @import "./SASS/base/animations";
 @import "./SASS/base/typography";
@@ -11,4 +12,5 @@
 @import "./SASS/base/utilities";
 
 @import "./SASS/layout/layout";
-@import "./SASS/layout/home";
+
+@import "./SASS/pages/home";

src/SASS/abstracts/_variables.scss

@@ -44,9 +44,9 @@ $big-font-size: 5rem;
 // OTHER
 
 $shadow-default: 0 1.5rem 4rem rgba($color-black, 0.15);
+$shadow-description: 0 2rem 5rem rgba($color-black, 0.06);
 $shadow-light: 0.5rem 1rem 2rem rgba($color-black, 0.2);
 $shadow-link: 0 1rem 2rem rgba($color-black, 0.4);
 $shadow-blurry: 0 2rem 6rem rgba($color-black, 0.3);
 
-$border-radius-small: 0.2rem;
+$line: 1px solid $color-grey-light-2;
-$border-radius-default: 0.3rem;

src/SASS/base/_typography.scss

@@ -11,3 +11,7 @@ body {
   letter-spacing: 1px;
   padding: 1.5rem 3rem;
 }
+
+.paragraph:not(:last-of-type) {
+  margin-bottom: 2rem;
+}

src/SASS/components/buttons.scss

@@ -9,9 +9,18 @@
   cursor: pointer;
   transition: all 0.2s;
 
+  & span {
+    margin-left: 3px;
+    transition: margin-left 0.2s;
+  }
+
   &:hover {
     color: $color-grey-dark-1;
-    animation: pulsate 1s infinite;
+    // animation: pulsate 1s infinite;
+
+    span {
+      margin-left: 8px;
+    }
   }
 
   &:focus {

src/SASS/components/components.scss

@@ -0,0 +1,113 @@
+.list {
+  list-style-type: none;
+  margin: 3rem 0;
+  padding: 3rem 0;
+  border-top: $line;
+  border-bottom: $line;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  &__item {
+    flex: 0 0 50%;
+    margin-bottom: 0.7rem;
+  }
+
+  &__item::before {
+    content: "";
+    display: inline-block;
+    height: 1rem;
+    width: 1rem;
+    margin-right: 0.7rem;
+
+    background-color: $color-primary;
+    mask-image: url(../../commons/img/chevron-thin-right.svg);
+    mask-size: cover;
+  }
+}
+
+.recommend {
+  font-size: 1.3rem;
+  color: $color-grey-light-3;
+  display: flex;
+  align-items: center;
+
+  &__photo {
+    box-sizing: content-box;
+    height: 4rem;
+    width: 4rem;
+    border-radius: 50%;
+    border: 3px solid $color-white;
+  }
+  &__photo:not(:last-child) {
+    margin-right: -1.5rem;
+  }
+
+  &__count {
+    margin-right: auto;
+  }
+
+  &__friends {
+  }
+}
+
+.review {
+  background-color: $color-white;
+  box-shadow: $shadow-light;
+  padding: 3rem;
+  margin-bottom: 3rem;
+  position: relative;
+  overflow: hidden;
+
+  &__text {
+    margin-bottom: 2rem;
+    z-index: 2;
+    position: relative;
+  }
+
+  &__user {
+    display: flex;
+    align-items: center;
+  }
+
+  &__photo {
+    height: 4.5rem;
+    width: 4.5rem;
+    border-radius: 50%;
+    margin-right: 1.5rem;
+  }
+
+  &__user-box {
+    margin-right: auto;
+  }
+
+  &__user-name {
+    font-size: 1.1rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-bottom: 0.4rem;
+  }
+
+  &__user-date {
+    font-size: 1rem;
+    color: $color-grey-dark-3;
+  }
+
+  &__rating {
+    color: $color-primary;
+    font-size: 2.2rem;
+    font-weight: 300;
+  }
+
+  &::before {
+    z-index: 1;
+    content: "\201C";
+    position: absolute;
+    top: -3.2rem;
+    left: -1rem;
+    font-size: 20rem;
+    line-height: 1;
+    color: $color-grey-light-2;
+    font-family: sans-serif;
+  }
+}

src/SASS/layout/_layout.scss

@@ -3,8 +3,6 @@
   margin: 8rem auto;
   background-color: $color-grey-light-2;
   box-shadow: $shadow-blurry;
-
-  min-height: 50rem;
 }
 
 .content {
@@ -13,7 +11,31 @@
 
 .hotel-view {
   background-color: $color-white;
-  height: 80rem;
 
   flex: 1;
 }
+
+.detail {
+  display: flex;
+  padding: 4.5rem;
+  background-color: $color-grey-light-1;
+  border-bottom: $line;
+  font-size: $normal-font-size;
+}
+
+.description {
+  background-color: $color-white;
+  box-shadow: $shadow-description;
+  padding: 3rem;
+  flex: 0 0 60%;
+  margin-right: 4.5rem;
+}
+
+.user-reviews {
+  flex: 1;
+
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+}

src/SASS/pages/_home.scss

@@ -210,7 +210,7 @@
 .overview {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid $color-grey-light-2;
+  border-bottom: $line;
 
   &__stars {
     margin-right: auto;

src/commons/hotel-view/hotel-view.jsx

@@ -2,6 +2,12 @@ import hotel1 from "../img/hotel-1.jpg";
 import hotel2 from "../img/hotel-2.jpg";
 import hotel3 from "../img/hotel-3.jpg";
 import sprite from "../img/sprite.svg";
+import user1 from "../img/user-1.jpg";
+import user2 from "../img/user-2.jpg";
+import user3 from "../img/user-3.jpg";
+import user4 from "../img/user-4.jpg";
+import user5 from "../img/user-5.jpg";
+import user6 from "../img/user-6.jpg";
 
 function HotelView() {
   return (
@@ -51,6 +57,78 @@ function HotelView() {
           <div className="overview__rating-count">429 votes</div>
         </div>
       </div>
+
+      <div className="detail">
+        <div className="description">
+          <p className="paragraph">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quos
+            perspiciatis qui placeat omnis voluptatem porro alias, hic illum
+            odio dicta. Asperiores minima dolor vero deleniti, quibusdam impedit
+            nam voluptatem?
+          </p>
+          <p className="paragraph">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque
+            excepturi, reprehenderit voluptas architecto enim repudianda.
+          </p>
+          <ul className="list">
+            <li className="list__item">Close to the beach</li>
+            <li className="list__item">Breakfast included</li>
+            <li className="list__item">Free airport shuttle</li>
+            <li className="list__item">Free wifi in all rooms</li>
+            <li className="list__item">Air conditioning and heating</li>
+            <li className="list__item">Pets allowed</li>
+            <li className="list__item">We speak all languages</li>
+            <li className="list__item">Perfect for families</li>
+          </ul>
+          <div className="recommend">
+            <p className="recommend__count">
+              Lucy and 3 other friends recommend this hotel.
+            </p>
+            <div className="recommend__friends">
+              <img src={user3} alt="Friend" className="recommend__photo" />
+              <img src={user4} alt="Friend" className="recommend__photo" />
+              <img src={user5} alt="Friend" className="recommend__photo" />
+              <img src={user6} alt="Friend" className="recommend__photo" />
+            </div>
+          </div>
+        </div>
+
+        <div className="user-reviews">
+          <figure className="review">
+            <blockquote className="review__text">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
+              beatae officia ipsum.
+            </blockquote>
+            <figcaption className="review__user">
+              <img src={user1} alt="User" className="review__photo" />
+              <div className="review__user-box">
+                <p className="review__user-name">Nick Smith</p>
+                <p className="review__user-date">Feb 23rd, 2017</p>
+              </div>
+              <div className="review__rating">7.8</div>
+            </figcaption>
+          </figure>
+
+          <figure className="review">
+            <blockquote className="review__text">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
+              beatae officia ipsum.
+            </blockquote>
+            <figcaption className="review__user">
+              <img src={user2} alt="User" className="review__photo" />
+              <div className="review__user-box">
+                <p className="review__user-name">Mary Thomas</p>
+                <p className="review__user-date">Sept 13th, 2017</p>
+              </div>
+              <div className="review__rating">9.3</div>
+            </figcaption>
+          </figure>
+
+          <button className="btn-inline">
+            Show all <span>&rarr;</span>
+          </button>
+        </div>
+      </div>
     </main>
   );
 }