Atomic

<!DOCTYPE html>
<html>

<head>
    <title>CalendarPlan</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <script src="https://cdn.tailwindcss.com">
    </script>
</head>

<body class="font-inter bg-white">
    <style>
        body {
            font-family: "Inter", sans-serif;
        }

        button:active {
            transform: translateY(1px);
        }

        .template6Hero {
            background-image: url("https://res.cloudinary.com/dnzjbmzag/image/upload/v1703972920/backgroundimage_2.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }

        .gradientIcon1 {
            fill: url(#gradient1) #447799;
        }

        .icon {
            /* gradient and fallback color */
            fill: url(#gradient1) #447799;
        }

        .badgeBoxShadow {
            box-shadow: 0px 8px 8px rgba(99, 106, 126, 0.02),
                0px 4px 4px rgba(99, 106, 126, 0.03), 0px 1px 1px rgba(99, 106, 126, 0.04);
        }

        .badgeGradientText {
            background: linear-gradient(92.57deg, #7a76fc 31.91%, #61a4eb 88%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .ctaBoxShadow {
            box-shadow: 0px 120px 120px -80px rgba(76, 86, 115, 0.08);
        }

        .text-iso-gray-dark {
            color: #182430
        }

        ;

        .text-iso-gray {
            color: #475467;
        }

        .text-iso-gray-light {
            color: #314359;
        }
    </style>

    <div class="template6Hero ">
        <svg class="svgGradient" style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
            <linearGradient id="gradient1" x2="1" y2="1">
                <stop offset="0%" stopColor="#7A76FC" />
                <stop offset="100%" stopColor="#61A4EB" />
            </linearGradient>
        </svg>

        <header class="text-iso-gray pt-4 mt-3 w-[92vw] mx-auto">
            <nav class="border-gray-200 px-2 sm:px-4 py-2.5 rounded">
                <div class="flex flex-wrap items-center justify-between">

                    <a href="#" class="flex font-medium items-center text-gray-900">
                        <img width="230" height="150"
                            src="https://res.cloudinary.com/dnzjbmzag/image/upload/v1694679784/CalendarPlan_Logo.png"
                            alt="CalendarPlan Logo" class="w-48" />
                    </a>

                    <ul class="w-full lg:w-auto block lg:inline text-center lg:text-left flex flex-col  lg:flex-row space-y-4 space-x-0 
                lg:space-x-10 lg:space-y-0 flex-grow lg:grow-0 pt-4 lg:pt-0 block">
                        <li class="block lg:inline">
                            <a href="#" class="text-[#007AFF] font-semibold cursor-pointer">Home</a>
                        </li>
                        <li class="block lg:inline">
                            <a href="#" class="hover:text-gray-900  cursor-pointer">About</a>
                        </li>
                        <li class="block lg:inline">
                            <a href="#" class="hover:text-gray-900 cursor-pointer">Careers</a>
                        </li>

                        <li class=" block lg:inline">
                            <a href="#" class="hover:text-gray-900 cursor-pointer">Contact</a>
                        </li>

                    </ul>

                    <button class=" inline-flex mx-auto lg:mx-0 items-center 
                font-semibold border border-solid border-blue-400 py-3 px-5 focus:outline-none focus:ring-4 
                focus:ring-blue-300 hover:bg-blue-700 rounded-full 
                bg-gradient-to-r from-[#7A76FC] to-[#61A4EB] text-transparent bg-clip-text
                  mt-4 lg:mt-0">
                        Sign in
                    </button>
                </div>
            </nav>
        </header>
        <section class="template6Hero">
            <div class="mx-auto md:w-4/5  pt-12">
                <div class="text-center pt-4 md:mt-8 mx-auto w-[90%] md:w-4/5 ">
                    <h1 class="font-bold leading-[50px] md:leading-[60px] lg:leading-[80px] text-iso-gray-dark
                    tracking-[-1.4px] text-4xl md:text-6xl lg:text-7xl">
                        The All-In-One Calendar App for <span
                            class="bg-gradient-to-r from-[#7A76FC] to-[#61A4EB] text-transparent bg-clip-text font-bold ">SaaS
                            Founders</span>
                    </h1>
                    <p
                        class="text-iso-gray w-4/5 text-lg md:text-xl pt-2 mt-4 font-normal text-center tracking-loose mx-auto">
                        Streamline your workflow with the all-in-one calendar and organization app for founders.
                        Get started with a free trial today, no credit card needed.
                    </p>
                    <div class="flex flex-row mx-auto justify-center pt-7 mt-4 ">
                        <button type="button" class="text-white bg-[#000C1A] hover:drop-shadow-lg focus:ring-4 
                        focus:ring-blue-300 font-normal rounded-full text-base md:text-lg px-8 md:px-10 py-3 md:py-5 mr-4 mb-2
                        focus:outline-none">
                            Get Started
                        </button>
                    </div>
                </div>
            </div>

            <div class="mt-7 pt-9 mx-auto rounded-2xl lg:w-4/5">
                <img class="rounded-2xl mx-auto object-cover h-full"
                    src="https://res.cloudinary.com/dnzjbmzag/image/upload/v1694679379/CalendarPlanDashboard.png"
                    width={1600} height={800} alt="CalendarPlan dashboard with loading elements" />
            </div>
        </section>

    </div>

    <section>
        <div class="w-[85%] md:w-4/5 mx-auto text-center lg:pt-12 mt-6 bg-white">
            <span class="badgeBoxShadow uppercase rounded-2xl text-[#6A65FF] text-sm md:text-base font-medium leading-loose 
            tracking-widest px-5 py-3 badgeGradientText text-transparent bg-clip-text">Features</span>
            <h1 class="text-4xl md:text-5xl lg:text-6xl mb-4 font-bold text-iso-gray-dark pt-3 mt-2">Explore Our Amazing
                <br />
                <span class="bg-gradient-to-r from-[#7A76FC] to-[#61A4EB] text-transparent bg-clip-text">Features</span>
            </h1>
            <p class="text-iso-gray-light text-lg md:text-xl pt-4 font-normal">
                Powerful product and growth analytics to help you convert, engage, and retain more users.
            </p>
        </div>

        <section class="bg-white">

            <div class="pt-12 md:pt-24 mx-auto w-4/5 mx-auto lg:grid lg:gap-8 lg:grid-cols-2">

                <div class=" pb-12 m-auto">
                    <i class="bi bi-file-text gradientIcon1
                    badgeBoxShadow rounded-lg gradientIcon1 px-2 py-2" width="40" height="40"></i>

                    <h1 class="w-4/5 text-3xl md:text-4xl lg:text-5xl leading-tight pt-4 tracking-tight mb-4 font-semibold 
                    text-iso-gray-dark">
                        Create tasks and notes with ease
                    </h1>
                    <p class="mb-8 leading-relaxed font-normal mt-4 text-iso-gray text-lg w-4/5 ">
                        With our calendar app, you can quickly create notes and tasks to help you plan and organize your
                        tasks projects.
                    </p>

                    <ul class="font-normal text-iso-gray flex flex-col flex-wrap space-y-4 text-lg">
                        <li class="flex items-center space-x-2">
                            <i class="bi bi-check-circle gradientIcon1 text-emerald-600" width="24" height="24"></i>

                            <span>Quickly create notes and tasks to help you plan</span>
                        </li>
                        <li class="flex items-center space-x-2">
                            <i class="bi bi-check-circle gradientIcon1 text-emerald-600" width="24" height="24"></i>

                            <span>Quickly create notes and tasks to help you plan</span>
                        </li>
                        <li class="flex items-center space-x-2">
                            <i class="bi bi-check-circle gradientIcon1 text-emerald-600" width="24" height="24"></i>
                            <span>Quickly create notes and tasks to help you plan</span>
                        </li>
                    </ul>
                </div>

                <div class=" mx-auto rounded-3xl h-5/6 pt-8 mt-4">
                    <img class="object-cover object-center rounded-3xl w-full h-full" alt="hero"
                        src="https://res.cloudinary.com/dnzjbmzag/image/upload/v1694679402/UI1.png" width="500"
                        height="500" />
                </div>

            </div>
        </section>

        <section class="pt-12 pb-24 md:pt-24 mx-auto w-4/5 mx-auto lg:grid lg:gap-8 lg:grid-cols-2 ">

            <div class=" mx-auto rounded-3xl h-5/6 pt-8 mt-4">
                <img class="object-cover object-center rounded-3xl w-full h-full" alt="hero"
                    src="https://res.cloudinary.com/dnzjbmzag/image/upload/v1694679395/Frame.png" width="500"
                    height="500" />
            </div>

            <div class="md:ml-12 pt-10 lg:mt-36">

                <Grid size={40} class="badgeBoxShadow rounded-lg gradientIcon1 px-2 py-2" />

                <h1
                    class="w-4/5 text-4xl lg:text-5xl leading-tight tracking-tight mb-4 pt-4 font-semibold text-iso-gray-dark">
                    Streamline your workflow
                </h1>
                <p class="mb-8 font-normal leading-relaxed  mt-4 text-iso-gray text-lg ">
                    We also have lots of integrations with popular apps, so that you can organize and streamline your
                    workflow.
                </p>

            </div>

        </section>

    </section>

    <div class="mx-auto w-4/5 px-4 py-2 font-normal text-[#455B73]">
        <hr class="h-px w-full border border-[#e5e7eb]" />
        <footer
            class="flex flex-col md:flex-row items-center text-base mx-auto container justify-center md:justify-between py-2 my-4">
            <div class="md:inline block w-full text-center md:text-left"><span>&#169; 2024 CalendarPlan. All rights reserved. </span> <span id="credits"> Website by <a href="https://getisotope.com">Isotope</a> </span>
            </div>\n
            <div class="inline-flex ml-0 md:ml-auto space-x-3 md:pt-0 pt-4">
                <a href="#" rel="noopener noreferrer" class="items-center gap-2">
                    <span class="hover:underline focus-visible:underline">Terms</span>
                </a>
                <a href="#" rel="noopener noreferrer" class="items-center gap-2">
                    <span class="hover:underline focus-visible:underline">Privacy</span>
                </a>
                <a href="#" rel="noopener noreferrer" class="items-center gap-2">
                    <span class="hover:underline focus-visible:underline">Contact</span>
                </a>
            </div>
        </footer>
    </div>

</body>

</html>