@extends('layouts.app')

@section('title', 'Home Page')
<style>
    body {
      font-family: 'Inter', sans-serif;
    }
    .font-abhaya {
      font-family: 'Abhaya Libre', serif;
    }
    .text-shadow {
      text-shadow: 8px 4px 8px rgba(0, 0, 0, 0.5);
    }
    .custom-shadow {
      box-shadow: 0px 6px 6px #46291B !important;
    }
    .blink-animation {
      animation: blink 1s infinite;
    }
    @keyframes blink {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.2;
      }
    }
  </style>

@section('content')
  <!-- Header Section -->
  <div class="w-full h-[10%] mb-14 flex items-center justify-center">
    <a href="/">
      <img class="h-[3.5vw] min-h-[60px]" src="images/logo.png" alt="mainLogo">
    </a>
  </div>

  <!-- Background Backdrop -->
  <div class="w-full h-[80%] bg-[#D8D2C2]/40 rounded-lg backdrop-blur-md flex flex-col items-center">
    <div class="mt-16 text-center leading-[40px] sm:leading-[50px] md:leading-[70px] lg:leading-[100px] relative z-20">
      <h1 class="font-abhaya font-semibold text-3xl sm:text-4xl text-[#AF8F6F] md:text-[45px] lg:text-[60px] text-headingFont text-shadow">UNLEASH YOUR</h1>
      <h1 class="font-abhaya font-semibold text-[55px] sm:text-[65px] md:text-[85px] lg:text-[100px] text-shadow">INNER SELF</h1>
    </div>
    <a href="{{route('login')}}" class="relative z-60">
      <button class="py-2 px-6 active:scale-95 transform transition-all font-semibold border-2 border-[#5D432A] rounded-[40px] whitespace-nowrap mt-20 bg-[#AF8F6F] uppercase shadow-md custom-shadow">
        login your heart
      </button>
    </a>
  </div>

  <!-- Images Section -->
  <div class="h-0 absolute bottom-0 max-w-[1400px] w-full">
    <div class="relative">
      <img class="absolute -left-36 sm:-left-28 md:-left-14 lg:-left-8 h-[350px] portrait:max-h-[40vh] landscape:max-h-[400px] md:h-auto xl:h-auto w-auto -bottom-9 2xl:-left-10 z-0" src="images/girl2.png" alt="girl-using-phone">
      <img class="absolute -right-32 sm:-right-32 portrait:max-h-[80vh] landscape:max-h-[800px] md:-right-[20%] portrait:sm:-right-[15%] portrait:lg:-right-[15%] landscape:md:-right-[5%] h-[700px] md:h-auto w-auto -bottom-[220px] z-0" src="images/boy.png" alt="boy-using-phone">
    </div>
  </div>
@endsection
