inner pages

app/Http/Controllers/AppController.php

@@ -9,4 +9,22 @@ class AppController extends Controller
     public function index() {
       return view('app.index');
     }
+    public function snyderhemband() {
+      return view('app.snyder');
+    }
+    public function aboutHem() {
+      return view('app.about-hem');
+    }
+    public function treatment() {
+      return view('app.treatment');
+    }
+    public function postCare() {
+      return view('app.post-care');
+    }
+    public function compare() {
+      return view('app.compare');
+    }
+    public function contact() {
+      return view('app.contact');
+    }
 }

public/css/style.css

@@ -36,6 +36,12 @@ a {
   color: var(--pry-color);
   font-size: 16px;
 }
+p {
+  font-size: 17px;
+}
+.text-pry {
+  color: var(--pry-color);
+}
 .bg-pry {
   background-color: var(--pry-color);
 }
@@ -57,7 +63,10 @@ a {
 .top-blue span {
   color: #fff;
   font-weight: 300;
-  font-size: 20px
+  font-size: 20px;
+}
+.breadcrumb-item {
+  font-weight: 300;
 }
 .navbar {
   background-color: #ffffff;
@@ -79,9 +88,8 @@ a {
   position: relative;
 }
 .nav-link:hover, .nav-link.active {
-  color: #000000;
+  color: var(--pry-color);
   transition: .3s;
-  border-color: #ccc;
 }
 .btn-pry {
   background-color: var(--pry-color);
@@ -96,11 +104,19 @@ a {
 }
 .dropdown-menu {
   border-radius: 0;
+  margin-top: 18px !important;
+  border: 1px solid #eee;
 }
 .dropdown-item {
-  padding: 8px 10px;
+  padding: 15px 25px;
   font-size: 15px;
 }
+.dropdown-item:hover{
+  background-color: #ffffff;
+}
+.dropdown-item:hover h6{
+  color: var(--pry-color);
+}
 .dropdown-menu li:not(:last-child) {
   border-bottom: 1px solid #ccc;
 }
@@ -123,13 +139,13 @@ a {
 .title {
   font-weight: 300;
   font-size: 48px;
-  line-height: 56px;
+  /* line-height: 56px; */
   letter-spacing: -0.912px;
 }
 .subtitle {
   font-weight: 300;
   font-size: 39px;
-  line-height: 56px;
+  /* line-height: 56px; */
   letter-spacing: -0.741px;
 }
 .fp-container {
@@ -191,3 +207,75 @@ a {
   margin-left: 100px;
   padding-left: 100px;
 }
+.fw-thin {
+  font-weight: 300;
+}
+.about-hem {
+  background-image: url('/img/about-hem.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center right;
+  background-color: #5C6D7A;
+  color: #fff;
+}
+.cause {
+  color: #545E65;
+}
+.cause:hover {
+  transition: .5s;
+  color: var(--pry-color);
+}
+.fx-symptoms {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  /* flex-wrap: wrap; */
+  gap:10px;
+}
+.fx-symptoms p {
+  font-size: 15px;
+  text-align: center;
+}
+.d-center {
+  display: grid;
+  place-items: center;
+}
+.guide-img {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+.tt-container {
+  display: flex;
+  justify-content: space-between;
+}
+.tt-container > div:nth-child(1) {
+  background-color: #0276CF;
+  color: #fff;
+}
+.tt-container > div:nth-child(2) {
+  background-color: #5C6D7A;
+  color: #fff;
+}
+.tt-container > div:nth-child(3) {
+  background-color: #778FA1;
+  color: #fff;
+}
+.tt-container > div:nth-child(4) {
+  background-color: #F7F7F7;
+}
+.accordion-header button {
+  font-size: 20px;
+  font-weight: 300;
+}
+.accordion-item {
+  border:0;
+  border-bottom: 1px solid #ddd;
+}
+.accordion-button:focus{
+  box-shadow: none !important;
+}
+.accordion-button:not(.collapsed){
+  background-color: #ffffff;
+  border-bottom: 1px solid #ddd;
+}

public/img/symps/symp-4.svg

@@ -0,0 +1,3 @@
+<svg width="114" height="114" viewBox="0 0 114 114" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="57" cy="57" r="57" fill="#F7F7F7"/>
+</svg>

public/img/symps/symp-5.svg

@@ -0,0 +1,3 @@
+<svg width="114" height="114" viewBox="0 0 114 114" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="57" cy="57" r="57" fill="#F7F7F7"/>
+</svg>

public/img/treatment/treatment-1.svg

@@ -0,0 +1,13 @@
+<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_0_201)">
+<path d="M26 45.5V16.25C26 14.4551 27.4551 13 29.25 13H74.75C76.5449 13 78 14.4551 78 16.25V45.5" stroke="#545E65" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39 26H46" stroke="#545E65" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M87.75 45.5C87.75 65.2442 71.7442 81.25 52 81.25C32.2558 81.25 16.25 65.2442 16.25 45.5L87.75 45.5Z" stroke="#545E65" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38.0248 78.4058L36.278 90.5526C36.149 91.4819 36.4278 92.4216 37.0429 93.1301C37.6579 93.8386 38.5491 94.2467 39.4873 94.2495H64.5123C65.4505 94.2467 66.3417 93.8386 66.9568 93.1301C67.5718 92.4216 67.8507 91.4819 67.7217 90.5526L65.9748 78.4058" stroke="#545E65" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_201">
+<rect width="104" height="104" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/img/treatment/treatment-2.svg

@@ -0,0 +1,14 @@
+<svg width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_0_189)">
+<path d="M5.53454 24.3559C-0.894325 17.927 -0.894325 7.7892 5.53454 1.36035L32.9808 28.8066L42.1296 37.9554L56.2236 52.0494C58.6962 54.5221 58.6962 58.231 56.2236 60.7036V60.7036C53.751 63.1763 49.3002 63.1763 47.0748 60.2091L36.937 47.5987C34.4644 44.3843 30.0136 43.3952 26.0574 44.8788V44.8788L5.53454 24.3559Z" stroke="#545E65" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42.1299 20.8937L55.4821 7.5415" stroke="#545E65" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M36.6904 32.5148C37.6795 32.2675 38.4213 32.2675 39.4103 32.0203C42.6247 31.773 46.3337 30.0422 50.0427 26.3332L62.1586 14.2173" stroke="#545E65" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.8761 38.6963L2.56767 52.7903C-0.152231 54.7684 -0.399492 58.7246 2.07314 60.95C4.54578 63.4227 8.25473 62.9281 10.2328 60.4555L24.3269 42.8998" stroke="#545E65" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M48.8065 0.865234L36.4433 12.9812C32.7344 16.6901 30.7562 20.3991 30.7562 23.6135C30.7562 24.6025 30.509 25.3443 30.2617 26.3334" stroke="#545E65" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_189">
+<rect width="61.7952" height="61.7104" fill="white" transform="translate(0.363281 0.865234)"/>
+</clipPath>
+</defs>
+</svg>

public/img/treatment/treatment-3.svg

@@ -0,0 +1,13 @@
+<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_0_195)">
+<path d="M51.6309 9.15754C51.6309 13.1752 54.887 16.4345 58.903 16.4345C62.9271 16.4345 66.1816 13.1752 66.1816 9.15754C66.1816 5.14315 62.9271 1.88379 58.903 1.88379C54.887 1.88379 51.6309 5.14315 51.6309 9.15754Z" stroke="#545E65" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.1504 43.2061L24.5605 52.7368C24.5605 52.7368 13.5747 53.5015 9.64441 53.7311C6.63726 53.9073 4.82812 55.0309 4.82812 56.9807C4.82812 58.9305 6.3511 60.0267 10.6872 60.3743C14.3427 60.6669 26.8353 61.4284 26.8353 61.4284C26.8498 61.4284 26.8644 61.4284 26.8741 61.4284C28.334 61.4284 29.8634 60.654 30.8674 59.1714L37.2989 49.9867" stroke="#545E65" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M56.2256 51.1153L45.0636 43.4664L56.4213 25.2732C57.0712 24.3031 57.5239 21.7115 56.5555 21.0583L50.1758 16.7756C49.7312 16.394 49.1993 16.1014 48.5849 15.9672L35.8255 13.1928C34.8409 12.9891 33.8207 13.1815 32.9897 13.7409L22.4987 21.8441C20.7752 23.3363 19.1229 25.202 20.2595 26.8802C20.9886 27.9651 23.4784 27.3475 24.7848 26.5537L35.7964 20.7059L43.0459 22.2854L33.2694 36.8135C31.027 40.6953 30.2817 43.6896 34.3155 47.1251L48.2098 56.3131L42.4008 70.6537C40.2101 75.9097 40.603 78.6048 42.1033 79.2402C43.6037 79.8756 45.8105 79.1448 48.9293 73.4264L57.7615 56.5476C58.6281 54.6042 57.9814 52.3214 56.2256 51.1153V51.1153Z" stroke="#545E65" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M53.3838 31.0318L56.2002 37.7914C56.724 38.9684 57.9139 40.1114 59.1944 40.265C59.1944 40.265 68.1399 40.0726 70.5811 39.9384C73.1469 39.7994 76.0215 39.3176 76.0845 37.5602C76.1783 35.0413 73.8001 34.8554 71.4897 34.6889L62.4667 33.9225L57.1185 21.8018" stroke="#545E65" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_195">
+<rect width="81" height="81" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/img/treatment/treatment-4.svg

@@ -0,0 +1,10 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_0_207)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44.2348 27.8343C41.3992 27.8351 38.6147 28.5886 36.1657 30.018V17.7479C36.1657 9.9491 29.8435 3.62695 22.0448 3.62695C14.246 3.62695 7.92383 9.9491 7.92383 17.7479V45.9897C7.92383 51.8849 11.5842 57.1582 17.1053 59.2191C22.6243 61.2801 28.8449 59.6958 32.707 55.2446C37.8279 60.4816 45.8344 61.6114 52.2044 57.9957C58.5745 54.38 61.7091 46.9266 59.8379 39.845C57.9667 32.7634 51.5594 27.8313 44.2348 27.8342V27.8343ZM44.2348 31.8688C50.1349 31.8786 55.1697 36.1382 56.1569 41.9552H32.3127C33.2998 36.1381 38.3346 31.8786 44.2348 31.8688L44.2348 31.8688ZM11.9584 17.7479C11.9584 12.1773 16.4742 7.66151 22.0448 7.66151C27.6153 7.66151 32.1311 12.1773 32.1311 17.7479V29.8515H11.9584V17.7479ZM22.0447 56.0761C16.4769 56.0696 11.9649 51.5576 11.9584 45.9897V33.8861H31.6571C27.513 39.0207 26.9335 46.1682 30.1962 51.9034C28.3059 54.5216 25.274 56.0736 22.0448 56.0761H22.0447ZM44.2348 56.0761C38.3346 56.0663 33.2998 51.8068 32.3127 45.9897H56.1569C55.1697 51.8068 50.1349 56.0663 44.2348 56.0761Z" fill="#545E65"/>
+</g>
+<defs>
+<clipPath id="clip0_0_207">
+<rect width="64" height="64" fill="white"/>
+</clipPath>
+</defs>
+</svg>

resources/views/app/about-hem.blade.php

@@ -0,0 +1,189 @@
+@extends('layouts.app')
+@section('content')
+<div class="bg-light">
+    <div class="container pt-3">
+        <nav class="mb-0">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{route('index')}}"><u>Home</u></a></li>
+                <li class="breadcrumb-item active" aria-current="page">About hemorrhoids</li>
+            </ol>
+        </nav>
+    </div>
+</div>
+<div class="bg-grey">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-lg-6">
+                <div class="container py-5" style="max-width:700px">
+                  <div class="row align-items-center justify-content-end">
+                    <div class="col-xl-10 p-0 py-lg-4">
+                      <h4 class="subtitle mb-4">What are hemorrhoids?</h4>
+                      <p>Hemorrhoids emerge when the veins around your anus or your lower rectum get swollen and inflammed. It can be Internal and external.</p>
+                      <div class="row justify-content-between mt-5">
+                        <div class="col-xl-6">
+                          <h4 class="mb-3 fw-thin border-top border-white pt-4">External Hemorrhoids</h4>
+                          <p>External Hemorrhoids irritate under the skin around the rectum. Hemorrhoids are prevalent in both men and women and affects 1 in 20 Americans. It is mostly common in adults over the age of 50.</p>
+                        </div>
+                        <div class="col-xl-6">
+                          <h4 class="mb-3 border-top border-white pt-4 fw-thin">Internal Hemorrhoids</h4>
+                          <p>Internal Hemorrhoids irritate the lining of anus and lower rectum. </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+            </div>
+            <div class="col-lg-6 p-0 about-hem"></div>
+        </div>
+    </div>
+</div>
+<div class="container py-5">
+  <div class="row">
+    <div class="col-lg-3">
+      <h4 class="subtitle mb-3">What causes <br class="d-lg-block d-none"> hemorrhoids:</h4>
+      <a href="#" class="btn btn-pry">Learn more</a>
+    </div>
+    <div class="col-lg-4">
+      <a href="#" class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3 cause">
+        <div class="d-flex align-items-center">
+          <div class="">
+            <img src="{{asset('img/causes/cause-1.svg')}}" width="25" alt="">
+          </div>
+          <div class="ms-3">
+            <h5 class="m-0 mt-2">Low Fiber Diet</h5>
+          </div>
+        </div>
+        <h5 class="m-0 mt-2"><i class="ms-1 far fa-angle-right"></i></h5>
+      </a>
+      <a href="#" class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3 cause">
+        <div class="d-flex align-items-center">
+          <div class="">
+            <img src="{{asset('img/causes/cause-2.svg')}}" width="28" alt="">
+          </div>
+          <div class="ms-3">
+            <h5 class="m-0 mt-2">Constipation</h5>
+          </div>
+        </div>
+        <h5 class="m-0 mt-2"><i class="ms-1 far fa-angle-right"></i></h5>
+      </a>
+      <a href="#" class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3 cause">
+        <div class="d-flex align-items-center">
+          <div class="">
+            <img src="{{asset('img/causes/cause-3.svg')}}" width="25" alt="">
+          </div>
+          <div class="ms-3">
+            <h5 class="m-0 mt-2">Poor hydration</h5>
+          </div>
+        </div>
+        <h5 class="m-0 mt-2"><i class="ms-1 far fa-angle-right"></i></h5>
+      </a>
+    </div>
+    <div class="col-lg-4 offset-lg-1">
+      <a href="#" class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3 cause">
+        <div class="d-flex align-items-center">
+          <div class="">
+            <img src="{{asset('img/causes/cause-4.svg')}}" width="25" alt="">
+          </div>
+          <div class="ms-3">
+            <h5 class="m-0 mt-2">Longer time on Toilet</h5>
+          </div>
+        </div>
+        <h5 class="m-0 mt-2"><i class="ms-1 far fa-angle-right"></i></h5>
+      </a>
+      <a href="#" class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3 cause">
+        <div class="d-flex align-items-center">
+          <div class="">
+            <img src="{{asset('img/causes/cause-5.svg')}}" width="28" alt="">
+          </div>
+          <div class="ms-3">
+            <h5 class="m-0 mt-2">Pregnancy / Childbirth</h5>
+          </div>
+        </div>
+        <h5 class="m-0 mt-2"><i class="ms-1 far fa-angle-right"></i></h5>
+      </a>
+      <a href="#" class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3 cause">
+        <div class="d-flex align-items-center">
+          <div class="">
+            <img src="{{asset('img/causes/cause-6.svg')}}" width="25" alt="">
+          </div>
+          <div class="ms-3">
+            <h5 class="m-0 mt-2">Obesity</h5>
+          </div>
+        </div>
+        <h5 class="m-0 mt-2"><i class="ms-1 far fa-angle-right"></i></h5>
+      </a>
+    </div>
+  </div>
+</div>
+<div class="bg-light py-5">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-3">
+        <h4 class="subtitle mb-3">What are the <br class="d-lg-block d-none"> symptoms?</h4>
+      </div>
+      <div class="col-lg-9">
+        <div class="fx-symptoms">
+          <div class="d-center">
+            <img src="{{asset('img/symps/symp-1.svg')}}" class="w-75" alt="">
+            <p class="mt-2">Blood in stool</p>
+          </div>
+          <div class="d-center">
+            <img src="{{asset('img/symps/symp-2.svg')}}" class="w-75" alt="">
+            <p class="mt-2">Rectal pain</p>
+          </div>
+          <div class="d-center">
+            <img src="{{asset('img/symps/symp-3.svg')}}" class="w-75" alt="">
+            <p class="mt-2">Burning</p>
+          </div>
+          <div class="d-center">
+            <img src="{{asset('img/symps/symp-4.svg')}}" class="w-75" alt="">
+            <p class="mt-2">Itching</p>
+          </div>
+          <div class="d-center">
+            <img src="{{asset('img/symps/symp-5.svg')}}" class="w-75" alt="">
+            <p class="mt-2">Swelling around <br> anal canal</p>
+          </div>
+          <div class="d-center">
+            <img src="{{asset('img/symps/symp-6.svg')}}" class="w-75" alt="">
+            <p class="mt-2">Bulging of <br> tissue</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container py-5">
+  <h4 class="subtitle text-center mb-5">How to prevent hemorrhoids?</h4>
+  <div class="row">
+    <div class="col-lg-6">
+      <div class="pe-lg-4">
+        <img src="{{asset('img/prevent-hem.png')}}" class="w-100 mb-3" alt="">
+        <div class="border-top mt-4 py-4">
+          <h5 class="header mb-3">Stay physically active</h5>
+          <p>Moderate exercise has a positive effect on improving and preventing many bowel and digestive issues including hemorrhoids. When there is no movement of the body, there is no movement of the bowel. Exercise helps to avoid constipation. It can include walking, running, biking, yoga. Choice is yours to have an active lifestyle. In case you have hemorrhoids, please avoid heavy weight lifting squats that increase abdominal pressure as it can do more harm.</p>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6">
+      <div class="ps-lg-4">
+        <div class="border-top py-4">
+          <h5 class="header mb-3">Stay hydrated</h5>
+          <p class="m-0">Drinking plenty of water helps to prevent constipation which in turn reduces straining during the bowel movement. Most healthy people can stay well hydrated by drinking water and other fluids whenever they feel thirsty. For some people, fewer than 8 glasses may be enough. Other people may need more than 8 glasses each day.</p>
+        </div>
+        <div class="border-top mt-3 py-4">
+          <h5 class="header mb-3">Eat a healthy, high-fiber diet</h5>
+          <p class="m-0">Eating foods that are high in fiber can make stools softer and easier to pass and can help treat and prevent hemorrhoids. Recommended dietary fiber intake is 28 grams per day based on 2000 calories intake. Drinking water and other liquids can help the fiber in your diet work better. If constipation is  causing the hemorrhoids, try to avoid foods with less or no fiber such as cheese, chips, ice cream, fast food, meat, frozen prepared foods and processed microwavable dinners.</p>
+        </div>
+        <div class="border-top mt-3 py-4">
+          <h5 class="header mb-3">Timed bathroom trips</h5>
+          <p class="m-0">Don’t  take your phone or newspaper in the toilet. A timed bathroom trip can help to avoid longer time spent on the toilet seat.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="d-flex align-items-center justify-content-center my-4">
+    <a href="#" class="btn btn-pry">Treatment guide</a>
+    <a href="#" class="text-dark ms-5">Post-treatment care <i class="ms-2 fal fa-angle-right"></i> </a>
+  </div>
+</div>
+@endsection

resources/views/app/compare.blade.php

@@ -0,0 +1,158 @@
+@extends('layouts.app')
+@section('content')
+<div class="bg-light">
+    <div class="container pt-3">
+        <nav class="mb-0">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{route('index')}}"><u>Home</u></a></li>
+                <li class="breadcrumb-item active" aria-current="page">Comparing treatment options</li>
+            </ol>
+        </nav>
+    </div>
+</div>
+<div class="bg-grey py-5">
+  <div class="container py-lg-4">
+    <div class="row justify-content-center">
+      <div class="col-lg-7 text-center">
+        <h5 class="subtitle">Comparing treatment options</h5>
+        <p>Hemorrhoids get treated at doctors' offices with different treatment options. Synder Hemband ligation treatment is the most effective, fast, and painless treatment compared to other treatments. It has the least complications and hemorrhoids are less likely to come back than other treatments.</p>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container py-5">
+  <div class="row justify-content-center">
+    <div class="col-lg-7 py-lg-4 text-center">
+      <h5 class="subtitle mb-4">Treatment comparisons:</h5>
+    </div>
+  </div>
+  <div class="mt-4 col-lg-12">
+    <div class="table-responsive">
+      <table class="table table-bordered">
+        <thead>
+          <tr class="bg-light text-center">
+            <th></th>
+            <th><h5 class="m-0 my-3">Success rate</h5></th>
+            <th><h5 class="m-0 my-3">Recurrence rate</h5></th>
+            <th><h5 class="m-0 my-3">Complications</h5></th>
+            <th><h5 class="m-0 my-3">Pain level</h5></th>
+            <th><h5 class="m-0 my-3">Treatment time</h5></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="p-0">
+              <div class="bg-grey center p-4">
+                <h5 class="mb-1">Snyder Hemband</h5>
+                <small class="m-0">(Rubber band ligation)</small>
+              </div>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;background:#0276CF;vertical-align:middle;">
+              <p class="m-0 text-white">92%</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;background:#0276CF;vertical-align:middle;">
+              <p class="m-0 text-white">8%</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;background:#0276CF;vertical-align:middle;">
+              <p class="m-0 text-white">Uncommon and benign</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;background:#0276CF;vertical-align:middle;">
+              <p class="m-0 text-white">Low</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;background:#0276CF;vertical-align:middle;">
+              <p class="m-0 text-white">> 1 minute</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="px-4 py-3" style="width:200px;vertical-align:middle;">
+              <h5 class="mb-1">Infrared Coagulation</h5>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">68%</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">6%</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">Bleeding, pain</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">Low</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">Up to 3 minutes</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="px-4 py-3" style="width:200px;vertical-align:middle;">
+              <h5 class="mb-1">Sclerotherapy</h5>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">90%</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">30%</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">Pain,Impotence,urinary retention, and abscess formation </p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">Medium</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">15-20 minutes</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="px-4 py-3" style="width:200px;vertical-align:middle;">
+              <h5 class="mb-1">Stapled Hemorhoidectomy</h5>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">75-88%</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">36%</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">Pain, urinary retention, anal stenosis, and incontinence.</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">High</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">30-90 minutes</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="px-4 py-3" style="width:200px;vertical-align:middle;">
+              <h5 class="mb-1">Hemorrhoidal <br class="d-lg-block d-none"> Artery Ligation</h5>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">74%</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">24%</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">Pain, bleeding, constipation, difficulty urinating</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">High</p>
+            </td>
+            <td class="px-4 py-3 text-center" style="width:200px;vertical-align:middle;">
+              <p class="m-0 text-muted">30-60 minutes</p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="mt-4 d-flex justify-content-center align-items-center">
+        <div class="">
+          <img src="{{asset('img/medscape.svg')}}" class="w-100" alt="">
+        </div>
+        <span class="mx-3">|</span>
+        <span>Source: Medscape website</span>
+    </div>
+  </div>
+</div>
+@endsection

resources/views/app/contact.blade.php

@@ -0,0 +1,21 @@
+@extends('layouts.app')
+@section('content')
+<div class="bg-light">
+    <div class="container pt-3">
+        <nav class="mb-0">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{route('index')}}"><u>Home</u></a></li>
+                <li class="breadcrumb-item active" aria-current="page">Contact us</li>
+            </ol>
+        </nav>
+    </div>
+</div>
+<div class="container py-5">
+  <div class="row justify-content-center">
+    <div class="col-lg-7 text-center">
+      <h5 class="subtitle">Comparing treatment options</h5>
+      <p>Hemorrhoids get treated at doctors' offices with different treatment options. Synder Hemband ligation treatment is the most effective, fast, and painless treatment compared to other treatments. It has the least complications and hemorrhoids are less likely to come back than other treatments.</p>
+    </div>
+  </div>
+</div>
+@endsection

