Current File : /home/quantums/alhidayamaintenance.com/wp-content/themes/eyecraftersny-child/page-treatment.php |
<?php
/**
* The template name:blepharitis page
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since Twenty Twenty-One 1.0
*/
get_header();
?>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<section class="behabanner">
<div class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-sm-3">
<div class="behatext ps-sm-5">
<div class="img-box">
<img src="<?php echo home_url(); ?>/wp-content/uploads/2023/03/optilight-icon.png" alt="optilight-image" class="img-fluid w-50 mb-3">
<?php the_contnet(); ?>
</div>
</div>
</div>
<div class="col-md-9">
<?php echo get_field('treatments_youtube_1'); ?>
</div>
</div>
</div>
</section>
<section class="fivebox ttmnt py-5" style="background: url(<?php home_url(); ?>/wp-content/uploads/2023/03/optilight-elevating-bg.png); background-size: cover; background-position: center; background-repeat: no-repeat;">
<div class="container">
<div class="row row-cols-md-3 row-cols-sm-2 row-cols-1 justify-content-center gy-sm-4 bg-light p-sm-5">
<div class="col-lg-12 text-center mb-5">
<h3 class="text-danger"><?php echo get_field('optilight_treatment_title_name'); ?></h3>
<h2><?php echo get_field('optilight_treatment_sub_title_name'); ?></h2>
</div>
<?php if( have_rows('grid_section') ):
while( have_rows('grid_section') ) : the_row();
$icon = get_sub_field('icon');
$content = get_sub_field('content');
?>
<div class="col">
<div class="card p-3 text-center border-0 shadow rounded-0 h-100">
<div class="img-area">
<img src="<?php echo $icon; ?>" alt="fimage" class="tmtcon">
</div>
<div class="card-body text-center">
<p class="text-dark"><?php echo $content; ?></p>
</div>
</div>
</div>
<?php endwhile; endif; ?>
</div>
</div>
</section>
<section class="evalutt py-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-3 px-sm-5">
<div class="clinictext">
<h2 class="">EVALUATE <br> YOURSELF</h2>
<h5>do you suffer from signs of dry eye?</h5>
</div>
</div>
<div class="col-sm-9 bg-red">
<div class="d-flex align-items-start evatab">
<div class="nav flex-column nav-pills me-3 align-items-center" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active bg-light rounded-circle fs-4 text-danger" id="v-pills-one-tab" data-bs-toggle="pill" data-bs-target="#v-pills-one">1</a>
<a class="nav-link bg-light rounded-circle fs-4 text-danger" id="v-pills-two-tab" data-bs-toggle="pill" data-bs-target="#v-pills-two">2</a>
<a class="nav-link bg-light rounded-circle fs-4 text-danger" id="v-pills-three-tab" data-bs-toggle="pill" data-bs-target="#v-pills-three">3</a>
<a class="nav-link bg-light rounded-circle fs-4 text-danger" id="v-pills-four-tab" data-bs-toggle="pill" data-bs-target="#v-pills-four">4</a>
<a class="nav-link bg-light rounded-circle fs-4 text-danger" id="v-pills-five-tab" data-bs-toggle="pill" data-bs-target="#v-pills-five">5</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-one" role="tabpanel" aria-labelledby="v-pills-one-tab" tabindex="0">
<div class="freqtbox p-5">
<h2 class="text-white mb-4">How frequently do you suffer from burning, itching or gritty eyes?</h2>
<form action="">
<div class="form-check mb-3">
<input class="form-check-input" class="border-0" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label fw-bold text-white" for="flexRadioDefault1">
Rarely
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" class="border-0" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault2">
Once a week or less
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" class="border-0" type="radio" name="flexRadioDefault" id="flexRadioDefault3" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault3">
Several times a week
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" class="border-0" type="radio" name="flexRadioDefault" id="flexRadioDefault4" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault4">
Every day
</label>
</div>
</form>
<button type="button" class="btn btn-dark nxtbtn fs-5 py-1 px-4 rounded-0 d-table ms-auto mt-5 rounded-pill">Next</button>
</div>
</div>
<div class="tab-pane fade" id="v-pills-two" role="tabpanel" aria-labelledby="v-pills-two-tab" tabindex="0">
<div class="freqtbox p-5">
<h2 class="text-white mb-4">How frequently do you suffer from burning, itching or gritty eyes?</h2>
<form action="">
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label fw-bold text-white" for="flexRadioDefault1">
Rarely
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault2">
Once a week or less
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault3">
Several times a week
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault4" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault4">
Every day
</label>
</div>
</form>
<button type="button" class="btn btn-dark nxtbtn fs-5 py-1 px-4 rounded-0 d-table ms-auto mt-5 rounded-pill">Next</button>
</div>
</div>
<div class="tab-pane fade" id="v-pills-three" role="tabpanel" aria-labelledby="v-pills-three-tab" tabindex="0">
<div class="freqtbox p-5">
<h2 class="text-white mb-4">How frequently do you suffer from burning, itching or gritty eyes?</h2>
<form action="">
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label fw-bold text-white" for="flexRadioDefault1">
Rarely
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault2">
Once a week or less
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault3">
Several times a week
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault4" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault4">
Every day
</label>
</div>
</form>
<button type="button" class="btn btn-dark nxtbtn fs-5 py-1 px-4 rounded-0 d-table ms-auto mt-5 rounded-pill">Next</button>
</div>
</div>
<div class="tab-pane fade" id="v-pills-four" role="tabpanel" aria-labelledby="v-pills-four-tab" tabindex="0">
<div class="freqtbox p-5">
<h2 class="text-white mb-4">How frequently do you suffer from burning, itching or gritty eyes?</h2>
<form action="">
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label fw-bold text-white" for="flexRadioDefault1">
Rarely
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault2">
Once a week or less
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault3">
Several times a week
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault4" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault4">
Every day
</label>
</div>
</form>
<button type="button" class="btn btn-dark nxtbtn fs-5 py-1 px-4 rounded-0 d-table ms-auto mt-5 rounded-pill">Next</button>
</div>
</div>
<div class="tab-pane fade" id="v-pills-five" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">
<div class="freqtbox p-5">
<h2 class="text-white mb-4">How frequently do you suffer from burning, itching or gritty eyes?</h2>
<form action="">
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label fw-bold text-white" for="flexRadioDefault1">
Rarely
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault2">
Once a week or less
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault3">
Several times a week
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault4" checked>
<label class="form-check-label fw-bold text-white" for="flexRadioDefault4">
Every day
</label>
</div>
</form>
<button type="button" class="btn btn-dark nxtbtn fs-5 py-1 px-4 rounded-0 d-table ms-auto mt-5 rounded-pill">Next</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="fqss space" style="background: url(<?php echo home_url(); ?>/wp-content/uploads/2023/03/optilight-elevating-bg.png); background-size: cover; background-position: center; background-repeat: no-repeat;">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card bg-light border-0 p-5">
<h2 class="text-danger mb-4 text-center">FAQs</h2>
<div class="tabgroup">
<div class="accordion" id="accordionExample">
<?php if( have_rows('faqs') ): $countslider = 1;
while( have_rows('faqs') ) : the_row();
$faqs_title_name = get_sub_field('faqs_title_name');
$faqs_content = get_sub_field('faqs_content');
?>
<div class="accordion-item border-0 border-bottom border-danger bg-transparent rounded-0">
<h2 class="accordion-header border-0" id="headingOne">
<button class="accordion-button text-danger border-0 bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<?php echo $faqs_title_name; ?>
</button>
</h2>
<div id="collapse<?php echo $countslider; ?>" class="accordion-collapse collapse <?php if($countslider == 1) { ?> show <?php } ?>" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body bg-transparent">
<p><?php echo $faqs_content; ?></p>
</div>
</div>
</div>
<?php endwhile; endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="optvdo space">
<div class="container">
<div class="row align-items-center">
<div class="col-sm-3">
<h2> <?php echo get_field('the_optilight_title_name'); ?></h2>
</div>
<div class="col-sm-9">
<?php echo get_field('the_optilight_youtube'); ?>
</div>
</div>
</div>
</section>
<?php
get_footer();
?>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>