@extends('layout')

@section('title', 'homepage')


@section('content')
    {{-- Hero section --}}
    <section class="w-full h-[700px] bg-light-gray">
        <div class="flex h-full items-end justify-center">
            <img src="assets/hero_image.jpg" alt="" class="mix-blend-multiply w-[501px] h-[655px] ">
        </div>
        <div
            class="flex justify-start items-center min-w-[358px] h-[95px] bg-black rounded-l-full top-[278px] right-[-280px] absolute hover:-translate-x-[280px] duration-200">
            <img src="assets/waving_hand.png" alt="" class="w-[45px] h-[45px] ml-[33px] mr-[28px]">
            <p class="text-white text-heading3 font-medium pr-[27px]">Hi, I'm Szilard</p>
        </div>
    </section>
    {{-- About section --}}
    <section class="w-full bg-off-white">
        <div class="flex justify-between pl-[80px] pr-[80px] pt-[160px]">
            <p class="text-heading3">About</p>
            <div class="max-w-[840px] text-para-large">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur.
            </div>
        </div>
    </section>
    {{-- Recent works section --}}
    <section class="w-full bg-off-white">
        <div class="flex justify-between pl-[80px] pr-[80px] pt-[160px]">
            <p class="text-heading3">
                Recent Work
            </p>
            <div class="flex flex-col w-full max-w-[840px] gap-y-[33px]">
                <div class="flex justify-between items-center">
                    <div class="flex flex-col gap-y-[18px]">
                        <p class="text-heading2">Decodable.co</p>
                        <p class="text-para-medium">Brand Design - Webflow Development - Web Design</p>
                    </div>
                    <a href="" class="">
                        <div
                            class="flex justify-center items-center w-[85px] h-[85px] rounded-full border-solid border-2 text-dark-gray hover:border-0 hover:bg-black group">
                            <x-heroicon-o-arrow-up-right
                                class="w-[32px] h-[32px] text-dark-gray group-hover:text-off-white" />
                        </div>
                    </a>
                </div>
                <span class="w-full h-[1px] bg-black"></span>
                <div class="flex justify-between items-center">
                    <div class="flex flex-col gap-y-[18px]">
                        <p class="text-heading2">Gofirefly.io</p>
                        <p class="text-para-medium">Brand Design - Webflow Development - Web Design</p>
                    </div>
                    <a href="" class="">
                        <div
                            class="flex justify-center items-center w-[85px] h-[85px] rounded-full border-solid border-2 text-dark-gray hover:border-0 hover:bg-black group">
                            <x-heroicon-o-arrow-up-right
                                class="w-[32px] h-[32px] text-dark-gray group-hover:text-off-white" />
                        </div>
                    </a>
                </div>
                <span class="w-full h-[1px] bg-black"></span>
                <div class="flex justify-between items-center">
                    <div class="flex flex-col gap-y-[18px]">
                        <p class="text-heading2">Blinkops.com</p>
                        <p class="text-para-medium">Brand Design - Webflow Development - Web Design</p>
                    </div>
                    <a href="" class="">
                        <div
                            class="flex justify-center items-center w-[85px] h-[85px] rounded-full border-solid border-2 text-dark-gray hover:border-0 hover:bg-black group">
                            <x-heroicon-o-arrow-up-right
                                class="w-[32px] h-[32px] text-dark-gray group-hover:text-off-white" />
                        </div>
                    </a>
                </div>
                <span class="w-full h-[1px] bg-black"></span>
                <div class="flex justify-between items-center">
                    <div class="flex flex-col gap-y-[18px]">
                        <p class="text-heading2">Withkanvas.com</p>
                        <p class="text-para-medium">Brand Design - Webflow Development - Web Design</p>
                    </div>
                    <a href="" class="">
                        <div
                            class="flex justify-center items-center w-[85px] h-[85px] rounded-full border-solid border-2 text-dark-gray hover:border-0 hover:bg-black group">
                            <x-heroicon-o-arrow-up-right
                                class="w-[32px] h-[32px] text-dark-gray group-hover:text-off-white" />
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection