UI Components – Consulty Library

<div class="px-8 md:px-24 py-32" x-data="{ activeSlide: 1, slideCount: 3 }">
    <div class="relative px-8 md:px-16 py-12" style="height:800px;">
        <img class="absolute inset-0 w-full h-full object-cover rounded-2xl" src="consulty-assets/testimonials/shape1.svg" alt="">
        <img class="hidden xl:block absolute top-72 right-36" style="height:580px;" src="consulty-assets/testimonials/picture1.png" alt="">
        <div class="relative z-50">
            <div class="flex flex-wrap -m-4">
                <div class="w-full lg:w-2/3 p-4">
                    <div class="overflow-hidden">
                        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex transition-transform duration-500 ease-in-out">
                            <div class="flex-shrink-0 w-full">
                                <p class="text-lg sm:text-xl lg:text-2xl tracking-tight mb-8 max-w-2xl">“Thanks to their  expertise, our website traffic tripled to within to three months. A game-changer for our business! The intuitive and then interface and powerful on that collaboration and the features are on streamlined our workflow and away eliminated to the bottlenecks. Their team understands the intricacies of our industry, and it's reflected in the targeted campaigns they run”.</p>
                                <p class="text-lg tracking-tight font-semibold mb-1">Marvin McKinney</p>
                                <p class="text-sm text-gray-600 tracking-tight font-semibold mb-24">Founder, BrainX</p>
                            </div>
                            <div class="flex-shrink-0 w-full">
                                <p class="text-lg sm:text-xl lg:text-2xl tracking-tight mb-8 max-w-2xl">“Thanks to their  expertise, our website traffic tripled to within to three months. A game-changer for our business! The intuitive and then interface and powerful on that collaboration and the features are on streamlined our workflow and away eliminated to the bottlenecks."</p>
                                <p class="text-lg tracking-tight font-semibold mb-1">John Lock</p>
                                <p class="text-sm text-gray-600 tracking-tight font-semibold mb-24">Founder, BrainX</p>
                            </div>
                            <div class="flex-shrink-0 w-full">
                                <p class="text-lg sm:text-xl lg:text-2xl tracking-tight mb-8 max-w-2xl">“Thanks to their  expertise, our website traffic tripled to within to three months. A game-changer for our business! The intuitive and then interface and powerful on that collaboration and the features are on streamlined our workflow and away eliminated to the bottlenecks. Their team understands the intricacies of our industry, and it's reflected in the targeted campaigns they run”.</p>
                                <p class="text-lg tracking-tight font-semibold mb-1">Marta Jonhson</p>
                                <p class="text-sm text-gray-600 tracking-tight font-semibold mb-24">Founder, BrainX</p>
                            </div>

<div class="fixed top-0 left-0 z-30 w-full" :class="{'hidden': !open }" x-data="{ open: true }">
    <div class="w-full py-6 px-8 md:px-24 bg-black relative flex items-center justify-between gap-4" style="background-image: url('consulty-assets/alerts/shapes-background2.png')">
        <div class="flex-1">
            <div class="flex items-center justify-between gap-4 flex-wrap">
                <p class="tracking-tight text-white text-sm font-medium">
                    <span>A quick announcement goes here.</span>
                    <a href="#" class="underline">Add your quick alert here</a>
                </p>
                <a href="#" class="bg-white h-11 border border-gray-200 rounded-full px-4 py-2 inline-flex items-center justify-center hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 focus:ring-gray-200 transition duration-200 tracking-tight text-sm font-semibold">Explore Offer</a>
            </div> 
        </div>
        <a href="#" x-on:click.prevent="open = false">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                <path d="M5.5 16.5L16.5 5.5M5.5 5.5L16.5 16.5" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </a>
    </div>
</div>

