@extends('frontLayout.master')
@section('content')
    <main class="main">
        <div class="container mt-4">
            <div class="row">
                <!-- Main Content -->
                <div class="col-lg-9">
                    <h2 class="text-danger fw-bold">गद्य</h2>
                    <p>हिंदी की गद्य-परंपरा से विभिन्न विधाओं की रचनाओं का संग्रह</p>
                    <div class="tabs-scroll-wrapper mb-4">
                        <!-- Tabs -->
                        <ul class="nav nav-tabs mb-3">
                            <li class="nav-item">
                                <a class="nav-link active fw-bold text-dark" href="#">संग्रह</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" href="#">विधा</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" href="#">सूची</a>
                            </li>
                        </ul>
                    </div>
                    <div class="row row-cols-2 row-cols-md-9 g-4">
                        <div class="col-3">
                            <div class="card kavita-card h-100 text-center border">
                                <img src="https://www.hindwi.org/Images/Cms/collectionSeries/Prose/premchand_Large.jpg"
                                    class="card-img-top" alt="प्रेमचंद">
                                <div class="card-body p-2">
                                    <p class="card-text fw-bold">प्रेमचंद</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-3">
                            <div class="card kavita-card h-100 text-center border">
                                <img src="https://www.hindwi.org/Images/Cms/collectionSeries/Prose/premchand_Large.jpg"
                                    class="card-img-top" alt="भगवती चरण वर्मा">
                                <div class="card-body p-2">
                                    <p class="card-text fw-bold">भगवती चरण वर्मा</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-3">
                            <div class="card kavita-card h-100 text-center border">
                                <img src="https://www.hindwi.org/Images/Cms/collectionSeries/Prose/phaniishvarnaath-renu_Large.jpg"
                                    class="card-img-top" alt="फणीश्वरनाथ रेणु">
                                <div class="card-body p-2">
                                    <p class="card-text fw-bold">फणीश्वरनाथ रेणु</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-3">
                            <div class="card kavita-card h-100 text-center border">
                                <img src="https://www.hindwi.org/Images/Cms/collectionSeries/Prose/phaniishvarnaath-renu_Large.jpg"
                                    class="card-img-top" alt="अज्ञेय">
                                <div class="card-body p-2">
                                    <p class="card-text fw-bold">अज्ञेय</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="card kavita-card h-100 text-center border">
                                <img src="https://www.hindwi.org/Images/Cms/collectionSeries/Prose/premchand_Large.jpg"
                                    class="card-img-top" alt="प्रेमचंद">
                                <div class="card-body p-2">
                                    <p class="card-text fw-bold">प्रेमचंद</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-3">
                            <div class="card kavita-card h-100 text-center border">
                                <img src="https://www.hindwi.org/Images/Cms/collectionSeries/Prose/premchand_Large.jpg"
                                    class="card-img-top" alt="भगवती चरण वर्मा">
                                <div class="card-body p-2">
                                    <p class="card-text fw-bold">भगवती चरण वर्मा</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-3">
                            <div class="card kavita-card h-100 text-center border">
                                <img src="https://www.hindwi.org/Images/Cms/collectionSeries/Prose/phaniishvarnaath-renu_Large.jpg"
                                    class="card-img-top" alt="फणीश्वरनाथ रेणु">
                                <div class="card-body p-2">
                                    <p class="card-text fw-bold">फणीश्वरनाथ रेणु</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-3">
                            <div class="card kavita-card h-100 text-center border">
                                <img src="https://www.hindwi.org/Images/Cms/collectionSeries/Prose/phaniishvarnaath-renu_Large.jpg"
                                    class="card-img-top" alt="अज्ञेय">
                                <div class="card-body p-2">
                                    <p class="card-text fw-bold">अज्ञेय</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-3 mt-md-4">
                    <div class="sidebar">
                        <!-- Section 1: Popular -->
                        <h5>वेला पॉपुलर</h5>

                        <div class="popular-card">
                            <img src="https://www.hindwi.org/Images/ResorceImages/blog/6bbba978-42f0-4a89-a998-6e62f006b941_Thumb.jpg"
                                alt="Poster">
                            <p>जेएनयू सलाख़ों के किस्से-4</p>
                        </div>

                        <div class="popular-card">
                            <img src="https://www.hindwi.org/Images/ResorceImages/blog/6bbba978-42f0-4a89-a998-6e62f006b941_Thumb.jpg"
                                alt="Poster">
                            <p>रिव्हसपरी 3.0 : हम आपके डिजिटल डिटेल्स की क़द्र करते हैं</p>
                        </div>

                        <!-- Section 2: Popular Poems -->
                        <h5>पॉपुलर कविता</h5>

                        <div class="popular-poem">
                            <span>प्रार्थना</span>
                            <p>ईश्वर, ध्यान देना... जब खुदा होना पड़े मुझे तो अपने ...</p>
                        </div>

                        <div class="popular-poem">
                            <span>पिताओं के बारे में</span>
                            <p>मैंने बहुत समय तक कविता नहीं लिखी सच्चाई बस लिखते- ...</p>
                        </div>

                        <div class="popular-poem">
                            <span>अंतिम आकाश</span>
                            <p>कितना और समझें खुद को! खुद की सुई-मेंटल बॉक्स ...</p>
                        </div>

                        <!-- Section 3: Promo -->
                        <div class="promo-banner">
                            <img src="https://hindwi.org/Images/Cms/Cards/lms.jpg?v=1" alt="Promo">
                        </div>

                        <h5>
                            चुनिंदा कवितएँ</h5>

                        <div class="popular-card">
                            <img src="https://hindwi.org/Images/Cms/Cards/e1e37583-6a27-47ed-ae6c-dd38780fbc86.jpg"
                                alt="Poster">
                            <p>जेएनयू सलाख़ों के किस्से-4</p>
                        </div>

                        <div class="popular-card">
                            <img src="https://hindwi.org/Images/Cms/Cards/e1e37583-6a27-47ed-ae6c-dd38780fbc86.jpg"
                                alt="Poster">
                            <p>रिव्हसपरी 3.0 : हम आपके डिजिटल डिटेल्स की क़द्र करते हैं</p>
                        </div>


                    </div>

                </div>



            </div>
        </div>

    </main>
@endsection