@extends('template.layout')
@section('content')

@include('template.topmenu')

<div class="event-single">

    <!-- HERO -->
    <section class="wedding-hero" style="background:url('/img/event/art/1.jpg') center center/cover no-repeat;">
        <div class="overlay"></div>
        <div class="hero-content">
            <span class="subtitle">CELEBRATE YOUR SPECIAL DAY</span>
            <h1>Art &<br>Launches</h1>
        </div>
    </section>

    <!-- INTRO -->
    <section class="event-intro">
        <h2>ART & LAUNCHES</h2>
        <p>Celebrate your special arts exhibitions, photography, product and collection launches.</p>
    </section>

    <!-- GALLERY -->
    <section id="gallery" class="gallery-section">
        <div class="gallery-grid">
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                            <div class="gallery-item">
                    <img src="/img/event/art/{{$i}}.jpg" class="img-fluid preview">
                </div>
                    </div>
    </section>

    <!-- CTA -->
    <section class="event-single-cta">
        <div class="wrap">
            <h3>Book Your Events</h3>
            <p>Contact us for availability and personalized offers.</p>
            <a href="https://wa.me/628111017540" class="btn-book">Contact Now</a>
        </div>
    </section>

</div>

@endsection