<section class="px-8 md:px-24 py-32">
    <p class="tracking-tight text-gray-700 mb-32">Our services</p>
    <a href="#" class="group">
        <div class="flex justify-between items-center py-8 relative border-t border-b border-black border-opacity-10">
            <div class="flex gap-7">
                <p class="font-medium tracking-tight">01.</p>
                <h2 class="tracking-tight font-heading text-4xl md:text-6xl font-medium">Business Plan</h2>
            </div>
            <span class="text-orange-300 group-hover:text-orange-400 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                    <path d="M28 10L42 24M42 24L28 38M42 24L6 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </span>
            <div class="absolute right-20 -top-24">
                <img class="hidden lg:block rounded-2xl object-cover" style="height:220px;" src="consulty-assets/services/picture2.png" alt="">
            </div>
        </div>
    </a>
    <a href="#" class="group">
        <div class="flex gap-7 py-8 border-b border-black border-opacity-10">
            <p class="font-medium tracking-tight text-gray-400 group-hover:text-black transition duration-200">02.</p>
            <h2 class="tracking-tight font-heading text-4xl md:text-6xl font-medium text-gray-400 group-hover:text-black transition duration-200">Consultancy</h2>
        </div>
    </a>

<section class="relative overflow-hidden pt-32 pb-112 md:pb-80 px-8 md:px-20 lg:px-40">
    <div class="flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 p-4">
            <p class="mb-16 tracking-tight">About</p>
            <p class="text-xl max-w-lg tracking-tight">It is a long established fact that a reader will be content distracted by the readable content of a page when it looking at its layout. The point of using is that it has the many variations. </p>
        </div>
        <div class="w-full md:w-1/2 p-4">
            <h2 class="font-heading text-orange-500 text-10xl text-center tracking-tight">20</h2>
            <p class="text-center text-xl font-medium mb-12 max-w-xs mx-auto tracking-tight">years of architecture, design and planning</p>
            <h2 class="font-heading text-orange-500 text-10xl text-center tracking-tight">85</h2>
            <p class="text-center text-xl font-medium max-w-xs mx-auto tracking-tight">realized projects</p>
        </div>
    </div>
    <div class="absolute bottom-14 left-0">
        <img src="consulty-assets/about/shapes.svg" alt="">
    </div>
</section>

<section class="px-8 md:px-24 py-32">
    <p class="tracking-tight text-gray-700 font-medium mb-4">Projects</p>
    <h1 class="font-heading tracking-tight text-4xl md:text-6xl font-medium mb-24">Latest Case Studies</h1>
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/3 p-4">
            <div class="relative mb-8" style="height:768px;">
                <img class="w-full h-full object-cover object-right rounded-2xl" src="consulty-assets/work/picture6.png" alt="">
                <div class="absolute bottom-0 right-0">
                    <a href="#" class="rounded-lg w-24 h-24 flex items-center justify-center text-black hover:bg-black hover:text-white transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="56" height="57" viewBox="0 0 56 57" fill="none">
                            <path d="M22.1667 18.0007L38.5 18.0007M38.5 18.0007L38.5 34.334M38.5 18.0007L17.5 39.0006" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
            </div>
            <p class="text-xs font-medium tracking-tight mb-2">CURVED</p>
            <h3 class="font-heading tracking-tight text-xl font-semibold max-w-xs">How we helped Curved to grow their brand awareness in 2022</h3>
        </div>
        <div class="w-full lg:w-1/3 p-4">
            <div class="relative mb-8" style="height:768px;">
                <img class="w-full h-full object-cover object-right rounded-2xl" src="consulty-assets/work/picture7.png" alt="">
                <div class="absolute bottom-0 right-0">
                    <a href="#" class="rounded-lg w-24 h-24 flex items-center justify-center text-black hover:bg-black hover:text-white transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="56" height="57" viewBox="0 0 56 57" fill="none">

