import { 
  CpuChipIcon,
  UsersIcon,
  CheckBadgeIcon,
  LightBulbIcon,
  BookOpenIcon,
  HandRaisedIcon
} from '@heroicons/react/20/solid'


export  function VenturesSikana() {
  return (
    <div className="overflow-hidden bg-white py-24 sm:py-32">
      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
        <div className="max-w-5xl">
          <p className="subtitle-default text-gray-900">VENTURES</p>
          <h2 className="mt-2 h2-default text-gray-900">
            Sikana
          </h2>
        </div>
        <section className="mt-12 grid grid-cols-1 lg:grid-cols-2 lg:gap-x-48 lg:gap-y-16">
          <div className="lg:pr-8">
            <h2 className="text-2xl font-semibold tracking-tight text-pretty text-gray-900">About</h2>
            <p className="mt-6 text-lg/7 text-gray-600">
              Sikana is a social business on a mission to empower young people to be resilient, reach their full potential, and contribute to the common good. We’re building a global ecosystem for holistic learning ;  accessible online and offline, affordable to the many, and grounded in culture, care, and collaboration.</p>
            <p className="mt-8 text-lg/7 text-gray-600">
              Sikana is the platform that adds an "Engage" button to the Internet. While most platforms offer "Like," or "Comment," Sikana invites people to take responsibility, contribute meaningfully, and become part of the solution.
            </p>
          </div>
          <div className="lg:row-span-2 lg:-mr-24 xl:mr-auto">
            <div className="lg:mx-0">
             <div className="relative">
              <figure className="border border-gray-200  px-6 lg:pl-8 lg:pr-24 py-6 lg:py-8 rounded-3xl bg-gray-50 mt-8 lg:mt-0">
              <blockquote className="text-lg/8 font-semibold tracking-tight text-gray-900">
                <p>
                  Sector
                </p>
                 <p className='text-lg/7 font-light text-gray-600'>
                  Education, Philantrophy, and Internet
                </p>
                <p className='mt-4'>
                  Key Contact
                </p>
              </blockquote>
              <figcaption className="mt-4 flex gap-x-4">
                <a href="/people/gregory_flipo" className="flex gap-x-4 hover:opacity-80 transition-opacity">
                  <img
                    alt=""
                    src="/images/people/gregory_flipo/gregory_flipo.jpg"
                    className="mt-1 size-14 flex-none rounded-full bg-gray-50"
                  />
                  <div>
                    <p className="font-semibold text-base text-gray-900 hover:text-indigo-600">Gregory Flipo </p>
                    <p className="text-gray-600 text-sm/8">Co-founder</p> 
                  </div>
                </a>
              </figcaption>
              <figcaption className="mt-4 flex gap-x-4">
                <a href="/people/sacha_obeegadoo" className="flex gap-x-4 hover:opacity-80 transition-opacity">
                  <img
                    alt=""
                    src="/images/people/sacha_obeegadoo/sacha_obeegadoo.jpg"
                    className="mt-1 size-14 flex-none rounded-full bg-gray-50"
                  />
                  <div>
                    <p className="font-semibold text-base text-gray-900 hover:text-indigo-600">Sacha Obeegadoo</p>
                    <p className="text-gray-600 text-sm/8">Co-founder</p> 
                  </div>
                </a>
              </figcaption>
              <blockquote className="mt-6 text-lg/8 font-semibold tracking-tight text-gray-900">
                <p>
                  Headquarters
                </p>
                 <p className='text-lg/7 font-light text-gray-600'>
                  Zanzibar, Tanzania
                </p>
                <p className='mt-6'>
                  Website
                </p>
                 <p className='text-lg/7 font-light text-gray-600'>
                  <a href="http://ourworld.tf/" className="text-indigo-600 hover:text-gray-500">sikana.tv</a>
                </p>
                <p className='mt-6'>
                  Contact
                </p>
                 <p className='text-lg/7 font-light text-gray-600'>
                  <a href="mailto:info@threefold.io " className="text-indigo-600 hover:text-gray-500">info@ourworld.tf</a>
                </p>
              </blockquote>
              </figure>
              </div>
            </div>
          </div>
          <div className="max-lg:mt-8 lg:col-span-1">
            <p className="text-2xl font-semibold tracking-tight text-pretty text-gray-900">Sikana Ecosystem</p>
            <hr className="mt-6 border-t border-gray-200" />
            <ul role="list" className="mt-8 space-y-8 text-gray-600">
              <li className="flex gap-x-3">
                <UsersIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">Sikana Studios. </strong>  
                  A global engagement platform empowering people everywhere to contribute to the integral development of young people ;  so they can grow in dignity, flourish fully, and serve the common good.
                </span>
              </li>
              <li className="flex gap-x-3">
                <CpuChipIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">SikanaOS. </strong>  
                  The tech infrastructure that invites the world to accelerate the transition toward high quality youth development.
                </span>
              </li>
              <li className="flex gap-x-3">
                <CheckBadgeIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">Sikana Certifications. </strong>  
                  Recognition frameworks that validate skills, experiences, and contributions across the Sikana ecosystem.
                </span>
              </li>
              <li className="flex gap-x-3">
                <LightBulbIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">Sikana Foundation. </strong>  
                  A lighthouse to empower nannies, teachers, caregivers, and school operators to reshape the landscape and trajectory of education in Africa ;  and beyond.
                </span>
              </li>
              <li className="flex gap-x-3">
                <BookOpenIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">Sikana Institute. </strong>  
                  A global collaborative effort to build a purpose-driven Wikipedia–Spotify of youth development.
                </span>
              </li>
              <li className="flex gap-x-3">
                <HandRaisedIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">ECD Teachers. </strong>  
                  A giving model that invites aligned individuals and organizations to invest in systemic, community-led transformation.
                </span>
              </li>
            </ul>
          </div>
        </section>
      </div>
    </div>
  )
}