www_ourworld_new/src/components/VenturesHeroApp.tsx

import { 
  CpuChipIcon,
  UserIcon,
  ShieldCheckIcon,
  SparklesIcon,
  BookOpenIcon,
  HandRaisedIcon
} from '@heroicons/react/20/solid'


export  function VenturesHeroApp() {
  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">
            Hero
          </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">
              HERO is a next-generation Personal Agent (PA), a sovereign digital assistant designed to act entirely on behalf of its user. Developed on the ThreeFold infrastructure and operating within a sovereign digital freezone, HERO prioritizes privacy, autonomy, and user control in every interaction.</p>
            <p className="mt-8 text-lg/7 text-gray-600">
              Unlike traditional AI systems owned by corporations and driven by centralized data harvesting, HERO is built around the principles of Augmented Collective Intelligence (ACI), enabling personalized intelligence that evolves through real human context. It integrates seamlessly into everyday life, supporting communication, identity, knowledge, memory, and transactions while preserving cultural nuance and digital sovereignty.
            </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'>
                  Innovation, Internet
                </p>
                <p className='mt-4'>
                  Key Contact
                </p>
              </blockquote>
              <figcaption className="mt-4 flex gap-x-4">
                <a href="/people/kristof_de_spiegeleer" className="flex gap-x-4 hover:opacity-80 transition-opacity">
                  <img
                    alt=""
                    src="/images/people/kristof_de_spiegeleer/kristof_de_spiegeleer.jpeg"
                    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">Kristof De Spiegeleer</p>
                    <p className="text-gray-600 text-sm/8">Co-Founder, CEO</p> 
                  </div>
                </a>
              </figcaption>
              <figcaption className="mt-4 flex gap-x-4">
                <a href="/people/florian_fournier" className="flex gap-x-4 hover:opacity-80 transition-opacity">
                  <img
                    alt=""
                    src="/images/people/florian_fournier/florian_fournier.jpeg"
                    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">Florian Fournier</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">www.ourworld.tf</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">Key Features</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">
                <UserIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">Personal Agent Layer. </strong>  
                  HERO acts as a digital assistant. It andles daily operations including messaging, calendars, identity, credentials, documentation, AI tasks, and transactions, all securely encrypted and user-governed.
                </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">Secure, Unbreakable Memory. </strong>  
                  Personal memory is distributed across a decentralized network using quantum-resistant cryptography, ensuring security, redundancy, and unbreachable privacy.
                </span>
              </li>
              <li className="flex gap-x-3">
                <ShieldCheckIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">Private Blockchain Ledger. </strong>  
                  Every HERO maintains a private blockchain ledger that verifies identity, manages access control, tracks interactions, and can communicate securely with other ledgers.
                </span>
              </li>
              <li className="flex gap-x-3">
                <SparklesIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">AI Agent. </strong>  
                  HERO connects with a wide range of AI agents for research, content creation, and task automation. All computation is done locally or via trusted partners.
                </span>
              </li>
            </ul>
          </div>
        </section>
      </div>
    </div>
  )
}