{{-- resources/views/front/home.blade.php --}}
@extends('front.layouts.mainLayout')

@section('content')
    <main class="projects">
        <section class="heroProjects"
            style="background-image: url('{{ asset('front/images/homeImages/bacProject.jpg') }}')">
            <div class="overlay"></div>
            <div class="container">
                <div class="hero-content">
                    <h1>OUR PROJECTS</h1>
                    <p>A Legacy of Innovation, Built for the Future.</p>
                    <!-- <a href="#projects" class="hero-btn"> EXPLOAR PROJECTS</a> -->
                </div>
            </div>
        </section>

        <section class="slogenProjects">
            <p>Living Lines draws from years of cross-sector expertise to deliver developments that
combine function, form, and forward-thinking design. Each project—past or present—
carries the Living Lines signature: thoughtful architecture, lasting value, and lifestyle-led
planning</p>
        </section>

        <section class="projectsSection">
            @foreach ($products as $index => $product)
                <div
                    data-aos="{{ $index % 2 === 0 ? 'fade-up-right' : 'fade-up-left' }}"
                    data-aos-delay="200"
style="background-image: url('{{ asset($product->image ?? 'front/images/default.jpg') }}');
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;"
                    
                >
                    <div class="filter">
                        <a href="{{ route('project', $product->id) }}">
                            <button>VIEW PROJECT</button>
                        </a>

                        <div>
                            <h3>{{ $product->title }}</h3>
                            <p>{{ Str::limit(strip_tags($product->short_description), 200) }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </section>
        <section class="ourPartners"
            style="position: relative; background-image: url('{{ asset('front/images/homeImages/1Artboard3.jpg') }}'); min-height: 400px; background-size: cover; background-position: center;">

            <div class="filter" data-aos="fade-up" data-aos-delay="200"
                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4);">

                <h1>Welcome to Refined Living — Discover the Art of Residence.  <a href={{route('contact')}}>Contact Us NOW!</span></h1>
            </div>
        </section>
<style>
    .ourPartners div{
display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }
    .ourPartners div h1{
        color:white;
        font-size:1.3rem;
           font-weight: 900;
    text-align: center;
    }
    .ourPartners div h1 a{
text-decoration: underline;
color:white;
    }
</style>

    </main>
@endsection