src/app/about/page.tsx

@@ -0,0 +1,34 @@
+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'
+import { PrimaryFeatures } from '@/components/PrimaryFeatures'
+import { SecondaryFeatures } from '@/components/SecondaryFeatures'
+import { Testimonials } from '@/components/Testimonials'
+import { HomePrinciples } from '@/components/HomePrinciples'
+import { HomeMilestones } from '@/components/HomeMilestones'
+import { HomeVentures } from '@/components/HomeVentures'
+import { Quote } from '@/components/Quote'
+import { AboutHero } from '@/components/AboutHero'
+import { AboutMission } from '@/components/AboutMission'
+import { AboutExperience } from '@/components/AboutExperience'
+
+export default function About() {
+  return (
+    <>
+      <Header_darkbg />
+      <main>
+        <AboutHero />
+        <AboutMission />
+        <AboutExperience />
+        <Quote />
+        <CallToAction />
+        <Faqs />
+      </main>
+      <Footer />
+    </>
+  )
+}

src/app/page.tsx

@@ -11,6 +11,7 @@ import { Testimonials } from '@/components/Testimonials'
 import { HomePrinciples } from '@/components/HomePrinciples'
 import { HomeMilestones } from '@/components/HomeMilestones'
 import { HomeVentures } from '@/components/HomeVentures'