<section class="px-8 md:px-24 py-32">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/2 p-4">
            <p class="tracking-tight text-gray-700 font-medium mb-6">Fun facts</p>
            <h1 class="font-heading tracking-tight text-4xl md:text-6xl font-medium max-w-xs md:max-w-md">Well established &amp; experienced in many fields.</h1>
        </div>
        <div class="w-full lg:w-1/2 p-4">
            <div class="flex flex-wrap lg:justify-end gap-6">
                <div>
                    <div class="relative bg-gray-50 rounded-full w-20 mb-4" style="height:460px;">
                        <div class="absolute bottom-0 left-0 right-0">
                            <div class="bg-black rounded-full h-80">
                                <p class="tracking-tight text-white font-medium whitespace-nowrap transform -rotate-90 absolute bottom-20 left-1/2 -translate-x-1/2">Realized projects</p>
                            </div>
                        </div>
                    </div>
                    <p class="tracking-tight text-2xl font-medium text-center">70%</p>
                </div>
                <div>
                    <div class="relative bg-gray-50 rounded-full w-20 mb-4" style="height:460px;">
                        <div class="absolute bottom-0 left-0 right-0">
                            <div class="bg-black rounded-full h-56">
                                <p class="tracking-tight text-white font-medium whitespace-nowrap transform -rotate-90 absolute bottom-20 left-1/2 -translate-x-1/2">Regional offices</p>
                            </div>

<div class="fixed bottom-0 left-0 z-40 w-full p-6" :class="{'hidden': !open }" x-data="{ open: true }">
    <div class="bg-white rounded-2xl p-6 max-w-sm">
        <p class="text-lg tracking-tight mb-8 max-w-xs">We use cookies to improve your browsing experience. Learn about our Privacy policy here.</p>
        <div class="flex flex-wrap gap-2">
            <a href="#" x-on:click.prevent="open = false" class="bg-white h-14 border border-gray-200 rounded-full px-5 py-4 inline-flex items-center justify-center hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 focus:ring-gray-200 transition duration-200 tracking-tight text-sm font-semibold">Decline</a>
            <a href="#" x-on:click.prevent="open = false" class="bg-black h-14 rounded-full px-5 py-4 inline-flex items-center justify-center hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200 tracking-tight text-sm font-semibold text-white">Allow Cookie</a>
        </div>
    </div>
</div>

<div class="py-32 relative bg-black">
    <img class="absolute bottom-0 right-0" src="consulty-assets/footer/shapes2.svg" alt="">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-2/3 p-4">
                <div class="flex flex-col justify-between gap-8 h-full">
                    <div>
                        <img class="h-11 mb-6" src="consulty-assets/logos/consulty-logo.svg" alt="">
                        <p class="tracking-tight text-gray-200 max-w-sm">Consulty gives you the blocks &amp; components you need to create a truly professional website, landing page or admin panel for your SaaS.</p>
                    </div>
                    <div class="flex pb-3 border-b border-gray-700 max-w-xs">
                        <input type="text" class="flex-1 placeholder-gray-500 bg-transparent outline-none text-white" placeholder="Enter email address">
                        <a href="#" class="text-orange-400 hover:text-orange-500 transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
                                <path d="M18.75 6.1875V15.9375C18.75 16.1364 18.671 16.3272 18.5303 16.4678C18.3897 16.6085 18.1989 16.6875 18 16.6875C17.8011 16.6875 17.6103 16.6085 17.4697 16.4678C17.329 16.3272 17.25 16.1364 17.25 15.9375V7.99781L6.53062 18.7181C6.38988 18.8589 6.19901 18.9379 5.99999 18.9379C5.80097 18.9379 5.6101 18.8589 5.46936 18.7181C5.32863 18.5774 5.24957 18.3865 5.24957 18.1875C5.24957 17.9885 5.32863 17.7976 5.46936 17.6569L16.1897 6.9375H8.24999C8.05108 6.9375 7.86031 6.85848 7.71966 6.71783C7.57901 6.57718 7.49999 6.38641 7.49999 6.1875C7.49999 5.98859 7.57901 5.79782 7.71966 5.65717C7.86031 5.51652 8.05108 5.4375 8.24999 5.4375H18C18.1989 5.4375 18.3897 5.51652 18.5303 5.65717C18.671 5.79782 18.75 5.98859 18.75 6.1875Z" fill="currentColor"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="flex flex-wrap justify-between gap-12">
                    <div>
                        <p class="tracking-tight text-gray-500 font-medium mb-6">Solutions</p>

