hero section

public/css/style.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');
 
 :root {
   --pry-color:#1C3D80;
@@ -13,7 +13,7 @@ body {
   flex-direction: column;
   font-weight: 400;
   background-color: #ffffff;
-  color: #545E65;
+  color: #333;
   width: 100%;
   font-size: 17px;
   min-height: 100vh;
@@ -33,10 +33,6 @@ footer{
 footer span {
   font-size: 15px;
 }
-b, strong, .font-weight-bold {
-  font-family:sans-serif;
-  font-weight: 900 !important;
-}
 a {
   text-decoration: none;
   color: var(--pry-color);
@@ -104,7 +100,15 @@ p {
   border-radius: 0;
   padding: 10px 45px;
 }
-.btn-pry:hover {
+.btn-outline-pry {
+  border: 1px solid;
+  border-color: var(--pry-color);
+  color: var(--pry-color);
+  font-size: 16px;
+  border-radius: 0;
+  padding: 10px 45px;
+}
+.btn-pry:hover, .btn-outline-pry:hover {
   transition: .5s;
   box-shadow: 0px 15px 15px rgb(11 28 91 / 10%);
 }
@@ -132,15 +136,22 @@ p {
 .top {
   background-image: url('/img/top-bg.png');
   background-size: cover;
+  background-position: top center;
   background-repeat: no-repeat;
-  min-height: 400px;
+  min-height: 600px;
   color: #333;
+  display: grid;
+}
+.top > div {
+}
+.top .light-bg p{
+  font-size: 20px;
 }
 .top .light-bg {
   padding: 30px 30px 35px;
 }
 .light-bg {
-  background-color: rgba(255,255,255, 0.85);
+  background-color: rgba(255,255,255, .9);
 }
 .dark {
   background-image: url('/img/top-overlay.png');

resources/views/app/index.blade.php

@@ -2,17 +2,17 @@
 @section('content')
 <div class="top">
   <div class="">
-    <div class="container">
+    <div class="container h-100 d-flex align-items-center">
       <div class="row">
-        <div class="col-xl-6">
-          <div class="my-5 light-bg">
+        <div class="col-lg-7">
+          <div class="light-bg shadow-lg">
             <h3 class="md-title text-pry">Non-surgical. Painless. Return to work immediately.</h3>
-            <p class="mb-2"><b>You’re a simple rubber band away from long-lasting hemorrhoid treatment.</b></p>
-            <p class="mb-2">Just a simple, medical-grade rubber band that takes a doctor <b>less than 60 seconds</b> to apply at the base of your hemorrhoid.</p>
-            <p>The hemorrhoid shrinks and falls off, typically <b>within 24 hours</b>.</p>
-            <div class="d-sm-flex text-sm-start text-center align-items-center mt-4">
-              <a href="#" class="btn btn-pry">Find a physician</a>
-              <a href="#" class="d-block ms-sm-4 mt-sm-0 mt-4"><b>How it works <i class="ms-2 fal fa-angle-right"></i> </b> </a>
+            <p class="mb-3">You’re a simple rubber band away from <b>long-lasting hemorrhoid treatment.</b></p>
+            <p class="mb-3">Just a simple, medical-grade rubber band that takes a doctor <b>less than 60 seconds</b> to apply at the base of your hemorrhoid.</p>
+            <p class="mb-3">The hemorrhoid shrinks and falls off, typically within 24 hours.</p>
+            <div class="d-sm-flex align-items-center my-4">
+              <a href="#" class="btn btn-pry">Find a Physician</a>
+              <a href="#" class="btn btn-outline-pry ms-sm-4 ms-0 mt-sm-0 mt-4">How it Works</a>
             </div>
           </div>
         </div>
@@ -26,7 +26,7 @@
     <div class="text-center w-100 mb-sm-0 mb-4">
       <img src="{{asset('img/fp/fp-1.svg')}}" height="40">
       <p class="mt-3"><b>Fast & Safe</b></p>
-      <p class="px-4">Hemorrhoid banding takes less than a minute to perform, and is the medical <b>“gold-standard”</b> with a greater than 95% success rate.</p>
+      <p class="px-4">Hemorrhoid banding takes less than a minute to perform, and is the medical “gold-standard” with a greater than 95% success rate.</p>
     </div>
     <div class="text-center w-100 mb-sm-0 mb-4">
       <img src="{{asset('img/fp/fp-3.svg')}}" height="40">

resources/views/app/post-care.blade.php

@@ -14,10 +14,8 @@
   <div class="container py-lg-4">
     <div class="row align-items-center">
       <div class="col-xl-4 col-lg-5 mb-lg-0 mb-4">
-        <h5 class="subtitle mb-4">Your treatment with Snyder Hemband</h5>
-        <p>A small rubber band is placed around the base of a hemorrhoid using Snyder Hemband by your doctor.</p>
-        <p>The blood supply to the hemorrhoid is reduced by the generation of compression, causing it to shrink and eventually fall off. This forms a small scar at the base of the hemorrhoid which will heal in just a few days.</p>
-        <p>The banding is done above the dentate line, a section of rectum with a very low number of pain-sensitive nerves. This is why the procedure is painless.</p>
+        <h5 class="subtitle mb-4">What’s next?</h5>
+        <p>You’re on your way back to living life to the fullest! Hemorrhoids commonly originate at three sites in the rectal area. So depending on the findings, your doctor may schedule three or more treatment sessions. Doctors generally treat one site during each session.</p>
       </div>
       <div class="col-xl-7 col-lg-6 offset-lg-1">
         <img src="{{asset('img/pc-top.png')}}" class="w-100" alt="">

resources/views/layouts/app.blade.php

@@ -20,12 +20,12 @@
 <body>
     <div class="top-blue">
         <div class="container">
-            <div class="text-end align-items-center d-flex justify-content-end">
-                <a class="ms-sm-3" href="#">For Phycisians</a>
-                <a class="ms-3" href="#">For Patients</a>
+            <div class="text-end align-items-center d-flex align-items-center justify-content-end">
+              <div class="">
+                <a class="ms-3" href="tel:(800) 290-9092">(800) 290-9092</a>
                 <span class="ms-3">|</span>
-                <a class="ms-3" href="#">Login</a>
-                <a class="ms-3" href="#">Register</a>
+                <a class="ms-3" href="#">For Physicians</a>
+              </div>
             </div>
         </div>
     </div>