resources/views/app/index.blade.php

@@ -192,7 +192,7 @@
       <p class="text-justify border-bottom pb-4">Ligation process treats bleeding or prolapsing internal hemorrhoids. In this procedure, a doctor places a special rubber band (non-latex option is available on request) around the base of the hemorrhoids in an outpatient clinic setting or hospital.Use of anascope is optional based on discretion of physicians. No pre-procedure such as anesthesia or sterilization is required.</p>
     </div>
     <div class="col-lg-4 p-4">
-      <h4 class="mb-3">2. Destroying hemerrhoids</h4>
+      <h4 class="mb-3">2. Destroying hemorrhoids</h4>
       <p class="text-justify border-bottom pb-4">The blood supply gets cut off and the banded part of hemorrhoid dries up and falls off mostly within a week. Scar tissue left behind gets healed by itself. A trained doctor performs this procedure and one should never try to do it by himself.</p>
     </div>
     <div class="col-lg-4 p-4">

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

@@ -0,0 +1,117 @@
+@extends('layouts.app')
+@section('content')
+<div class="bg-light">
+    <div class="container pt-3">
+        <nav class="mb-0">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{route('index')}}"><u>Home</u></a></li>
+                <li class="breadcrumb-item active" aria-current="page">Your treatment with Snyder Hemband</li>
+            </ol>
+        </nav>
+    </div>
+</div>
+<div class="bg-grey py-5">
+  <div class="container py-lg-4">
+    <div class="row align-items-center">
+      <div class="col-lg-4">
+        <h5 class="title mb-4">Your treatment with Synder Hemband</h5>
+        <p>A small rubber band is placed around the base of a hemorrhoid using Synder 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>
+      </div>
+      <div class="col-lg-7 offset-lg-1">
+        <img src="{{asset('img/pc-top.png')}}" class="w-100" alt="">
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container py-5">
+  <div class="row">
+    <div class="col-lg-8 offset-lg-2 mb-lg-5 mt-lg-3">
+      <h5 class="subtitle text-center mb-4">Frequently asked questions</h5>
+      <div class="accordion" id="faq">
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="faqOne">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqContentOne" aria-expanded="false" aria-controls="faqContentOne">
+              Can Synder Hemband work for me?
+            </button>
+          </h2>
+          <div id="faqContentOne" class="accordion-collapse collapse" aria-labelledby="faqOne" data-bs-parent="#faq">
+            <div class="accordion-body">...</div>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="faqTwo">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqContentTwo" aria-expanded="false" aria-controls="faqContentTwo">
+              How long will the procedure take?
+            </button>
+          </h2>
+          <div id="faqContentTwo" class="accordion-collapse collapse" aria-labelledby="faqTwo" data-bs-parent="#faq">
+            <div class="accordion-body">...</div>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="faqThree">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqContentThree" aria-expanded="false" aria-controls="faqContentThree">
+              Does it require multiple treatments?
+            </button>
+          </h2>
+          <div id="faqContentThree" class="accordion-collapse collapse" aria-labelledby="faqThree" data-bs-parent="#faq">
+            <div class="accordion-body">...</div>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="faqFour">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqContentFour" aria-expanded="false" aria-controls="faqContentFour">
+              What type of preparation/recovery should be expected?
+            </button>
+          </h2>
+          <div id="faqContentFour" class="accordion-collapse collapse" aria-labelledby="faqFour" data-bs-parent="#faq">
+            <div class="accordion-body">...</div>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="faqFivee">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqContentFivee" aria-expanded="false" aria-controls="faqContentFivee">
+              How much does hemorrhoid banding with the Synder Hemband cost?
+            </button>
+          </h2>
+          <div id="faqContentFivee" class="accordion-collapse collapse" aria-labelledby="faqFivee" data-bs-parent="#faq">
+            <div class="accordion-body">...</div>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="faqFive">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqContentFive" aria-expanded="false" aria-controls="faqContentFive">
+              How is this different from traditional Rubber Band Ligation?
+            </button>
+          </h2>
+          <div id="faqContentFive" class="accordion-collapse collapse" aria-labelledby="faqFive" data-bs-parent="#faq">
+            <div class="accordion-body">...</div>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="faqSix">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqContentSix" aria-expanded="false" aria-controls="faqContentSix">
+              What should I do if I have discomfort/ cramping in the pelvic area?
+            </button>
+          </h2>
+          <div id="faqContentSix" class="accordion-collapse collapse" aria-labelledby="faqSix" data-bs-parent="#faq">
+            <div class="accordion-body">...</div>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <h2 class="accordion-header" id="faqSeven">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqContentSeven" aria-expanded="false" aria-controls="faqContentSeven">
+              When should I contact my doctor?
+            </button>
+          </h2>
+          <div id="faqContentSeven" class="accordion-collapse collapse" aria-labelledby="faqSeven" data-bs-parent="#faq">
+            <div class="accordion-body">...</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+@endsection

