<div class=" py-24 sm:py-32">
    <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
      <span class="text-base/7 font-light text-white tracking-wide">CONCEPT</span>
      <p class="mt-2 max-w-lg text-4xl font-medium tracking-tight text-pretty text-white sm:text-5xl">Value Propositions</p>
      <div class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-3">
        <!-- row1 2col -->
        <div class="relative lg:col-span-3">
          <div class="absolute inset-px rounded-lg bg-black1 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div>
          <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
            <img class="h-80 object-cover object-left" src="/images/freezone2.jpg" alt="">
            <div class="p-10 pt-4">
              <h3 class="text-base/7 font-light text-white tracking-wide">NEXT-GEN BUSINESS</h3>
              <p class="mt-1 lg:text-2xl text-xl font-normal tracking-normal text-white">Digital Freezone</p>
                 <!-- row1 2col -->
              <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">A future-focused ecosystem with streamlined business processes, decentralized systems, and global connectivity.</p>
            </div>
          </div>
          <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div>
        </div>
         <!-- row1- 2 column -->
        <div class="relative lg:col-span-3">
          <div class="absolute inset-px rounded-lg bg-black1 lg:rounded-tr-[2rem]"></div>
          <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
            <img class="h-80 object-cover object-left lg:object-right" src="images/dc2.jpg" alt="">
            <div class="p-10 pt-4">
              <h3 class="text-base/7 font-light text-white tracking-wide">SUSTAINABLE CLOUD & AI INFRASTRUCTURE</h3>
              <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">DataCenter City</p>
              <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Zanzibar’s largest, most sustainable data center, equipped with Threefold Nodes and co-owned AI integrated with city services.</p>
            </div>
          </div>
          <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-tr-[2rem]"></div>
        </div>
        <!-- row2 - 3col -->
        <div class="relative lg:col-span-2">
          <div class="absolute inset-px  bg-white/5 "></div>
          <div class="relative flex h-full flex-col overflow-hidden ">
            <img class="h-80 object-cover object-left" src="images/bot2.jpg" alt="">
            <div class="p-10 pt-4">
                <h3 class="text-base/7 font-light text-white tracking-wide">SECURE AI & DIGITAL IDENTITY</h3>
                <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Digital Hero</p>
                <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Private, secure communication and transactions with efficient AI assisted collaboration and full control of your own data and digital identity.</p>
              </div>
          </div>
          <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-bl-[2rem]"></div>
        </div>
        <!-- row2 - 3col -->
        <div class="relative lg:col-span-2">
          <div class="absolute inset-px  bg-white/5"></div>
          <div class="relative flex h-full flex-col overflow-hidden ">
            <img class="h-80 object-cover" src="/images/startup1.jpg" alt="">
            <div class="p-10 pt-4">
              <h3 class="text-base/7 font-light text-white tracking-wide">STARTUP GROWTH & INNOVATION HUB</h3>
              <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Venture Creator</p>
              <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Empowers startups with strategic guidance, funding support, global networking, talent acquisition, and operational resources.</p>
            </div>
          </div>
          <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5"></div>
        </div>
        <!-- row2 - 3col -->
        <div class="relative lg:col-span-2">
          <div class="absolute inset-px  bg-white/5 "></div>
          <div class="relative flex h-full flex-col overflow-hidden ">
            <img class="h-80 object-cover" src="/images/eco3.jpg" alt="">
            <div class="p-10 pt-4">
                <h3 class="text-base/7 font-light text-white tracking-wide">SUSTAINABLE FUTURE</h3>
                <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Regenerative Living</p>
                <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Tech-driven sustainable living powered by clean energy, organic food, and a resilient, collaborative community with global impact.</p>
            </div>
          </div>
          <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
        </div>
        <!-- row2 - 3col -->
        <div class="relative lg:col-span-2">
            <div class="absolute inset-px rounded-lg bg-white/5 lg:rounded-bl-[2rem]"></div>
            <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
              <img class="h-80 object-cover object-left" src="/images/zone2.jpg" alt="">
              <div class="p-10 pt-4">
                <h3 class="text-base/7 font-light text-white tracking-wide">DECENTRALIZED ECONOMY</h3>
                <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Digital Assets</p>
                <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Tokenized assets drive fair trade, sustainable economies, and stability with resilient digital currencies.</p>
            </div>
            </div>
            <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-bl-[2rem]"></div>
          </div>
          <!-- row2 - 3col -->
          <div class="relative lg:col-span-2">
            <div class="absolute inset-px rounded-lg bg-white/5"></div>
            <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
              <img class="h-80 object-cover" src="/images/zone1.jpg" alt="">
              <div class="p-10 pt-4">
                <h3 class="text-base/7 font-light text-white tracking-wide">LEGAL AUTONOMY </h3>
                <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Autonomous Zone</p>
                <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Enjoy legal independence, data ownership, and secure connections in a future-focused global ecosystem.</p>
            </div>
            </div>
            <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5"></div>
          </div>
          <!-- row2 - 3col -->
          <div class="relative lg:col-span-2">
            <div class="absolute inset-px rounded-lg bg-white/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
            <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
              <img class="h-80 object-cover" src="/images/home1.jpg" alt="">
              <div class="p-10 pt-4">
                <h3 class="text-base/7 font-light text-white tracking-wide">AI-POWERED INFRASTRUCTURE</h3>
                <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Augmented Intelligence</p>
                <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Homes power Zanzibar’s data center, with co-owned AI integrated into services and generating citizen income.</p>
            </div>
            </div>
            <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
          </div>
        
      </div>
    </div>
  </div>
  