    <?php  include('header.php') ?>

    <section class="relative background-animate overflow-hidden bg-white">
        <section></section>
        <div class="relative z-10 container mx-auto px-4">
            <div class="flex flex-wrap justify-center items-center pt-20 transition ease-in-out duration-700">
                <div class="w-auto transition ease-in-out duration-1000">
                    <p class="mb-5 font-heading text-xs font-normal text-center uppercase tracking-px text-red-500 font-semibold"
                        contenteditable="false">COMING SOON</p>
                    <h1 class="font-heading text-center text-8xl md:text-9xl font-bold mb-4 text-blue-500"
                        contenteditable="false">Co-creating a skills-based
                        <div contenteditable="false" class="text-red-500 py-3">future workforce</div>
                    </h1>
                    <p class="text-center text-blue-500 text-xl mb-6 mb-10 leading-relaxed tracking-wide"
                        contenteditable="false">Connecting students and businesses through a<br>common skills language
                        to create market-ready talent</p>

                    <p></p>

                    <div class="flex flex-wrap -m-3 justify-center mb-4 mb-6 mb-10 pb-10">
                        <div class="w-full lg:w-auto p-3">
                            <a href="waitlist.php"
                                class="flex flex-col items-center group relative font-heading px-6 py-5 w-full lg:w-auto uppercase text-white text-xs font-semibold tracking-px bg-red-500 overflow-hidden">
                                <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full transition ease-in-out bg-blue-500 duration-500 w-full"
                                    contenteditable="false"></div>
                                <p class="relative z-10" contenteditable="false">join the waitlist</p>
                            </a>
                        </div>
                        <div class="w-full lg:w-auto p-3">
                            <button
                                class="group relative font-heading px-6 py-5 w-full lg:w-auto uppercase text-white text-xs font-semibold tracking-px bg-blue-500 overflow-hidden">
                                <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full transition ease-in-out bg-red-500 duration-500 w-full"
                                    contenteditable="false"></div>
                                <a href="#discover_more" class="relative z-10" contenteditable="false">Discover MORE</a>
                            </button>
                        </div>
                    </div>
                    <img class="transform hover:scale-105 transition ease-in-out duration-1000"
                        src="https://static.shuffle.dev/uploads/files/59/59d8d6481e116259b9698d7279d55ac39df4770f/Group-9076.svg"
                        alt="">
                </div>
            </div>
        </div>
        <img class="absolute bottom-0 left-0 w-full" src="gradia-assets/elements/hero/line.svg" alt="">
        <style>
        body {
            animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }

        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }
        </style>
    </section>

    <section class="overflow-hidden pb-18 pt-14 px-4 bg-gradient-blue2">
        <div class="container mx-auto">
            <p class="mb-16 text-center text-blue-500 text-lg">To make this happen, we are in collaboration with</p>
            <div class="flex flex-wrap justify-center -m-10 items-center">
                <div class="w-auto py-9 flex flex-wrap items-center">
                    <img src="https://static.shuffle.dev/uploads/files/59/59d8d6481e116259b9698d7279d55ac39df4770f/580b57fcd9996e24bc43c51f.png"
                        alt="" class="px-1 px-5 w-40">
                </div>
                <div class="w-auto py-12 ml-5 flex-wrap items-center flex">
                    <img src="https://static.shuffle.dev/uploads/files/59/59d8d6481e116259b9698d7279d55ac39df4770f/coursera.png"
                        alt="" class="w-28">
                </div>
                <div class="w-auto">
                    <img src="https://static.shuffle.dev/uploads/files/59/59d8d6481e116259b9698d7279d55ac39df4770f/deptlogo.png"
                        alt="" class="w-32 px-4 py-5 ml-8">
                </div>
                <div class="w-auto">
                    <img src="https://static.shuffle.dev/uploads/files/59/59d8d6481e116259b9698d7279d55ac39df4770f/6299e9242faf2fbafe4f8a1b-AWS-EdStart.png"
                        alt="" class="px-4 px-8 w-40 py-3">
                </div>
                <div class="w-auto p-4">
                    <img src="https://static.shuffle.dev/uploads/files/59/59d8d6481e116259b9698d7279d55ac39df4770f/Natwest-Entrepreneur-Accelerator.png"
                        alt="" class="w-48 py-2">
                </div>
            </div>
        </div>
    </section>

    <section id="discover_more" class="overflow-hidden bg-blue-500 justify-items-center pt-12">
        <div class="container px-4 mx-auto">
            <div class="flex flex-wrap -m-8 align-middle justify-center mt-8 mb-8">
                <p id="our mission"
                    class="mb-5 font-heading font-normal text-center uppercase tracking-px text-white text-red-500 mx-auto w-full pb-3 text-sm font-semibold"
                    contenteditable="false">our mission</p>
                <div class="container mx-auto px-4">
                    <h2 class="mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-white tracking-px max-w-xl md:w-auto lg:leading-tight leading-tight md:leading-tight"
                        contenteditable="false">Reducing the Skills-Gap, One Talent at a Time
                    </h2>
                    <p class="max-w-lg mx-auto text-center text-lg text-white mt-8 mt-10" contenteditable="false">We are
                        on a mission to better align the world of education and work through a shared understanding of
                        skills.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="white overflow-hidden justify-items-center bg-blue-500 py-10">
        <div class="container px-4 mx-auto pb-20">
            <p class="mb-5 font-heading font-normal text-center uppercase tracking-px text-white text-red-500 mx-auto w-full text-sm mb-6 mb-12 font-semibold"
                contenteditable="true">what we do</p>

            <div class="flex flex-wrap -m-8">
                <div class="w-full md:w-1/2 xl:w-1/3 p-8 align-middle justify-center items-center flex"
                    contenteditable="false">
                    <div class="lg:pt-14">
                        <h2 class="font-bold font-heading mb-4 text-white text-center mx-auto md:text-5xl text-5xl tracking-px pt-2 leading-tight md:leading-tight lg:leading-tight"
                            contenteditable="false">Co-creating a skilled talent marketplace
                        </h2>
                        <p class="mx-auto text-center text-lg text-white mt-8 mt-10 mb-12 max-w-lg"
                            contenteditable="false">A skills-based hiring platform, connecting Students with Businesses
                            and pre-skilling opportunities to become job-ready</p>

                        <p></p>


                        <p></p>


                    </div>
                </div>
                <div class="w-full md:w-1/2 xl:w-2/3 p-8 flex">
                    <div class="flex flex-wrap justify-end -m-4">
                        <div
                            class="w-full xl:w-auto p-4 transform hover:-translate-y-3 transition ease-out duration-1000">
                            <div class="xl:max-w-sm h-full">
                                <div class="px-9 py-8 shadow-7xl bg-gray-800">
                                    <div class="flex flex-col justify-between">
                                        <div>
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24 "
                                                stroke-width="1.5" stroke="currentColor" aria-hidden="true"
                                                class="text-white w-12 mb-14">
                                                <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
                                                <path
                                                    d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z">
                                                </path>
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
                                                    class=""></path>
                                            </svg>
                                            <h3 class="mb-5 text-3xl font-bold leading-snug -mt-1 text-white text-transparent bg-clip-text bg-gradient-cyan"
                                                contenteditable="false">Students</h3>
                                            <p class="text-white mb-16 font-light">We personalise your career path to
                                                in-demand job roles through career growth opportunities. Empower
                                                yourself and turn your experience into skills.
                                            </p>
                                        </div>
                                        <a class="group inline-block font-heading font-medium text-white hover:text-red-500 ease-in duration-200 transition text-base overflow-hidden"
                                            href="students.php">
                                            <p class="mb-1 uppercase tracking-px">Learn more</p>
                                            <div
                                                class="w-full transform lg:-translate-x-48 md:-translate-x-36 -translate-x-32 group-hover:translate-x-full h-px bg-red-500 transition ease-in-out duration-500">
                                            </div>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="w-full xl:w-auto p-4 transform hover:-translate-y-3 transition ease-out duration-1000">
                            <div class="xl:max-w-sm h-full">
                                <div class="px-9 rounded-4xl shadow-7xl py-8 bg-gray-800">
                                    <div class="flex flex-col justify-between">
                                        <div>
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24"
                                                stroke-width="2" stroke="currentColor" aria-hidden="true"
                                                class="mb-14 text-white w-10">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                                </path>
                                            </svg>
                                            <h3 class="mb-5 text-3xl text-white font-bold leading-snug"
                                                contenteditable="false">Businesses
                                            </h3>
                                            <p class="text-white mb-16 font-light">We enable you to build a pipeline of
                                                skilled early talent to meet the demands of the future. Stay ahead of
                                                the curve &amp; reduce the skills gap.</p>
                                        </div>
                                        <a class="group inline-block font-heading font-medium text-white ease-in transition duration-200 hover:text-red-500 text-base overflow-hidden"
                                            href="business.php">
                                            <p class="mb-1 uppercase tracking-px">Learn more</p>
                                            <div
                                                class="w-full transform lg:-translate-x-48 md:-translate-x-36 -translate-x-32 group-hover:translate-x-full h-px bg-red-500 transition ease-in-out duration-500">
                                            </div>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="relative pt-24 overflow-hidden bg-white">
        <p class="mb-5 font-heading text-xs font-semibold text-center uppercase tracking-px text-red-500"
            contenteditable="false">STudents</p>
        <div class="container mx-auto px-4">
            <h2 class="mb-6 max-w-full mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-blue-500 leading-normal"
                contenteditable="false">
                <div class="md:inline-flex gap-4 gap-6 pt-1 font-heading max-w-2xl text-white text-blue-500 pb-4 pb-8">
                    Discover
                    <div
                        class="mx-auto mt-4 bg-red-500 flex items-center justify-center space-x-10 rounded-full items-baseline w-4 h-4 mt-5">
                        <br>
                    </div>
                    Interact
                    <div class="mx-auto rounded-full bg-red-500 w-4 h-4 mt-5"></div>
                    Engage
                </div>
            </h2>
            <div class="flex flex-wrap -m-6 xl:-m-16">
                <div class="w-full md:w-1/3 p-6 xl:p-16">
                    <div class="mb-6 h-1.5 w-12 bg-gradient-red rounded-full"></div>
                    <h2 class="mb-3 font-heading font-bold text-6xl sm:text-7xl text-blue-500 text-center"
                        contenteditable="false">68%
                        <div class="text-center text-red-500 tracking-wide text-2xl font-light" contenteditable="false">
                            Students
                        </div>
                    </h2>
                    <p class="text-blue-500 text-lg text-center" contenteditable="false">are unclear on what their focus
                        skills should be to start their careers</p>
                </div>
                <div class="w-full md:w-1/3 xl:p-16 items-center p-6">
                    <div class="mb-6 h-1.5 w-12 bg-gradient-red rounded-full space-x-10 items-baseline"></div>
                    <h2 class="mb-3 font-heading font-bold text-6xl sm:text-7xl text-gray-900 text-center"
                        contenteditable="false">27%
                        <div class="text-center text-red-500 tracking-wide text-2xl font-light" contenteditable="false">
                            Students
                        </div>
                    </h2>
                    <p class="text-lg text-center text-blue-500" contenteditable="false"> are confident in demonstrating
                        their employability skills</p>
                </div>
                <div class="w-full md:w-1/3 p-6 xl:p-16 items-center">
                    <div class="mb-6 h-1.5 w-12 bg-gradient-red rounded-full"></div>
                    <h2 class="mb-3 font-heading font-bold text-6xl sm:text-7xl text-gray-900 text-center"
                        contenteditable="false">99%
                        <div class="text-center text-red-500 tracking-wide text-2xl font-light" contenteditable="false">
                            Students
                        </div>
                    </h2>
                    <p class="text-lg text-center text-blue-500 -mx-4" contenteditable="true">agree that pre-skilling
                        gives them more confidence to apply for jobs</p>
                </div>
            </div>
        </div>
    </section>

    <section class="relative overflow-hidden bg-white">
        <div class="container mx-auto px-4 mb-12">

            <h2 class="mb-6 max-w-full mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-blue-500 leading-normal"
                contenteditable="false">

            </h2>
            <h2 class="max-w-2xl mx-auto font-heading text-center mt-12 leading-normal mb-16 font-bold text-white text-blue-500 sm:text-4xl text-3xl"
                contenteditable="false">A simple &amp; smart way to<br>transition into the world of work
            </h2>
            <div class="flex flex-wrap -m-7">
                <div class="md:w-1/3 p-7">
                    <div
                        class="h-full p-0.5 bg-gradient-cyan transform hover:-translate-y-3 transition ease-out duration-1000">
                        <div class="h-full p-8 bg-white text-center align-center " contenteditable="false">
                            <img class="relative mb-12 mx-auto" src="gradia-assets/images/features/chart.png" alt="">
                            <h3 class="mb-5 font-heading font-bold text-gray-900 text-xl" contenteditable="false"></h3>
                            <h3 class="mb-5 font-heading font-bold text-xl text-blue-500 text-transparent bg-clip-text"
                                style="border-color: rgb(229, 231, 235); --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, ); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(45, 49, 66, 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-text-opacity: 1; outline: none; user-select: text; text-align: center;">
                                Uncover Your Potential</h3>
                            <p class="text-gray-600" contenteditable="false"><span style="text-align:center;"
                                    contenteditable="false">Create your Profile to Discover your Skills and develop job
                                    market awareness
                                    to pave your own path from Education to the World of Work.</span></p>
                        </div>
                    </div>
                </div>
                <div class="md:w-1/3 p-7">
                    <div
                        class="h-full p-0.5 bg-gradient-cyan  transform hover:-translate-y-3 transition ease-out duration-1000">
                        <div class="h-full p-8 bg-white text-center align-center ">
                            <img class="relative mb-12 align-middle justify-center mx-auto"
                                src="gradia-assets/images/features/messages.png" alt="">
                            <h3 class="mb-5 font-heading font-bold text-gray-900 text-xl" contenteditable="false"></h3>
                            <h3 class="font-heading font-bold text-xl text-blue-500 mb-5"
                                style="border-color: rgb(229, 231, 235); --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, ); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(45, 49, 66, 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-text-opacity: 1; outline: none; user-select: text; text-align: center;">
                                Create Your Career Path</h3>
                            <p class="text-gray-600" contenteditable="false"><span style="text-align: center;">Identify
                                    the
                                    in-demand skills employers look for in your chosen career and become job-ready with
                                    a Personalised
                                    list of career growth opportunities.</span></p>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/3 p-7">
                    <div
                        class="h-full p-0.5 bg-gradient-cyan transform hover:-translate-y-3 transition ease-out duration-1000">
                        <div class="h-full p-8 bg-white align-center text-center ">
                            <img class="relative mb-12 mx-auto" src="gradia-assets/images/features/warning.png" alt="">
                            <h3 class="mb-5 font-heading font-bold text-gray-900 text-xl" contenteditable="false"></h3>
                            <h3 class="mb-5 font-heading font-bold text-xl text-blue-500"
                                style="border-color: rgb(229, 231, 235); --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, ); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(45, 49, 66, 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-text-opacity: 1; outline: none; user-select: text; text-align: center;">
                                Find a Career You Love</h3>
                            <p class="text-gray-600" contenteditable="false"><span style="text-align: center;"
                                    contenteditable="false">Explore the world of job opportunities, Personalised to you
                                    and stand out to
                                    employers to land a job that you love with a skills-based CV.</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h2>
        </h2>


    </section>

    <section class="relative overflow-hidden bg-white">
        <div class="relative z-10 container px-4 mx-auto">
            <div class="flex flex-wrap items-center justify-center">
                <div class="w-full md:w-1/2 items-center justify-center flex">
                    <h2 class="mx-auto font-heading font-bold text-center text-blue-500 tracking-px md:w-auto leading-normal leading-4 text-xl lg:text-2xl"
                        contenteditable="false">Ready to explore your world of<br>skills and careers to become
                        job-ready?</h2>


                    <p></p>
                    <p></p>
                </div>
                <div class="flex flex-wrap items-center -m-1.5 justify-center space-x-0 align-middle p-12">
                    <div class="w-full p-1.5 lg:w-72">
                        <input
                            class="text-gray-500 px-5 py-4 w-full placeholder-gray-500 outline-none focus:ring-2 focus:ring-blue-500 border-gray-400 border mr-4 pr-4"
                            type="text" placeholder="Enter email to get started" contenteditable="false">
                    </div>
                    <div class="w-full lg:w-auto" contenteditable="false">
                        <button
                            class="group relative font-heading px-6 py-5 w-full lg:w-auto uppercase text-white text-xs font-semibold tracking-px bg-red-500 overflow-hidden">
                            <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full transition ease-in-out bg-blue-500 duration-500 w-full"
                                contenteditable="false"></div>
                            <p href="#" class="relative z-10" contenteditable="false">join the waitlist</p>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section
        class="relative overflow-hidden bg-white justify-items-center flex flex-wrap items-center lg:pb-24 md:pb-32 pt-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap">
                <p id="our mission"
                    class="font-heading font-normal text-center uppercase tracking-px text-white text-red-500 mx-auto text-sm mt-5 md:mb-2 lg:mb-5 lg:pb-3 md:pb-3 w-full"
                    contenteditable="false">your first step in becoming job-ready</p>
                <div class="lg:w-1/2 p-6 flex flex-wrap justify-center items-center pt-8 pt-12 md:pt-2 w-full">
                    <div class="lg:max-w-lg">
                        <h2 class="mb-6 font-heading font-bold text-gray-900 text-center lg:text-7xl text-2xl md:text-7xl text-3xl lg:leading-tight md:leading-tight"
                            contenteditable="false">Prepare for a New Career and Unlock new Opportunities.</h2>
                        <p
                            class="mb-20 text-base text-gray-600 justify-items-center text-center md:mb-10 md:mt-10 text-lg">
                            Through our partnership with Google and Department for Work and Pensions (DWP), develop in
                            demand job-ready skills in high-demand careers for free via flexible online training
                            programmes, Designed by Google
                        </p>
                        <div class="flex flex-wrap -m-3 justify-center">

                        </div>
                        <div class="w-full flex justify-center lg:w-auto p-3">
                            <button
                                class="group relative font-heading flex justify-center px-6 py-5 w-full lg:w-auto uppercase text-white text-xs font-semibold tracking-px bg-red-500 overflow-hidden">
                                <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full transition ease-in-out bg-blue-500 duration-500 w-full"
                                    contenteditable="false"></div>
                                <p href="#" class="relative z-10" contenteditable="false">Discover courses</p>
                            </button>
                        </div>

                    </div>
                </div>

                <div class="w-full lg:w-1/2 p-6">
                    <div class="mx-auto max-w-lg bg-white h-96">
                        <img class="relative mx-auto transform transition ease-in-out duration-500 hover:-translate-y-8 -m-12 pb-2"
                            src="https://static.shuffle.dev/uploads/files/59/59d8d6481e116259b9698d7279d55ac39df4770f/Group-238910.svg"
                            alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="relative pt-24 overflow-hidden pb-12 bg-white bg-blue-500">
        <div class="container mx-auto px-4">
            <p class="mb-6 font-heading text-center uppercase tracking-px text-red-500 text-sm font-semibold"
                contenteditable="false">Businesses</p>
            <h2 class="mb-6 max-w-xl mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-white leading-normal"
                contenteditable="false">
                <div class="md:inline-flex gap-4 gap-6 pt-1 max-w-xl font-heading text-white">
                    Train
                    <div
                        class="mx-auto mt-4 bg-red-500 flex items-center justify-center space-x-10 rounded-full items-baseline w-4 h-4 mt-5">
                        <br>
                    </div>
                    Hire
                    <div class="mx-auto rounded-full bg-red-500 w-4 h-4 mt-5"></div>
                    Retain
                </div>
            </h2>
            <h2 class="mx-auto font-bold text-center font-heading text-white sm:text-4xl mb-16 mt-12 text-3xl max-w-2xl"
                contenteditable="false">A skills-based approach
                <div class="pb-5" contenteditable="false">to building your future workforce </div>
            </h2>
            <div class="flex flex-wrap -m-8 rounded-none">

                <div class="flex flex-wrap -m-4">
                    <div class="p-4 lg:w-1/3 p-7 md:w-1/3">
                        <div
                            class="h-full bg-gray-800 justify-center flex-wrap flex items-center transform hover:-translate-y-3 transition ease-out duration-1000 p-9">
                            <img class="h-20 md:mb-4 mb-4"
                                src="https://static.shuffle.dev/uploads/files/59/59d8d6481e116259b9698d7279d55ac39df4770f/profile.png"
                                alt="" contenteditable="false">
                            <h3 class="text-center" contenteditable="false">
                                <span
                                    class="text-transparent bg-clip-text bg-white bg-gradient-cyan2 font-bold text-xl font-heading mb-5"
                                    contenteditable="false">Be You, Be YoUnique</span><br><span
                                    class="text-lg font-light text-white" contenteditable="false">
                                    Create a profile to revolutionise your pre-hiring strategy &amp; communicate what
                                    sets you apart to
                                    attract, inspire, and develop meaningful relationships with early talent.</span>
                            </h3>
                        </div>
                    </div>
                    <div class="p-4 p-7 lg:w-1/3 md:w-1/3">
                        <div
                            class="h-full bg-gray-800 flex-wrap flex justify-center items-center transform hover:-translate-y-3 transition ease-out duration-1000 p-9">
                            <img class="h-20 md:mb-4 mb-4"
                                src="https://static.shuffle.dev/uploads/files/59/59d8d6481e116259b9698d7279d55ac39df4770f/team.png"
                                alt="">
                            <h3 class="text-center">
                                <span
                                    class="text-transparent bg-clip-text bg-gradient-fuchsia font-bold text-xl font-heading">Future
                                    Proof Your Business</span><br><span class="text-lg font-light text-white">
                                    Engage early talent with pre-skilling opportunities such as courses created by the
                                    industry and
                                    enable them to develop skills-in-demand for the jobs of the tomorrow.</span>
                            </h3>
                        </div>
                    </div>
                    <div class="p-4 lg:w-1/3 p-7 md:w-1/3">
                        <div
                            class="bg-gray-800 flex justify-center items-center h-full flex-wrap transform hover:-translate-y-3 transition ease-out duration-1000 p-9">
                            <img class="h-20 md:mb-4 mb-4"
                                src="https://static.shuffle.dev/uploads/files/59/59d8d6481e116259b9698d7279d55ac39df4770f/team-9.png"
                                alt="">
                            <h3 class="text-white text-center">
                                <span
                                    class="text-transparent bg-clip-text bg-gradient-green font-bold text-xl font-heading"
                                    contenteditable="false">Gain Competitive Advantage</span><br><span
                                    class="text-center text-lg font-light">
                                    Hire with confidence by creating a skills-based job opening &amp; get matched with a
                                    pool of
                                    market-ready early talent, equipped with skills that are better suited for your
                                    roles. </span>
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="align-middle justify-center mx-auto relative flex bg-blue-500 pb-24"><button
            class="flex flex-col items-center group relative font-heading px-6 py-5 w-full lg:w-auto uppercase text-white text-xs font-semibold tracking-px bg-red-500 overflow-hidden">
            <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full transition ease-in-out bg-blue-500 duration-500 w-full"
                contenteditable="false"></div>
            <p class="relative z-10" contenteditable="false">GET IN TOUCH</p>
        </button></div>

    <?php  include('footer.php') ?>