<section>
    <div class="container-fluid features-container" name="KeyFeatures">
        <div class="dev-header">
            <h2>Key Features</h2>
        </div>
        <div class="benefits-list">
            <div class="benefit-item">
                <div class="benifit-image">
                    <img src="https://devportal-content.s3.amazonaws.com/ABCOrganization/Key-feature-1.svg"
                        class="img-fluid rounded-start" alt=".." />
                </div>
                <h3>Extensive Activity Listings</h3>
                <p>Access a wide range of leisure activities, including outdoor adventures, cultural experiences,
                    wellness retreats, sports, entertainment, and more</p>
            </div>
            <div class="benefit-item">
                <div class="benifit-image">
                    <img src="https://devportal-content.s3.amazonaws.com/ABCOrganization/Key-feature-2.svg"
                        class="img-fluid rounded-start" alt=".." />
                </div>
                <h3>Real-Time Availability & Booking</h3>
                <p>Get real-time updates on activity availability, including dates, times, and group size limitations.
                </p>
            </div>
            <div class="benefit-item">
                <div class="benifit-image">
                    <img src="https://devportal-content.s3.amazonaws.com/ABCOrganization/Key-feature-3.svg"
                        class="img-fluid rounded-start" alt=".." />
                </div>
                <h3>Location-Based Services</h3>
                <p>Search and filter activities based on proximity to the user's location or specific landmarks.</p>
            </div>
        </div>
    </div>
    <div class="container-fluid api-overview" name="Overview">
        <div class="row">
            <div class="row text-start">
                <h1 class="overview-title">Overview</h1>
            </div>
            <div class="col-lg-8 api-content-text">
                <div>
                    <p class="intro-text">The Leisure Activities API offers a dynamic platform for accessing a wide
                        array of leisure and recreational activities, from outdoor adventures and cultural experiences
                        to local events and entertainment options. Ideal for travel planners, lifestyle apps, and
                        community platforms, this API provides up-to-date information on activities suited to various
                        interests and age groups. By integrating the Leisure Activities API, you can enrich your service
                        with diverse and engaging content, helping users find and enjoy activities that enhance their
                        leisure time and overall experience.</p>
                </div>
                <div>
                    <h5 class="section-title">Requirements</h5>
                </div>
                <div>
                    <p class="intro-text">This API can facilitate the following requirements</p>
                </div>
                <ul class="requirement-list">
                    <li><span class="checkmark"><i class="bi bi-check-circle-fill"></i></span>
                    <li><span class="checkmark"><i class="bi bi-check-circle-fill"></i></span>
                        The API offers an extensive catalog of leisure activities, meticulously curated and categorized
                        to encompass a wide spectrum of interests</li>
                    </li>
                    <li><span class="checkmark"><i class="bi bi-check-circle-fill"></i></span>
                        Each activity listing within the API is accompanied by comprehensive details</li>
                    <li><span class="checkmark"><i class="bi bi-check-circle-fill"></i></span>
                        To facilitate effortless exploration, the API incorporates robust search and filtering
                        capabilities</li>
                    <li><span class="checkmark"><i class="bi bi-check-circle-fill"></i></span>
                        Leveraging geolocation data, the API offers location-based recommendations, enabling users to
                        discover nearby leisure activities and attractions</li>
                </ul>
            </div>
            <div class="col-lg-4 api-sidebar">
                <div>
                    <h5 class="section-title">Use this API to initiate:</h5>
                </div>
                <div>
                    <ul class="api-list">
                        <li>Incorporate the API into your application to offer users a wide range of leisure options,
                            including event details, activity descriptions, and booking information. This will allow you
                            to provide tailored recommendations based on user preferences and location</li>
                        <li>Use the API to feature curated lists of activities, helping users discover new experiences
                            and plan their leisure time effectively. This can include filtering activities by category,
                            location, or date to match users’ interests.</li>
                        <li>Regularly update your offerings with the latest data from the API to ensure your users have
                            access to current and accurate information. This helps maintain engagement and encourages
                            repeat visits.</li>
                        <li>Analyze user interactions with the API to understand preferences and trends. Use these
                            insights to refine your content, tailor marketing efforts, and develop new features that
                            cater to your audience’s needs</li>
                    </ul>
                </div>
                <div>
                    <button type="button" class="common-btn-secondary">Read More</button>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid howwork-content" name="HowItWorks">
        <div class="col-lg-12 dev-header">
            <h2>How it Works</h2>
        </div>
        <div class="row card-section">
            <div class="col-lg-4">
                <div class="card dev-card custom-api-card">
                    <div class="card-body">
                        <div class="icon-container">
                            <div class="icon-circle">
                                <span>1</span>
                            </div>
                            <div class="yellow-circle"></div>
                        </div>
                        <h5 class="work-apicard-title">Discover Activities</h5>
                        <p>Start by searching our extensive database of leisure activities. Users can filter results
                            based on location, activity type, duration, price range, and more.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card dev-card custom-api-card">
                    <div class="card-body">
                        <div class="icon-container">
                            <div class="icon-circle">
                                <span>2</span>
                            </div>
                            <div class="yellow-circle"></div>
                        </div>
                        <h5 class="work-apicard-title">Retrieve Detailed Activity Information</h5>
                        <p>Once users find an activity they’re interested in, the API provides detailed information,
                            including descriptions, schedules, difficulty levels, and age suitability.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card dev-card custom-api-card">
                    <div class="card-body">
                        <div class="icon-container">
                            <div class="icon-circle">
                                <span>3</span>
                            </div>
                            <div class="yellow-circle"></div>
                        </div>
                        <h5 class="work-apicard-title">Book the Activity</h5>
                        <p>Users can book their chosen activities directly through your platform using the API. The
                            booking process is smooth and secure, with instant confirmation provided upon successful
                            reservation</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="faq-container" name="FAQ">
        <h1>FAQ</h1>
        <p>Can't find the answer you're looking for? Check out our
            <a href="#">documentation</a>
            or
            <a href="#">contact our team.</a>
        </p>

        <div class="faq-item">
            <p class="faq-question">What types of activities are available through the API?</p>
            <div class="faq-tags">
                <span class="badge faq-badge-custom1">FAQ</span>
                <span class="badge faq-badge-custom1">Payment API</span>
            </div>
            <p class="faq-answer">The API offers a vast selection of activities, including adventure sports, guided
                tours, cultural events, wellness retreats, dining experiences, and more. This diverse range ensures that
                you can cater to various interests and preferences.</p>
        </div>
        <hr />
        <div class="faq-item">
            <p class="faq-question">Does the API provide real-time availability and pricing?</p>
            <div class="faq-tags">
                <span class="badge faq-badge-custom1">FAQ</span>
                <span class="badge faq-badge-custom1">Payment API</span>
            </div>
            <p class="faq-answer">Yes, the Leisure Activities API provides real-time data on activity availability and
                pricing. This ensures that the information displayed to users is accurate and up-to-date, allowing them
                to make informed booking decisions.</p>
        </div>
        <hr />
        <div class="faq-item">
            <p class="faq-question">Can I customize the data I receive from the API?</p>
            <div class="faq-tags">
                <span class="badge faq-badge-custom1">FAQ</span>
                <span class="badge faq-badge-custom1">Payment API</span>
            </div>
            <p class="faq-answer">Absolutely! The API is designed with flexibility in mind, allowing you to customize
                the data fields and response formats to fit your platform’s needs. This ensures that the integration
                aligns perfectly with your user interface and experience.</p>
        </div>
    </div>
</section>