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/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>