make teampage layout like io

content/home/index.md

@@ -18,7 +18,7 @@ HOMEPAGE (layouts/index.html) contains:
   2. About section: "partials/about.html"
   3. Foundation section: "partials/features.html"
   4. Milestones section: "partials/stats.html
-  5. Ventures section: "partials/ventures.html"
+  5. Portfolio section: "partials/ventures.html"
   5. Quote: "partials/quotes.html"
 
 ---

templates/partials/person_card.html

@@ -1,10 +1,11 @@
+{% if page.title != 'ThreeFold Community' %}
 <div class="flex flex-col px-0 sm:px-4 pb-2">
-    <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left">
+    <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left"> 
         {% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
-        <img src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
-        <div>
-            <h2 class="text-2xl mt-4 mb-2">{{page.title}}</h2>
-            <div class="text-md text-gray-700 text-left line-clamp-3 text-ellipsis">
+        <img class="aspect-[14/13] w-full rounded-2xl object-cover" src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
+        <div class="text-center">
+            <h2 class="text-lg mt-4">{{page.title}}</h2>
+            <div class="text-sm text-gray-700 line-clamp-3 leading-5 text-ellipsis">
                 {% if page.description %}
                     {{page.description}}
                 {% else %}
@@ -14,13 +15,14 @@
             <div class="my-2 flex flex-row items-start flex-wrap">
             {% if page.taxonomies.memberships %}
             {% for tag in page.taxonomies.memberships %}
-                <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 text-md font-bold bg-transparent hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
-                    #{{tag}}
+                <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 text-xs font-light bg-transparent hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
+                    {{tag}}
                 </a>
             {% endfor %}
             {% endif %}
-            </div>
+            </div> 
         </div>
-    </a>
+     </a> 
 </div>
+{%endif%}
 

templates/partials/portfolio2.html

@@ -10,111 +10,37 @@
       <p class="mt-4 text-gray-500">These are the first OurWorld Ventures, connected by a strong set of values and the aim to bring forward a new era of digital sovereignty and empowerment.</p>
     </div>
 
-    <dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-6 lg:gap-y-10 sm:grid-cols-2 gap-y-16 lg:max-w-none lg:grid-cols-3 lg:gap-x-8">
+    <dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:grid-cols-3 lg:gap-x-8">
       <div class="border-t border-gray-200 pt-4">
-        <div class="flex items-center">
-          <a href="https://threefold.io" target="_blank" class="flex items-center hover:text-indigo-700">
-          <img 
-            src="/images/tf.png" 
-            alt="ThreeFold Logo" 
-            class="w-8 h-8 mr-2"
-          />
-          <dt class="font-semibold lg:text-2xl text-xl text-gray-900">ThreeFold</dt>
-          </a>
-        </div>
-        <dd class="mt-2 tracking-tight text-gray-500">
-          ThreeFold is a scalable bare metal infrastructure layer for AI, Internet, and Cloud – presenting a cloud solution that offers unmatched security, reliability, performance, and sovereignty. Leveraging open source technology as developed by TF9.
-        </dd>
+        <dt class="font-semibold lg:text-2xl text-xl text-gray-900">ThreeFold</dt>
+        <dd class="mt-2 tracking-tight text-gray-500">ThreeFold is a scalable bare metal infrastructure layer for AI, Internet, and Cloud – presenting a cloud solution that offers unmatched security, reliability, performance, and sovereignty. Leveraging open source technology as developed by TF9.</dd>
       </div>
       <div class="border-t border-gray-200 pt-4">
-        <div class="flex items-center">
-          <a href="https://tf9.io" target="_blank" class="flex items-center hover:text-indigo-700">
-          <img 
-            src="/images/tf9.png" 
-            alt="TF9LOGO Logo" 
-            class="w-8 h-8 mr-2"
-          />
-          </a>
-          <dt class="font-semibold lg:text-2xl text-xl text-gray-900">TF9</dt>
-        </div>
+        <dt class="font-semibold lg:text-2xl text-xl text-gray-900">TF9</dt>
         <dd class="mt-2 tracking-tight text-gray-500">TF9 is a software company which has developed a cloud computing system designed for global scalability, offering secure, immutable data storage that ensures integrity and permanence.​</dd>
       </div>
       <div class="border-t border-gray-200 pt-4">
-        <div class="flex items-center">
-          <a href="https://freezone.ourworld.tf" target="_blank" class="flex items-center hover:text-indigo-700">
-            <img 
-              src="/images/freezone.png" 
-              alt="odfz Logo" 
-              class="w-8 h-8 mr-2 hover:opacity-80"
-            />
-            <dt class="font-semibold lg:text-2xl text-xl text-gray-900">OW Digital Freezone</dt>
-          </a>          
-        </div>
+        <dt class="font-semibold lg:text-2xl text-xl text-gray-900">OurWorld Digital FreeZone</dt>
         <dd class="mt-2 tracking-tight text-gray-500">A collaboration with the Government of Zanzibar. 100% digital and automated, offering seamless legal, financial, and operational support for businesses. The FreeZone provides regulatory incentives and benefits to businesses through a fully online platform​.</dd>
       </div>
       <div class="border-t border-gray-200 pt-4">
-        <div class="flex items-center">
-          <a href="https://sikana.tv" target="_blank" class="flex items-center hover:text-indigo-700">
-          <img 
-            src="/images/sikana.png" 
-            alt="TF9LOGO Logo" 
-            class="w-8 h-8 mr-2"
-          />
-          <dt class="font-semibold lg:text-2xl text-xl text-gray-900">Sikana</dt>
-        </a>
-        </div>
-        <dd class="mt-2 tracking-tight text-gray-500">Sikana is a global non-profit dedicated to democratizing knowledge through free educational video programs. The Sikana platform aims to empower people worldwide by making practical knowledge accessible to all.​</dd>
-      </div>
-      <div class="border-t border-gray-200 pt-4">
-        <div class="flex items-center">
-          <a href="https://ourverse.tf" target="_blank" class="flex items-center hover:text-indigo-700">
-          <img 
-            src="/images/ov.png" 
-            alt="OV Logo" 
-            class="w-8 h-8 mr-2"
-          />
-          <dt class="font-semibold lg:text-2xl text-xl text-gray-900">OurVerse</dt>
-        </a>
-        </div>
-        <dd class="mt-2 tracking-tight text-gray-500">OurVerse is a metaverse platform offering tools for collaboration and digital world creation, enabling new ways for people to interact and engage virtually. With OurVerse, anyone can create entire virtual worlds from AI prompts. 
-      </div>
-      <div class="border-t border-gray-200 pt-4">
-        <div class="flex items-center">
-          <a href="#" target="_blank" class="flex items-center hover:text-indigo-700">
-          <img 
-            src="/images/cybercity.png" 
-            alt="OV Logo" 
-            class="w-8 h-8 mr-2"
-          />
-          <dt class="font-semibold lg:text-2xl text-xl text-gray-900">ZNZ CyberCity</dt>
-        </a>
-        </div>
+        <dt class="font-semibold lg:text-2xl text-xl text-gray-900">Zanzibar Cyber City</dt>
         <dd class="mt-2 tracking-tight text-gray-500">A visionary startup city featuring 3,000 units in its initial stages. The cyber city aims to be a collaborative hub for innovation, bringing together startups, investors, and technologists in a state-of-the-art urban environment​.</dd>
       </div>
       <div class="border-t border-gray-200 pt-4">
-        <div class="flex items-center">
-          <a href="#" target="_blank" class="flex items-center hover:text-indigo-700">
-          <img 
-            src="/images/hero.png" 
-            alt="OV Logo" 
-            class="w-8 h-8 mr-2"
-          />
+        <dt class="font-semibold lg:text-2xl text-xl text-gray-900">Sikana</dt>
+        <dd class="mt-2 tracking-tight text-gray-500">Sikana is a global non-profit dedicated to democratizing knowledge through free educational video programs. The Sikana platform aims to empower people worldwide by making practical knowledge accessible to all.​</dd>
+      </div>
+      <div class="border-t border-gray-200 pt-4">
+        <dt class="font-semibold lg:text-2xl text-xl text-gray-900">OurVerse</dt>
+        <dd class="mt-2 tracking-tight text-gray-500">OurVerse is a metaverse platform offering tools for collaboration and digital world creation, enabling new ways for people to interact and engage virtually. With OurVerse, anyone can create entire virtual worlds from AI prompts. <i>Launching Q4 2024.</i></dd>
+      </div>
+      <div class="border-t border-gray-200 pt-4">
           <dt class="font-semibold lg:text-2xl text-xl text-gray-900">Hero</dt>
-        </a>
-        </div>
           <dd class="mt-2 tracking-tight text-gray-500">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. <i>First version expected Q4 2024.</i></dd>
       </div>
       <div class="border-t border-gray-200 pt-4">
-        <div class="flex items-center">
-          <a href="#" target="_blank" class="flex items-center hover:text-indigo-700">
-          <img 
-            src="/images/habari.png" 
-            alt="OV Logo" 
-            class="w-8 h-8 mr-2"
-          />
-          <dt class="font-semibold lg:text-2xl text-xl text-gray-900">Habari</dt>
-        </a>
-        </div>
+        <dt class="font-semibold lg:text-2xl text-xl text-gray-900">Habari</dt>
         <dd class="mt-2 tracking-tight text-gray-500">Habari is a joint venture that aims to revolutionize cloud infrastructure and drive business in Africa with a highly secure, scalable, and sovereign edge computing platform. <i>Expected Q4 2024.</i> </dd>
       </div>
     </dl>

templates/partials/ventures.html

@@ -19,7 +19,7 @@
                 <div class="mx-auto max-w-7xl px-6 lg:pb-24 pt-24 lg:px-8 lg:pt-12">
                     <div class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
                         <div class="relative lg:hidden pb-4">
-                            <img src="/images/people_1.jpg">
+                            <img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=960&h=540&q=80" alt="" class="aspect-[16/9] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
                             <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
                         </div>
                         <div class="relative w-full max-w-xl lg:shrink-0 xl:max-w-2xl lg:order-first sm:pt-12">
@@ -33,27 +33,27 @@
                         <div class="mt-14 flex justify-end gap-8 lg:mt-0 lg:pl-0">
                             <div class="ml-auto w-44 flex-none space-y-8 lg:pt-36 hidden lg:block">
                                 <div class="relative hidden lg:block">
-                                    <img src="/images/people_1.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
                                     <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
                                 </div>
                             </div>
                             <div class="mr-auto w-44 flex-none space-y-8 lg:pt-24 hidden lg:block">
                                 <div class="relative hidden lg:block">
-                                    <img src="/images/people_2.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <img src="https://images.unsplash.com/photo-1485217988980-11786ced9454?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
                                     <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
                                 </div>
                                 <div class="relative hidden lg:block">
-                                    <img src="/images/people_3.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <img src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-x=.4&w=396&h=528&q=80" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
                                     <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
                                 </div>
                             </div>
                             <div class="w-44 flex-none space-y-8 lg:pt-12 hidden lg:block">
                                 <div class="relative hidden lg:block">
-                                    <img src="/images/people_4.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <img src="https://images.unsplash.com/photo-1670272504528-790c24957dda?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=left&w=400&h=528&q=80" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
                                     <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
                                 </div>
                                 <div class="relative hidden lg:block">
-                                    <img src="/images/people_5.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <img src="https://images.unsplash.com/photo-1670272505284-8faba1c31f7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
                                     <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
                                 </div>
                             </div>

templates/people/list.html

@@ -2,12 +2,12 @@
 {% block content %}
 
 
-<div class="container mx-auto">
-    {% include "partials/filter_bar.html" %}
+<div class="mx-auto max-w-screen-lg px-6 lg:px-8">
+    <!-- {% include "partials/filter_bar.html" %} -->
     
     <div class="text-center main-title px-0 md:w-full">
       <h1
-        class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+        class="tracking-tight text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
       >
       {%- set section = get_section(path="people/_index.md") %}
 
@@ -32,7 +32,7 @@
             {% endif %}
         {% endfor %}
         </div>
-        <hr class="mt-6" />
+        <!-- <hr class="mt-6" />
         <p class="text-center text-sm mt-2 mb-16">
           {% if paginator.previous %}
           <a
@@ -76,7 +76,7 @@
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
           "partials/icons/svgLastPageIcon.html" %}{% include
           "partials/icons/svgLastPageIcon.html" %} {% endif %}
-        </p>
+        </p> -->
       </div>
     </div>
 </div>