<section class="px-8 md:px-24 py-32">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/3 p-4">
            <h1 class="font-heading tracking-tight text-6xl md:text-7xl font-medium max-w-xs mb-12">Our Awards</h1>
            <a href="#" class="inline-flex items-center gap-2 group">
                <span class="text-orange-500 group-hover:text-orange-600 transition duration-200 font-bold">Read Our Story</span>
                <div class="text-orange-500 group-hover:text-orange-600 transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <path d="M4.99984 10H15.4165M15.4165 10L10.4165 5M15.4165 10L10.4165 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </div>
            </a>
        </div>
        <div class="w-full lg:w-2/3 p-4">
            <div class="border-b border-gray-100 pb-8 flex items-center justify-between flex-wrap gap-4 mb-8 mt-12 lg:mt-40">
                <p class="tracking-tight text-xl font-medium">Business Award</p>
                <p class="tracking-tight text-gray-600">2014</p>
            </div>
            <div class="border-b border-gray-100 pb-8 flex items-center justify-between flex-wrap gap-4 mb-8">
                <p class="tracking-tight text-xl font-medium">Design Award</p>
                <p class="tracking-tight text-gray-600">2016</p>
            </div>
            <div class="border-b border-gray-100 pb-8 flex items-center justify-between flex-wrap gap-4 mb-8">
                <p class="tracking-tight text-xl font-medium">Best Renovation</p>

<section class="px-8 md:px-32 py-24" x-data="{ toggle: false }">
    <h1 class="font-heading tracking-tight text-4xl md:text-6xl font-medium text-center mb-6">Choose your plan</h1>
    <p class="tracking-tight text-gray-700 text-lg mb-20 text-center max-w-xl mx-auto">Established fact that a reader will be distracted by the way readable content of a page when looking at its layout.</p>
    <div class="flex justify-center items-center gap-6 flex-wrap mb-12">
        <p class="tracking-tight text-lg font-medium">Monthly billing</p>
        <div class="p-1 w-14 h-8 bg-orange-500 rounded-full" x-on:click="toggle = !toggle">
            <div class="relative">
              <input class="opacity-0 absolute z-10 h-8 w-14 top-0 left-0" type="checkbox">
              <div class="absolute left-0 transform w-6 h-6 bg-white rounded-full transition-all duration-300" :class="{'left-6': toggle}"></div>
            </div>
          </div>
        <p class="tracking-tight text-lg font-medium">Annual billing</p>
        <span class="inline-block rounded-full bg-orange-100 px-4 py-1 font-bold tracking-tight">25% OFF</span>
    </div>
    <div class="flex justify-center">
        <div class="overflow-x-auto">
            <div class="flex gap-6">
                <div class="w-96 flex-shrink-0">
                    <div class="border border-gray-200 rounded-2xl h-full">
                        <div class="p-8 border-b border-gray-100">
                            <p class="tracking-tight text-lg font-semibold mb-2">Free</p>
                            <p class="text-gray-700 tracking-tight mb-32">Get started with the basic features, but grow as fast as others.</p>
                            <h2 class="font-heading tracking-tight text-5xl font-medium mb-2">$0</h2>
                            <p class="tracking-tight text-gray-600 mb-12">No credit card required</p>

