@extends('layouts.website')
@section('meta')
    <!-- Title -->
    <title>{{$post->meta_title}}</title>

    <!-- Description meta tag -->
    <meta name="description" content="{{$post->meta_description}}">

    <!-- Keywords meta tag (Note: Google mostly ignores this tag, but other search engines may use it) -->
    <meta name="keywords" content="{{$post->meta_keywords}}">

    <!-- Author meta tag -->
    <meta name="author" content="{{$post->meta_author}}">

    <!-- Robots meta tag (index/follow means search engines can index the page and follow its links) -->
    <meta name="robots" content="index,follow">

    <!-- Canonical URL (if you have multiple URLs for the same content, specify the preferred one) -->
    <link rel="canonical" href="{{route('home')}}">

    <!-- Open Graph meta tags for social media sharing (Facebook, Twitter, LinkedIn, etc.) -->
    <meta property="og:title" content="{{$post->meta_title}}">
    <meta property="og:description" content="{{$post->meta_description}}">
    <meta property="og:url" content="{{route('home')}}">
    <meta property="og:type" content="website">

    <!-- Twitter Card meta tags for Twitter sharing -->
    <meta name="twitter:title" content="{{$post->meta_title}}">
    <meta name="twitter:description" content="{{$post->meta_description}}">
    <meta name="twitter:card" content="{{asset('uploads/'.$post->thumbnail)}}">
@endsection
@section('content')
    <!--================ start banner Area =================-->
    <section class="" id="hero_section" style="background-image: url({{asset('uploads/'.getSetting('blog_bg'))}});">
        <div class="bubbles">
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
        </div>
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-5 col-md-5 col-sm-12 text-md-start text-center hero_content">
                    <h1 class="hero_title">{{$post->meta_title}}</h1>
                    <div class="mt-3">
                        <a href="#our_service" class="primary-btn smooth">Read Article</a>
                    </div>

                </div>

                <div class="col-lg-7 col-md-7 col-sm-12 hero_image">
                    <div class="image-container">
                        <img class="img-fluid" src="{{asset('uploads/'.$post->thumbnail)}}">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--================ End banner Area =================-->
    <!--================ start Our Service Area =================-->
    <section id="our_service" >
        <div class="container">
            <div class="row align-items-center">
                <h2 class="section_title">{{$post->title}}</h2>
                <!--<p class="section_content"></p>-->
            </div>
        </div>
    </section>
    <!--================ End Our Service Area =================-->
    <!--================ start Our Service Area =================-->
    <section id="blogs_section" class="my-md-5 my-sm-2">
        <div class="container">
        
            
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-format="fluid"
                 data-ad-layout-key="-fb+5w+4e-db+86"
                 data-ad-client="ca-pub-2908437793326427"
                 data-ad-slot="2910192384"></ins>
            <script>
                 (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
            
            {!! $post->body !!}
            
            
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-format="fluid"
                 data-ad-layout-key="-fb+5w+4e-db+86"
                 data-ad-client="ca-pub-2908437793326427"
                 data-ad-slot="2910192384"></ins>
            <script>
                 (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
    </section>
    <!--================ End Our Service Area =================-->
@endsection