add logos

src/app/page.tsx

@@ -1,7 +1,6 @@
 import { CallToAction } from '@/components/CallToAction'
 import { Faqs } from '@/components/Faqs'
 import { Footer } from '@/components/Footer'
-import { Header_darkbg } from '@/components/Header_darkbg'
 import { HomeAbout } from '@/components/HomeAbout'
 import { Hero } from '@/components/Hero'
 import { Pricing } from '@/components/Pricing'
@@ -12,6 +11,8 @@ import { HomePrinciples } from '@/components/HomePrinciples'
 import { HomeMilestones } from '@/components/HomeMilestones'
 import { HomeVentures } from '@/components/HomeVentures'
 import { Quote } from '@/components/Quote'
+import { Header } from '@/components/Header'
+import { Header_darkbg } from '@/components/Header_darkbg'
 
 export default function Home() {
   return (

src/app/ventures/hero/page.tsx

@@ -0,0 +1,20 @@
+import { CallToAction } from '@/components/CallToAction'
+import { Faqs } from '@/components/Faqs'
+import { Footer } from '@/components/Footer'
+import { Header_darkbg } from '@/components/Header_darkbg'
+import { Quote } from '@/components/Quote'
+import { VenturesHeroApp } from '@/components/VenturesHeroApp'
+export default function Hero() {
+  return (
+    <>
+      <Header_darkbg />
+      <main>
+        <VenturesHeroApp />
+        <Quote />
+        <CallToAction />
+        <Faqs />
+      </main>
+      <Footer />
+    </>
+  )
+}

src/app/ventures/indaba/page.tsx

@@ -0,0 +1,21 @@
+import { CallToAction } from '@/components/CallToAction'
+import { Faqs } from '@/components/Faqs'
+import { Footer } from '@/components/Footer'
+import { Header_darkbg } from '@/components/Header_darkbg'
+import { Quote } from '@/components/Quote'
+import { VenturesIndaba } from '@/components/VenturesIndaba'
+
+export default function Indaba() {
+  return (
+    <>
+      <Header_darkbg />
+      <main>
+        <VenturesIndaba />
+        <Quote />
+        <CallToAction />
+        <Faqs />
+      </main>
+      <Footer />
+    </>
+  )
+}

src/components/BlueGradient.tsx

@@ -0,0 +1,11 @@
+export function BlueGradient() {
+  return (
+    <div 
+      className="absolute inset-0 pointer-events-none"
+      style={{
+        background: 'linear-gradient(to bottom, #000000 0%, #3533cd 100%)',
+        opacity: 0.5
+      }}
+    />
+  )
+}

src/components/Button.tsx

@@ -17,6 +17,8 @@ const variantStyles = {
     blue: 'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
     white:
       'bg-white text-black hover:bg-gray-100 hover:text-black active:bg-gray-200 active:text-gray-800 focus-visible:outline-white',
+    radial:
+      'text-white hover:opacity-90 active:opacity-80 focus-visible:outline-blue-600',
   },
   outline: {
     slate:
@@ -47,6 +49,8 @@ export function Button({ className, ...props }: ButtonProps) {
   props.variant ??= 'solid'
   props.color ??= 'slate'
 
+  const isRadial = props.variant === 'solid' && props.color === 'radial'
+  
   className = clsx(
     baseStyles[props.variant],
     props.variant === 'outline'
@@ -57,9 +61,13 @@ export function Button({ className, ...props }: ButtonProps) {
     className,
   )
 
+  const style = isRadial ? {
+    background: 'radial-gradient(circle, #1b1a86 0%, #000000 100%)'
+  } : undefined
+
   return typeof props.href === 'undefined' ? (
-    <button className={className} {...props} />
+    <button className={className} style={style} {...props} />
   ) : (
-    <Link className={className} {...props} />
+    <Link className={className} style={style} {...props} />
   )
 }

src/components/Header_darkbg.tsx

@@ -99,7 +99,14 @@ function MobileNavigation() {
 
 export function Header_darkbg() {
   return (
-    <header className="py-5 bg-black">
+    <header className="py-5 relative">
+      <div 
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          background: '#000000',
+          opacity: 1
+        }}
+      />
       <Container>
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">

src/components/Hero.tsx

@@ -3,12 +3,8 @@ import Image from 'next/image'
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import { Logo_hero } from '@/components/Logo_hero'
-import logoLaravel from '@/images/logos/laravel.svg'
+
-import logoMirage from '@/images/logos/mirage.svg'
+
-import logoStatamic from '@/images/logos/statamic.svg'
-import logoStaticKit from '@/images/logos/statickit.svg'
-import logoTransistor from '@/images/logos/transistor.svg'
-import logoTuple from '@/images/logos/tuple.svg'
 
 export function Hero() {
   return (
@@ -29,7 +25,7 @@ export function Hero() {
       
       {/* Content */}
       
-      <Container className="relative z-20 pt-24 pb-16 text-center lg:pt-32">
+      <Container className="relative z-20 pt-24 pb-24 text-center lg:pt-32">
         <div className="hidden sm:mb-8 sm:flex sm:justify-center">
             <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-100 ring-1 ring-gray-100/20 hover:ring-gray-100/5">
               Interested to Take Part?{' '}
@@ -51,38 +47,7 @@ export function Hero() {
       <div className="mt-10 flex justify-center">
         <Button href="/about" color="white">Learn More</Button>
       </div>
-      <div className="mt-16 lg:mt-24">
+      
-        <ul
-          role="list"
-          className="mt-8 flex items-center justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0"
-        >
-          {[
-            [
-              { name: 'Transistor', logo: logoTransistor },
-              { name: 'Tuple', logo: logoTuple },
-              { name: 'StaticKit', logo: logoStaticKit },
-            ],
-            [
-              { name: 'Mirage', logo: logoMirage },
-              { name: 'Laravel', logo: logoLaravel },
-              { name: 'Statamic', logo: logoStatamic },
-            ],
-          ].map((group, groupIndex) => (
-            <li key={groupIndex}>
-              <ul
-                role="list"
-                className="flex flex-col items-center gap-y-8 sm:flex-row sm:gap-x-12 sm:gap-y-0"
-              >
-                {group.map((company) => (
-                  <li key={company.name} className="flex">
-                    <Image src={company.logo} alt={company.name} unoptimized />
-                  </li>
-                ))}
-              </ul>
-            </li>
-          ))}
-        </ul>
-      </div>
     </Container>
     </div>
   )

src/components/VenturesHero.tsx

@@ -32,14 +32,14 @@ const ventures = [
     logo: '/images/ventures/ow_icon.png',
     description: 'Indaba is a social business empowering young people to be resilient, reach their full potential, and contribute to the common good. A global ecosystem for holistic learning - accessible online and offline, affordable to the many, and grounded in culture, care, and collaboration.',
     url: 'https://sikana.tv',
-    learnMoreUrl: 'https://sikana.tv/about'
+    learnMoreUrl: 'ventures/indaba'
   },
   {
     name: 'Hero',
     logo: '/images/ventures/hero.png',
     description: 'Hero is a digital assistant designed to give individuals full control over their digital identity and assets. Focused on privacy and autonomy, Hero helps manage personal information, tasks, and interactions across decentralized platforms.',
     url: '#',
-    learnMoreUrl: '#hero-learn-more'
+    learnMoreUrl: '/ventures/hero'
   }
 ]
 
@@ -83,19 +83,11 @@ export function VenturesHero() {
               </div>
               <dd className="mt-2 font-light tracking-normal text-gray-600">
                 {venture.description}
-                {venture.name === 'Zanzibar Digital Free Zone' && (
-                  <>
-                    {' '}A collaboration with the Government of Zanzibar through{' '}
-                    <a href="https://zictia.go.tz" className="text-indigo-600 hover:text-indigo-500">ZICTA</a>.
-                  </>
-                )}
               </dd>
               <div className="mt-4">
                 <a 
                   href={venture.learnMoreUrl} 
-                  target="_blank" 
+                  className="text-sm font-medium text-black hover:text-gray-700"
-                  rel="noopener" 
-                  className="text-sm font-medium text-indigo-600 hover:text-indigo-500"
                 >
                   Learn more <span aria-hidden="true">&rarr;</span>
                 </a>

src/components/VenturesHeroApp.tsx

@@ -0,0 +1,144 @@
+
+import { 
+  CpuChipIcon,
+  UsersIcon,
+  CheckBadgeIcon,
+  LightBulbIcon,
+  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">
+              Indaba 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">
+              Indaba is the platform that adds an "Engage" button to the Internet. While most platforms offer "Like," or "Comment," Indaba 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">
+                <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">Gregory Flipo </p>
+                  <p className="text-gray-600 text-sm/8">Co-founder</p> 
+                </div>
+              </figcaption>
+              <figcaption className="mt-4 flex gap-x-4">
+                <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">Sacha Obeegadoo</p>
+                  <p className="text-gray-600 text-sm/8">Co-founder</p> 
+                </div>
+              </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-indigo-500">indaba.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-indigo-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">Indaba 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">Indaba 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">IndabaOS. </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">Indaba Certifications. </strong>  
+                  Recognition frameworks that validate skills, experiences, and contributions across the Indaba 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">Indaba 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">Indaba 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>
+  )
+}

src/components/VenturesIndaba.tsx

@@ -0,0 +1,144 @@
+
+import { 
+  CpuChipIcon,
+  UsersIcon,
+  CheckBadgeIcon,
+  LightBulbIcon,
+  BookOpenIcon,
+  HandRaisedIcon
+} from '@heroicons/react/20/solid'
+
+
+export  function VenturesIndaba() {
+  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">
+            Indaba
+          </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">
+              Indaba 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">
+              Indaba is the platform that adds an "Engage" button to the Internet. While most platforms offer "Like," or "Comment," Indaba 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">
+                <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">Gregory Flipo </p>
+                  <p className="text-gray-600 text-sm/8">Co-founder</p> 
+                </div>
+              </figcaption>
+              <figcaption className="mt-4 flex gap-x-4">
+                <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">Sacha Obeegadoo</p>
+                  <p className="text-gray-600 text-sm/8">Co-founder</p> 
+                </div>
+              </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-indigo-500">indaba.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-indigo-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">Indaba 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">Indaba 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">IndabaOS. </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">Indaba Certifications. </strong>  
+                  Recognition frameworks that validate skills, experiences, and contributions across the Indaba 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">Indaba 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">Indaba 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>
+  )
+}

src/components/page.tsx

@@ -0,0 +1,21 @@
+import { CallToAction } from '@/components/CallToAction'
+import { Faqs } from '@/components/Faqs'
+import { Footer } from '@/components/Footer'
+import { Header_darkbg } from '@/components/Header_darkbg'
+import { Quote } from '@/components/Quote'
+import { VenturesHeroApp } from '@/components/VenturesHeroApp'
+
+export default function Hero() {
+  return (
+    <>
+      <Header_darkbg />
+      <main>
+        <VenturesHeroApp />
+        <Quote />
+        <CallToAction />
+        <Faqs />
+      </main>
+      <Footer />
+    </>
+  )
+}