@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" href="#">सभी कवि</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">आधुनिक काल</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">रीतिकाल</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">भक्तिकाल</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">आदिकाल</a></li>
                        </ul>
                    </div>

                    <!-- Search -->
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="खोजिए">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                    </div>

                    <!-- Alphabet Bar -->
                    <div class="owl-carousel alphabet-carousel mb-3">
                        <button>सभी</button>
                        <button>अ</button>
                        <button>आ</button>
                        <button>इ</button>
                        <button>ई</button>
                        <button>उ</button>
                        <button>ऊ</button>
                        <button>ऋ</button>
                        <button>ए</button>
                        <button>ऐ</button>
                        <button>ओ</button>
                        <button>औ</button>
                        <button>अं</button>
                        <button>अः</button>
                        <button>क</button>
                        <button>ख</button>
                        <button>ग</button>
                        <button>घ</button>
                        <button>ङ</button>
                        <button>च</button>
                        <button>छ</button>
                        <button>ज</button>
                        <button>झ</button>
                        <button>ञ</button>
                        <button>ट</button>
                        <button>ठ</button>
                        <button>ड</button>
                        <button>ढ</button>
                        <button>ण</button>
                        <button>त</button>
                        <button>थ</button>
                        <button>द</button>
                        <button>ध</button>
                        <button>न</button>
                        <button>प</button>
                        <button>फ</button>
                        <button>ब</button>
                        <button>भ</button>
                        <button>म</button>
                        <button>य</button>
                        <button>र</button>
                        <button>ल</button>
                        <button>व</button>
                        <button>श</button>
                        <button>ष</button>
                        <button>स</button>
                        <button>ह</button>
                        <button>क्ष</button>
                        <button>त्र</button>
                        <button>ज्ञ</button>
                    </div>


                    <div class="poet-card d-md-flex align-items-start">
                        <img src="https://www.hindwi.org//content/images/quillM_round.png"
                            class="rounded-circle me-md-3 mb-2 mb-md-0" alt="Poet">

                        <div class="flex-grow-1">
                            <h5 class="mb-1">आ. रा. देशपांडे अनिल</h5>

                            <!-- Mobile Stack Start -->
                            <div class="d-block d-md-none mobile-stack">
                                <div class="poet-meta mb-1"><i class="bi bi-calendar"></i> 1901-1982</div>
                                <div class="poet-meta mb-2"><i class="bi bi-geo-alt"></i> अकोला</div>
                                <p class="mb-1">मराठी कविता में मुक्तछंद के प्रणेता...</p>
                                <div class="text-primary">5 कविता</div>
                            </div>
                            <!-- Mobile Stack End -->

                            <!-- Desktop Stack Start -->
                            <div class="d-none d-md-flex justify-content-between">
                                <div>
                                    <p class="mb-1">मराठी कविता में मुक्तछंद के प्रणेता...</p>
                                    <div class="text-primary">5 कविता</div>
                                </div>
                                <div class="text-end d-flex" style="gap:20px;">
                                    <div class="poet-meta"><i class="bi bi-calendar"></i> 1901-1982</div>
                                    <div class="poet-meta"><i class="bi bi-geo-alt"></i> अकोला</div>
                                </div>
                            </div>
                            <!-- Desktop Stack End -->

                        </div>
                    </div>

                    <div class="poet-card d-md-flex align-items-start">
                        <img src="https://www.hindwi.org//content/images/quillM_round.png"
                            class="rounded-circle me-md-3 mb-2 mb-md-0" alt="Poet">

                        <div class="flex-grow-1">
                            <h5 class="mb-1">ए. के. परंदामनारिल</h5>

                            <!-- Mobile Stack Start -->
                            <div class="d-block d-md-none mobile-stack">
                                <div class="poet-meta mb-1"><i class="bi bi-calendar"></i> 1901</div>
                                <div class="poet-meta mb-2"><i class="bi bi-geo-alt"></i> अकोला</div>
                                <p class="mb-1">मराठी कविता में मुक्तछंद के प्रणेता...</p>
                                <div class="text-primary">5 कविता</div>
                            </div>
                            <!-- Mobile Stack End -->

                            <!-- Desktop Stack Start -->
                            <div class="d-none d-md-flex justify-content-between">
                                <div>
                                    <p class="mb-1">मराठी कविता में मुक्तछंद के प्रणेता...</p>
                                    <div class="text-primary">5 कविता</div>
                                </div>
                                <div class="text-end d-flex" style="gap:20px;">
                                    <div class="poet-meta"><i class="bi bi-calendar"></i> 1901</div>
                                    <div class="poet-meta"><i class="bi bi-geo-alt"></i> अकोला</div>
                                </div>
                            </div>
                            <!-- Desktop Stack End -->

                        </div>
                    </div>

                    <div class="poet-card d-md-flex align-items-start">
                        <img src="https://www.hindwi.org//content/images/quillM_round.png"
                            class="rounded-circle me-md-3 mb-2 mb-md-0" alt="Poet">

                        <div class="flex-grow-1">
                            <h5 class="mb-1">आ. रा. देशपांडे अनिल</h5>

                            <!-- Mobile Stack Start -->
                            <div class="d-block d-md-none mobile-stack">
                                <div class="poet-meta mb-1"><i class="bi bi-calendar"></i> 1901-1982</div>
                                <div class="poet-meta mb-2"><i class="bi bi-geo-alt"></i> अकोला</div>
                                <p class="mb-1">मराठी कविता में मुक्तछंद के प्रणेता...</p>
                                <div class="text-primary">5 कविता</div>
                            </div>
                            <!-- Mobile Stack End -->

                            <!-- Desktop Stack Start -->
                            <div class="d-none d-md-flex justify-content-between">
                                <div>
                                    <p class="mb-1">मराठी कविता में मुक्तछंद के प्रणेता...</p>
                                    <div class="text-primary">5 कविता</div>
                                </div>
                                <div class="text-end d-flex" style="gap:20px;">
                                    <div class="poet-meta"><i class="bi bi-calendar"></i> 1901-1982</div>
                                    <div class="poet-meta"><i class="bi bi-geo-alt"></i> अकोला</div>
                                </div>
                            </div>
                            <!-- Desktop Stack End -->

                        </div>
                    </div>

                    <div class="poet-card d-md-flex align-items-start">
                        <img src="https://www.hindwi.org//content/images/quillM_round.png"
                            class="rounded-circle me-md-3 mb-2 mb-md-0" alt="Poet">

                        <div class="flex-grow-1">
                            <h5 class="mb-1">ए. के. परंदामनारिल</h5>

                            <!-- Mobile Stack Start -->
                            <div class="d-block d-md-none mobile-stack">
                                <div class="poet-meta mb-1"><i class="bi bi-calendar"></i> 1901</div>
                                <div class="poet-meta mb-2"><i class="bi bi-geo-alt"></i> अकोला</div>
                                <p class="mb-1">मराठी कविता में मुक्तछंद के प्रणेता...</p>
                                <div class="text-primary">5 कविता</div>
                            </div>
                            <!-- Mobile Stack End -->

                            <!-- Desktop Stack Start -->
                            <div class="d-none d-md-flex justify-content-between">
                                <div>
                                    <p class="mb-1">मराठी कविता में मुक्तछंद के प्रणेता...</p>
                                    <div class="text-primary">5 कविता</div>
                                </div>
                                <div class="text-end d-flex" style="gap:20px;">
                                    <div class="poet-meta"><i class="bi bi-calendar"></i> 1901</div>
                                    <div class="poet-meta"><i class="bi bi-geo-alt"></i> अकोला</div>
                                </div>
                            </div>
                            <!-- Desktop Stack End -->

                        </div>
                    </div>


                </div>

                <!-- Sidebar -->
                <div class="col-lg-3">
                    <div class="accordion sidebar mb-4" id="kaviyonList">
                        <h5 class="mb-3">कवियों की सूची</h5>

                        <!-- आधुनिक काल -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading1">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapse1">
                                    आधुनिक काल
                                </button>
                            </h2>
                            <div id="collapse1" class="accordion-collapse collapse" data-bs-parent="#kaviyonList">
                                <div class="accordion-body">
                                    <ul class="list-unstyled mb-0">
                                        <li><a href="#">आधुनिक उपशैली 1</a></li>
                                        <li><a href="#">आधुनिक उपशैली 2</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- रीतिकाल -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading2">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapse2">
                                    रीतिकाल
                                </button>
                            </h2>
                            <div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#kaviyonList">
                                <div class="accordion-body">
                                    <ul class="list-unstyled mb-0">
                                        <li><a href="#">आचार्य</a></li>
                                        <li><a href="#">अलक्षित</a></li>
                                        <li><a href="#">अवधी</a></li>
                                        <li><a href="#">बावरी संप्रदाय</a></li>
                                        <li><a href="#">नीति कवि</a></li>
                                        <li><a href="#">निंबार्क संप्रदाय (रीतिकाल)</a></li>
                                        <li><a href="#">ब्रजी</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- भक्तिकाल -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading3">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapse3">
                                    भक्तिकाल
                                </button>
                            </h2>
                            <div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#kaviyonList">
                                <div class="accordion-body">
                                    <ul class="list-unstyled mb-0">
                                        <li><a href="#">भक्तिकाल उपशैली 1</a></li>
                                        <li><a href="#">भक्तिकाल उपशैली 2</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- आदिकाल -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading4">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapse4">
                                    आदिकाल
                                </button>
                            </h2>
                            <div id="collapse4" class="accordion-collapse collapse" data-bs-parent="#kaviyonList">
                                <div class="accordion-body">
                                    <ul class="list-unstyled mb-0">
                                        <li><a href="#">आदिकाल उपशैली 1</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <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