<section class="bg-gray-50 px-8 md:px-24 py-32">
    <h1 class="font-heading tracking-tight text-4xl md:text-5xl font-medium mb-4">Open Positions</h1>
    <p class="tracking-tight text-gray-600 max-w-sm mb-16">It is a long established fact that a reader will be distracted by the readable.</p>
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/2 p-4">
            <div class="bg-white rounded-2xl p-5">
                <p class="tracking-tight text-xl font-semibold mb-1">Senior Product Designer</p>
                <p class="tracking-tight text-gray-600 text-sm max-w-xs mb-10">It is a long established fact that a reader will be distracted by the readable.</p>
                <div class="flex items-end flex-wrap justify-between gap-4">
                    <div class="flex flex-wrap items-center gap-3">
                        <p class="tracking-tight text-gray-700 text-sm">New York</p>
                        <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                            <circle cx="2" cy="2" r="2" fill="#71717A"></circle>
                        </svg>
                        <p class="tracking-tight text-gray-700 text-sm">Full Time</p>
                        <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                            <circle cx="2" cy="2" r="2" fill="#71717A"></circle>
                        </svg>
                        <p class="tracking-tight text-gray-700 text-sm">$60k - $72k</p>
                    </div>
                    <a href="#" class="bg-white border border-gray-200 h-11 rounded-full px-4 py-2 inline-flex items-center justify-center gap-2 hover:bg-black group transition duration-200">
                        <span class="tracking-tight text-sm font-semibold text-gray-900 group-hover:text-white transition duration-200">Apply Now</span>
                        <div class="group-hover:text-white transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">

<section class="py-32">
    <div class="container mx-auto px-4">
        <h1 class="font-heading tracking-tight text-center text-4xl md:text-6xl font-medium mb-12">Questions &amp; answers</h1>
        <div class="bg-gray-50 rounded-2xl p-8 md:p-16 mb-12">
            <div class="pb-8 border-b border-gray-100 mb-8 cursor-pointer" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
                <div class="flex items-center justify-between gap-4">
                    <p class="tracking-tight text-xl font-semibold">How does the free trial work?</p>
                    <div :class="{'hidden': !accordion}" class="hidden bg-white hover:bg-orange-400 text-black hover:text-white transition duration-200 focus:bg-orange-400 focus:ring-4 focus:ring-orange-200 w-8 h-8 flex items-center justify-center rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M12 8H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                    <div :class="{'hidden': accordion}" class="bg-white hover:bg-orange-400 text-black hover:text-white transition duration-200 focus:bg-orange-400 focus:ring-4 focus:ring-orange-200 w-8 h-8 flex items-center justify-center rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M8 4V8M8 8V12M8 8H12M8 8L4 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                </div>
                <div class="overflow-hidden transition-all h-0 duration-500" x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''">
                    <p class="tracking-tight text-gray-700 max-w-3xl mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat, tempor condimentum commodo tincidunt sit dictumst. Eu placerat to a arcu at sem vitae eros, purus nonprofit.</p>
                </div>
            </div>
            <div class="pb-8 border-b border-gray-100 mb-8 cursor-pointer" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
                <div class="flex items-center justify-between gap-4">

<div class="px-8 md:px-24 py-32">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/3 p-4">
            <div class="lg:pr-6 pb-6 lg:pb-0 lg:border-r border-b lg:border-b-0 border-gray-200 h-full">
                <img class="h-7 mb-8" src="consulty-assets/testimonials/quote-icon2.svg" alt="">
                <p class="tracking-tight text-xl font-semibold mb-8">Unexpected Result</p>
                <div class="bg-gray-200 h-px w-10 mb-8"></div>
                <p class="tracking-tight mb-6 max-w-sm">It is a long established fact that a reader will be that the distracted by the  readable content of a page when looking at its layout it is a long fact.</p>
                <div class="flex flex-wrap items-center gap-4">
                    <img class="h-16" src="consulty-assets/testimonials/avatar2.png" alt="">
                    <div>
                        <p class="tracking-tight text-lg font-semibold">Willard Purnell</p>
                        <p class="text-gray-500 tracking-tight text-sm">Founder, Bioplex</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full lg:w-1/3 p-4">
            <div class="lg:pr-6 lg:pl-6 pb-6 lg:pb-0 lg:border-r border-b lg:border-b-0 border-gray-200 h-full">
                <img class="h-7 mb-8" src="consulty-assets/testimonials/quote-icon2.svg" alt="">
                <p class="tracking-tight text-xl font-semibold mb-8">Great Service!</p>
                <div class="bg-gray-200 h-px w-10 mb-8"></div>
                <p class="tracking-tight mb-6 max-w-sm">It is a long established fact that a reader will be that the distracted by the  readable content of a page when looking at its layout it is a long fact.</p>
                <div class="flex flex-wrap items-center gap-4">