resources/views/app/snyder.blade.php

@@ -0,0 +1,134 @@
+@extends('layouts.app')
+@section('content')
+<div class="bg-light pb-5">
+    <div class="container pt-3">
+        <nav class="mb-0">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{route('index')}}"><u>Home</u></a></li>
+                <li class="breadcrumb-item active" aria-current="page">Snyder Hemband</li>
+            </ol>
+        </nav>
+    </div>
+    <hr>
+    <div class="py-5 mb-4">
+        <div class="text-center">
+            <h4 class="title mb-3">Snyder Hemband</h4>
+            <p class="mb-4">Snyder hemband is a device for treating hemorrhoids. The components of this device <br class="d-lg-block d-none"> include an inner tube, plunger, outer tube, thumb pusher, loading device, and elastic band.</p>
+            <a href="#" class="btn btn-pry py-2">Order now</a>
+            <a href="#" class="btn btn-secondary rounded-0 py-2 px-5 ms-4">Benefits</a>
+        </div>
+    </div>
+</div>
+<div class="container">
+    <div class="border bg-white p-5 text-center position-relative" style="top:-80px">
+        <img src="{{asset('img/snyder.png')}}" class="w-75" alt="">
+    </div>
+    <div class="row position-relative" style="top:-40px;margin-bottom:-40px">
+        <div class="col-lg-5">
+            <h4 class="subtitle mb-3">Benefits of using our product:</h4>
+        </div>
+        <div class="col-lg-6 offset-lg-1">
+            <div class="row mb-lg-4">
+                <div class="col-lg-5">
+                    <img src="{{asset('img/benefits/ben-1.svg')}}" width="45" alt="">
+                    <p class="mt-2">No sedation is required prior to treatment</p>
+                </div>
+                <div class="col-lg-5 offset-lg-2">
+                    <img src="{{asset('img/benefits/ben-2.svg')}}" width="45" alt="">
+                    <p class="mt-2">It causes no pain</p>
+                </div>
+            </div>
+            <div class="row mb-lg-4">
+                <div class="col-lg-5">
+                    <img src="{{asset('img/benefits/ben-3.svg')}}" width="45" alt="">
+                    <p class="mt-3">It has a great success rate as it prevents early deployment of elastic bands.</p>
+                </div>
+                <div class="col-lg-5 offset-lg-2">
+                    <img src="{{asset('img/benefits/ben-4.svg')}}" width="45" alt="">
+                    <p class="mt-3">Latex free option of elastic band is available for those allergic to latex.</p>
+                </div>
+            </div>
+            <div class="row mb-lg-4">
+                <div class="col-lg-5">
+                    <img src="{{asset('img/benefits/ben-5.svg')}}" width="45" alt="">
+                    <p class="mt-3">Proper grip mechanism makes the treatment quicker than other ligation treatment.</p>
+                </div>
+                <div class="col-lg-5 offset-lg-2">
+                    <img src="{{asset('img/benefits/ben-6.svg')}}" width="45" alt="">
+                    <p class="mt-3">Treatment is covered by most insurance providers.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="bg-grey py-5">
+    <div class="container">
+        <div class="row justify-content-center text-center">
+            <div class="col-lg-7">
+                <h4 class="subtitle">How does Snyder Hemband work?</h4>
+                <p class="pb-3">Snyder Hemband is the system which allows a physician to place a gentle medical rubber band safely around the base of hemorrhoids. The soft rubber band generates the compression around the hemorrhoids reducing the
+                    blood supply which causes it to shrink and eventually fall off. It is a painless procedure with little discomfort occasionally. The banding is done above the dentate line, a section of rectum with a very low number of
+                    pain-sensitive nerves making the procedure painless. The rubber band is placed around the hemorrhoid in less than a minute. </p>
+                <div class="my-4">
+                    <img src="{{asset('img/hiw.png')}}" class="w-100" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container py-5">
+    <div class="row">
+      <div class="col-lg-12 text-center">
+        <h4 class="title mb-5 pb-3">After treatment Care</h4>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-6 mb-lg-5 mb-4">
+        <div class="d-flex align-items-start">
+          <div class="me-lg-4">
+            <img src="{{asset('img/treatment/treatment-1.svg')}}" width="70" alt="">
+          </div>
+          <div class="">
+            <h4 class="header">Work toward healthy bowel movements</h4>
+            <p>Maintain regularity of bowel movements and prevent constipation by following a diet as recommended by your physician. To promote better healing and stop hemorrhoids from forming again, it is vital that you keep your stool soft. Avoid straining during a bowel movement.</p>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-6 mb-lg-5 mb-4">
+        <div class="d-flex align-items-start">
+          <div class="me-lg-4">
+            <img src="{{asset('img/treatment/treatment-2.svg')}}" width="50" alt="">
+          </div>
+          <div class="">
+            <h4 class="header">Monitor what you eat</h4>
+            <p>Follow your doctor’s directions. Drinking 8-10 glasses of water is important. A high-fiber diet that includes vegetables also is key. Your physician may suggest regular use of fiber supplements, and remember: You must drink plenty of fluids when you use fiber supplements.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-6 mb-4">
+        <div class="d-flex align-items-start">
+          <div class="me-lg-4">
+            <img src="{{asset('img/treatment/treatment-3.svg')}}" width="60" alt="">
+          </div>
+          <div class="">
+            <h4 class="header">Be mindful of exercise</h4>
+            <p>After Snyder HemBand treatment, refrain from heavy lifting and strenuous exercise for the next 2-3 days. It’s also important to avoid sitting for long periods of time - you should stand up and walk every couple of hours. Maintain a regular exercise routine and a healthy weight to help avoid recurrence of hemorrhoids.</p>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-6 mb-4">
+        <div class="d-flex align-items-start">
+          <div class="me-lg-4">
+            <img src="{{asset('img/treatment/treatment-4.svg')}}" width="50" alt="">
+          </div>
+          <div class="">
+            <h4 class="header">Use medications carefully</h4>
+            <p>Continue to take your regular medications as prescribed. Check with your physician about medications that could cause constipation or diarrhea. Unless your doctor directs you to do so, do not insert medication inside your rectum.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
+@endsection

