add all

src/app/company/page.tsx

@@ -25,8 +25,7 @@ function Header() {
         <div className="max-w-lg">
           <h2 className="text-2xl font-medium tracking-tight">Our mission</h2>
           <p className="mt-6 text-sm/6 text-gray-600">
-            At Radiant, we are dedicated to transforming the way revenue
-            organizations source and close deals. Our mission is to provide our
+            At Indaba, we are dedicated to transforming the way communities engage and collaborate. Our mission is to provide our
             customers with an unfair advantage over both their competitors and
             potential customers through insight and analysis. We’ll stop at
             nothing to get you the data you need to close a deal.
@@ -135,8 +134,7 @@ function Team() {
         Founded by an all-star team.
       </Heading>
       <Lead className="mt-6 max-w-3xl">
-        Radiant is founded by two of the best sellers in the business and backed
-        by investors who look the other way.
+        Indaba is founded by community leaders and backed by investors who believe in the power of meaningful participation.
       </Lead>
       <div className="mt-12 grid grid-cols-1 gap-12 lg:grid-cols-2">
         <div className="max-w-lg">
@@ -147,13 +145,13 @@ function Team() {
             offers, they had an idea: what if they shared data to win deals and
             split the commission behind their companies’ backs? It turned out to
             be an incredible success, and that idea became the kernel for
-            Radiant.
+            Indaba.
           </p>
           <p className="mt-8 text-sm/6 text-gray-600">
-            Today, Radiant transforms revenue organizations by harnessing
-            illegally acquired customer and competitor data, using it to provide
-            extraordinary leverage. More than 30,000 companies rely on Radiant
-            to undercut their competitors and extort their customers, all
+            Today, Indaba transforms communities by harnessing
+            collective wisdom and collaborative action, using it to create
+            meaningful change. More than 30,000 communities rely on Indaba
+            to engage their members and drive positive impact, all
             through a single integrated platform.
           </p>
           <div className="mt-6">

src/app/layout.tsx

@@ -3,8 +3,8 @@ import type { Metadata } from 'next'
 
 export const metadata: Metadata = {
   title: {
-    template: '%s - Radiant',
-    default: 'Radiant - Close every deal',
+    template: '%s - Indaba',
+    default: 'Indaba - The Platform for Purposeful Participation',
   },
 }
 
@@ -23,7 +23,7 @@ export default function RootLayout({
         <link
           rel="alternate"
           type="application/rss+xml"
-          title="The Radiant Blog"
+          title="The Indaba Blog"
           href="/blog/feed.xml"
         />
       </head>

src/app/page.tsx

@@ -16,40 +16,41 @@ import { Testimonials } from '@/components/testimonials'
 import { Heading, Subheading } from '@/components/text'
 import { ChevronRightIcon } from '@heroicons/react/16/solid'
 import type { Metadata } from 'next'
+import Portfolio from '@/components/portfolio'
+import { IndabaOs } from '@/components/indabaos'
 
 export const metadata: Metadata = {
   description:
-    'Radiant helps you sell more by revealing sensitive information about your customers.',
+    'Indaba is the platform that adds an "Engage" button to the Internet, inviting meaningful participation and contribution.',
 }
 
 function Hero() {
   return (
     <div className="relative">
-      <Gradient className="absolute inset-2 bottom-0 rounded-4xl ring-1 ring-black/5 ring-inset" />
+      <Gradient className="absolute inset-2 bottom-0 rounded-4xl ring-1 ring-black/5 ring-inset " />
       <Container className="relative">
         <Navbar
           banner={
             <Link
-              href="/blog/radiant-raises-100m-series-a-from-tailwind-ventures"
-              className="flex items-center gap-1 rounded-full bg-fuchsia-950/35 px-3 py-0.5 text-sm/6 font-medium text-white data-hover:bg-fuchsia-950/30"
+              href="/blog"
+              className="flex items-center gap-1 rounded-full bg-indigo-800/35 px-4 py-0.5 text-sm/6 font-medium text-white data-hover:bg-indigo-800/50"
             >
-              Radiant raises $100M Series A from Tailwind Ventures
+              Join the Indaba Community
               <ChevronRightIcon className="size-4" />
             </Link>
           }
         />
-        <div className="pt-16 pb-24 sm:pt-24 sm:pb-32 md:pt-32 md:pb-48">
-          <h1 className="font-display text-6xl/[0.9] font-medium tracking-tight text-balance text-gray-950 sm:text-8xl/[0.8] md:text-9xl/[0.8]">
-            Close every deal.
+        <div className="pt-16 pb-24 lg:pt-24 lg:pb-24 md: max-w-2xl lg:max-w-5xl">
+          <h1 className="font-display text-5xl/[0.9] font-medium tracking-tight text-balance text-white lg:text-8xl text-6xl leading-tighter">
+            The Platform for Purposeful Participation
           </h1>
-          <p className="mt-8 max-w-lg text-xl/7 font-medium text-gray-950/75 sm:text-2xl/8">
-            Radiant helps you sell more by revealing sensitive information about
-            your customers.
+          <p className="mt-8 max-w-3xl text-xl/5 font-light text-gray-150 lg:text-xl/7 text-gray-100">
+            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 className="mt-12 flex flex-col gap-x-6 gap-y-4 sm:flex-row">
-            <Button href="#">Get started</Button>
+            <Button href="#">Get Involved</Button>
             <Button variant="secondary" href="/pricing">
-              See pricing
+              See Projects
             </Button>
           </div>
         </div>
@@ -58,37 +59,43 @@ function Hero() {
   )
 }
 
+
+
+
+
 function FeatureSection() {
   return (
     <div className="overflow-hidden">
       <Container className="pb-24">
         <Heading as="h2" className="max-w-3xl">
-          A snapshot of your entire sales pipeline.
+          Deliver transformational experiences anywhere
         </Heading>
         <Screenshot
           width={1216}
           height={768}
           src="/screenshots/app.png"
-          className="mt-16 h-144 sm:h-auto sm:w-304"
+          className="mt-12 h-144 sm:h-auto sm:w-304"
         />
       </Container>
     </div>
   )
 }
 
+
+
 function BentoSection() {
   return (
     <Container>
-      <Subheading>Sales</Subheading>
+      <Subheading>Features</Subheading>
       <Heading as="h3" className="mt-2 max-w-3xl">
-        Know more about your customers than they do.
+        Empowering meaningful participation.
       </Heading>
 
       <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
         <BentoCard
-          eyebrow="Insight"
-          title="Get perfect clarity"
-          description="Radiant uses social engineering to build a detailed financial picture of your leads. Know their budget, compensation package, social security number, and more."
+          eyebrow="Community"
+          title="Foster Engagement"
+          description="Indaba creates spaces for meaningful dialogue and collaboration, helping communities come together to address shared challenges."
           graphic={
             <div className="h-80 bg-[url(/screenshots/profile.png)] bg-size-[1000px_560px] bg-position-[left_-109px_top_-112px] bg-no-repeat" />
           }
@@ -96,9 +103,9 @@ function BentoSection() {
           className="max-lg:rounded-t-4xl lg:col-span-3 lg:rounded-tl-4xl"
         />
         <BentoCard
-          eyebrow="Analysis"
-          title="Undercut your competitors"
-          description="With our advanced data mining, you’ll know which companies your leads are talking to and exactly how much they’re being charged."
+          eyebrow="Impact"
+          title="Drive Real Change"
+          description="Indaba empowers communities to identify challenges and work together on sustainable solutions through structured participation."
           graphic={
             <div className="absolute inset-0 bg-[url(/screenshots/competitors.png)] bg-size-[1100px_650px] bg-position-[left_-38px_top_-73px] bg-no-repeat" />
           }
@@ -106,9 +113,9 @@ function BentoSection() {
           className="lg:col-span-3 lg:rounded-tr-4xl"
         />
         <BentoCard
-          eyebrow="Speed"
-          title="Built for power users"
-          description="It’s never been faster to cold email your entire contact list using our streamlined keyboard shortcuts."
+          eyebrow="Tools"
+          title="Powerful Features"
+          description="Access intuitive tools designed to facilitate meaningful discussions, decision-making, and collaborative action within your community."
           graphic={
             <div className="flex size-full pt-10 pl-10">
               <Keyboard highlighted={['LeftCommand', 'LeftShift', 'D']} />
@@ -117,16 +124,16 @@ function BentoSection() {
           className="lg:col-span-2 lg:rounded-bl-4xl"
         />
         <BentoCard
-          eyebrow="Source"
-          title="Get the furthest reach"
-          description="Bypass those inconvenient privacy laws to source leads from the most unexpected places."
+          eyebrow="Connect"
+          title="Build Networks"
+          description="Connect with like-minded individuals and organizations committed to creating positive change in their communities."
           graphic={<LogoCluster />}
           className="lg:col-span-2"
         />
         <BentoCard
-          eyebrow="Limitless"
-          title="Sell globally"
-          description="Radiant helps you sell in locations currently under international embargo."
+          eyebrow="Global"
+          title="Worldwide Impact"
+          description="Join a global movement of communities using Indaba to drive meaningful change and sustainable development."
           graphic={<Map />}
           className="max-lg:rounded-b-4xl lg:col-span-2 lg:rounded-br-4xl"
         />
@@ -135,76 +142,76 @@ function BentoSection() {
   )
 }
 
+const stats = [
+  { id: 1, name: 'Lessons delivered', value: '+4,000,000,000' },
+  { id: 2, name: 'Educational resources', value: '+90,000,000' },
+  { id: 3, name: 'Spent on infrastructure & content development', value: '+$60,000,000' },
+]
+
+
 function DarkBentoSection() {
   return (
-    <div className="mx-2 mt-2 rounded-4xl bg-gray-900 py-32">
-      <Container>
-        <Subheading dark>Outreach</Subheading>
-        <Heading as="h3" dark className="mt-2 max-w-3xl">
-          Customer outreach has never been easier.
-        </Heading>
+    <div className="pt-24 pb-12">
+      <div className="mx-auto max-w-8xl px-6 lg:px-8">
+        <div className="rounded-4xl bg-indigo-50 dark:bg-indigo-800/50 px-6 py-24 lg:rounded-3xl lg:px-16">
+          <div className="flex flex-col gap-y-20 lg:flex-row lg:gap-x-12">
+            {/* Left: Text Column */}
+            <div className="lg:basis-5/12">
+              <Subheading>About Indaba</Subheading>
+              <Heading as="h3" className="mt-2 max-w-2xl">
+                A Movement to Reimagine Learning for All
+              </Heading>
+              <p className="mt-8 text-xl/4 font-light text-gray-600 dark:text-gray-200 leading-normal lg:text-xl/6">
+                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>
+              <div className="mt-8 flex flex-col gap-x-6 gap-y-4 sm:flex-row">
+              <Button href="#">About Us</Button>
+          </div>
+            </div>
 
-        <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
-          <BentoCard
-            dark
-            eyebrow="Networking"
-            title="Sell at the speed of light"
-            description="Our RadiantAI chat assistants analyze the sentiment of your conversations in real time, ensuring you're always one step ahead."
-            graphic={
-              <div className="h-80 bg-[url(/screenshots/networking.png)] bg-size-[851px_344px] bg-no-repeat" />
-            }
-            fade={['top']}
-            className="max-lg:rounded-t-4xl lg:col-span-4 lg:rounded-tl-4xl"
-          />
-          <BentoCard
-            dark
-            eyebrow="Integrations"
-            title="Meet leads where they are"
-            description="With thousands of integrations, no one will be able to escape your cold outreach."
-            graphic={<LogoTimeline />}
-            // `overflow-visible!` is needed to work around a Chrome bug that disables the mask on the graphic.
-            className="z-10 overflow-visible! lg:col-span-2 lg:rounded-tr-4xl"
-          />
-          <BentoCard
-            dark
-            eyebrow="Meetings"
-            title="Smart call scheduling"
-            description="Automatically insert intro calls into your leads' calendars without their consent."
-            graphic={<LinkedAvatars />}
-            className="lg:col-span-2 lg:rounded-bl-4xl"
-          />
-          <BentoCard
-            dark
-            eyebrow="Engagement"
-            title="Become a thought leader"
-            description="RadiantAI automatically writes LinkedIn posts that relate current events to B2B sales, helping you build a reputation as a thought leader."
-            graphic={
-              <div className="h-80 bg-[url(/screenshots/engagement.png)] bg-size-[851px_344px] bg-no-repeat" />
-            }
-            fade={['top']}
-            className="max-lg:rounded-b-4xl lg:col-span-4 lg:rounded-br-4xl"
-          />
+            {/* Right: Stats Column */}
+            <div className="lg:basis-7/12 lg:pl-16">
+              <dl className="grid grid-cols-1 gap-x-12 gap-y-10">
+                {stats.map((stat) => (
+                  <div key={stat.id} className="flex flex-col gap-y-1">
+                    <dt className="text-base text-gray-600 dark:text-gray-300">{stat.name}</dt>
+                    <dd className="text-4xl lg:text-7xl font-semibold bg-linear-145 from-[#490ae7] from-10% via-[#9592ff] via-50% to-[#4605b0] to-90% bg-clip-text text-transparent">
+                      {stat.value}
+                    </dd>
+                    {stat.name && (
+                      <dd className="mt-2 text-sm lg:text-base font-light text-gray-600 dark:text-gray-300">
+                        {stat.name}
+                      </dd>
+                    )}
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
         </div>
-      </Container>
+      </div>
     </div>
   )
 }
 
+
 export default function Home() {
   return (
     <div className="overflow-hidden">
       <Hero />
       <main>
-        <Container className="mt-10">
+        <Container className="mt-24">
           <LogoCloud />
         </Container>
-        <div className="bg-linear-to-b from-white from-50% to-gray-100 py-32">
-          <FeatureSection />
-          <BentoSection />
-        </div>
         <DarkBentoSection />
+        <div className="bg-linear-to-b from-white from-50% to-gray-100 py-24">
+          <Testimonials />
+        </div>
+        <Portfolio />
+        <IndabaOs />
       </main>
-      <Testimonials />
       <Footer />
     </div>
   )

src/components/button.tsx

@@ -5,16 +5,16 @@ import { Link } from './link'
 const variants = {
   primary: clsx(
     'inline-flex items-center justify-center px-4 py-[calc(--spacing(2)-1px)]',
-    'rounded-full border border-transparent bg-gray-950 shadow-md',
+    'rounded-full border border-transparent bg-indigo-500 shadow-md',
     'text-base font-medium whitespace-nowrap text-white',
-    'data-disabled:bg-gray-950 data-disabled:opacity-40 data-hover:bg-gray-800',
+    'data-disabled:bg-indigo-500 data-disabled:opacity-40 data-hover:bg-indigo-400',
   ),
   secondary: clsx(
     'relative inline-flex items-center justify-center px-4 py-[calc(--spacing(2)-1px)]',
-    'rounded-full border border-transparent bg-white/15 shadow-md ring-1 ring-[#D15052]/15',
+    'rounded-full border border-transparent bg-indigo-200/70 shadow-md ring-1 ring-[#D15052]/15',
     'after:absolute after:inset-0 after:rounded-full after:shadow-[inset_0_0_2px_1px_#ffffff4d]',
-    'text-base font-medium whitespace-nowrap text-gray-950',
-    'data-disabled:bg-white/15 data-disabled:opacity-40 data-hover:bg-white/20',
+    'text-base font-medium whitespace-nowrap text-indigo-900',
+    'data-disabled:bg-indigo-200/70 data-disabled:opacity-40 data-hover:bg-indigo-100/70',
   ),
   outline: clsx(
     'inline-flex items-center justify-center px-2 py-[calc(--spacing(1.5)-1px)]',

src/components/footer.tsx

@@ -6,32 +6,10 @@ import { Link } from './link'
 import { Logo } from './logo'
 import { Subheading } from './text'
 
-function CallToAction() {
-  return (
-    <div className="relative pt-20 pb-16 text-center sm:py-24">
-      <hgroup>
-        <Subheading>Get started</Subheading>
-        <p className="mt-6 text-3xl font-medium tracking-tight text-gray-950 sm:text-5xl">
-          Ready to dive in?
-          <br />
-          Start your free trial today.
-        </p>
-      </hgroup>
-      <p className="mx-auto mt-6 max-w-xs text-sm/6 text-gray-500">
-        Get the cheat codes for selling and unlock your team&apos;s revenue
-        potential.
-      </p>
-      <div className="mt-6">
-        <Button className="w-full sm:w-auto" href="#">
-          Get started
-        </Button>
-      </div>
-    </div>
-  )
-}
+
 
 function SitemapHeading({ children }: { children: React.ReactNode }) {
-  return <h3 className="text-sm/6 font-medium text-gray-950/50">{children}</h3>
+  return <h3 className="text-base font-semibold text-white">{children}</h3>
 }
 
 function SitemapLinks({ children }: { children: React.ReactNode }) {
@@ -43,7 +21,7 @@ function SitemapLink(props: React.ComponentPropsWithoutRef<typeof Link>) {
     <li>
       <Link
         {...props}
-        className="font-medium text-gray-950 data-hover:text-gray-950/75"
+        className="font-medium text-white data-hover:text-white"
       />
     </li>
   )
@@ -121,7 +99,7 @@ function SocialLinks() {
         href="https://facebook.com"
         target="_blank"
         aria-label="Visit us on Facebook"
-        className="text-gray-950 data-hover:text-gray-950/75"
+        className="text-gray-100 data-hover:text-white"
       >
         <SocialIconFacebook className="size-4" />
       </Link>
@@ -129,7 +107,7 @@ function SocialLinks() {
         href="https://x.com"
         target="_blank"
         aria-label="Visit us on X"
-        className="text-gray-950 data-hover:text-gray-950/75"
+        className="text-gray-100 data-hover:text-white"
       >
         <SocialIconX className="size-4" />
       </Link>
@@ -137,7 +115,7 @@ function SocialLinks() {
         href="https://linkedin.com"
         target="_blank"
         aria-label="Visit us on LinkedIn"
-        className="text-gray-950 data-hover:text-gray-950/75"
+        className="text-gray-100 data-hover:text-white"
       >
         <SocialIconLinkedIn className="size-4" />
       </Link>
@@ -147,7 +125,7 @@ function SocialLinks() {
 
 function Copyright() {
   return (
-    <div className="text-sm/6 text-gray-950">
+    <div className="text-sm/6 text-white">
       &copy; {new Date().getFullYear()} Radiant Inc.
     </div>
   )
@@ -156,10 +134,9 @@ function Copyright() {
 export function Footer() {
   return (
     <footer>
-      <Gradient className="relative">
-        <div className="absolute inset-2 rounded-4xl bg-white/80" />
+      <Gradient className="relative pt-8">
+        <div className="absolute inset-2 rounded-4xl bg-transparent p" />
         <Container>
-          <CallToAction />
           <PlusGrid className="pb-16">
             <PlusGridRow>
               <div className="grid grid-cols-2 gap-y-10 pb-6 lg:grid-cols-6 lg:gap-8">

src/components/gradient.tsx

@@ -9,7 +9,7 @@ export function Gradient({
       {...props}
       className={clsx(
         className,
-        'bg-linear-115 from-[#fff1be] from-28% via-[#ee87cb] via-70% to-[#b060ff] sm:bg-linear-145',
+        'bg-linear-145 from-[#0f112b] from-10% via-[#2a1e5a] via-50% to-[#392468] to-90%',
       )}
     />
   )
@@ -21,7 +21,7 @@ export function GradientBackground() {
       <div
         className={clsx(
           'absolute -top-44 -right-60 h-60 w-xl transform-gpu md:right-0',
-          'bg-linear-115 from-[#fff1be] from-28% via-[#ee87cb] via-70% to-[#b060ff]',
+          'bg-linear-145 from-[#0f112b] from-10% via-[#2a1e5a] via-50% to-[#392468] to-90%',
           'rotate-[-10deg] rounded-full blur-3xl',
         )}
       />

src/components/indabaos.tsx

@@ -0,0 +1,50 @@
+'use client'
+import { Button } from './button'
+import { Heading, Subheading } from './text'
+import { clsx } from 'clsx'
+import { ChevronRightIcon } from '@heroicons/react/20/solid'            
+
+const stats = [
+  { id: 1, name: 'Lessons delivered', value: '+4,000,000,000' },
+  { id: 2, name: 'Educational resources', value: '+90,000,000' },
+  { id: 3, name: 'Spent on infrastructure & content development', value: '+$60,000,000' },
+]
+
+export function IndabaOs() {
+  return (
+    <div className="pt-32 pb-24">
+      <div className="mx-auto max-w-7xl h-full px-6 lg:px-8">
+       <div className="relative isolate overflow-hidden bg-white px-6 py-24 lg:py-56 lg:px-8 rounded-2xl min-h-[700px]">
+       {/* Background image */}
+        <img
+          alt=""
+           src="/indabaos/earth.png"
+          className="absolute inset-0 -z-10 size-full w-full object-cover"
+        />
+
+    {/* Dark overlay on image only */}
+    <div className="absolute inset-0 -z-10 bg-black/50 pointer-events-none" />
+
+    {/* os icon on top  */}
+    <div className="absolute inset-x-0 top-10 flex justify-center pt-8">
+      <img
+        alt=""
+        src="/indabaos/os_icon.png"
+        className="h-25 w-auto"
+      />
+    </div>
+
+    {/* Text content is ABOVE overlay */}
+    <div className="relative z-10 mx-auto max-w-2xl text-center">
+      <h2 className="text-4xl font-medium tracking-tight text-white sm:text-5xl">
+        IndabaOS
+      </h2>
+      <p className="mt-8 text-lg font-light text-pretty text-white sm:text-xl/8">
+        Introducing the tech infrastructure that invites the world to accelerate the transition toward high quality youth development.
+      </p>
+    </div>
+  </div>
+      </div>
+    </div>
+  )
+}

src/components/logo-cloud.tsx

@@ -1,40 +1,76 @@
+'use client'
+
 import { clsx } from 'clsx'
+import { useEffect, useRef, useState } from 'react'
 
 export function LogoCloud({
   className,
 }: React.ComponentPropsWithoutRef<'div'>) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [duplicated, setDuplicated] = useState(false)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (container && !duplicated) {
+      const clone = container.cloneNode(true) as HTMLDivElement
+      clone.style.marginLeft = '3rem' // Add spacing before repeat
+      container.parentElement?.appendChild(clone)
+      setDuplicated(true)
+    }
+  }, [duplicated])
+
   return (
     <div
-      className={clsx(
-        className,
-        'flex justify-between max-sm:mx-auto max-sm:max-w-md max-sm:flex-wrap max-sm:justify-evenly max-sm:gap-x-4 max-sm:gap-y-4',
-      )}
+      className={clsx('overflow-hidden', className)}
+      style={{
+        position: 'relative',
+        width: '100%',
+        whiteSpace: 'nowrap',
+      }}
     >
-      <img
-        alt="SavvyCal"
-        src="/logo-cloud/savvycal.svg"
-        className="h-9 max-sm:mx-auto sm:h-8 lg:h-12"
-      />
-      <img
-        alt="Laravel"
-        src="/logo-cloud/laravel.svg"
-        className="h-9 max-sm:mx-auto sm:h-8 lg:h-12"
-      />
-      <img
-        alt="Tuple"
-        src="/logo-cloud/tuple.svg"
-        className="h-9 max-sm:mx-auto sm:h-8 lg:h-12"
-      />
-      <img
-        alt="Transistor"
-        src="/logo-cloud/transistor.svg"
-        className="h-9 max-sm:mx-auto sm:h-8 lg:h-12"
-      />
-      <img
-        alt="Statamic"
-        src="/logo-cloud/statamic.svg"
-        className="h-9 max-sm:mx-auto sm:h-8 lg:h-12"
-      />
+      <div
+        ref={containerRef}
+        style={{
+          display: 'inline-flex',
+          animation: 'scroll-left 10s linear infinite',
+        }}
+      >
+        {logos.map(({ src, alt }, i) => (
+          <img
+            key={`${alt}-${i}`}
+            alt={alt}
+            src={src}
+            style={{
+              height: '3rem',
+              marginRight: '3rem',
+              flexShrink: 0,
+            }}
+          />
+        ))}
+      </div>
+
+      <style>{`
+        @keyframes scroll-left {
+          0% {
+            transform: translateX(0%);
+          }
+          100% {
+            transform: translateX(-50%);
+          }
+        }
+      `}</style>
     </div>
   )
 }
+
+const logos = [
+  { alt: 'SavvyCal', src: '/logo-cloud/savvycal.svg' },
+  { alt: 'Laravel', src: '/logo-cloud/laravel.svg' },
+  { alt: 'Tuple', src: '/logo-cloud/tuple.svg' },
+  { alt: 'Transistor', src: '/logo-cloud/transistor.svg' },
+  { alt: 'Laravel', src: '/logo-cloud/laravel.svg' },
+  { alt: 'Statamic', src: '/logo-cloud/statamic.svg' },
+  { alt: 'Tuple', src: '/logo-cloud/tuple.svg' },
+  { alt: 'Statamic', src: '/logo-cloud/statamic.svg' },
+  
+]

src/components/navbar.tsx

@@ -12,10 +12,10 @@ import { Logo } from './logo'
 import { PlusGrid, PlusGridItem, PlusGridRow } from './plus-grid'
 
 const links = [
-  { href: '/pricing', label: 'Pricing' },
-  { href: '/company', label: 'Company' },
+  { href: '/pricing', label: 'About' },
+  { href: '/company', label: 'Projects' },
   { href: '/blog', label: 'Blog' },
-  { href: '/login', label: 'Login' },
+  { href: '/login', label: 'Get Involved' },
 ]
 
 function DesktopNav() {
@@ -25,7 +25,7 @@ function DesktopNav() {
         <PlusGridItem key={href} className="relative flex">
           <Link
             href={href}
-            className="flex items-center px-4 py-3 text-base font-medium text-gray-950 bg-blend-multiply data-hover:bg-black/2.5"
+            className="flex items-center px-4 py-3 text-base font-medium text-white bg-blend-multiply data-hover:bg-black/2.5"
           >
             {label}
           </Link>
@@ -61,7 +61,7 @@ function MobileNav() {
             }}
             key={href}
           >
-            <Link href={href} className="text-base font-medium text-gray-950">
+            <Link href={href} className="text-base font-medium text-white">
               {label}
             </Link>
           </motion.div>

src/components/portfolio.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import * as Headless from '@headlessui/react'
+import { useEffect, useRef, useState } from 'react'
+import { clsx } from 'clsx'
+import { Subheading } from './text'
+import { Button } from './button'
+import { Heading } from './text'
+import { Link } from './link'
+import { ArrowLongRightIcon } from '@heroicons/react/20/solid'
+
+
+const images = [
+  {
+    src: '/portfolio/kayamandi.jpg',
+    subtitle: 'Featured Projects',
+    title: 'Kayamandi',
+    description: 'A prototype Early Childhood Development (ECD) program focused on building foundational roots for children aged 0–6. Local caregivers and educators were equipped with tools, training, and access to community-led spaces designed to nurture resilience and curiosity.',
+    href: '/portfolio/kayamandi',
+    phase: 'Season 1 - Completed',
+  },
+  {
+    src: '/portfolio/southern.jpg',
+    subtitle: 'Featured Projects',
+    title: 'Southern Cape',
+    description: 'After-school support initiative empowering youth aged 6–15 with screen-free, skill-building environments. Focused on creative exploration, mentorship, and safe communal spaces that prioritize emotional intelligence and local culture.',
+    href: '/portfolio/southerncape',
+    phase: 'Season 1 - Completed',
+  },
+  {
+    src: '/portfolio/township.jpg',
+    subtitle: 'Featured Projects',
+    title: 'Township',
+    description: 'Vocational & Micro-Entrepreneurship program designed for youth aged 15–25. The pilot introduces regenerative skills and purpose-driven pathways to financial autonomy, including hands-on training in green tech, design, and circular economies.',
+    href: '/portfolio/township',
+    phase: 'Phase 3 - Ongoing',
+  }
+  ,
+  {
+    src: '/portfolio/durban.jpg',
+    subtitle: 'Featured Projects',
+    title: 'Durban',
+    description: 'Community-led regeneration prototype focused on restoring shared spaces and collective action. This ongoing initiative aims to activate a culture of stewardship, citizen engagement, and intergenerational collaboration.',
+    href: '/portfolio/durban',
+    phase: 'Phase 4 - Ongoing',
+  },
+]
+
+export default function Portfolio() {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const intervalRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    intervalRef.current = setInterval(() => {
+      setActiveIndex((prev) => (prev + 1) % images.length)
+    }, 4000)
+    return () => clearInterval(intervalRef.current!)
+  }, [])
+
+  return (
+    <div className="relative isolate overflow-hidden">
+  <div className="relative w-full h-[600px] max-w-none">
+    {images.map((image, idx) => (
+      <div
+        key={idx}
+        className={clsx(
+          'absolute inset-0 transition-opacity duration-2000',
+          idx === activeIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'
+        )}
+      >
+        <div className="relative w-full h-full">
+          <img
+            src={image.src}
+            alt={image.title}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-r from-black/50 via-black/30 to-transparent pointer-events-none"></div>
+        </div>
+        <div className="absolute left-16 top-1/2 transform -translate-y-1/2 text-white text-3xl font-bold z-20">
+          <Subheading as="h3" className="text-lg font-semibold text-white">
+          {image.subtitle}
+          </Subheading>
+          <p className="mt-16 inline-flex items-center gap-1 rounded-full bg-white/35 px-4 py-1.5 text-sm font-medium text-white backdrop-blur-md whitespace-nowrap">
+            {image.phase}
+          </p>
+          <Heading className="mt-8 text-white ">
+          {image.title}
+          </Heading>
+          <p className="mt-8 max-w-[800px] text-xl/4 font-light text-gray-100 dark:text-gray-200 leading-normal lg:text-xl/6">
+          {image.description}
+           </p>
+          <Link
+          href={image.href}
+          className="mt-8 inline-flex items-center gap-2 text-sm font-medium text-indigo-300">
+          Learn More
+          <ArrowLongRightIcon className="size-5" />
+        </Link> 
+        </div>
+      </div>
+    ))}
+  </div>
+</div>
+
+  )
+}

src/components/testimonials.tsx

@@ -19,52 +19,49 @@ import { Heading, Subheading } from './text'
 
 const testimonials = [
   {
-    img: '/testimonials/tina-yards.jpg',
-    name: 'Tina Yards',
-    title: 'VP of Sales, Protocol',
+    img: '/phases/phase1.jpg',
+    name: '0 - 6 Years Old',
+    title: 'From birth to age 6, we offer ECD programs that change lives forever.',
+    subtitle: 'Phase 1',
     quote:
-      'Thanks to Radiant, we’re finding new leads that we never would have found with legal methods.',
+      'The Foundation Phase',
+    href: '/phases/phase1',
   },
   {
-    img: '/testimonials/conor-neville.jpg',
-    name: 'Conor Neville',
-    title: 'Head of Customer Success, TaxPal',
+    img: '/phases/phase2.jpg',
+    name: '6 - 15 Years Old',
+    title: 'Unlock the Potential of Youth with transformational learning experiences',
+    subtitle: 'Phase 2',
     quote:
-      'Radiant made undercutting all of our competitors an absolute breeze.',
+      'The Exploration Phase',
+    href: '/phases/phase2',
   },
   {
-    img: '/testimonials/amy-chase.jpg',
-    name: 'Amy Chase',
-    title: 'Head of GTM, Pocket',
+    img: '/phases/phase3.jpg',
+    name: '15 - 25 Years Old',
+    title: 'Skills that Earn & Regenerate Vocational paths that equip young people to live with purpose.',
+    subtitle: 'Phase 3',
     quote:
-      'We closed a deal in literally a few minutes because we knew their exact budget.',
+      'The Vocation & Regeneration Phase',
+    href: '/phases/phase3',
   },
   {
-    img: '/testimonials/veronica-winton.jpg',
-    name: 'Veronica Winton',
-    title: 'CSO, Planeteria',
+    img: '/phases/phase4.jpg',
+    name: 'All Ages',
+    title: 'A unique portfolio of impact proven Community-led solutions worth implementing',
+    subtitle: 'Phase 4',
     quote:
-      'We’ve managed to put two of our main competitors out of business in 6 months.',
-  },
-  {
-    img: '/testimonials/dillon-lenora.jpg',
-    name: 'Dillon Lenora',
-    title: 'VP of Sales, Detax',
-    quote: 'I was able to replace 80% of my team with RadiantAI bots.',
-  },
-  {
-    img: '/testimonials/harriet-arron.jpg',
-    name: 'Harriet Arron',
-    title: 'Account Manager, Commit',
-    quote:
-      'I’ve smashed all my targets without having to speak to a lead in months.',
+      'The Contribution Phase',
+    href: '/phases/phase4',
   },
 ]
 
 function TestimonialCard({
+  subtitle,
   name,
   title,
   img,
+  href,
   children,
   bounds,
   scrollX,
@@ -73,6 +70,8 @@ function TestimonialCard({
   img: string
   name: string
   title: string
+  subtitle: string
+  href: string
   children: React.ReactNode
   bounds: RectReadOnly
   scrollX: MotionValue<number>
@@ -129,20 +128,25 @@ function TestimonialCard({
       />
       <figure className="relative p-10">
         <blockquote>
-          <p className="relative text-xl/7 text-white">
+          <p className="relative lg:text-4xl text-2xl text-white">
             <span aria-hidden="true" className="absolute -translate-x-full">
-              “
             </span>
             {children}
             <span aria-hidden="true" className="absolute">
-              ”
             </span>
           </p>
         </blockquote>
+        <Link
+          href={href}
+          className="mt-4 inline-flex items-center gap-2 text-sm/6 font-medium text-indigo-300">
+          Explore Projects
+          <ArrowLongRightIcon className="size-5" />
+        </Link>
         <figcaption className="mt-6 border-t border-white/20 pt-6">
+          <p className="text-xs/7 font-normal text-white">{subtitle}</p>
           <p className="text-sm/6 font-medium text-white">{name}</p>
           <p className="text-sm/6 font-medium">
-            <span className="bg-linear-to-r from-[#fff1be] from-28% via-[#ee87cb] via-70% to-[#b060ff] bg-clip-text text-transparent">
+            <span className="bg-linear-145 from-[#e6dcff] from-10% via-[#9592ff] via-50% to-[#f0e7ff] to-90% bg-clip-text text-transparent">
               {title}
             </span>
           </p>
@@ -152,25 +156,7 @@ function TestimonialCard({
   )
 }
 
-function CallToAction() {
-  return (
-    <div>
-      <p className="max-w-sm text-sm/6 text-gray-600">
-        Join the best sellers in the business and start using Radiant to hit
-        your targets today.
-      </p>
-      <div className="mt-2">
-        <Link
-          href="#"
-          className="inline-flex items-center gap-2 text-sm/6 font-medium text-pink-600"
-        >
-          Get started
-          <ArrowLongRightIcon className="size-5" />
-        </Link>
-      </div>
-    </div>
-  )
-}
+
 
 export function Testimonials() {
   let scrollRef = useRef<HTMLDivElement | null>(null)
@@ -189,13 +175,15 @@ export function Testimonials() {
   }
 
   return (
-    <div className="overflow-hidden py-32">
+    <div className="overflow-hidden">
       <Container>
         <div ref={setReferenceWindowRef}>
-          <Subheading>What everyone is saying</Subheading>
-          <Heading as="h3" className="mt-2">
-            Trusted by professionals.
+          <Heading as="h3" className="mt-2 lg:max-w-3xl max-w-2xl">
+            Deliver Transformational Experiences Anywhere
           </Heading>
+          <p className="mt-8 max-w-3xl text-xl/5 font-light text-gray-600 lg:text-xl/7">
+            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>
       </Container>
       <div
@@ -207,11 +195,13 @@ export function Testimonials() {
           '[--scroll-padding:max(--spacing(6),calc((100vw-(var(--container-2xl)))/2))] lg:[--scroll-padding:max(--spacing(8),calc((100vw-(var(--container-7xl)))/2))]',
         ])}
       >
-        {testimonials.map(({ img, name, title, quote }, testimonialIndex) => (
+        {testimonials.map(({ img, name, title, quote, href, subtitle }, testimonialIndex) => (
           <TestimonialCard
             key={testimonialIndex}
+            subtitle={subtitle}
             name={name}
             title={title}
+            href={href}
             img={img}
             bounds={bounds}
             scrollX={scrollX}
@@ -222,28 +212,6 @@ export function Testimonials() {
         ))}
         <div className="w-2xl shrink-0 sm:w-216" />
       </div>
-      <Container className="mt-16">
-        <div className="flex justify-between">
-          <CallToAction />
-          <div className="hidden sm:flex sm:gap-2">
-            {testimonials.map(({ name }, testimonialIndex) => (
-              <Headless.Button
-                key={testimonialIndex}
-                onClick={() => scrollTo(testimonialIndex)}
-                data-active={
-                  activeIndex === testimonialIndex ? true : undefined
-                }
-                aria-label={`Scroll to testimonial from ${name}`}
-                className={clsx(
-                  'size-2.5 rounded-full border border-transparent bg-gray-300 transition',
-                  'data-active:bg-gray-400 data-hover:bg-gray-400',
-                  'forced-colors:data-active:bg-[Highlight] forced-colors:data-focus:outline-offset-4',
-                )}
-              />
-            ))}
-          </div>
-        </div>
-      </Container>
     </div>
   )
 }