@include('userpage.header')
<div class="content-body">
    <div class="container-fluid">
        <div class="row">
            <!-- Row 1 -->
            <div class="card shadow-lg border-0 mb-4"
                style="background: linear-gradient(135deg, #0d9488, #0d9488); border-radius: 15px;">
                <div class="card-body d-flex align-items-center justify-content-between text-white">
                    <div>
                        <h2 class="fw-bold">😊 Welcome to <span style="color: #ffd700;">Tagore College League</span>
                        </h2>
                        <p class="mb-0">Explore your dashboard with quick insights below</p>
                    </div>
                    <div>
                        <img src="https://img.icons8.com/color/96/paint-palette.png" alt="Art Icon" />
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="col-xl-4 col-sm-6">
                <a href="">
                    <div class="card gradient-2 card-bx">
                        <div class="card-body d-flex align-items-center">
                            <div class="me-auto text-white">
                                <h2 class="text-white">2</h2>
                                <span class="fs-18">Total Bookings</span>
                            </div>
                            <i class="flaticon-381-calendar-1 text-white" style="font-size: 40px;"></i>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xl-4 col-sm-6">
                <a href="">
                    <div class="card gradient-3 card-bx">
                        <div class="card-body d-flex align-items-center">
                            <div class="me-auto text-white">
                                <h2 class="text-white">3</h2>
                                <span class="fs-18">Total Staff</span>
                            </div>
                            <i class="flaticon-381-user text-white" style="font-size: 40px;"></i>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="row mt-3">
           
            <div class="col-xl-4 col-sm-6">
                <a href="">
                    <div class="card gradient-4 card-bx">
                        <div class="card-body d-flex align-items-center">
                            <div class="me-auto text-white">
                                <h2 class="text-white">4</h2>
                                <span class="fs-18">Testimonials</span>
                            </div>
                            <i class="fa-solid fa-comments text-white" style="font-size: 40px;"></i>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xl-4 col-sm-6">
                <a href="">
                    <div class="card gradient-5 card-bx">
                        <div class="card-body d-flex align-items-center">
                            <div class="me-auto text-white">
                                <h2 class="text-white">2</h2>
                                <span class="fs-18">Enquiry Form</span>
                            </div>
                            <i class="fa-solid fa-envelope text-white" style="font-size: 40px;"></i>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xl-4 col-sm-6">
                <a href="">
                    <div class="card gradient-6 card-bx">
                        <div class="card-body d-flex align-items-center">
                            <div class="me-auto text-white">
                                <h2 class="text-white">2</h2>
                                <span class="fs-18">Subscriptions</span>
                            </div>
                            <i class="flaticon-381-notepad text-white" style="font-size: 40px;"></i>
                        </div>
                    </div>
                </a>
            </div>
        </div> -->


        <!-- <div class="row">
            <div class="col-xl-3 col-xxl-4">
                <div class="row">
                    <div class="col-xl-12 col-sm-6">
                        <div class="card text-center">
                            <div class="card-body">
                                <div id="radialChart" class="radialChart"></div>
                                <h2>4</h2>
                                <span class="fs-16 text-black">Available Room Today</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div> -->

        <!-- <div class="col-xl-8">
                <div class="card">
                    <div class="card-body py-0">
                        <div class="d-flex justify-content-between mt-4">
                            <h4 class="card-title">Newest Booking</h4>
                        </div>
                        <div class="row">
                            <div class="col-xl-6 col-sm-6">
                                <div class="dz-image-bx rounded">
                                
                                    <div class="dz-info">
                                        <h5></h5>
                                        <span class="text-primary">
                                            
                                        </span>

                                        <div class="d-flex flex-wrap mt-3">
                                            <span class="me-auto pe-3"></span>
                                          
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div> -->

        <!-- <div class="col-xl-12">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-header border-0">
                                <h4 class="card-title">Latest Customer Review</h4>
                                <div class="dropdown">
                                    <a href="javascript:void(0);" class="btn-link" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
                                                stroke="#575757" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round"></path>
                                            <path
                                                d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z"
                                                stroke="#575757" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round"></path>
                                            <path
                                                d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z"
                                                stroke="#575757" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>

                            <div class="card-body" id="customerReviewContent">
                                <div class="row">
                                   
                                    <div class="col-xl-6 col-sm-12">
                                        <div class="dz-review-bx d-flex">
                                            <div class="dz-media me-4">
                                                
                                            </div>
                                            <div class="dz-info flex-grow-1">
                                                <div class="dz-name mb-3">
                                                    <div>
                                                        <h6 class="title mb-1"></h6>
                                                        <span class="date text-black op8">
                                                            Posted on
                                                          
                                                        </span>
                                                    </div>
                                                    <ul class="star-review">
                                                        
                                                    </ul>
                                                </div>
                                                <div class="dz-footer">
                                                    <p class="text-black op8 mb-sm-0 mb-3 me-4">
                                                       </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                  
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div> -->


    </div>
    <div class="container mt-5">

        <!-- Artworks Section -->
        <h3 class="fw-bold mb-4">🎨 Featured Artworks</h3>

        <div class="row g-4">

            <!-- Artwork 1 -->
            <div class="col-xl-4 col-md-6">
                <div class="card shadow-lg border-0" style="border-radius: 15px;">
                    <img src="{{ asset('assets/artworks/art1.jpeg')}}" class="card-img-top"
                        style="border-radius: 15px 15px 0 0; height:200px; object-fit:cover;" alt="Artwork 1">
                    <div class="card-body text-center">
                        <h5 class="fw-bold">Colors of Emotion</h5>
                        <p class="text-muted">A vibrant abstract painting exploring the raw intensity of human emotions
                            through bold strokes.</p>
                        <div class="d-flex gap-2 mt-2 flex-wrap justify-content-center">
                            <span class="badge bg-primary"><i class="fa-solid fa-palette"></i> Abstract</span>
                            <span class="badge bg-success"><i class="fa-solid fa-brush"></i> Acrylic</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Artwork 2 -->
            <div class="col-xl-4 col-md-6">
                <div class="card shadow-lg border-0" style="border-radius: 15px;">
                    <img src="{{ asset('assets/artworks/art2.jpg')}}" class="card-img-top"
                        style="border-radius: 15px 15px 0 0; height:200px; object-fit:cover;" alt="Artwork 2">
                    <div class="card-body text-center">
                        <h5 class="fw-bold">Nature’s Whispers</h5>
                        <p class="text-muted">Captures the serene beauty of a quiet forest, blending shades of green and
                            gold with delicate detail.</p>
                        <div class="d-flex gap-2 mt-2 flex-wrap justify-content-center">
                            <span class="badge bg-success"><i class="fa-solid fa-leaf"></i> Nature</span>
                            <span class="badge bg-dark"><i class="fa-solid fa-brush"></i> Oil</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Artwork 3 -->
            <div class="col-xl-4 col-md-6">
                <div class="card shadow-lg border-0" style="border-radius: 15px;">
                    <img src="{{ asset('assets/artworks/art3.jpg')}}" class="card-img-top"
                        style="border-radius: 15px 15px 0 0; height:200px; object-fit:cover;" alt="Artwork 3">
                    <div class="card-body text-center">
                        <h5 class="fw-bold">Golden Horizon</h5>
                        <p class="text-muted">An expressive landscape painting of a glowing sunset, symbolizing hope and
                            renewal.</p>
                        <div class="d-flex gap-2 mt-2 flex-wrap justify-content-center">
                            <span class="badge bg-warning text-dark"><i class="fa-solid fa-sun"></i> Landscape</span>
                            <span class="badge bg-primary"><i class="fa-solid fa-paintbrush"></i> Watercolor</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
</div>
<!--**********************************
	Content body end
***********************************-->

<!--**********************************
            Content body end
        ***********************************-->
@include('userpage.footer')