updated hero section

public/css/style.css

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
 
 :root {
-  --pry-color:#0276CF;
+  --pry-color:#1C3D80;
 }
 * {
   font-family: 'Roboto';
@@ -33,14 +33,17 @@ 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);
   font-size: 16px;
 }
 p {
-  font-size: 17px;
+  font-size: 18px;
 }
 .text-pry {
   color: var(--pry-color);
@@ -131,7 +134,13 @@ p {
   background-size: cover;
   background-repeat: no-repeat;
   min-height: 400px;
-  color: #fff;
+  color: #333;
+}
+.top .light-bg {
+  padding: 30px 30px 35px;
+}
+.light-bg {
+  background-color: rgba(255,255,255, 0.85);
 }
 .dark {
   background-image: url('/img/top-overlay.png');
@@ -142,6 +151,11 @@ p {
   display: grid;
   place-items: center;
 }
+.md-title {
+    font-size: 45px;
+    margin-bottom: 20px;
+    font-weight: 900;
+}
 .title {
   font-weight: 300;
   font-size: 48px;
@@ -154,6 +168,15 @@ p {
   /* line-height: 56px; */
   letter-spacing: -0.741px;
 }
+.steps {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 70%;
+}
+.steps > div {
+  width: 100%;
+}
 .fp-container {
   border: 1px solid #DDE0E2;
   border-radius: 2px;

resources/views/app/index.blade.php

@@ -1,64 +1,52 @@
 @extends('layouts.app')
 @section('content')
 <div class="top">
-  <div class="dark">
+  <div class="">
     <div class="container">
       <div class="row">
-        <div class="col-xl-5 col-lg-6">
-          <h4 class="title">Non-Surgical Treatment for Hemorrhoids</h4>
-          <div class="d-sm-flex text-sm-start text-center align-items-center mt-4">
-            <a href="#" class="btn btn-pry">See how it works</a>
-            <a href="#" class="text-white d-block ms-sm-5 mt-sm-0 mt-4">Buy Snyder Hemband <i class="ms-2 fal fa-angle-right"></i> </a>
+        <div class="col-xl-6">
+          <div class="my-5 light-bg">
+            <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>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
-<div class="container py-5">
-  <div class="row align-items-baseline">
-    <div class="col-xl-5 col-10 offset-xl-0 offset-1 text-xl-start text-center mb-xl-0 mb-4">
-      <h4 class="subtitle">For patients</h4>
-      <div class="mt-4">
-        <img src="{{asset('img/fp.png')}}" class="w-100" alt="">
-      </div>
+
+<div class="container mt-3">
+  <div class="d-sm-flex align-items-start justify-content-between py-5">
+    <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>
     </div>
-    <div class="col-xl-6 offset-xl-1 position-relative">
-      <div class="fp-container">
-        <div class="border-bottom pb-3 mb-4">
-          <div class="d-flex align-items-center mb-2">
-            <img src="{{asset('img/fp/fp-1.svg')}}"  class="mb-2" alt="">
-            <h5 class="m-0">Painless</h5>
-          </div>
-          <p>Snyder hemband is the most painless treatment option for hemorrhoids.</p>
-        </div>
-        <div class="border-bottom pb-3 mb-4 pt-2">
-          <div class="d-flex align-items-center mb-3">
-            <img src="{{asset('img/fp/fp-2.svg')}}"  alt="">
-            <h5 class="m-0">Quick</h5>
-          </div>
-          <p>Treating hemorrhoids by using snyder hemband is quick and the procedure takes less than a minute.</p>
-        </div>
-        <div class="border-bottom pb-3 mb-4 pt-2">
-          <div class="d-flex align-items-center mb-3">
-            <img src="{{asset('img/fp/fp-3.svg')}}"  alt="">
-            <h5 class="m-0">Effective</h5>
-          </div>
-          <p>Appropriate for ALL patients experiencing hemorrhoid symptoms. In fact, over 99% of patients experience relief after treatment.</p>
-        </div>
-        <div class="pb-3 pt-2">
-          <div class="d-flex align-items-center mb-3">
-            <img src="{{asset('img/fp/fp-4.svg')}}"  alt="">
-            <h5 class="m-0">Safe</h5>
-          </div>
-          <p>Best treatment option with the least possible complications compared to other treatments.</p>
-        </div>
-      </div>
+    <div class="text-center w-100 mb-sm-0 mb-4">
+      <img src="{{asset('img/fp/fp-3.svg')}}" height="40">
+      <p class="mt-3"><b>Painless</b></p>
+      <p class="px-4">Hemorrhoid banding is painless and requires no medication after treatment.</p>
+    </div>
+    <div class="text-center w-100 mb-sm-0 mb-4">
+      <img src="{{asset('img/fp/fp-2.svg')}}" height="40">
+      <p class="mt-3"><b>Long-Term Effectiveness</b></p>
+      <p class="px-4">Instead of treating symptoms, banding gently removes hemorrhoids themselves.</p>
+    </div>
+    <div class="text-center w-100 mb-sm-0 mb-4">
+      <img src="{{asset('img/fp/fp-4.svg')}}" height="40">
+      <p class="mt-3"><b>Covered by Most Health Plans</b></p>
+      <p class="px-4">Including Medicare, Medicaid, and most other insurance plans.</p>
     </div>
   </div>
 </div>
 
-<div class="container py-xl-5">
+<div class="container pb-xl-5">
   <div class="row">
     <div class="col-xl-6 pe-xl-0">
       <div class="box-1">