@extends('layouts.layoutplacement')
@section('aboutheading')
    <h2 style="padding-top: 210px; color:white;" class="fw-bold text-uppercase heading21 headerinner">Placement Drive</h2>
    <span style="color:white; font-family: Lexend, serif;" class="fw-bold subheading"><a href="{{asset('/')}}"
            style="text-decoration: none; color:white;">HOME</a>&nbsp;/&nbsp;<a href=""
            style="color:white; text-decoration: none;" class="text-uppercase">Placement Drive</a></span>
@endsection
@section('Aboutsection')
<div class="container-fluid py-5" style="background: linear-gradient(145deg, #f3f4f7, #ffffff);">
    <div class="row g-4">
        <!-- Left Sidebar -->
        <div class="col-lg-4">
            <div class="p-4  shadow" style="backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.6); border: 2px dashed    #ff6600 ;">
                <h4 class=" fw-bold mb-4" style="font-family: 'Poppins', sans-serif; color:#ff6600;">
                    <i class="bi bi-broadcast-pin me-2"></i> Placement Drives
                </h4>
                <hr/>

                <!-- Placement 1 -->
                <div class="d-flex align-items-center p-2 mb-3 rounded-3 shadow-sm" style="background: #ffffffee;">
                    <img src="https://www.desktophut.com/images/1741879782.webp" class="rounded-3 me-3" width="60" height="60" style="object-fit: cover;">
                    <div>
                        <h6 class="mb-1 fw-semibold text-dark" style="font-family: 'Poppins', sans-serif;"> Planet Spark</h6>
                        <small class="text-muted"><i class="bi bi-calendar-event me-1"></i> Dec 27, 2023</small>
                    </div>
                </div>

                <!-- Placement 2 -->
                <div class="d-flex align-items-center p-2 mb-3 rounded-3 shadow-sm" style="background: #ffffffee;">
                    <img src="https://www.munjalshowa.net/wp-content/uploads/2015/04/gurgaon.jpg" class="rounded-3 me-3" width="60" height="60" style="object-fit: cover;">
                    <div>
                        <h6 class="mb-1 fw-semibold text-dark" style="font-family: 'Poppins', sans-serif;">Munjal Showa Ltd.</h6>
                        <small class="text-muted"><i class="bi bi-calendar-event me-1"></i> Mar 02, 2024</small>
                    </div>
                </div>

                <!-- Placement 3 -->
                <div class="d-flex align-items-center p-2 mb-3 rounded-3 shadow-sm" style="background: #ffffffee;">
                    <img src="https://th.bing.com/th/id/OIP.42pwU5kPPKmaR2nx2rHZ-QAAAA?rs=1&pid=ImgDetMain" class="rounded-3 me-3" width="60" height="60" style="object-fit: cover;">
                    <div>
                        <h6 class="mb-1 fw-semibold text-dark" style="font-family: 'Poppins', sans-serif;"> Super Hoze Industries</h6>
                        <small class="text-muted"><i class="bi bi-calendar-event me-1"></i> Mar 02, 2024</small>
                    </div>
                </div>

                <!-- Add more statically if needed -->
            </div>
        </div>

        <!-- Right Content -->
        <div class="col-lg-8">
            <div class="p-4  shadow-lg bg-white position-relative" style="min-height: 400px; border: 2px dashed    #ff6600 ;">
                <div class="d-flex justify-content-between align-items-start flex-wrap">
                    <div>
                        <p class="text-muted mb-1"><i class="bi bi-calendar-check me-1"></i> Dec 27, 2023</p>
                        <h3 class="fw-bold mb-0 " style="font-family: 'Poppins', sans-serif; color:#ff6600;"> Planet Spark</h3>
                        
                        <p class="text-muted mt-1">Campus Drive of PlanetSpark</p>
                    </div>
                    <a href="#" class="btn  fw-bold px-4 py-2 rounded-pill shadow" style="font-family: 'Poppins', sans-serif; background-color: #ff6600; color:white;">
                        <i class="bi bi-send-check me-1"></i> Apply Now
                    </a>
                </div>

                <div class="text-center mt-4">
                    <img src="https://th.bing.com/th/id/OIP.42pwU5kPPKmaR2nx2rHZ-QAAAA?rs=1&pid=ImgDetMain" class="img-fluid rounded-4 shadow-sm" style=" object-fit: cover;" alt="Placement Poster">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 🔥 Glassmorphic & Premium Styling -->
<style>
    body {
        background: #f1f4f9;
        font-family: 'Poppins', sans-serif;
    }

    .rounded-4 {
        border-radius: 1rem !important;
    }

    .shadow-lg:hover {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
        transition: 0.3s ease-in-out;
        transform: scale(1.01);
    }

    .btn-danger {
        background-color: #c50d12;
        border: none;
    }

    .btn-danger:hover {
        background-color: #a10a0d;
    }

    .text-uppercase {
        letter-spacing: 0.5px;
    }
</style>
@endsection