<div x-data="{ mobileNavOpen: false }">
    <nav class="relative p-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-6">
                <a href="#" class="inline-block">
                    <img class="h-7" src="consulty-assets/logos/consulty-logo2.svg" alt="">
                </a>
                <ul class="hidden lg:flex items-center gap-2">
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 group transition duration-200 rounded-full">
                            <div class="flex items-center gap-2">
                                <span class=" group-hover:text-black text-sm font-medium tracking-tight">Products</span>
                                <div class=" group-hover:text-black transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                        <path d="M12.848 6L8.18132 10.6667L3.51465 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="inline-block py-2 px-3 hover:bg-gray-100 hover:text-black transition duration-200  text-sm font-medium tracking-tight rounded-full">Case Studies</a>
                    </li>
                    <li>

<section class="px-8 md:px-24 py-32">
    <p class="tracking-tight text-gray-600 font-medium mb-4">Resources</p>
    <h1 class="font-heading tracking-tight text-4xl md:text-6xl font-medium mb-24 max-w-lg md:max-w-4xl">We’ve created the resources that help you thrive.</h1>
    <div class="overflow-hidden">
        <div class="overflow-x-auto relative">
          <span class="hidden xl:block absolute top-36 right-56">
                <img class="h-48 w-72 object-cover" src="consulty-assets/blog/picture7.png" alt="">
            </span><table class="table-auto w-full">
            
            <tbody>
              <tr>
                <td class="py-9 border-b border-t border-gray-100 pr-8">
                    <p class="text-gray-500 tracking-tight whitespace-nowrap font-medium">[Podcast]</p>
                </td>
                <td class="py-9 border-b border-t border-gray-100 px-8">
                    <h2 class="font-heading tracking-tight text-2xl whitespace-nowrap font-semibold">Where ideas become triumphs</h2>
                </td>
                <td class="py-9 border-b border-t border-gray-100 pl-8">
                    <div class="flex justify-end">
                        <a href="#" class="flex items-center gap-2 group">
                            <span class="text-black group-hover:text-opacity-80 transition duration-200 font-semibold">Listen</span>
                            <div class="text-black group-hover:text-opacity-80 transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M6 3.33341L10.6667 8.00008L6 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="py-32">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full md:w-1/2 p-4">
                <img class="rounded-2xl w-full object-cover" style="height:630px;" src="consulty-assets/team/picture12.png" alt="">
            </div>
            <div class="w-full md:w-1/2 p-4">
                <div class="flex flex-col justify-between gap-8 h-full">
                    <h1 class="font-heading tracking-tight text-4xl md:text-5xl font-medium max-w-xs">Message from Founder</h1>
                    <div>
                        <p class="tracking-tight text-lg font-medium mb-5 max-w-sm">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
                        <p class="tracking-tight text-gray-700 max-w-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit velit risus sit sed massa. Vivamus vel lorem egestas.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="px-8 md:px-24 py-32 bg-black">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-2/3 p-4">
            <h1 class="font-heading tracking-tight text-white text-4xl md:text-6xl font-medium max-w-lg md:max-w-3xl mb-6">Grow your business with the help of Consulty experts.</h1>
            <p class="tracking-tight text-gray-300 text-lg mb-10">Grow faster with a website that helps you convert more customers.</p>
            <a href="#" class="bg-white h-16 border border-gray-200 rounded-full px-6 py-4 inline-flex items-center justify-center hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 focus:ring-gray-200 transition duration-200 tracking-tight font-bold">Get A Free Consultation</a>
        </div>
        <div class="w-full lg:w-1/3 p-4">
            <img class="w-full object-cover" style="height:348px;" src="consulty-assets/cta/offers.png" alt="">
        </div>
    </div>
