@extends('frontend.layouts.app')

@section('content')
{{-- marif code start here  --}}
<div style="height:660px" class="th-hero-wrapper hero-4" id="hero">
  <div class="th-hero-bg" data-bg-src="assets/img/hero/hero_bg_4_1.jpg"></div>
  <div class="container z-index-common">
  
    <div class="row">
      <div class="col-lg-6">
        <div class="hero-style4">
        @if($banner && $banner->title)
        <span class="hero-subtitle">{{$banner->title}}</span>
        @else
        <span class="hero-subtitle">Your Pathway to Medical Excellence</span>
        @endif
        @if($banner && $banner->sub_title)
        <h1 class="hero-title">{{$banner->sub_title}}<span class="text-theme">!</span></h1>
        @else
        <h1 class="hero-title">The Future of 
        Learning, Now<span class="text-theme">!</span></h1>
        @endif
        @if($banner && $banner->description)
        <p class="hero-text">{{$banner->description}}</p>
        @else
        <p class="hero-text">1000+ Doctors have already achieved their goals. Let Med Exam Pass guide you. Sign  up to our course to start your exam preparation today.</p>
        @endif
        
          
          
          <form class="search-form">
            <div class="form-group"><i class="far fa-search"></i> <input type="text"
                placeholder="What do you need to learn?"></div><button class="th-btn"
              type="submit">Search Now <i class="fas fa-arrow-right ms-1"></i></button>
          </form>
        </div>
      </div>
      <div class="col-lg-6 text-end">
        <div class="hero-img4">
        @if($banner && $banner->image)
        <img style="height:700px" src="{{ asset('frontend/assets/images/banner/' . $banner->image) }}" alt="hero">

        @else
        <img src="{{asset('/frontend/assets/images/hero2.jpg')}}" alt="hero">
        @endif
          
         
          <div class="img2 jump"><img src="{{asset('/frontend/assets/images/char.jpg')}}" alt="shape"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="hero-shape shape1 spin"><img style="width:80px" src="{{asset('/frontend/assets/images/spin.png')}}" alt="shape"></div>
  <div class="hero-social"><a target="_blank" href="https://www.facebook.com/profile.php?id=61556784985026&mibextid=ZbWKwL">Facebook</a> <a target="_blank"
      href="https://x.com/medexampass?t=RsFbLnuRbCcC6C3OEx3T9g&s=09">Twitter</a> <a target="_blank" href="https://www.instagram.com/medexampass/?igsh=bzlweG83YXFrb2xv#">Instagram</a>
    <a target="_blank" href="https://www.youtube.com/@Medexampass-ud9pb">YouTube</a>
  </div>