resources/views/app/treatment.blade.php

@@ -0,0 +1,132 @@
+@extends('layouts.app')
+@section('content')
+<div class="bg-light">
+    <div class="container pt-3">
+        <nav class="mb-0">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{route('index')}}"><u>Home</u></a></li>
+                <li class="breadcrumb-item active" aria-current="page">Treatment guide</li>
+            </ol>
+        </nav>
+    </div>
+</div>
+<div class="bg-grey py-5">
+  <div class="container py-lg-4">
+    <div class="row">
+      <div class="col-lg-4">
+        <h5 class="subtitle">Treatment guide</h5>
+        <p>Hemorrhoids can most often be treat at home by:</p>
+      </div>
+      <div class="col-lg-4">
+        <div class="d-flex align-items-start mb-4 mt-lg-3">
+          <div class="">
+            <img src="{{asset('img/tt-guide/guide-1.svg')}}" class="guide-img" alt="">
+          </div>
+          <div class="ms-4">
+            <p class="m-0">Eating high-fiber containing foods</p>
+          </div>
+        </div>
+        <div class="d-flex align-items-start mb-4">
+          <div class="">
+            <img src="{{asset('img/tt-guide/guide-2.svg')}}" class="guide-img" alt="">
+          </div>
+          <div class="ms-4">
+            <p class="m-0">Taking a stool softener or a fiber supplement such as psyllium</p>
+          </div>
+        </div>
+        <div class="d-flex align-items-start mb-4">
+          <div class="">
+            <img src="{{asset('img/tt-guide/guide-3.svg')}}" class="guide-img" alt="">
+          </div>
+          <div class="ms-4">
+            <p class="m-0">Staying hydrated as recommended by your health care professional</p>
+          </div>
+        </div>
+        <div class="d-flex align-items-start mb-4">
+          <div class="">
+            <img src="{{asset('img/tt-guide/guide-4.svg')}}" class="guide-img" alt="">
+          </div>
+          <div class="ms-4">
+            <p class="m-0">Avoid straining during bowel movements</p>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-4">
+        <div class="d-flex align-items-start mb-4 mt-lg-3">
+          <div class="">
+            <img src="{{asset('img/tt-guide/guide-5.svg')}}" class="guide-img" alt="">
+          </div>
+          <div class="ms-4">
+            <p class="m-0">Avoid long periods of time on the toilet.</p>
+          </div>
+        </div>
+        <div class="d-flex align-items-start mb-4">
+          <div class="">
+            <img src="{{asset('img/tt-guide/guide-6.svg')}}" class="guide-img" alt="">
+          </div>
+          <div class="ms-4">
+            <p class="m-0">Taking over-the-counter pain relievers such as acetaminophen, ibuprofen, naproxen, or aspirin</p>
+          </div>
+        </div>
+        <div class="d-flex align-items-start mb-4">
+          <div class="">
+            <img src="{{asset('img/tt-guide/guide-7.svg')}}" class="guide-img" alt="">
+          </div>
+          <div class="ms-4">
+            <p class="m-0">Sitting in a tub of warm water, called a sitz bath, several times a day to help relieve pain</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container py-5">
+  <div class="row justify-content-center">
+    <div class="col-lg-7 pb-lg-5 pt-lg-3 text-center">
+      <p>Most often, doctors advise using over-the-counter products for 1 week. Follow up with your doctor if there is no relief in your symptoms after 1 week and/or your symptoms have worsened. Most prolapsed internal hemorrhoids go away without at-home treatment. However, severely prolapsed or bleeding internal hemorrhoids may need medical treatment.</p>
+    </div>
+    <hr>
+    <div class="col-lg-7 pt-lg-4 text-center">
+      <h5 class="subtitle mb-3">How do doctors <br class="d-lg-block d-none"> treat hemorrhoids?</h5>
+      <p>Hemorrhoids are treated by a doctor during an office visit or in an outpatient center or in a hospital. <br> The following procedures can be done in an office setting</p>
+    </div>
+  </div>
+  <div class="mt-4 col-lg-12">
+    <div class="tt-container">
+      <div class="w-100 p-lg-5 p-4 d-flex flex-column">
+        <h5 class="header mb-3">Rubber band ligation</h5>
+        <p class="mb-4">Ligation treatment is used by doctors to treat bleeding or prolapsing internal hemorrhoids. In this treatment, a doctor places a special rubber band around the base of the hemorrhoids. The blood supply gets cut off and the banded part of the hemorrhoid dries up and falls off within a week mostly. Scar tissue left behind gets healed by itself. This procedure is performed by trained doctors and one should never try to do it by himself.</p>
+        <a href="#" class="text-white mt-auto text-end">Learn more <i class="fal fa-angle-right"></i></a>
+      </div>
+      <div class="w-100 p-lg-5 p-4 d-flex flex-column">
+        <h5 class="header mb-3">Sclerotherapy</h5>
+        <p class="mb-4">A solution is injected into the internal hemorrhoid by a doctor, which causes scar tissue to form. The scar tissue cuts off the blood supply, often shrinking hemorrhoids.</p>
+        <a href="#" class="text-white mt-auto text-end">Learn more <i class="fal fa-angle-right"></i></a>
+      </div>
+      <div class="w-100 p-lg-5 p-4 d-flex flex-column">
+        <h5 class="header mb-3">Infrared photocoagulation</h5>
+        <p class="mb-4"> In this, a doctor utilizes a tool that directs infrared light at the internal hemorrhoid. The heat created by the infrared light causes scar tissue to form, which cuts off the blood supply, often shrinking hemorrhoids.</p>
+        <a href="#" class="text-white mt-auto text-end">Learn more <i class="fal fa-angle-right"></i></a>
+      </div>
+      <div class="w-100 p-lg-5 p-4 d-flex flex-column">
+        <h5 class="header mb-3">Rubber band ligation</h5>
+        <p class="mb-4">A doctor uses a tool that sends an electric current into the internal hemorrhoid. The electric current causes scar tissue to form, which cuts off the blood supply, often shrinking hemorrhoids.</p>
+        <a href="#" class="text-dark mt-auto text-end">Learn more <i class="fal fa-angle-right"></i></a>
+      </div>
+    </div>
+    <p class="mt-5 mb-0 text-center">The following procedures can be done in an outpatient center or hospital treatments.</p>
+  </div>
+</div>
+<div class="container pb-5 mb-4">
+  <div class="row">
+    <div class="col-lg-6 bg-grey p-md-5 p-4">
+      <h5 class="header mb-3">Hemorrhoidectomy</h5>
+      <p>A surgeon performs surgery in which the large external hemorrhoids and prolapsing internal hemorrhoids resistant to non-surgical treatments are removed. Anesthesia is required before performing a hemorrhoidectomy. The risk of surgical complications is associated. </p>
+    </div>
+    <div class="col-lg-6 bg-light p-md-5 p-4">
+      <h5 class="header mb-3">Hemorrhoid stapling</h5>
+      <p>A surgeon removes internal hemorrhoid tissue by using a staple and pulls a prolapsing internal hemorrhoid back into the anus. Anesthesia is required before performing a hemorrhoidectomy. The risk of surgical complications is associated. </p>
+    </div>
+  </div>
+</div>
+@endsection

