more

src/Components/Home/HomePageB.js

@@ -289,6 +289,7 @@ const HomePageB = () => {
                 growing your practice, or just get home in time for dinner.
               </div>
               <div className="hero-testi-box">
+                <div className="hero-testi-left">
                   <StarFill
                     style={{
                       color: "#FFD700",
@@ -328,6 +329,18 @@ const HomePageB = () => {
                     Used by over 1,100 Novodrafters
                   </div>
                 </div>
+                <div className="hero-testi-right">
+                  <div className="hero-testi-right-inner">
+                    <div className="hero-test-pic-box">
+                      <img
+                        className="hero-testi-face"
+                        src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/dfa2feb0-c3fe-4da8-3ec5-ada7961d8700/public"
+                      ></img>
+                    </div>
+                    <div className="hero-testi-text"></div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>

src/styles/homepage-b.scss

@@ -105,10 +105,10 @@ section.section-one {
 }
 
 .hero-button-box {
-  margin-top: 60px;
+  margin-top: 50px;
   padding-left: 8px;
   width: 100%;
-  height: 160px;
+  height: 130px;
 }
 
 .first-section-subcontainer {
@@ -133,13 +133,80 @@ section.section-one {
 }
 
 .hero-testi-box {
+  background-color: lightgreen;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding: 0px 8px;
   height: 100px;
-  width: 700px;
+  width: 1300px;
+}
+
+.hero-testi-left {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 8px;
+  width: 50%;
+}
+
+.hero-testi-right {
+  width: 250px;
+  height: 90px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  width: 50%;
+}
+
+.hero-testi-right-inner {
+  display: flex;
+  width: 80%;
+  height: 90%;
+  border-radius: 10px;
+  align-items: center;
+}
+
+.hero-test-pic-box {
+  display: flex;
+  width: 48%;
+  height: 100%;
+  align-items: center;
+}
+
+.hero-test-pic-box1 {
+  //
+}
+
+.hero-testi-pic {
+  height: 75px;
+  width: 75px;
+  border-radius: 50%;
+  margin-left: -40px;
+}
+
+.hero-testi-face {
+  height: 60px;
+  border-radius: 20px;
+}
+.upper-testi-text {
+  font-family: Roboto;
+  font-size: 1rem;
+  margin-right: 6px;
+}
+
+.lower-testi-text {
+  margin-top: -4px;
+  margin-left: 15px;
+}
+
+.hero-testi-text {
+  display: flex;
+  flex-direction: column;
+  width: 520px;
 }
 
 .text-block-1 {
@@ -503,7 +570,7 @@ p.text-block-4 {
   align-items: center;
   justify-content: center;
   margin: 12px auto 0px auto;
-  color: #757575;
+  color: #000;
   letter-spacing: 0.13rem;
 }