@section('metas')

    <title>MorePaws | Building A Community With More Friends, Walks & Perks</title>
    <meta name="description" content="Make dog ownership easier and more rewarding by meeting new friends, exploring new walks, finding new dog-friendly venues and enjoying exclusive perks | Join the community today!">
    <meta name="keywords" content="MorePaws">

    {{-- or here only for landing page --}}



@endsection

<x-app-layout>
    <div class=" overflow-hidden w-full relative">
        <section class="h-auto pt-16 lg:pt-[100px] xl:pt-0 xl:h-[calc(100vh_-_95px)] xl:min-h-[680px] xxl:min-h-[720px] xxxl:h-[920px] w-full bg-lightgreen overflow-hidden">
            <div class="w-full max-w-[1580px] px-[20px] md:px-[25px] mx-auto relative h-full">
                <div class="flex h-full flex-row flex-wrap -mx-6 items-center z-40 relative">
                    <div class="w-full lg:w-6/12 px-6 text-center lg:text-left">
                        <div class="inline-block w-[720px] max-w-full pb-12 lg:pb-[100px] xl:pb-0">
                            <h1 class="font-[900] text-[32px] ssm:text-[36px] lg:!text-[46px] xl:!text-[54px] !leading-[140%] mb-4">Building a community with more friends, more walks and <span class="text-maingreen">MorePaws</span></h1>
                            <p class=" text-maingray text-base lg:text-xl !leading-relaxed mb-9 lg:mb-12">Start connecting with nearby dog owners to build a trusted support network for you and your dog. Enjoy exciting new walks, discover recommended dog-friendly venues and start making memories together.</p>
                            <div class="flex flex-row flex-wrap items-start -mx-2 justify-center md:justify-start ">
                                {{-- <div class="p-1">
                                    <div class="inline-block relative mb-3 md:mb-0">
                                        <img class="absolute top-full right-full" src="{{ Vite::asset('resources/images/icon-button-star.svg')}}" width="29" height="34" alt="">
                                        <a href="{{ route('register') }}" class="inline-block bg-mainbrown text-white font-bold text-xl leading-6 min-h-[48px] rounded-lg py-3 px-2 w-[166px] hover:bg-mainbrownhover transition-all shadow-brownshadow text-center">Get started</a>
                                        <img class="absolute bottom-full left-[calc(100%_+_5px)] w-[17px] h-[20px]" src="{{ Vite::asset('resources/images/icon-button-star.svg')}}" width="29" height="34" alt="">
                                    </div>
                                </div> --}}

                                <div class="flex flex-row flex-wrap items-start -mx-2 justify-center md:justify-start ml-1">
                                    <div class="p-1">
                                        <a href="https://apps.apple.com/us/app/morepaws/id6621271192" target="_blank">
                                            <img class="w-auto h-[48px]" src="{{ Vite::asset('resources/images/app-store.svg')}}" alt="App Store" width="180" height="48">
                                        </a>
                                    </div>
                                    <div class="p-1">
                                        <a href="https://play.google.com/store/apps/details?id=com.unlimitedcoders.morepaws" target="_blank">
                                            <img class="w-auto h-[48px]" src="{{ Vite::asset('resources/images/google-play.svg')}}" alt="Google Play" width="180" height="48">
                                        </a>
                                    </div>
                                </div>
                            </div>



                            
                        </div>
                    </div>
                </div>
                <div class="relative lg:absolute lg:bottom-0 -left-[40px] md:left-0 lg:left-[45%] xl:left-[38%] z-30 w-[calc(100vw_+_40px)] md:w-full lg:w-[75vw] xl:w-[1270px]">
                    <picture class="block">
                        <source srcset="{{ Vite::asset('resources/images/morepaws-hero-image.webp')}}" type="image/webp">
                        <img src="{{ Vite::asset('resources/images/morepaws-hero-image.png')}}" width="1270" height="683" alt="image showing MorePaws benefits as drop pins on the interactive map." class="w-full">
                    </picture>
                </div>
                <div class="absolute -left-[450px] top-1/2 -translate-y-1/2 z-20">
                    <img src="{{ Vite::asset('resources/images/top-section-path-bg.svg')}}" width="905" height="831" alt="">
                </div>
            </div>
        </section>

        <section class="pt-8 md:pt-[100px] xl:pt-[176px] pb-16 md:pb-[100px] xl:pb-[109px]">
            <div class="w-full max-w-[1580px] px-[20px] md:px-[25px] mx-auto relative h-full">
                <h2 class="text-center font-bold text-[28px] ssm:text-[34px] lg:!text-[42px] xl:!text-[50px] leading-tight mb-16 xl:mb-[140px]">A world of benefits for you and your dog</h2>
                <div class="md:pl-[40px] xl:pl-[110px] md:pr-[40px]">
                    <div class="flex flex-row flex-wrap items-center">
                        <div class="w-full lg:w-1/3">
                            <div class="md:pr-12 xl:pr-0 flex flex-row lg:flex-col flex-wrap justify-center -mx-5 md:-mx-10 lg:mx-0">
                                <div class="justify-end w-full sm:w-1/2 lg:w-auto mb-10 md:mb-[60px] lg:mb-[120px] text-center sm:text-right px-5 md:px-10 lg:px-0">
                                    <div class="inline-block max-w-full">
                                        <div class="flex flex-row w-[325px] max-w-full items-center">
                                            <div class="w-[88px]">
                                                <img loading="lazy" src="{{ Vite::asset('resources/images/icon-pin-social.svg')}}" width="55" height="70" alt="" class="w-auto max-w-[55px]">
                                            </div>
                                            <div class="w-[calc(100%_-_88px)] text-start">
                                                <p class="mb-1 font-bold leading-tight text-lg md:text-xl">Social</p>
                                                <p class="mb-0 text-base md:text-lg !leading-[125%] text-maingray">Build friendship groups for you and your dog</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="justify-end w-full sm:w-1/2 lg:w-auto mb-10 md:mb-[60px] lg:mb-[120px] text-center md:text-left px-5 md:px-10 lg:px-0">
                                    <div class="inline-block max-w-full">
                                        <div class="flex flex-row w-[325px] max-w-full items-center">
                                            <div class="w-[88px]">
                                                <img loading="lazy" src="{{ Vite::asset('resources/images/icon-pin-health-and-fitness.svg')}}" width="55" height="70" alt="" class="w-auto max-w-[55px]">
                                            </div>
                                            <div class="w-[calc(100%_-_88px)] text-start">
                                                <p class="mb-1 font-bold leading-tight text-lg md:text-xl">Health and fitness</p>
                                                <p class="mb-0 text-base md:text-lg !leading-[125%] text-maingray">Get healthier and fitter by joining more walks</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="justify-end w-full sm:w-1/2 lg:w-auto text-center sm:text-right px-5 md:px-10 lg:px-0">
                                    <div class="inline-block max-w-full">
                                        <div class="flex flex-row w-[325px] max-w-full items-center">
                                            <div class="w-[88px]">
                                                <img loading="lazy" src="{{ Vite::asset('resources/images/icon-pin-explore.svg')}}" width="55" height="70" alt="" class="w-auto max-w-[55px]">
                                            </div>
                                            <div class="w-[calc(100%_-_88px)] text-start">
                                                <p class="mb-1 font-bold leading-tight text-lg md:text-xl">Explore</p>
                                                <p class="mb-0 text-base md:text-lg !leading-[125%] text-maingray">Find new walks, dog-friendly venues and accredited businesses</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-[70%] ml-[15%] sm:w-1/2 sm:ml-[25%] lg:w-1/3 lg:ml-0 py-16 lg:py-0">
                            <picture class="block">
                                <source srcset="{{ Vite::asset('resources/images/girl-stroking-dog-smiling.webp')}}" type="image/webp">
                                <img loading="lazy" src="{{ Vite::asset('resources/images/girl-stroking-dog-smiling.png')}}" width="507" height="665" alt="An image of a young woman looking affectionately at her dog whilst stroking its neck." class="w-auto max-w-full">
                            </picture>
                        </div>
                        <div class="w-full lg:w-1/3">
                            <div class="md:pl-12 flex flex-row lg:flex-col flex-wrap justify-center -mx-5 md:-mx-10 lg:mx-0">
                                <div class="justify-end w-full sm:w-1/2 lg:w-auto mb-10 md:mb-[60px] lg:mb-[120px] text-center sm:text-left px-5 md:px-10 lg:px-0">
                                    <div class="inline-block max-w-full">
                                        <div class="flex flex-row w-[325px] max-w-full items-center">
                                            <div class="w-[88px]">
                                                <img loading="lazy" src="{{ Vite::asset('resources/images/icon-pin-perks.svg')}}" width="55" height="70" alt="" class="w-auto max-w-[55px]">
                                            </div>
                                            <div class="w-[calc(100%_-_88px)] text-start">
                                                <p class="mb-1 font-bold leading-tight text-lg md:text-xl">Perks</p>
                                                <p class="mb-0 text-base md:text-lg !leading-[125%] text-maingray">Save money on treats and necessities</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="justify-end w-full sm:w-1/2 lg:w-auto mb-10 md:mb-[60px] lg:mb-[120px] text-center md:text-right px-5 md:px-10 lg:px-0">
                                    <div class="inline-block max-w-full">
                                        <div class="flex flex-row w-[325px] max-w-full items-center">
                                            <div class="w-[88px]">
                                                <img loading="lazy" src="{{ Vite::asset('resources/images/icon-pin-community.svg')}}" width="55" height="70" alt="" class="w-auto max-w-[55px]">
                                            </div>
                                            <div class="w-[calc(100%_-_88px)] text-start">
                                                <p class="mb-1 font-bold leading-tight text-lg md:text-xl">Community</p>
                                                <p class="mb-0 text-base md:text-lg !leading-[125%] text-maingray">Connect with like-minded dog owners nearby</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="justify-end w-full sm:w-1/2 lg:w-auto text-center sm:text-left px-5 md:px-10 lg:px-0">
                                    <div class="inline-block max-w-full">
                                        <div class="flex flex-row w-[325px] max-w-full items-center">
                                            <div class="w-[88px]">
                                                <img loading="lazy" src="{{ Vite::asset('resources/images/icon-pin-mental-wellbeing.svg')}}" width="55" height="70" alt="" class="w-auto max-w-[55px]">
                                            </div>
                                            <div class="w-[calc(100%_-_88px)] text-start">
                                                <p class="mb-1 font-bold leading-tight text-lg md:text-xl">Mental wellbeing</p>
                                                <p class="mb-0 text-base md:text-lg !leading-[125%] text-maingray">Ease the anxieties of everyday dog ownership</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-maingreen text-white relative overflow-hidden">
            <div class="absolute top-0 left-0 w-full overflow-hidden leading-[0]">
                <svg class="relative block w-[calc(100%_+_2px)] h-[20px] sm:h-[34px] overflow-hidden" xmlns:xlink="http://www.w3.org/1999/xlink" width="788.5px" height="33.9px" viewBox="0 0 788.5 33.9" preserveAspectRatio="none">
                    <path fill="#FFFFFF" d="M788.5,0H0v32.4c0,0,378.3-71,788.5,1.5V0z"/>
                </svg>
            </div>

            <div class="w-full max-w-[1580px] px-[20px] md:px-[25px] mx-auto relative text-center pt-10 md:pt-[60px] pb-10 md:pb-[50px]">
                <img loading="lazy" class="hidden md:block absolute right-[0%] lg:right-[10%] xl:right-[5%] -top-[20%] h-[140%]  w-auto z-10 max-w-none opacity-30 md:opacity-100" src="{{ Vite::asset('resources/images/app-features-lines-left.svg')}}" width="542" height="283">

                <h2 class="text-center font-bold text-[28px] ssm:text-[30px] lg:!text-[36px] xl:!text-[44px] leading-tight mb-0">App features</h2>

                <img loading="lazy" class="absolute right-[5%] sm:right-[15%] md:right-[64%] top-0 h-full w-auto block z-10 max-w-none opacity-30 md:opacity-100" src="{{ Vite::asset('resources/images/app-features-lines-right.svg')}}" width="581" height="192">
            </div>
        </section>

        <section class="block relative">
            <div class="w-full max-w-[1580px] px-[20px] md:px-[25px] mx-auto relative pt-4 pb-12 md:pb-24 xl:pb-36">

                <div class="block pb-3 md:pb-14 xl:pb-16 pt-3 md:pt-10 relative">
                    <div class="flex flex-row flex-wrap -mx-5 items-center relative z-20">
                        <div class="w-full md:w-1/2 lg:md:w-5/12 px-5 my-3 md:my-0 text-center md:text-left">
                            <div class="xl:pl-14 w-[555px] max-w-full inline-block">
                                <h3 class="font-bold text-[24px] lg:text-[34px] leading-tight mb-6">Interactive map</h3>
                                <p class="text-maingray text-lg leading-normal mb-7">Use our interactive map to connect with other dog owners, discover recommended walks across the UK, contact groomers and pet shops, explore new dog-friendly venues and more. Find everything and everyone you need, right here on the MorePaws map.</p>
                                <p class="inline-block relative mb-3 md:mb-0">
                                    <img class="absolute top-full right-full" src="{{ Vite::asset('resources/images/icon-button-star.svg')}}" width="29" height="34" alt="">
                                    <a href="{{ route('register') }}" class="inline-block bg-mainbrown text-white font-bold text-xl leading-6 min-h-[48px] rounded-lg py-3 px-10 hover:bg-mainbrownhover transition-all shadow-brownshadow">Find out more</a>
                                    <img class="absolute bottom-full left-[calc(100%_+_5px)] w-[17px] h-[20px]" src="{{ Vite::asset('resources/images/icon-button-star.svg')}}" width="29" height="34" alt="">
                                </p>
                            </div>
                        </div>
                        <div class="w-full md:w-1/2 lg:md:w-7/12 text-center md:text-right px-5 my-3 md:my-0">
                            <picture class="block">
                                <source srcset="{{ Vite::asset('resources/images/map-screenshot-example.webp')}}" type="image/webp">
                                <img src="{{ Vite::asset('resources/images/map-screenshot-example.png')}}" width="899" height="585" alt="A screenshot of the MorePaws interactive map showing pin icons with listed perks and dog-friendly venues in London." class="inline-block" loading="lazy">
                            </picture>
                        </div>
                    </div>
                    <img loading="lazy" class="absolute hidden lg:block left-0 bottom-12 z-10" src="{{ Vite::asset('resources/images/interactive-map-paws.svg')}}" width="242" height="127">
                </div>

                <div class="block py-3 md:py-14 xl:py-16 relative">
                    <div class="flex flex-row flex-wrap -mx-5 items-center relative z-30">
                        <div class="w-full md:w-1/2 lg:md:w-5/12 px-5 my-3 md:my-0 text-center md:text-left order-1 md:order-2">
                            <div class="xl:pl-14 w-[555px] max-w-full inline-block">
                                <h3 class="font-bold text-[24px] lg:text-[34px] leading-tight mb-6">Newsfeed</h3>
                                <p class="text-maingray text-lg leading-normal mb-0">Make memories by sharing the greatest moments with your dog, learn tips and tricks from other dog owners, and find answers to burning questions. Whatever your problem, request, milestone or mishap, the MorePaws community will be right there with you.</p>
                            </div>
                        </div>
                        <div class="w-full md:w-1/2 lg:md:w-7/12 text-center md:text-left px-5 my-3 md:my-0 order-2 md:order-1">
                            <picture class="block">
                                <source srcset="{{ Vite::asset('resources/images/morepaws-newsfeed-example.webp')}}" type="image/webp">
                                <img loading="lazy" src="{{ Vite::asset('resources/images/morepaws-newsfeed-example.png')}}" width="770" height="568" alt="A screenshot showing the MorePaws newsfeed with example posts showing images of dogs." class="inline-block">
                            </picture>
                        </div>
                    </div>
                    <img loading="lazy" class="absolute hidden lg:block right-16 top-1/3 -translate-y-2/3 z-10" src="{{ Vite::asset('resources/images/newsfeed-paw.svg')}}" width="86" height="74">
                </div>

                <div class="block py-3 md:py-14 xl:py-16 relative">
                    <div class="flex flex-row flex-wrap -mx-5 items-center relative z-20">
                        <div class="w-full md:w-1/2 lg:md:w-5/12 px-5 my-3 md:my-0 text-center md:text-left">
                            <div class="xl:pl-14 w-[555px] max-w-full inline-block">
                                <h3 class="font-bold text-[24px] lg:text-[34px] leading-tight mb-6">Chat</h3>
                                <p class="text-maingray text-lg leading-normal mb-0">Chat away with other dog owners, invite them for walks and share your experiences. We are all in this together, making dog ownership easier than ever, one paw at a time.</p>
                            </div>
                        </div>
                        <div class="w-full md:w-1/2 lg:md:w-7/12 text-center md:text-right px-5 my-3 md:my-0">
                            <picture class="block">
                                <source srcset="{{ Vite::asset('resources/images/morepaws-message-example-new.webp')}}" type="image/webp">
                                <img src="{{ Vite::asset('resources/images/morepaws-message-example-new.png')}}" width="652" height="463" alt="A screenshot showing example messages between two MorePaws users arranging to help one another train their dogs." class="inline-block" loading="lazy">
                            </picture>
                        </div>
                    </div>

                    <img loading="lazy" class="absolute lg:block -left-[300px] top-2/3 -translate-y-1/2  block z-10" src="{{ Vite::asset('resources/images/chat-paw.svg')}}" width="336" height="327">
                </div>

                <div class="block py-3 md:py-14 xl:py-16 relative">
                    <div class="flex flex-row flex-wrap -mx-5 items-center relative z-20">
                        <div class="w-full md:w-1/2 px-5 my-3 md:my-0 text-center md:text-left order-1 md:order-2">
                            <div class="xl:pl-14 w-[555px] max-w-full inline-block">
                                <h3 class="font-bold text-[24px] lg:text-[34px] leading-tight mb-6">Perks</h3>
                                <p class="text-maingray text-lg leading-normal mb-7">Enjoy all the rewards by being part of the MorePaws community, with discounts on everything from daily essentials to poochy pampering. All making caring for your canine companion more affordable.</p>
                                {{-- <p class="inline-block relative">
                                    <img loading="lazy" class="absolute top-full right-full" src="{{ Vite::asset('resources/images/icon-button-star.svg') }}" width="29" height="34" alt="">
                                    <a href="#" class="inline-block bg-mainbrown text-white font-bold text-xl leading-6 min-h-[48px] rounded-lg py-3 px-10 hover:bg-mainbrownhover transition-all shadow-brownshadow">Register your perk here</a>
                                    <img loading="lazy" class="absolute bottom-full left-[calc(100%_+_5px)] w-[17px] h-[20px]"
                                    src="{{ Vite::asset('resources/images/icon-button-star.svg')}}"
                                     width="29" height="34" alt="">
                                </p> --}}

                                <p class="inline-block relative mb-3 md:mb-0">
                                    <img class="absolute top-full right-full" src="{{ Vite::asset('resources/images/icon-button-star.svg')}}" width="29" height="34" alt="">
                                    <a href="{{ route('register') }}" class="inline-block bg-mainbrown text-white font-bold text-xl leading-6 min-h-[48px] rounded-lg py-3 px-10 hover:bg-mainbrownhover transition-all shadow-brownshadow">Get started</a>
                                    <img class="absolute bottom-full left-[calc(100%_+_5px)] w-[17px] h-[20px]" src="{{ Vite::asset('resources/images/icon-button-star.svg')}}" width="29" height="34" alt="">
                                </p>
                            </div>
                        </div>
                        <div class="w-full md:w-1/2 text-center px-5 my-3 md:my-0 order-2 md:order-1">
                            <picture class="block">
                                <source srcset="{{ Vite::asset('resources/images/four-perks-preview-bg-new.webp')}}" type="image/webp">
                                    <img src="{{ Vite::asset('resources/images/four-perks-preview-bg-new.png')}}" width="615" height="565" alt="An image of a Jack Russell dog inside a home with potted plants in the background and labels showing the MorePaws benefits surrounding it." class="inline-block max-w-full">
                            </picture>
                        </div>
                    </div>

                    <img loading="lazy" class="absolute lg:block left-[48%] -translate-x-1/2 top-[85%] -translate-y-1/2  block z-10" src="{{ Vite::asset('resources/images/perks-paws.svg')}}" width="102" height="150">
                </div>
            </div>
        </section>

        <section class="bg-maingreen text-white relative overflow-hidden">
            {{-- <div class="absolute bottom-0 left-0 w-full overflow-hidden leading-[0]">
                <svg  class="relative block w-[calc(100%_+_2px)] h-[35px] sm:h-[60px] md:h-[74px] overflow-hidden" xmlns:xlink="http://www.w3.org/1999/xlink" width="1918px" height="74px" viewBox="0 0 1918 74" enable-background="new 0 0 1918 74"  preserveAspectRatio="none">
                    <path fill="#FFFFFF" d="M1918,0c0,0-586.5,61-922,61S0,0,0,0v74h1918V0z"/>
                </svg>
            </div> --}}

            <div class="absolute top-0 left-0 w-full overflow-hidden leading-[0]">
                <svg class="relative block w-[calc(100%_+_2px)] h-[20px] sm:h-[34px] overflow-hidden" xmlns:xlink="http://www.w3.org/1999/xlink" width="788.5px" height="33.9px" viewBox="0 0 788.5 33.9" preserveAspectRatio="none">
                    <path fill="#FFFFFF" d="M788.5,0H0v32.4c0,0,378.3-71,788.5,1.5V0z"/>
                </svg>
            </div>

            <div class="w-full max-w-[1580px] px-[20px] md:px-[25px] mx-auto relative text-center pt-16 md:pt-[125px] pb-16 md:pb-[160px]">
                <img loading="lazy" class="absolute left-1/4 md:left-[64%] top-0 h-full w-auto block z-10 max-w-none opacity-30 md:opacity-100" src="{{ Vite::asset('resources/images/about-line.svg')}}" width="725" height="901">

                <div class="flex flex-row flex-wrap -mx-6 items-center relative z-20">
                    <div class="px-6 my-6 md:my-0 w-full md:w-3/6 lg:w-1/2 xl:w-4/12 text-center md:text-right order-first md:order-last">
                        <div class="max-w-full w-[525px] inline-block text-lg xl:text-xl leading-snug relative z-20 text-center md:text-left">
                            <h3 class="font-bold text-[24px] lg:text-[34px] leading-tight mb-6">About us</h3>
                            <p class="mb-0 text-lg">MorePaws is a community platform to help find everything you need as a dog owner. From building a reliable and supportive network for you and your dog to exploring new walks that end up at dog-friendly venues, MorePaws is the place to be. Enjoy discounts on some of the best pet care brands, reach out to fellow dog owners for support, and make dog ownership the most rewarding thing in your life.</p>
                        </div>
                        <div class="flex flex-row flex-wrap items-center -mx-2 justify-center md:justify-start mt-5">
                            <div class="p-1">
                                <a href="https://apps.apple.com/us/app/morepaws/id6621271192" target="_blank">
                                    <img class="w-auto h-[48px]" src="{{ Vite::asset('resources/images/app-store.svg')}}" alt="App Store" width="180" height="48">
                                </a>
                            </div>
                            <div class="p-1">
                                <a href="https://play.google.com/store/apps/details?id=com.unlimitedcoders.morepaws" target="_blank">
                                    <img class="w-auto h-[48px]" src="{{ Vite::asset('resources/images/google-play.svg')}}" alt="Google Play" width="180" height="48">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="px-6 my-6 md:my-0 w-full md:w-3/6 lg:w-1/2 xl:w-7/12 text-center order-last md:order-first">
                        <div class="px-5 ssm:px-8 md:!px-0">
                            <picture class="block">
                                <source srcset="{{ Vite::asset('resources/images/about-MorePaws.webp')}}" type="image/webp">
                                <img loading="lazy" src="{{ Vite::asset('resources/images/about-MorePaws.png')}}" width="709" height="618" alt="image showing the benefits of joining the MorePaws community to introduce the platform to new users." class="max-w-full inline-block">
                            </picture>
                        </div>
                    </div>
                </div>
                <img loading="lazy" class="absolute hidden md:block left-[8%] top-[50px] z-10" src="{{ Vite::asset('resources/images/about-us-paws.svg')}}" width="119" height="144">
            </div>
        </section>

        <section class="w-full relative pt-[70px] md:pt-[100px] pb-[74px] overflow-hidden">
            <div class="w-full max-w-[1580px] px-[20px] md:px-[25px] mx-auto relative">

                <div class="w-[1020px] max-w-full mx-auto z-20 relative">
                    <h3 class="font-bold text-[24px] lg:text-[34px] leading-tight mb-6">Our story</h3>
                    <div class="flex flex-col flex-wrap lg:flex-row">
                        <div class="w-full lg:w-[520px] text-maingray !leading-[160%] text-lg sm:text-xl mb-10 lg:mb-0 text-center md:text-left">
                            <p>MorePaws was born when mother Diane and her son Ry became proud owners of their new furry friend (Betty). They were thrilled to have a dog but soon realised that finding other dog owners with similar dog traits in their local area was a challenge. From this experience, they thought everyone would benefit if they knew more people who owned dogs. Their goal is to build a community where dog owners can form friendships and local support networks which will help one another on the everyday struggles, whether it is in need of a last minute dog sit favour or finding compatible dogs in the area.</p>
                            <p>With Diane's 30 years in the dog industry and Ry's entrepreneurial mindset, they continued to brainstorm and gather up all of the struggles dog owners face and build a community platform around them.</p>
                            <p>And that is why they believe, the MorePaws the merrier!</p>
                        </div>
                        <div class="w-full lg:w-[calc(100%_-_520px)] text-center lg:text-right">
                            <picture class="inline-block">
                                <source srcset="{{ Vite::asset('resources/images/Founders-of-MorePaws.webp')}}" type="image/webp">
                                <img loading="lazy" src="{{ Vite::asset('resources/images/Founders-of-MorePaws.png')}}" width="341" height="441" alt="An image of the founders and their miniature poodle dog." class="max-w-full inline-block">
                            </picture>
                        </div>
                    </div>
                </div>

                <img loading="lazy" class="absolute hidden md:block left-[85%] top-1/2 -translate-y-1/2 z-10" src="{{ Vite::asset('resources/images/join-paws.svg')}}" width="272" height="193">
            </div>
        </section>

        @if(Session::has('message'))
            <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 15000)">
                @include('users.modals.user_registration_modal')
            </div>
        @endif
    </div>
</x-app-layout>