resources/views/layouts/app.blade.php

@@ -43,23 +43,38 @@
                     <div class="collapse navbar-collapse" id="navBar">
                         <ul class="navbar-nav ms-auto align-items-lg-center">
                             <li class="nav-item">
-                                <a class="nav-link" href="{{ route('index') }}">Synder Hemband</a>
+                                <a class="nav-link" href="{{ route('snyderhemband') }}">Synder Hemband</a>
                             </li>
                             <li class="nav-item dropdown">
                               <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                 Hemorrhoids
                               </a>
                               <ul class="dropdown-menu dropdown-menu-end p-0">
-                                <li><a class="dropdown-item" href="#">Action</a></li>
-                                <li><a class="dropdown-item" href="#">Another action</a></li>
-                                <li><a class="dropdown-item" href="#">Something else here</a></li>
+                                <li>
+                                  <a class="dropdown-item" href="{{route('aboutHem')}}">
+                                    <h6 class="mb-1">About hemorrhoids</h6>
+                                    <small>What are hemorrhoids? All you need to know</small>
+                                  </a>
+                                </li>
+                                <li>
+                                  <a class="dropdown-item" href="{{route('treatment')}}">
+                                    <h6 class="mb-1">Treatment guide</h6>
+                                    <small>Let’s learn a bit more about Synder Hemband.</small>
+                                  </a>
+                                </li>
+                                <li>
+                                  <a class="dropdown-item" href="{{route('postCare')}}">
+                                    <h6 class="mb-1">Post-treatment care</h6>
+                                    <small>All questions answered.</small>
+                                  </a>
+                                </li>
                               </ul>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link" href="{{ route('index') }}">Comparing treatment options</a>
