<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your SAAS App</title>
    <!-- Include Tailwind CSS via CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />

</head>
<body class="font-sans bg-gray-100">

<section class="container mx-auto my-8">


    <!-- Tabbed Panel for Forms -->
    <div class="mb-8">
        <ul class="flex border-b">
            <li class="-mb-px mr-1">
                 <a href="javascript:void(0)" onclick="openTab(event, 'createBio')" class="bg-white inline-block py-2 px-4 font-semibold"><i class="fa fa-user"></i> Create Bio</a>
            </li>
            <li class="-mb-px mr-1">
                <a href="javascript:void(0)" onclick="openTab(event, 'shortenURL')" class="bg-white inline-block py-2 px-4 font-semibold"><i class="fa fa-link"></i>    Shorten URL</a>
            </li>
        </ul>

        <div id="createBio" class="tab-content">
            <div class="bg-white p-6 rounded-lg shadow-md mt-4">
                <h2 class="text-xl font-bold mb-4">Create Your own customized bio page</h2>
                <!-- Bio creation form goes here -->
                <form onsubmit="window.location.href='/login'; return false;">
                    <textarea id="htmlData" rows="2" class="block mx-4 p-2.5 w-3/4 text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Your Bio Page Content..." ></textarea>
                    <p></p>
                    <!-- Bio form fields go here -->
                    <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full mt-4">Create Bio</button>
                </form>
            </div>
        </div>

        <div id="shortenURL" class="hidden tab-content">
            <div class="bg-white p-6 rounded-lg shadow-md mt-4">
                <h2 class="text-xl font-bold mb-4">Shorten your long url</h2>
                <!-- URL shortening form goes here -->
                <form onsubmit="window.location.href='/login'; return false;">
                    <input type="text" id="originalUrl" placeholder="Enter the original URL"
                           class="px-4 py-2 border border-gray-300 rounded focus:outline-none">
                    <p></p>
                    <input type="text" id="backHalf" placeholder="Custom Backhalf"
                           class="px-4 py-2 border border-gray-300 rounded focus:outline-none">
                    <p></p>
                    <!-- URL form fields go here -->
                    <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full mt-4">Shorten URL</button>
                </form>
            </div>
        </div>
    </div>


    <!-- Features Section -->
    <div class="mb-8">
        <h2 class="text-3xl font-bold mb-4 text-center">Powerful Features</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Feature Card 1 -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-xl font-bold mb-2"><i class="fas fa-link"></i> Custom Short URLs</h3>
                <p class="text-gray-600">Generate custom short URLs that reflect your brand or content.</p>
            </div>
            <!-- Feature Card 2 -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-xl font-bold mb-2"><i class="fas fa-lock"></i> Password Protection</h3>
                <p class="text-gray-600">Secure your short URLs with password protection, ensuring access only to authorized users.</p>
            </div>
            <!-- Feature Card 3 -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-xl font-bold mb-2"><i class="fas fa-toggle-on"></i> Link State Management</h3>
                <p class="text-gray-600">Control the state of your short URLs, enabling or disabling them based on your preferences.</p>
            </div>
            <!-- Feature Card 4 -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-xl font-bold mb-2"><i class="fas fa-user-circle"></i> Bio Pages</h3>
                <p class="text-gray-600">Create personalized bio pages to share additional information about yourself or your business.</p>
            </div>
            <!-- Feature Card 5 (Add more features as needed) -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-xl font-bold mb-2"><i class="fas fa-chart-bar"></i> Detailed Analytics</h3>
                <p class="text-gray-600">Access detailed analytics for each shortened URL, including click counts and user data.</p>
            </div>
        </div>
    </div>

    <!-- Pricing Section -->
    <div class="mb-8">
        <h2 class="text-3xl font-bold mb-4 text-center">Pricing</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Free Plan -->
            <div class="border-solid border-2 border-sky-500 bg-white p-6 rounded-lg shadow-md text-center">
                <h3 class="text-2xl font-bold mb-4">Free Plan</h3>
                <p class="text-gray-600">10 Short URLs</p>
                <p class="text-gray-600">5 Bio Pages</p>
                <p class="text-gray-600">Price: $0/month</p>
            </div>

            <!-- Basic Plan -->
            <div class="border-solid border-2 border-sky-500 bg-white p-6 rounded-lg shadow-md text-center">
                <h3 class="text-2xl font-bold mb-4">Basic Plan</h3>
                <p class="text-gray-600">50 Short URLs</p>
                <p class="text-gray-600">20 Bio Pages</p>
                <p class="text-gray-600">Price: INR 89/month</p>
            </div>

            <!-- Pro Plan -->
            <div class="border-solid border-2 border-sky-500 bg-white p-6 rounded-lg shadow-md text-center">
                <h3 class="text-2xl font-bold mb-4">Pro Plan</h3>
                <p class="text-gray-600">100 Short URLs</p>
                <p class="text-gray-600">50 Bio Pages</p>
                <p class="text-gray-600">Price: INR 129/month</p>
            </div>

            <!-- Enterprise Plan -->
            <div class="border-solid border-2 border-sky-500 bg-white p-6 rounded-lg shadow-md text-center">
                <h3 class="text-2xl font-bold mb-4">Enterprise Plan</h3>
                <p class="text-gray-600">Unlimited Short URLs</p>
                <p class="text-gray-600">Unlimited Bio Pages</p>
                <p class="text-gray-600">Contact us for pricing</p>
                <a href="/contact" class="text-blue-500 font-semibold">Contact Us</a>
            </div>
        </div>
    </div>


    <!-- URL Shortener FAQ Section -->
    <div class="bg-white rounded-lg overflow-hidden shadow-md">

        <div id="accordion-open" data-accordion="open">
            <!-- FAQ Item 1 -->
            <h2 id="accordion-open-heading-1">
                <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-open-body-1" aria-expanded="true" aria-controls="accordion-open-body-1">
                    <span class="flex items-center">
                        <svg class="w-5 h-5 me-2 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                        </svg> What is our URL Shortener service?
                    </span>
                    <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
                    </svg>
                </button>
            </h2>
            <div id="accordion-open-body-1" class="hidden" aria-labelledby="accordion-open-heading-1">
                <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
                    <p class="mb-2 text-gray-500 dark:text-gray-400">Our URL Shortener service is a powerful tool that allows you to create short and shareable links. Whether you're looking to track clicks, manage branded links, or enhance user experience, our service has you covered.</p>
                    <p class="text-gray-500 dark:text-gray-400">Check out our <a href="/docs-ui" class="text-blue-600 dark:text-blue-500 hover:underline">documentation</a> to learn how to get started with our URL Shortener service.</p>
                </div>
            </div>
            <!-- FAQ Item 2 -->
            <h2 id="accordion-open-heading-2">
                <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-open-body-2" aria-expanded="false" aria-controls="accordion-open-body-2">
                    <span class="flex items-center">
                        <svg class="w-5 h-5 me-2 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                        </svg> Can I customize my short URLs?
                    </span>
                    <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
                    </svg>
                </button>
            </h2>
            <div id="accordion-open-body-2" class="hidden" aria-labelledby="accordion-open-heading-2">
                <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
                    <p class="mb-2 text-gray-500 dark:text-gray-400">Absolutely! With our URL Shortener service, you have the flexibility to customize your short URLs to reflect your brand or campaign. Add your own keywords or choose a custom alias to make your links more recognizable and meaningful.</p>
                    <p class="text-gray-500 dark:text-gray-400">Learn how to create custom short URLs in our <a href="https://your-url-shortener-docs.com/customization" class="text-blue-600 dark:text-blue-500 hover:underline">customization guide</a>.</p>
                </div>
            </div>
            <!-- FAQ Item 3 -->
            <h2 id="accordion-open-heading-3">
                <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-open-body-3" aria-expanded="false" aria-controls="accordion-open-body-3">
                    <span class="flex items-center">
                        <svg class="w-5 h-5 me-2 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                        </svg> How can I track the performance of my short URLs?
                    </span>
                    <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
                    </svg>
                </button>
            </h2>
            <div id="accordion-open-body-3" class="hidden" aria-labelledby="accordion-open-heading-3">
                <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
                    <p class="mb-2 text-gray-500 dark:text-gray-400">Our URL Shortener service provides comprehensive analytics to help you track the performance of your short URLs. Monitor the number of clicks, geographic location of users, and referral sources in real-time.</p>
                    <p class="mb-2 text-gray-500 dark:text-gray-400">Explore the detailed analytics dashboard in our <a href="https://your-url-shortener-dashboard.com" class="text-blue-600 dark:text-blue-500 hover:underline">dashboard guide</a> to gain valuable insights into your link engagement.</p>
                </div>
            </div>
        </div>
    </div>
    </div>



    <!-- Call to Action Section -->
    <div class="bg-gray-800 text-white p-8 rounded-lg shadow-md text-center">
        <h2 class="text-2xl font-bold mb-4">Ready to get started?</h2>
        <p class="text-gray-300">Sign up now to experience the power of our SAAS app.</p>
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full mt-4">Sign Up</button>
    </div>
</section>


<script>
    function openTab(event, tabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tab-content");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByTagName("a");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].classList.remove("border-b-2", "border-blue-500");
        }
        document.getElementById(tabName).style.display = "block";
        event.currentTarget.classList.add("border-b-2", "border-blue-500");
    }

    document.addEventListener('DOMContentLoaded', function () {
        var acc = document.querySelectorAll('.accordion input[type="checkbox"]');
        acc.forEach(function (item) {
            item.addEventListener('change', function () {
                var panel = this.parentElement.nextElementSibling;
                if (this.checked) {
                    panel.style.maxHeight = panel.scrollHeight + "px";
                } else {
                    panel.style.maxHeight = null;
                }
            });
        });
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
</body>
</html>