@component('mail::message')
<a href="qataloog.com" style="display: block;
  margin-left: auto;
  margin-right: auto;
  ">
    <img src="{{ asset('img/banner.png') }}" class="" alt="Qataloog Logo"  >
</a>
<br>
{{__('Hi')}}, <br>

{{__('We are excited to inform you that')}} <b> {{ $library->user->name }} </b> {{__('has invited you to explore a curated collection of educational resources tailored just for you')}}.

<br>
<div style="text-align: left;">
    <a href="{{ $url }}" style="background-color: #FA6E0F; color: #ffffff; padding: 10px 20px; text-decoration: none; display: inline-block; border-radius: 5px;">
        {{ __('Accept Invite') }}
    </a>
</div>

<br>
{{__('Best regards')}}, <br>
The {{ config('app.name') }} Team
<br>
@component('mail::footer')
<div style="background-color: #ED712E; padding: 20px; color: #ffffff; text-align: center;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
        <img src="{{ asset('img/footer-logo.png') }}" alt="Footer Logo" style="height: 20px;width: 80px;">
        <div style="display: flex; align-items: center;">
            <a href="https://twitter.com/qataloog" style="margin-right: 10px;"><img src="https://qataloog.s3.us-west-2.amazonaws.com/x.png" alt="Twitter" style="height: 15px;width: 15px; filter: brightness(0) invert(1);"></a>
            <a href="https://www.linkedin.com/company/qataloog" style="margin-right: 10px;"><img src="https://qataloog.s3.us-west-2.amazonaws.com/linkedin.png" alt="linkedin" style="height: 15px;width: 15px;filter: brightness(0) invert(1);"></a>
            <a href="https://www.facebook.com/qataloog"><img src="https://qataloog.s3.us-west-2.amazonaws.com/facebook.png" alt="facebook" style="height: 15px;width: 15px;filter: brightness(0) invert(1);"></a>
        </div>
    </div>
    <br>
    <div style="display: flex; align-items: flex-start; margin-bottom: 20px;">
        <a href="https://apps.apple.com/us/app/qataloog/id6471869090"><img src="https://qataloog.s3.us-west-2.amazonaws.com/ios.png" alt="iOS Logo" style="height: 40px;"></a>
        <a href="https://play.google.com/store/apps/details?id=com.qataloogAndroid.qataloog"><img src="https://qataloog.s3.us-west-2.amazonaws.com/android.png" alt="Android Logo" style="height: 40px;">
    </div>
    <div style="display: flex; align-items: flex-start;"">
        <p style="color: white; margin: 0;">Nigeria: 1A Akin Osiyemi Street, Allen Avenue Ikeja-Lagos</p>
    </div>
    <div style="display: flex; align-items: flex-start; margin-top: 10px;">
        <a href="https://qataloog.com/terms" class="links" style="color: white; text-decoration: underline; text-decoration-color: white; font-size: 10px; margin-right: 10px;">Ts & Cs</a>
        <a href="https://qataloog.com/privacy" class="links" style="color: white; text-decoration: underline; text-decoration-color: white; font-size: 10px; margin-right: 10px;">Privacy</a>
        <a href="https://qataloog.com/contact" class="links" style="color: white; text-decoration: underline; text-decoration-color: white; font-size: 10px;">Contact Us</a>
    </div>
</div>
@endcomponent

@endcomponent