+                                <a class="nav-link" href="{{ route('compare') }}">Comparing treatment options</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link" href="{{ route('index') }}">Contact us</a>
+                                <a class="nav-link" href="{{ route('contact') }}">Contact us</a>
                             </li>
                             <li class="nav-item d-lg-block d-none">
                                 <a class="btn px-4 py-2 rounded-0 btn-pry" href="{{ route('index') }}">Order Now</a>
@@ -94,7 +109,7 @@
         <div class="container">
           <div class="d-flex align-items-center justify-content-between">
             <h4 class="header m-0">Considering Snyder Hemband? Reach out!</h4>
-            <a href="#" class="btn btn-pry px-5">Contact us</a>
+            <a href="{{route('contact')}}" class="btn btn-pry px-5">Contact us</a>
           </div>
         </div>
       </div>
@@ -112,12 +127,12 @@
                   </a>
 
                   <ul class="dropdown-menu">
-                    <li><a class="dropdown-item" href="#">Action</a></li>
-                    <li><a class="dropdown-item" href="#">Another action</a></li>
-                    <li><a class="dropdown-item" href="#">Something else here</a></li>
+                    <li><a class="dropdown-item" href="{{route('aboutHem')}}">About hemorrhoids</a></li>
+                    <li><a class="dropdown-item" href="{{route('treatment')}}">Treatment guide</a></li>
+                    <li><a class="dropdown-item" href="{{route('postCare')}}">Your treatment with Snyder Hemband</a></li>
                   </ul>
                 </div>
