more

src/Components/Home/HomePageB.js

@@ -266,16 +266,22 @@ const HomePageB = () => {
           <div
             className="hero-imgbox"
             style={{
-              backgroundImage: `url(https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/9ebe6b9b-10e5-4782-c15c-8374bed7f900/public)`,
+              backgroundImage: `url(https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/038dfbe4-00e9-41f9-6b70-09e8e87fa600/public)`,
               backgroundSize: "cover",
               borderRadius: "20px",
             }}
           >
-            <div className="hero-middle">{heroString}</div>
-            <div className="hero-middle">{heroString2}</div>
-            <div className="hero-text">
-              Reclaim hours every week. Spend more time growing your practice,
-              or just get home in time for dinner.
+            <div className="hero-middle-box">
+              <div className="hero-middle">{heroString}</div>
+              <div className="hero-middle">{heroString2}</div>
+              <div className="hero-button-box"></div>
+            </div>
+
+            <div className="hero-text-box">
+              <div className="hero-text">
+                Reclaim hours every week. Spend more time growing your practice,
+                or just get home in time for dinner.
+              </div>
             </div>
           </div>
         </div>

src/styles/homepage-b.scss

@@ -14,7 +14,7 @@
 }
 
 .pad-2 {
-  padding: 1rem 0.5rem;
+  padding: 2rem 0.5rem;
 }
 
 a {
@@ -61,6 +61,16 @@ section.section-one {
   font-family: Roboto;
 }
 
+.hero-middle-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  padding-top: 38px;
+  width: 800px;
+}
+
 .hero-middle {
   font-size: 2.8rem;
   text-align: center;
@@ -68,6 +78,7 @@ section.section-one {
   font-family: Roboto;
   font-weight: 500;
   line-height: 3.4rem;
+  width: 800px;
 }
 
 .hero-imgbox {
@@ -77,12 +88,24 @@ section.section-one {
   z-index: 1;
 }
 
-.hero-text {
-  text-align: center;
-  width: 650px;
-  font-size: 1.5rem;
+.hero-text-box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
 }
 
+.hero-text {
+  text-align: center;
+  padding-top: 20px;
+  width: 650px;
+  font-size: 1.5rem;
+  color: #000;
+}
+
+.hero-button-box {
+  width: 100%;
+  height: 200px;
+}
 .first-section-subcontainer {
   padding-top: 35px;
   padding-left: 20px;