</div>
<section class="overflow-hidden space">
  <div
    class="process-bg-shape1 spin shape-mockup d-xl-block d-none"
    data-left="7%"
    data-top="15%">
    <img src="{{asset('/frontend/assets/img/process/process-bg-shape-1-1.png')}}" alt="img" />
  </div>
  <div
    class="process-bg-shape2 jump shape-mockup"
    data-right="-1%"
    data-bottom="15%">
    <img src="{{asset('/frontend/assets/img/process/process-bg-shape-1-2.png')}}" alt="img" />
  </div>
  <div class="container">
    <div class="text-center title-area">
      <span class="sub-title"><i class="fal fa-book me-1"></i> WHAT WE OFFER</span>
      <h2 class="sec-title">How Does Med Exam Pass Work Process?</h2>
    </div>
    <div class="process-card-area">
      <div class="row gy-50 justify-content-center">
        <div class="col-md-6 col-lg-4 process-card-wrap">
          <div class="process-card">
            <div class="process-card_img">
              <img src="{{asset('/frontend/assets/img/process/process-1-1.png')}}" alt="img" />
            </div>
            <div class="process-card_icon">
              <img src="{{asset('/frontend/assets/img/icon/process-icon-1-1.svg')}}" alt="icon" />
            </div>
            <h2 class="box-title">Choose Any Courses</h2>
            <p class="process-card_text">
              Med Exam Pass provide you best online course with Helpful customer service team
            </p>
          </div>
          <div class="process-arrow">
            <img src="{{asset('/frontend/assets/img/icon/process-arrow.svg')}}" alt="line" />
          </div>
        </div>
        <div class="col-md-6 col-lg-4 process-card-wrap">
          <div class="process-card">
            <div class="process-card_img">
              <img src="{{asset('/frontend/assets/img/process/process-1-2.png')}}" alt="img" />
            </div>
            <div class="process-card_icon">
              <img src="{{asset('/frontend/assets/img/icon/process-icon-1-2.svg')}}" alt="icon" />
            </div>
            <h2 class="box-title">Purchase Your Course</h2>
            <p class="process-card_text">
              Purchase Your Course for best result Based on recalls from past papers
            </p>
          </div>
          <div class="process-arrow">
            <img src="{{asset('/frontend/assets/img/icon/process-arrow.svg')}}" alt="line" />
          </div>
        </div>
        <div class="col-md-6 col-lg-4 process-card-wrap">
          <div class="process-card">
            <div class="process-card_img">
              <img src="{{ asset('/frontend/assets/img/process/process-1-3.png') }}" alt="img" />

            </div>
            <div class="process-card_icon">
              <img src="{{ asset('/frontend/assets/img/icon/process-icon-1-3.svg') }}" alt="icon" />

            </div>
            <h2 class="box-title">Great! Start Learn</h2>
            <p class="process-card_text">
              These programs cover a wide range of subjects and can be
              customized for individual learners
            </p>
          </div>
          <div class="process-arrow">
            <img src="{{asset('/frontend/assets/img/icon/process-arrow.svg')}}" alt="line" />
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="overflow-hidden cta-area-4 position-relative">
  <div class="cta-bg-img" data-bg-src="{{asset('/frontend/assets/img/bg/cta-bg4.png')}}"></div>
  <div
    class="shape-mockup cta4-shape1 jump-reverse d-lg-block d-none"
    data-right="10%"
    data-top="12%">
    <img src="{{asset('/frontend/assets/img/normal/cta_4_shape1.png')}}" alt="img" />
  </div>
  <div
    class="shape-mockup cta4-shape2 d-lg-block d-none"
    data-right="0"
    data-bottom="0%">
    <img src="{{asset('/frontend/assets/img/normal/cta_4_shape2.png')}}" alt="img" />
  </div>
  <div
    class="shape-mockup cta4-shape3 d-md-block d-none"
    data-right="0"
    data-top="0%">
    <img src="{{asset('/frontend/assets/img/normal/cta_4_shape3.png')}}" alt="img" />
  </div>
  <div class="shape-mockup cta4-shape4"></div>
  <div class="ripple-shape cta-4-ripple-shape">
    <span class="ripple-1"></span><span class="ripple-2"></span><span class="ripple-3"></span><span class="ripple-4"></span><span class="ripple-5"></span><span class="ripple-6"></span>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-lg-5">
        <div class="cta-wrap4 space">
          <div class="title-area mb-35">
            <span class="sub-title"><i class="fal fa-book me-2"></i> Join in Your Favorite
              Courses Today</span>
            <h2 class="text-white sec-title">
              Over 95% of users recommend Med Exam Pass
            </h2>
            <p class="cta-text">
            Complete Learning: Practice Questions, Subject-Wise Notes, Engaging Video Lectures, and Realistic Mock Tests.
            </p>
          </div>
          <a href="{{ route('frontend.login') }}" class="th-btn style3">Sign Up<i class="fas fa-arrow-right ms-2"></i></a>
        </div>
      </div>
      <div class="col-lg-7 align-self-end d-lg-block d-none">
        <div class="cta-4-thumb">
          <img src="{{asset('/frontend/assets/img/normal/cta_4_1.png')}}" alt="img" />
        </div>
      </div>
    </div>
  </div>
</section>




<div class="space gr-bg1">
  <div class="container">
    <div class="row">
      <div class="col-xl-6">
        <div class="wcu-img-3">
          <div class="img1"><img width="561px" src="{{asset('/frontend/assets/images/heart.jpg')}}" alt="why"></div>
          <div class="text-end">
            <div class="img2"><img width="390px" src="{{asset('/frontend/assets/images/kidney.jpg')}}" alt="why"></div>
          </div>

          <div class="shape2"><img src="{{ asset('/frontend/assets/img/update1/shape/circle_7.png') }}" alt="shape">
          </div>
        </div>
      </div>
      <div class="col-xl-6">
        <div class="title-area mb-35"><span class="sub-title">Our Specialities You Like</span>
          <h2 class="sec-title fw-semibold">Why Choose Us!</h2>
        </div>
        <div>
          <div class="check-box">
            <div class="icon"><i class="fa-solid fa-circle-check"></i></div>
            <div class="content">
              <h3 class="title">Thousands of  proven exam centric questions</h3>
              <p class="text">These programs cover a wide range of subjects</p>
            </div>
          </div>
          <div class="check-box">
            <div class="icon"><i class="fa-solid fa-circle-check"></i></div>
            <div class="content">
              <h3 class="title">Detailed answers and explanations</h3>
              <p class="text">
              Doubt resolution of complex & controversial questions 
              </p>
            </div>
          </div>
          <div class="check-box">
            <div class="icon"><i class="fa-solid fa-circle-check"></i></div>
            <div class="content">
              <h3 class="title">Personalised learning environment</h3>
              <p class="text">Learn with Med Exam Pass that provide own learning environment
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="shape-mockup" data-bottom="0%" data-right="0"><img src="{{asset('/frontend/assets/img/update1/shape/line_3.png')}}"
      alt="shape"></div>
</div>