-                <p class="mb-4"><a href="#" class="text-white">Comparing treatment options</a></p>
+                <p class="mb-4"><a href="{{route('compare')}}" class="text-white">Comparing treatment options</a></p>
               </div>
               <div class="col-lg-3">
                 <p class="mb-4"><a href="#" class="text-white">For patients</a></p>
@@ -126,7 +141,7 @@
                 <p class="mb-4"><a href="#" class="text-white">Register</a></p>
               </div>
               <div class="col-lg-3">
-                <p class="mb-4"><a href="#" class="text-white">Contact form</a></p>
+                <p class="mb-4"><a href="{{route('contact')}}" class="text-white">Contact form</a></p>
                 <p class="mb-4"><a href="#" class="text-white">info@snyderhemband.org</a></p>
                 <p class="mb-4"><a href="#" class="text-white">+XXX XXX XXX</a></p>
               </div>

routes/web.php

@@ -14,3 +14,9 @@ use App\Http\Controllers\AppController;
 */
 
 Route::get('/', [AppController::class, 'index'])->name('index');
+Route::get('/snyder-hemband', [AppController::class, 'snyderhemband'])->name('snyderhemband');
+Route::get('/about-hemorrhoids', [AppController::class, 'aboutHem'])->name('aboutHem');
+Route::get('/treatment-guide', [AppController::class, 'treatment'])->name('treatment');
+Route::get('/post-treatment-care', [AppController::class, 'postCare'])->name('postCare');
+Route::get('/comparing-treatment-options', [AppController::class, 'compare'])->name('compare');
+Route::get('/contact-us', [AppController::class, 'contact'])->name('contact');