<section id="home" class="text-gray-400 min-h-screen P-12 lg:px-36 lg:py-12 justify-center items-center">

	<div class="container grid grid-cols-1 lg:grid-cols-2 lg:gap-4 justify-center mx-auto min-h-screen">

		<div class="flex flex-col justify-center p-4 lg:p-6 text-left rounded-sm lg:max-w-2xl lg:text-left min-h-screen">

      <h1 class="text-5xl font-bold leading-10 lg:text-7xl text-gray-300">Welcome to our

        <span class="text-[#8000FF] text-5xl lg:text-7xl">

          <Typewriter interval={150} mode="loop" delay={1000}>

            <p>Work Space.</p>

            <p>Innovation Space.</p>

            <p>Thinking Space.</p>

            <p>Open Space.</p>

          </Typewriter>

        </span>

      </h1>

      <div class="mt-6 lg:mb-8 text-3xl lg:text-4xl font-bold mb-12 text-gray-600">

        <p class="whitespace-nowrap">On Premise<span class="text-3xl lg:text-5xl text-[#8000FF]">.</span></p>

        <p class="whitespace-nowrap">Cloud<span class="text-3xl lg:text-5xl text-[#8000FF]">.</span></p>

        <p class="whitespace-nowrap">Multitenant<span class="text-3xl lg:text-5xl text-[#8000FF]">.</span></p>

      </div>

      <div class="flex items-center justify-start lg:flex-row lg:space-x-4 lg:justify-start">

        <a href="#contact" class="p-3 text-xl lg:text-lg font-semibold rounded bg-[#8000FF] text-gray-300 hover:text-gray-200">

          Contact Us

        </a>

      </div>

		</div>

    <div class="p-2  lg:flex lg:p-6 overflow-hidden min-h-screen ">

      <HighlightSvelte {code} let:highlighted>

        <LineNumbers {highlighted} hideBorder startingLineNumber={69} /> 

      </HighlightSvelte>

    </div>

	</div>

</section>