</section>

<div class="pt-20 pb-32 overflow-hidden bg-black">
    <img class="mx-auto h-56 object-cover mb-32" src="consulty-assets/footer/consulty-studio.png" alt="">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/3 p-4">
                <div class="flex flex-col items-start justify-between gap-8 h-full">
                    <img class="h-12 mb-24" src="consulty-assets/logos/consulty-logo3.svg" alt="">
                    <p class="tracking-tight text-gray-200 max-w-sm">Consulty gives you the blocks &amp; components you need to create a truly professional website, landing page or admin panel for your SaaS.</p>
                </div>
            </div>
            <div class="w-full lg:w-2/3 p-4">
                <div class="flex flex-wrap lg:justify-end gap-24">
                    <div>
                        <p class="tracking-tight text-gray-600 font-medium mb-6">Platform</p>
                        <ul class="flex flex-col gap-6">
                            <li>
                                <a href="#" class="tracking-tight text-gray-100 hover:text-orange-500 transition duration-200">Services</a>
                            </li>
                            <li>
                                <a href="#" class="tracking-tight text-gray-100 hover:text-orange-500 transition duration-200">Book A Call</a>
                            </li>
                            <li>
                                <a href="#" class="tracking-tight text-gray-100 hover:text-orange-500 transition duration-200">Pricing</a>
                            </li>

<div class="fixed top-1/2 left-0 transform -translate-y-1/2 z-40 w-full p-6" :class="{'hidden': !open }" x-data="{ open: true }">
    <div class="container mx-auto px-4">
        <div class="bg-white rounded-2xl p-10 max-w-sm mx-auto">
            <img class="mx-auto mb-6 h-11" src="consulty-assets/cookies/cookie-icon.svg" alt="">
            <p class="tracking-tight text-center text-lg mb-8">This website uses cookies to ensure you get the best experience on our website.</p>
            <a href="#" x-on:click.prevent="open = false" class="bg-black h-14 w-full mb-4 rounded-full px-5 py-4 inline-flex items-center justify-center hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200 tracking-tight text-sm font-semibold text-white">Allow Cookie</a>
            <a href="#" x-on:click.prevent="open = false" class="bg-white h-14 w-full border border-gray-200 rounded-full px-5 py-4 inline-flex items-center justify-center hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 focus:ring-gray-200 transition duration-200 tracking-tight text-sm font-semibold">Decline</a>
        </div>
    </div>
</div>

<section class="px-8 md:px-24 py-32">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/2 p-4">
            <h1 class="font-heading tracking-tight text-4xl font-medium max-w-2xl">There are many variations of passages of layout but the majority have suffered alteration in some form.</h1>
        </div>
        <div class="w-full lg:w-1/2 p-4">
            <div class="flex flex-wrap -m-4 mb-4">
                <div class="w-full sm:w-1/2 p-4">
                    <div class="bg-gray-50 rounded-2xl py-8">
                        <h2 class="font-heading tracking-tight text-6xl font-medium text-center mb-1">20+</h2>
                        <p class="tracking-tight text-gray-700 text-center">Years of experiences</p>
                    </div>
                </div>
                <div class="w-full sm:w-1/2 p-4">
                    <div class="bg-gray-50 rounded-2xl py-8">
                        <h2 class="font-heading tracking-tight text-6xl font-medium text-center mb-1">240+</h2>
                        <p class="tracking-tight text-gray-700 text-center">Projects completed</p>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 rounded-2xl py-8">
                <h2 class="font-heading tracking-tight text-6xl font-medium text-center mb-1">100%</h2>
                <p class="tracking-tight text-gray-700 text-center">Client satisfaction</p>
            </div>