@extends('layouts.homepage')

@section('title')
  Photographs by Steven | Best Wildlife & Aviation Photographer UK
@endsection

@section('meta-description')
  Steven Hardy is a professional wildlife & aviation photographer based in the UK that captures the best and funniest wildlife & aviation moments. View his work now!
@endsection
  
@section('content')
  <div id="app">
    <!------------Get to------------------>
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-xs-12 col-md-12 col-lg-6" id="text-left-side">
          <p class="get">WHO AM I?</p>
          <h2 class="beter">GET TO KNOW ME <br>
            BETTER
          </h2>
          <p class="borders"></p>
          <p class="Cum-text">A hobby photographer that loves </p>
          <p class="magnis">aviation and wildlife</p>
          <p class="better-text">You've just entered a world of enchantment and wonder, welcome to 'Photographs by Steven'! This is a unique online gallery where Steven Hardy, a hobbyist turned passionate photographer, captures and shares the magical world of aviation and wildlife through his lens. It's an open invitation to see the world from his distinctive viewpoint, full of awe and excitement.
          </p>
          <a href="/about-me" class="btn btn-success" id="Contact">About Me</a>
        </div>
        <div class="col-sm-12 col-xs-12 col-md-12 col-lg-6" id="text-left-side">
          <div class="row">
            <div class="col-md-6">
              <img src="images/orangutan.jpg" class="one-img" loading="lazy" alt="Orangutan from Colchester Zoo. Taken by Photographs by Steven" width="270" height="332"/>
            </div>
            <div class="col-md-6">
              <img src="images/one-image.jpg" class="two-img" loading="lazy" alt="Man fire breathing. Taken by Photographs by Steven." width="270" height="180"/>
              <img src="images/three-image.jpg" class="three-img" loading="lazy" alt="Leopard Cub from Colchester Zoo. Taken by Photographs by Steven." width="270" height="284"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!------------Get to End------------------>
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-6 my-3">
          <img src="https://cdn.stevenhardy.digital/steven-photos/photos/1863563674-colcehster-zoo-march-2022-80.jpg" alt="Photographs by Steven | Meerkat" class="rounded img-fluid" loading="lazy" width="570" height="380">
        </div>
        <div class="col-sm-12 col-md-6 my-3 d-flex flex-column justify-content-center" id="homepage-about">
          <h2 class="text-center">Steven's Photographic Journey</h2>
          <p class="text-center">
            Steven’s photographic journey is as captivating as his pictures. In just three years, a casual hobby has transformed into an unyielding passion. His fascination with the intricacies of the natural world and the majestic flight of aircraft has been the driving force behind this transformation. Today, his gallery boasts a rich collection of photographs, each narrating a unique story interwoven with elements of aviation and wildlife.
          </p>
        </div>
        <div class="col-sm-12 col-md-6 my-3 d-flex flex-column justify-content-center" id="homepage-wildlife">
          <h2 class="text-center">Capturing the Wild in Frames</h2>
          <p class="text-center">
            Follow Steven on his exciting adventures to local zoos, like Colchester Zoo and Paradise Wildlife Park. It's here that he forms incredible bonds with animals, capturing their unique quirks and personalities in his images. His heartfelt passion for animal photography is a vibrant thread that runs through every image, bringing the spirit of the wild to life.
          </p>
        </div>
        <div class="col-sm-12 col-md-6 my-3">
          <img src="https://cdn.stevenhardy.digital/steven-photos/photos/619275767-839182313-1289420694.jpg" alt="Snow leopard | Photographs by Steven" class="rounded img-fluid" loading="lazy" width="570" height="380">
        </div>
        <!-- More sections following this pattern for each piece of content -->
        <div class="col-sm-12 col-md-6 my-3">
          <img src="https://cdn.stevenhardy.digital/steven-photos/photos/1039420941-nhs-spitfire-11.jpg" alt="Photographs by Steven | Aviation Spitfire" class="rounded img-fluid" loading="lazy" width="570" height="380">
        </div>
        <div class="col-sm-12 col-md-6 my-3 d-flex flex-column justify-content-center" id="homepage-aviation">
          <h2 class="text-center">Embracing the Majesty of the Skies</h2>
          <p class="text-center">
            Steven's love for the skies is palpable in his stunning aviation photographs. His frequent visits to airshows, armed with his trusted camera, allow him to capture the dynamic spectacle of aircraft in flight, sharing the awe-inspiring grandeur of aviation with his audience.
          </p>
        </div>
        <!-- Continue in this way -->
        <div class="col-sm-12 col-md-6 my-3 d-flex flex-column justify-content-center" id="homepage-aauthenticity">
          <h2 class="text-center">Authenticity: The Heart of Steven's Photography</h2>
          <p class="text-center">
            Steven's work celebrates authenticity. His approach is to highlight the most natural aspects of his subjects, delivering 'lifely' photographs that capture the raw essence of the moment. Each image is a heartfelt story, inviting you to step into the scene and be part of the captured moment.
          </p>
        </div>
        <div class="col-sm-12 col-md-6 my-3">
          <img src="https://cdn.stevenhardy.digital/steven-photos/photos/866057152-colcehster-zoo-march-2022-88.jpg" alt="Lion | Photographs by Steven" class="rounded img-fluid" loading="lazy" width="570" height="380">
        </div>
      </div>
    </div>
    <!------------carousel------------------>
    <div class="container my-5">
      <div class="contain animatable bounceIn">
        <div id="owl-carousel" class="owl-carousel owl-theme">
          @foreach($carousel as $image)
            @php
              $alt_text = '';
              if(!$image->tags->isEmpty()){
                foreach($image->tags as $tag) {
                  $alt_text .= $tag->tag . ' ';
                }
              } else {
                  $alt_text = 'Photograph taken by Photographs by Steven';
              }

            @endphp
            <div class="item">
              <img src="{{config('settings.cdn_url')}}/photos/{{$image->title}}" class="carousel1 img-fluid" loading="lazy" alt="{{$alt_text}}"/>
            </div>
          @endforeach
        </div>
      </div>
    </div>
    <!------------carousel end------------------>
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-6 my-3">
          <img src="https://cdn.stevenhardy.digital/steven-photos/photos/930797647-1092083236-471722363.jpg" alt="Red Arrows | Photographs by Steven" class="rounded img-fluid" loading="lazy"  width="570" height="380">
        </div>
        <div class="col-sm-12 col-md-6 my-3 d-flex flex-column justify-content-center" id="homepage-more-than">
          <h2 class="text-center">More Than Just Photography</h2>
          <p class="text-center">
            But it's not just about the photographs. Steven's commitment extends beyond his craft, actively supporting the Colchester Zoo with fundraising efforts during the Covid-19 pandemic. By admiring and purchasing his work, you're also contributing to a noble cause.
          </p>
        </div>
        <div class="col-sm-12 col-md-6 my-3 d-flex flex-column justify-content-center" id="homepage-world">
          <h2 class="text-center">Steven's World Awaits You</h2>
          <p class="text-center">
            'Photographs by Steven' is more than an online portfolio, it's a window to Steven Hardy's world. Here, he shares his unique vision, inviting you on a journey to marvel at the unique beauty he encounters every day.
          </p>
        </div>
        <div class="col-sm-12 col-md-6 my-3">
          <img src="https://cdn.stevenhardy.digital/steven-photos/photos/1016794173-colcehster-zoo-march-2022-132.jpg" alt="Hyena | Photographs by Steven" class="rounded img-fluid" loading="lazy"  width="570" height="380">
        </div>
        <div class="col-sm-12 col-md-6 my-3">
          <img src="https://cdn.stevenhardy.digital/steven-photos/photos/1899087637-colcehster-zoo-march-2022-201.jpg" alt="Tiger | Photographs by Steven" class="rounded img-fluid" loading="lazy"  width="570" height="380">
        </div>
        <div class="col-sm-12 col-md-6 my-3 d-flex flex-column justify-content-center" id="homepage-prints">
          <h2 class="text-center">Affordable Art at Your Fingertips</h2>
          <p class="text-center">
            And now for the most exciting part! Steven's stunning photographs aren’t just for admiring—they can adorn your walls too. Available at very affordable prices, these works of art make the perfect gift for loved ones, or a delightful treat for yourself. Whether you're a fan of aviation or wildlife, there’s something for everyone here. Bring a piece of Steven's world into your own and let the magic of his photography inspire you every day.
          </p>
        </div>
        <div class="col-md-12 mt-5">
          <p class="text-center font-bold large-text">
            So, dive into the world through Steven's eyes, where every photograph is a story waiting to be explored. Get ready to be inspired by Steven's work! Welcome aboard this exciting journey.
          </p>
        </div>

      </div>
    </div>
      <!------------blog start------------------>
    <div class="blog">
      <div class="container">
        <div class="row">
          @foreach($blog_posts as $post)
            <div class="col-sm-12 col-xs-12 col-md-12 col-lg-4 animatable bounceIn">
              <div class="blog-one">
                @if(!is_null($post->thumbnail))
                  <img src="https://cdn.stevenhardy.digital/steven-photos/{{$post->thumbnail}}" class="blog-images" loading="lazy" alt="{{$post->title}}" width="370" height="250"/>
                @else
                  <img src="/images/blog-1.png" class="blog-images" loading="lazy" alt="{{$post->title}}" width="370" height="250"/>
                @endif
                <div class="overlay">
                  <h4 class="no">{{date('d', strtotime($post->created_at))}}</h4>
                  <p class="month">{{date('M. Y', strtotime($post->created_at))}}</p>
                </div>
                <div class="text">
                  <h4 class="Designing">{{$post->title}}</h4>
                  <span class="post-category text-white bg-{{(str_replace(' ', '-', strtolower($post->category->name)))}}">{{$post->category->name}}</span>

                  <p class="dummy-text">{!!  \Illuminate\Support\Str::limit(strip_tags($post->content), 200, '...')!!}</p>
                  <a href="/post/{{$post->slug}}" class="btn btn-primary read-more">See the full picture</a>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      </div>
    </div>
    <!------------blog end------------------>
    <instagram-component></instagram-component>
  </div>
@endsection