+import { Quote } from '@/components/Quote'
 
 export default function Home() {
   return (
@@ -22,6 +23,7 @@ export default function Home() {
         <HomePrinciples />
         <HomeMilestones />
         <HomeVentures />
+        <Quote />
         <CallToAction />
         <Faqs />
       </main>

src/components/AboutExperience.tsx

@@ -0,0 +1,63 @@
+const timeline = [
+  {
+    name: 'Core Infrastructure',
+    description:
+      '✓ ThreeFold’s decentralized, autonomous edge computing technology came alive, serving as the backbone of the OurWorld ecosystem.',
+    date: 'Phase 1',
+    description2:
+      '✓ OurWorld helped secure $50M in investment from our community of investors.',
+  },
+  {
+    name: 'Zanzibar Digital Free Zone',
+    description:
+      '✓ Partnered with Government of Zanzibar through ZICTA to establish the Zanzibar Digital Free Zone with financial and other incentives for ventures.',
+     description2:
+      '✓ Developed an alpha version of integrated platforms within the Free Zone to onboard new ventures into the ecosystem.',
+    date: 'Phase 2',
+  },
+  {
+    name: 'Launch of New Ventures',
+    description:
+      '◯ $30M raise underway to expand core infrastructure and invest in new ventures with a focus on interdependent projects that strengthen the ecosystem collectively.',
+    description2:
+      '◯ Designing regulatory framework to facilitate digital assets exchanges and other decentralized financial platforms.',
+    date: 'Current Phase',
+  },
+  {
+    name: 'Scalable Impact',
+    description:
+      '◯ Deploy 1 million nodes and onboard 10 million users to empower the OurWorld ecosystem.',
+    description2:
+      '◯ Transition startups in our venture creator to community ownerships and ensure a successful exits for investors.',
+    date: 'Phase 4',
+  },
+]
+
+export function AboutExperience() {
+  return (
+    <div className="bg-white py-24">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-5xl text-center">
+          <p className="subtitle text-black">EXPERIENCE</p>
+          <h2 className="mt-2 h2-default text-black">
+            Proven Success
+          </h2>
+          <div className="mx-auto max-w-3xl mt-6">
+          <p className="p-default text-gray-900">
+           Incubaid's approach was very IT-centric – focusing on storage, automation and cloud. During this wave from 2000 till 2015, some of those companies defined parts of the cloud landscape, and are still being used actively today.
+          </p>
+        </div>
+        
+        <div className="mt-12 flex justify-center">
+          <img
+            src="/images/about/exits.png"
+            alt="Company exits and achievements"
+            className="w-full max-w-6xl h-auto rounded-2xl"
+          />
+        </div>
+        </div>
+        
+      </div>
+    </div>
+  )
+}

src/components/AboutHero.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@/components/Button'
+
+export function AboutHero() {
+
+  return (
+    <div className="mx-auto max-w-2xl py-32">
+          <div className="text-center">
+             <p className="subtitle text-black">ABOUT</p>
+            <h1 className="h1-default text-gray-900">
+              Building the Future of Digital Autonomy
+            </h1>
+            <p className="mt-8 p-default text-gray-500">
+              OurWorld is more than a venture creator – we create and develop new businesses, typically in the form of startups. We don't just fund individual ventures – we actively shape the architecture of our unique ecosystem. Support includes providing funding, resources, and mentorship.
+            </p>
+            <div className="mt-10 flex items-center justify-center gap-x-6">
+              <Button href="/contact" color="black">
+                Learn More
+              </Button>
+              <Button href="/ventures" variant="outline" color="slate">
+                Explore Ventures
+              </Button>
+            </div>
+          </div>
+    </div>
+    )
+    }

src/components/AboutMission.tsx

@@ -0,0 +1,86 @@
+import { Logo_mission } from '@/components/Logo_mission'
+import { Logo_hero } from '@/components/Logo_hero'
+
+const stats = [
+  { label: 'Founded', value: '2021' },
+  { label: 'Employees', value: '37' },
+  { label: 'Countries', value: '12' },
+  { label: 'Raised', value: '$25M' },
+]
+
+export function AboutMission() {
+  return (
+    <div className="bg-white py-12">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 items-start gap-x-6 gap-y-16  lg:mx-0 lg:max-w-none lg:grid-cols-2">
+          <div className="lg:pr-4">
+            <div className="relative overflow-hidden rounded-3xl bg-gray-900 px-6 pt-64 pb-9 shadow-2xl lg:max-w-lg lg:px-12 lg:pb-8">
+              <img
+                alt=""
+                src="https://images.unsplash.com/photo-1630569267625-157f8f9d1a7e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80"
+                className="absolute inset-0 size-full rounded-3xl object-cover brightness-125 saturate-0"
+              />
+              <div className="absolute inset-0 bg-gray-900 mix-blend-multiply" />
+              <div
+                aria-hidden="true"
+                className="absolute top-1/2 left-1/2 -ml-16 -translate-x-1/2 -translate-y-1/2 transform-gpu blur-3xl"
+              >
+                <div
+                  style={{
+                    clipPath:
+                      'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                  }}
+                  className="aspect-1097/845 w-274.25 bg-linear-to-tr from-[#ff4694] to-[#776fff] opacity-40"
+                />
+              </div>
+              <figure className="relative isolate">
+                <svg
+                  fill="none"
+                  viewBox="0 0 162 128"
+                  aria-hidden="true"
+                  className="absolute -top-4 -left-2 -z-10 h-32 stroke-white/20"
+                >
+                  <path
+                    d="M65.5697 118.507L65.8918 118.89C68.9503 116.314 71.367 113.253 73.1386 109.71C74.9162 106.155 75.8027 102.28 75.8027 98.0919C75.8027 94.237 75.16 90.6155 73.8708 87.2314C72.5851 83.8565 70.8137 80.9533 68.553 78.5292C66.4529 76.1079 63.9476 74.2482 61.0407 72.9536C58.2795 71.4949 55.276 70.767 52.0386 70.767C48.9935 70.767 46.4686 71.1668 44.4872 71.9924L44.4799 71.9955L44.4726 71.9988C42.7101 72.7999 41.1035 73.6831 39.6544 74.6492C38.2407 75.5916 36.8279 76.455 35.4159 77.2394L35.4047 77.2457L35.3938 77.2525C34.2318 77.9787 32.6713 78.3634 30.6736 78.3634C29.0405 78.3634 27.5131 77.2868 26.1274 74.8257C24.7483 72.2185 24.0519 69.2166 24.0519 65.8071C24.0519 60.0311 25.3782 54.4081 28.0373 48.9335C30.703 43.4454 34.3114 38.345 38.8667 33.6325C43.5812 28.761 49.0045 24.5159 55.1389 20.8979C60.1667 18.0071 65.4966 15.6179 71.1291 13.7305C73.8626 12.8145 75.8027 10.2968 75.8027 7.38572C75.8027 3.6497 72.6341 0.62247 68.8814 1.1527C61.1635 2.2432 53.7398 4.41426 46.6119 7.66522C37.5369 11.6459 29.5729 17.0612 22.7236 23.9105C16.0322 30.6019 10.618 38.4859 6.47981 47.558L6.47976 47.558L6.47682 47.5647C2.4901 56.6544 0.5 66.6148 0.5 77.4391C0.5 84.2996 1.61702 90.7679 3.85425 96.8404L3.8558 96.8445C6.08991 102.749 9.12394 108.02 12.959 112.654L12.959 112.654L12.9646 112.661C16.8027 117.138 21.2829 120.739 26.4034 123.459L26.4033 123.459L26.4144 123.465C31.5505 126.033 37.0873 127.316 43.0178 127.316C47.5035 127.316 51.6783 126.595 55.5376 125.148L55.5376 125.148L55.5477 125.144C59.5516 123.542 63.0052 121.456 65.9019 118.881L65.5697 118.507Z"
+                    id="0ef284b8-28c2-426e-9442-8655d393522e"
+                  />
+                  <use x={86} href="#0ef284b8-28c2-426e-9442-8655d393522e" />
+                </svg>
+                <blockquote className="mt-6 text-lg font-medium text-white">
+                  <p>
+                    "We need a human-centric Internet co-owned by all of us, as was intended from the start. One where everyone is equal, where everyone owns their own data, allowing human flourishing to thrive."
+                  </p>
+                </blockquote>
+                <figcaption className="mt-6 text-sm/6 text-gray-300">
+                  <strong className="font-semibold text-white">Kristof De Spiegeleer,</strong> OurWorld Co-Founder & CEO
+                </figcaption>
+              </figure>
+            </div>
+          </div>
+          <div>
+            <div className="text-base/7 text-gray-700 lg:max-w-xl">
+              <p className="subtitle text-black">MISSION</p>
+              <h2 className="mt-2 h2-default text-gray-900">
+                Let's Shape Our Future Together
+              </h2>
+              <div className="max-w-xl">
+                <p className="mt-6 p-default">
+                  OurWorld aims not just to do business, but to do good for the world while we're at it. We are an international team of experts and passionate believers in a better world who choose to act to make a difference.
+                </p>
+                <p className="mt-8 p-default">
+                  This journey began with the creation of a new Internet infrastructure layer, a process that has taken over two decades – and was made possible by the contributions of thousands of people. Thank you to everyone who has made this possible.
+                </p>
+                <p className="mt-8 p-default">
+                  Some of our co-founders have experience running Incubaid, a successful incubator focused primarily on helping to change our planet for the better through technology that supports decentralization.
+                </p>
+                <p className="mt-8 p-default">
+                  Now in this stage, we are focused on paving the way for Augmented Collective Intelligence, as described by Abhishek Gupta: emergent intelligence from the effective collaboration of human and machine agents to solve shared problems where the whole is greater than the sum of its parts.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Faqs.tsx

@@ -64,21 +64,14 @@ export function Faqs() {
       aria-labelledby="faq-title"
       className="relative overflow-hidden bg-slate-50 py-20 sm:py-32"
     >
-      <Image
-        className="absolute top-0 left-1/2 max-w-none translate-x-[-30%] -translate-y-1/4"
-        src={backgroundImage}
-        alt=""
-        width={1558}
-        height={946}
-        unoptimized
-      />
+      
       <Container className="relative">
         <div className="mx-auto max-w-2xl lg:mx-0">
           <h2
             id="faq-title"
-            className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"
+            className=" text-slate-900  h2-default"
           >
-            Frequently asked questions
+            Frequently Asked Questions
           </h2>
           <p className="mt-4 text-lg tracking-tight text-slate-700">
             If you can’t find what you’re looking for, email our support team

src/components/Footer.tsx

@@ -1,50 +1,172 @@
-import Link from 'next/link'
+import { Logo_darkbg } from '@/components/Logo_darkbg'
 
-import { Container } from '@/components/Container'
-import { Logo } from '@/components/Logo'
-import { NavLink } from '@/components/NavLink'
+const navigation = {
+  solutions: [
+    { name: 'Marketing', href: '#' },
+    { name: 'Analytics', href: '#' },
+    { name: 'Automation', href: '#' },
+    { name: 'Commerce', href: '#' },
+    { name: 'Insights', href: '#' },
+  ],
+  support: [
+    { name: 'Submit ticket', href: '#' },
+    { name: 'Documentation', href: '#' },
+    { name: 'Guides', href: '#' },
+  ],
+  company: [
+    { name: 'About', href: '#' },
+    { name: 'Blog', href: '#' },
+    { name: 'Jobs', href: '#' },
+    { name: 'Press', href: '#' },
+  ],
+  legal: [
+    { name: 'Terms of service', href: '#' },
+    { name: 'Privacy policy', href: '#' },
+    { name: 'License', href: '#' },
+  ],
+  social: [
+    {
+      name: 'Facebook',
+      href: '#',
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+    {
+      name: 'Instagram',
+      href: '#',
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+    {
+      name: 'X',
+      href: '#',
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
+        </svg>
+      ),
+    },
+    {
+      name: 'GitHub',
+      href: '#',
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+    {
+      name: 'YouTube',
+      href: '#',
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+  ],
+}
 
 export function Footer() {
   return (
-    <footer className="bg-slate-50">
-      <Container>
-        <div className="py-16">
-          <Logo className="mx-auto h-10 w-auto" />
-          <nav className="mt-10 text-sm" aria-label="quick links">
-            <div className="-my-1 flex justify-center gap-x-6">
-              <NavLink href="#features">Features</NavLink>
-              <NavLink href="#testimonials">Testimonials</NavLink>
-              <NavLink href="#pricing">Pricing</NavLink>
+    <footer className="bg-black">
+      <div className="mx-auto max-w-7xl px-6 pt-16 pb-8 lg:pt-24 lg:px-8">
+        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
+          <a href="/">
+            <Logo_darkbg className="h-9" />
+          </a>
+          <div className="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
+            <div className="md:grid md:grid-cols-2 md:gap-8">
+              <div>
+                <h3 className="text-sm/6 font-semibold text-white">Solutions</h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.solutions.map((item) => (
+                    <li key={item.name}>
+                      <a href={item.href} className="text-sm/6 text-gray-400 hover:text-white">
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="mt-10 md:mt-0">
+                <h3 className="text-sm/6 font-semibold text-white">Support</h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.support.map((item) => (
+                    <li key={item.name}>
+                      <a href={item.href} className="text-sm/6 text-gray-400 hover:text-white">
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+            <div className="md:grid md:grid-cols-2 md:gap-8">
+              <div>
+                <h3 className="text-sm/6 font-semibold text-white">Company</h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.company.map((item) => (
+                    <li key={item.name}>
+                      <a href={item.href} className="text-sm/6 text-gray-400 hover:text-white">
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="mt-10 md:mt-0">
+                <h3 className="text-sm/6 font-semibold text-white">Legal</h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.legal.map((item) => (
+                    <li key={item.name}>
+                      <a href={item.href} className="text-sm/6 text-gray-400 hover:text-white">
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
             </div>
-          </nav>
-        </div>
-        <div className="flex flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
-          <div className="flex gap-x-6">
-            <Link href="#" className="group" aria-label="OurWorld on X">
-              <svg
-                className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
-                aria-hidden="true"
-                viewBox="0 0 24 24"
-              >
-                <path d="M13.3174 10.7749L19.1457 4H17.7646L12.7039 9.88256L8.66193 4H4L10.1122 12.8955L4 20H5.38119L10.7254 13.7878L14.994 20H19.656L13.3171 10.7749H13.3174ZM11.4257 12.9738L10.8064 12.0881L5.87886 5.03974H8.00029L11.9769 10.728L12.5962 11.6137L17.7652 19.0075H15.6438L11.4257 12.9742V12.9738Z" />
-              </svg>
-            </Link>
-            <Link href="#" className="group" aria-label="OurWorld on GitHub">
-              <svg
-                className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
-                aria-hidden="true"
-                viewBox="0 0 24 24"
-              >
-                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
-              </svg>
-            </Link>
           </div>
-          <p className="mt-6 text-sm text-slate-500 sm:mt-0">
-            Copyright &copy; {new Date().getFullYear()} OurWorld. All rights
-            reserved.
+        </div>
+
+        <div className="mt-8 border-t border-white/10 pt-8 md:flex md:items-center md:justify-between">
+          <div className="flex gap-x-6 md:order-2">
+            {navigation.social.map((item) => (
+              <a key={item.name} href={item.href} className="text-gray-400 hover:text-white">
+                <span className="sr-only">{item.name}</span>
+                <item.icon aria-hidden="true" className="size-6" />
+              </a>
+            ))}
+          </div>
+          <p className="mt-8 text-sm/6 text-gray-400 md:order-1 md:mt-0">
+            &copy; 2024 Your Company, Inc. All rights reserved.
           </p>
         </div>
-      </Container>
+      </div>
     </footer>
   )
 }

src/components/Header.tsx

@@ -88,7 +88,7 @@ export function Header() {
       <Container>
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">
-            <Link href="#" aria-label="Home">
+            <Link href="/" aria-label="Home">
               <Logo className="h-6 w-auto lg:h-6 md:h-8" />
             </Link>
             <div className="hidden md:flex md:gap-x-6">

src/components/Header_darkbg.tsx

@@ -103,7 +103,7 @@ export function Header_darkbg() {
       <Container>
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">
-            <Link href="#" aria-label="Home">
+            <Link href="/" aria-label="Home">
               <Logo_darkbg className="h-6 w-auto lg:h-6 md:h-8" />
             </Link>
             <div className="hidden md:flex md:gap-x-6">

src/components/Logo_mission.tsx

@@ -0,0 +1,46 @@
+export function Logo_mission(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="205"
+    height="52"
+    version="1.2"
+    viewBox="0 0 99 25.3"
+    {...props}
+    >
+    <defs>
+      <clipPath id="a">
+        <path d="M13.5 19.5h8.25v5H13.5Zm0 0"></path>
+      </clipPath>
+      <clipPath id="b">
+        <path d="M21 10.5h4.18v9H21Zm0 0"></path>
+      </clipPath>
+      <clipPath id="c">
+        <path d="M4.5 19.5h8.25v5H4.5Zm0 0"></path>
+      </clipPath>
+      <clipPath id="d">
+        <path d="M8.25 .48h9V4.5h-9Zm0 0"></path>
+      </clipPath>
+    </defs>
+    <g fill="white">
+      <path d="M12 10.1a6.5 6.5 0 0 1 .905 1.567c.229-.571.533-1.096.902-1.567a5.84 5.84 0 0 0-.902-4.609 5.8 5.8 0 0 0-1.011 2.684A5.85 5.85 0 0 0 12 10.1M2.247 10.307a5.85 5.85 0 0 0 2.045 3.141c.29.228.598.422.914.589a6.6 6.6 0 0 1 3.95-2.171 6.55 6.55 0 0 1-2.608-3.659q-.536.022-1.08.144a5.93 5.93 0 0 0-3.22 1.956M12.574 15.443a6.45 6.45 0 0 1-.126-1.785 6.6 6.6 0 0 1-1.5 1.02 5.87 5.87 0 0 0-1.201 4.53 5.91 5.91 0 0 0 2.827-3.765M18.595 8.218a5.98 5.98 0 0 0-4.196 2.171 6.45 6.45 0 0 1-.673 1.673 6.6 6.6 0 0 1 1.792-.275 5.94 5.94 0 0 0 3.077-3.569M10.544 14.159a6.5 6.5 0 0 1 1.335-1.216 6.68 6.68 0 0 1-1.745-.525 5.99 5.99 0 0 0-4.324 1.899 6.02 6.02 0 0 0 4.734-.158M12.905 23.54a5.88 5.88 0 0 0 2.64-2.675c.16-.331.281-.671.375-1.013a6.58 6.58 0 0 1-3.015-3.329 6.57 6.57 0 0 1-3.017 3.329c.094.343.217.682.378 1.013a5.87 5.87 0 0 0 2.639 2.675M15.914 15.091A6.48 6.48 0 0 1 16.658 19.5c.331.141.673.258 1.037.34a5.96 5.96 0 0 0 3.753-.375 5.79 5.79 0 0 0-1.026-4.635 6.6 6.6 0 0 1-2.61.536c-.641 0-1.282-.094-1.898-.275M7.216 8.218a5.93 5.93 0 0 0 3.077 3.569 6.5 6.5 0 0 1 1.789.277 6.5 6.5 0 0 1-.67-1.675 5.99 5.99 0 0 0-4.196-2.171M8.115 19.84A6 6 0 0 0 9.15 19.5a6.5 6.5 0 0 1 .746-4.409 6.75 6.75 0 0 1-1.901.275 6.64 6.64 0 0 1-2.61-.532 5.8 5.8 0 0 0-1.025 4.629c1.139.509 2.446.673 3.755.377M13.313 4.98a6.5 6.5 0 0 1 1.26 4.298 6.66 6.66 0 0 1 4.177-1.702c.065-.348.103-.709.103-1.075a5.83 5.83 0 0 0-1.21-3.551A5.93 5.93 0 0 0 13.313 4.98M12.498 4.98a5.93 5.93 0 0 0-4.333-2.03 5.83 5.83 0 0 0-1.21 3.551c0 .366.038.727.106 1.076a6.64 6.64 0 0 1 4.175 1.702 6.51 6.51 0 0 1 1.263-4.298m0 0"></path>
+      <g clipPath="url(#a)">
+        <path d="M17.552 20.461a6.75 6.75 0 0 1-1.043-.334c-.1.343-.223.682-.387 1.016a6.5 6.5 0 0 1-2.475 2.719 6 6 0 0 0 4.561-.243 5.9 5.9 0 0 0 3.035-3.381 6.6 6.6 0 0 1-3.691.223m0 0"></path>
+      </g>
+      <path d="M14.86 14.677a6.68 6.68 0 0 1-1.5-1.02 6.38 6.38 0 0 1-.126 1.785 5.92 5.92 0 0 0 2.83 3.765 5.89 5.89 0 0 0-1.204-4.53m0 0"></path>
+      <g clipPath="url(#b)">
+        <path d="M21.917 13.946c-.29.228-.598.427-.911.603.208.29.398.595.559.926a6.47 6.47 0 0 1 .598 3.618 5.87 5.87 0 0 0 2.654-3.689 5.82 5.82 0 0 0-.773-4.456 6.5 6.5 0 0 1-2.127 2.997m0 0"></path>
+      </g>
+      <path d="M4.245 15.475c.161-.332.352-.636.559-.926a6.48 6.48 0 0 1-3.037-3.6 5.82 5.82 0 0 0-.777 4.456 5.87 5.87 0 0 0 2.657 3.689c-.149-1.199.03-2.453.598-3.618m0 0"></path>
+      <g clipPath="url(#c)">
+        <path d="M9.686 21.143a6.5 6.5 0 0 1-.384-1.016c-.334.135-.679.252-1.043.334a6.58 6.58 0 0 1-3.691-.223 5.9 5.9 0 0 0 3.035 3.381 5.99 5.99 0 0 0 4.558.243 6.5 6.5 0 0 1-2.475-2.719m0 0"></path>
+      </g>
+      <path d="M23.564 10.307a5.93 5.93 0 0 0-3.223-1.956 6 6 0 0 0-1.081-.143 6.55 6.55 0 0 1-2.605 3.659 6.6 6.6 0 0 1 3.947 2.171 5.84 5.84 0 0 0 2.962-3.73M19.397 7.583c.36.02.724.064 1.088.146a6.55 6.55 0 0 1 3.231 1.792q.002-.01.003-.022a5.81 5.81 0 0 0-1.26-4.334 5.93 5.93 0 0 0-3.984-2.182c-.009 0-.018-.003-.026-.003a6.45 6.45 0 0 1 1.048 3.521c0 .369-.037.727-.1 1.081M15.674 12.419a6.6 6.6 0 0 1-1.746.524 6.45 6.45 0 0 1 1.337 1.215 6.03 6.03 0 0 0 4.737.159 6 6 0 0 0-4.328-1.898M2.095 9.521a6.5 6.5 0 0 1 3.229-1.792c.363-.083.726-.126 1.087-.147a6.75 6.75 0 0 1-.097-1.081 6.45 6.45 0 0 1 1.046-3.521c-.006 0-.015.003-.024.003a5.93 5.93 0 0 0-3.984 2.182 5.83 5.83 0 0 0-1.263 4.333q.003.015.006.023m0 0"></path>
+      <g clipPath="url(#d)">
+        <path d="M12.111 3.733c.293.231.551.483.794.75.24-.267.501-.519.791-.75a6.6 6.6 0 0 1 3.428-1.383A5.96 5.96 0 0 0 12.905.607c-1.65 0-3.14.668-4.222 1.743a6.6 6.6 0 0 1 3.428 1.383m0 0"></path>
+      </g>
+      <path d="M36.51 17.777q-1.666.009-2.977-.68-1.314-.69-2.074-2.098-.751-1.415-.773-3.469-.026-2.024.691-3.457.712-1.427 2.004-2.156 1.301-.737 2.989-.75 1.687-.022 2.988.703 1.31.715 2.062 2.121.747 1.406.773 3.41.023 2.039-.703 3.48c-.487.956-1.16 1.673-2.027 2.156-.868.478-1.852.721-2.953.74m3.188-6.34c-.017-1.335-.328-2.367-.938-3.094q-.904-1.087-2.379-1.066-1.455.012-2.344 1.125c-.586.735-.873 1.769-.855 3.105q.023 2.005.914 3.082.901 1.08 2.391 1.066 1.485-.022 2.355-1.113c.586-.732.87-1.77.856-3.105M46.794 15.602q.796-.009 1.289-.562.501-.55.492-1.43l-.058-5.18 2.332-.022.105 8.882-2.238.023-.012-1.254h-.035c-.571 1.002-1.465 1.506-2.683 1.524-.961.005-1.708-.264-2.238-.82q-.8-.843-.82-2.344l-.071-5.918 2.332-.024.07 5.566c.006.51.141.899.398 1.172q.387.4 1.137.387M57.035 8.14l.023 2.379a4.5 4.5 0 0 0-.632-.024q-2.194.026-2.168 2.086l.058 4.676-2.332.023-.105-8.882 2.238-.024.023 1.535h.036q.49-.994 1.042-1.395.563-.395 1.371-.41.08 0 .446.035M61.076 13.95h.035q.513-3.15 1.559-8.766l2.66-.035 1.265 5.66q.164.717.282 1.36.127.646.222 1.147l.117.562h.035l.27-1.605q.149-.772 1.195-5.425l.375-1.746 2.543-.023L67.4 17.09l-2.402.035c-.922-4.084-1.576-7.196-1.957-9.328h-.035q-.307 2.158-.925 5.191l-.82 4.172-2.333.023L56.4 5.254l2.672-.035a276 276 0 0 1 1.277 5.309q.585 2.508.727 3.422M80.48 12.518c.006.96-.175 1.792-.55 2.496a3.98 3.98 0 0 1-1.583 1.641q-1.018.574-2.355.586-1.336.01-2.379-.539a4 4 0 0 1-1.629-1.605q-.576-1.042-.586-2.485-.025-1.428.539-2.496a4.05 4.05 0 0 1 1.594-1.64q1.027-.572 2.355-.587c.89-.005 1.679.176 2.367.551a3.89 3.89 0 0 1 1.617 1.605q.584 1.046.61 2.473m-4.511 2.754c.708-.006 1.242-.249 1.594-.727.351-.474.52-1.142.515-2.004-.017-.849-.208-1.511-.574-1.98q-.554-.702-1.617-.691-1.02.012-1.57.715-.54.703-.515 2.004.009 1.327.562 2.015.55.682 1.605.668M86.057 7.809l.023 2.379a4.5 4.5 0 0 0-.633-.023q-2.194.025-2.167 2.085l.058 4.676-2.332.024-.105-8.883 2.238-.023.023 1.535h.035q.491-.994 1.043-1.395.562-.396 1.371-.41.08 0 .446.035M86.442 16.889L86.302 4.912l2.344-.023.14 11.976ZM95.71 16.778l-.012-1.113h-.035q-.412.704-1.09.043-.667.326-1.476.34-1.152.009-2.004-.574-.845-.597-1.312-1.664-.46-1.077-.469-2.496c-.018-.929.129-1.737.434-2.426.304-.685.732-1.222 1.289-1.605a3.4 3.4 0 0 1 1.91-.586q.852-.009 1.511.351a2.85 2.85 0 0 1 1.067 1.008h.035l-.047-4.254 2.344-.023.14 11.976Zm0-4.242q-.012-1.358-.539-2.098c-.345-.492-.85-.732-1.511-.727q-.94.014-1.453.727-.518.717-.492 1.992.01 1.197.539 1.945.527.752 1.406.738.947-.008 1.5-.703.561-.703.55-1.875m0 0"></path>
+    </g>
+  </svg>
+  )
+}

src/components/Quote.tsx

@@ -0,0 +1,34 @@
+export function Quote() {
+  return (
+    <section className="relative isolate overflow-hidden bg-white px-6 pt-12 pb-32  lg:px-8">
+      <div className="mx-auto max-w-2xl lg:max-w-4xl">
+        <img
+          alt=""
+          src="/images/home/quotes.png"
+          className="mx-auto h-12"
+        />
+        <figure className="mt-8">
+          <blockquote className="text-center text-2xl/8 font-light italic text-gray-900 sm:text-3xl/9">
+            <p>
+              “We don't just fund individual ventures – we actively shape the architecture of our unique ecosystem. The future we are building is one where technology empowers people and drives innovation while prioritizing safety and autonomy.”
+            </p>
+          </blockquote>
+          <figcaption className="mt-10">
+            <div className="flex items-center justify-center space-x-3 text-base">
+              <img
+                alt=""
+                src="/images/home/kds.png"
+                className="size-10 rounded-full"
+              />
+              <div className="font-semibold text-gray-900">Kristof De Spiegeleer</div>
+              <svg width={3} height={3} viewBox="0 0 2 2" aria-hidden="true" className="fill-gray-900">
+                <circle r={1} cx={1} cy={1} />
+              </svg>
+              <div className="text-gray-600">OurWorld Co-Founder & CEO</div>
+            </div>
+          </figcaption>
+        </figure>
+      </div>
+    </section>
+  )
+}

src/styles/tailwind.css

@@ -46,6 +46,10 @@
 
 /* Custom component classes */
 @layer components {
+  .h1-default {
+    @apply text-4xl font-display font-medium tracking-tight text-pretty leading-tight lg:text-6xl lg:leading-tight;
+  }
+  
   .h2-default {
     @apply text-2xl font-display font-medium tracking-tight text-pretty leading-tight lg:text-4xl lg:leading-tight;
   }