<div class="counter-area-2" data-bg-src="{{asset('/frontend/assets/img/bg/counter-bg_1.png')}}">
  <div class="container">
    <div class="row justify-content-between">
      <div class="col-sm-6 col-xl-3 counter-card-wrap">
        <div class="counter-card">
          <h2 class="counter-card_number"><span class="counter-number">1.3</span>k<span
              class="fw-normal">+</span></h2>
          <p class="counter-card_text"><strong>Primary</strong> Questions</p>
        </div>
      </div>
      <div class="col-sm-6 col-xl-3 counter-card-wrap">
        <div class="counter-card">
          <h2 class="counter-card_number"><span class="counter-number">1.8</span>k<span
              class="fw-normal">+</span></h2>
          <p class="counter-card_text"><strong>Intermediate</strong> Questions</p>
        </div>
      </div>
      <div class="col-sm-6 col-xl-3 counter-card-wrap">
        <div class="counter-card">
          <h2 class="counter-card_number"><span class="counter-number">1.0</span>k<span
              class="fw-normal">+</span></h2>
          <p class="counter-card_text"><strong>Revision</strong> Notes</p>
        </div>
      </div>
      <div class="col-sm-6 col-xl-3 counter-card-wrap">
        <div class="counter-card">
          <h2 class="counter-card_number"><span class="counter-number">0.1</span>k<span
              class="fw-normal">+</span></h2>
          <p class="counter-card_text"><strong>Users</strong> Community</p>
        </div>
      </div>
    </div>
  </div>
</div>

{{-- <section class="space">
  <div class="container z-index-common">
    <div class="flex-row-reverse row">
      <div class="col-xl-8 mb-35 mb-xl-0">
        <div class="img-box8">
          <div class="img1"><img src="{{asset('/frontend/assets/images/one.jpg')}}" alt="mockup"></div>
          <div class="img2"><img style="height:470px" src="{{asset('/frontend/assets/images/man.jpg')}}" alt="mockup"></div>
          <div class="shape"><img src="{{asset('/frontend/assets/img/update1/normal/mockup_shape.png')}}" alt="shape"></div>
        </div>
      </div>
      <div class="col-xl-4">
        <div class="title-area mb-30"><span class="sub-title">Best Learning Platform</span>
          <h2 class="sec-title fw-medium">One Platfrom Many Option For You</h2>
        </div>
        <p class="mb-30">Med Exam Pass Success is an online revision platform designed to support doctors with their Primary and Intermediate exam preparation.
        </p>
        <div class="mb-40 checklist">
          <ul>
            <li>Covering entire RCEM curriculum</li>
            <li>Based on recalls from past papers</li>
            <li>Up to date guidelines and algorithms</li>
            <li>Fully customisable revision sessions</li>

          </ul>
        </div><a href="course.html" class="th-btn">Get Start Now<i
            class="fas fa-arrow-right ms-2"></i></a>
      </div>
    </div>
  </div>
  <div class="shape-mockup big-shape" data-top="0%" data-right="0%"><img src="{{asset('/frontend/assets/img/update1/shape/line_2.png')}}"
      alt="shapes"></div>
</section> --}}



<section
      class="blog-area-3 space-top"
      data-bg-src="assets/img/bg/blog-3-bg.png"
      id="blog-sec"
    >
      <div
        class="shape-mockup blog-3-bg-shape1 jump"
        data-left="3%"
        data-bottom="10%"
      >
        
      </div>
      <div class="container">
        <div class="mb-35 text-center text-md-start">
          <div class="row align-items-center justify-content-between">
            <div style="margin-top:-35px" class="col-md-12">
              <div class="title-area mb-md-0 text-center">
                <span class="sub-title"
                  ><i class="fal fa-book me-2"></i> Our News & Blogs</span
                >
                <h2 class="sec-title">Latests News & Blogs</h2>
              </div>
            </div>
            
          </div>
        </div>
        <div
          class="row th-carousel"
          data-slide-show="3"
          data-lg-slide-show="2"
          data-md-slide-show="1"
          data-sm-slide-show="1"
          data-arrows="true"
        >

         @foreach($blogs as $blog)
          <div class="col-md-6 col-xl-4">
            <div class="th-blog blog-single style4">
              <div class="blog-img">
                <a href="blog-details.html"
                  ><img style="height:300px" src="{{ asset('frontend/assets/images/blog/' . $blog->image) }}" alt="Blog Image"
                /></a>
              </div>
              <div class="blog-content">
                <div class="blog-meta">
                  
                  <a href="blog.html"
                    ><i class="fa-light fa-clock"></i>{{\Carbon\Carbon::parse($blog->created_at)->format('M d, Y')}}</a
                  >
                </div>
                <h4 class="box-title">
                  <a href="blog-details.html"
                    >{{$blog->title}}</a
                  >
                </h4>
                <a href="{{route('frontend.vlog.details',$blog->id )}}" class="link-btn"
                  >Read More Details<i class="fas fa-arrow-right ms-2"></i
                ></a>
              </div>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </section>
  
  @endsection