feat: improvments

src/components/AboutItem.astro

@@ -9,12 +9,12 @@ const { title, subtext, variant = "primary" } = Astro.props;
 
 <div>
   <div
-    class={`border-2 border-white w-full p-[24px] relative text-[1.2rem] ${
+    class={`border-2 border-white w-full p-[24px] relative text-[1rem] ${
       variant === "secondary" ? "border-dashed border-[#909090]" : ""
     }`}
   >
     <span
-      class={`absolute bg-black z-10 top-[-20px] px-[12px] uppercase text-[1.2rem] ${variant === "secondary" ? "text-[#909090]" : "text-white"} font-bold`}
+      class={`absolute bg-black z-10 top-[-20px] px-[12px] uppercase text-[1rem] ${variant === "secondary" ? "text-[#909090]" : "text-white"} font-bold`}
     >
       {title}
     </span>

src/components/OrganisationTableDesktop.astro

@@ -5,7 +5,7 @@ import core from "../core.json";
 
 <div class="border-2 border-white flex flex-col">
   <div
-    class="w-full bg-white px-[16px] flex py-[px] gap-4 items-start uppercase"
+    class="w-full bg-white px-[16px] justify-between flex py-[px] gap-4 items-start uppercase"
   >
     <div class="max-w-[120px] w-full">
       <p class="text-black">CATEGORY</p>
@@ -20,14 +20,16 @@ import core from "../core.json";
       <p class="text-black">More info</p>
     </div>
   </div>
-  <div class="px-[16px] py-[24px] flex items-start gap-4 border-b border-white">
+  <div
+    class="px-[16px] py-[24px] flex justify-between items-start gap-4 border-b border-white"
+  >
     <div class="max-w-[120px] w-full">
       <p class="text-white font-bold uppercase">Events</p>
     </div>
     <div class="max-w-[264px] w-full flex flex-col gap-2 items-start">
       {
         config.organisation.table.events.map((item) => (
-          <p class="text-white " class:list={[`h-[${item.height}px]`]}>
+          <p class="text-white " style={`height:${item.height}px`}>
             {item.objective}
           </p>
         ))
@@ -36,18 +38,18 @@ import core from "../core.json";
     <div class="max-w-[490px] w-full flex flex-col gap-2 items-start">
       {
         config.organisation.table.events.map((item) => (
-          <p class="" class:list={[`h-[${item.height}px]`]}>
+          <p class="" style={`height:${item.height}px`}>
             {item.details}
           </p>
         ))
       }
     </div>
-    <div class="max-w-[120px] w-full flex flex-col gap-2 items-center">
+    <div class="max-w-[120px] w-full self-end flex flex-col gap-2 items-center">
       {
         config.organisation.table.events.map((item) => (
           <a
             class="button inverted"
-            class:list={[`h-[${item.height}px]`]}
+            style={`height:${item.height}px`}
             href={item.url}
           >
             <button>MORE</button>
@@ -56,14 +58,16 @@ import core from "../core.json";
       }
     </div>
   </div>
-  <div class="px-[16px] py-[24px] flex items-start gap-4 border-b border-white">
+  <div
+    class="px-[16px] py-[24px] flex justify-between items-start gap-4 border-b border-white"
+  >
     <div class="max-w-[120px] w-full">
       <p class="text-white font-bold uppercase">RESEARCH</p>
     </div>
     <div class="max-w-[264px] w-full flex flex-col gap-2 items-start">
       {
         config.organisation.table.research.map((item) => (
-          <p class="text-white " class:list={[`h-[${item.height}px]`]}>
+          <p class="text-white " style={`height:${item.height}px`}>
             {item.objective}
           </p>
         ))
@@ -72,7 +76,7 @@ import core from "../core.json";
     <div class="max-w-[490px] w-full flex flex-col gap-2 items-start">
       {
         config.organisation.table.research.map((item) => (
-          <p class="" class:list={[`h-[${item.height}px]`]}>
+          <p class="" style={`height:${item.height}px`}>
             {item.details}
           </p>
         ))
@@ -80,26 +84,34 @@ import core from "../core.json";
     </div>
     <div class="max-w-[120px] w-full flex flex-col gap-2 items-center">
       {
-        config.organisation.table.research.map((item) => (
+        config.organisation.table.research.map((item) =>
+          item.url ? (
             <a
               class=" button inverted"
-            class:list={[`h-[${item.height}px]`]}
+              style={`height:${item.height}px`}
               href={item.url}
             >
               <button>MORE</button>
             </a>
-        ))
+          ) : (
+            <p style={`height:${item.height}px`} class="text-white">
+              &nbsp
+            </p>
+          )
+        )
       }
     </div>
   </div>
-  <div class="px-[16px] py-[24px] flex items-start gap-4 border-b border-white">
+  <div
+    class="px-[16px] py-[24px] flex items-start justify-between gap-4 border-b border-white"
+  >
     <div class="max-w-[120px] w-full">
       <p class="text-white font-bold uppercase">TOOLS</p>
     </div>
     <div class="max-w-[264px] w-full flex flex-col gap-2 items-start">
       {
         config.organisation.table.tools.map((item) => (
-          <p class="text-white " class:list={[`h-[${item.height}px]`]}>
+          <p class="text-white " style={`height:${item.height}px`}>
             {item.objective}
           </p>
         ))
@@ -108,7 +120,7 @@ import core from "../core.json";
     <div class="max-w-[490px] w-full flex flex-col gap-2 items-start">
       {
         config.organisation.table.tools.map((item) => (
-          <p class="" class:list={[`h-[${item.height}px]`]}>
+          <p class="" style={`height:${item.height}px`}>
             {item.details}
           </p>
         ))
@@ -119,7 +131,7 @@ import core from "../core.json";
         config.organisation.table.tools.map((item) => (
           <a
             class="button inverted"
-            class:list={[`h-[${item.height}px]`]}
+            style={`height:${item.height}px`}
             href={item.url}
           >
             <button>MORE</button>
@@ -128,14 +140,16 @@ import core from "../core.json";
       }
     </div>
   </div>
-  <div class="px-[16px] py-[24px] flex items-start gap-4 border-b border-white">
+  <div
+    class="px-[16px] py-[24px] flex items-start justify-between gap-4 border-b border-white"
+  >
     <div class="max-w-[120px] w-full">
       <p class="text-white font-bold uppercase">education</p>
     </div>
     <div class="max-w-[264px] w-full flex flex-col gap-2 items-start">
       {
         config.organisation.table.education.map((item) => (
-          <p class="text-white " class:list={[`h-[${item.height}px]`]}>
+          <p class="text-white " style={`height:${item.height}px`}>
             {item.objective}
           </p>
         ))
@@ -144,7 +158,7 @@ import core from "../core.json";
     <div class="max-w-[490px] w-full flex flex-col gap-2 items-start">
       {
         config.organisation.table.education.map((item) => (
-          <p class="" class:list={[`h-[${item.height}px]`]}>
+          <p class="" style={`height:${item.height}px`}>
             {item.details}
           </p>
         ))
@@ -156,13 +170,13 @@ import core from "../core.json";
           item.url ? (
             <a
               class="button inverted"
-              class:list={[`h-[${item.height}px]`]}
+              style={`height:${item.height}px`}
               href={item.url}
             >
               <button>MORE</button>
             </a>
           ) : (
-            <p class:list={[`h-[${item.height}px]`]} class="text-white">
+            <p style={`height:${item.height}px`} class="text-white">
               &nbsp
             </p>
           )

src/config.yaml

@@ -121,69 +121,140 @@ landing:
   community: |
     Our aim with gatherings is to bring together key players, different perspectives, skills and visions. We aggregate tech and non tech people, key players and contributors, builders, researchers, philosophers, lawyers, policymakers, activists, local communities and general public.
 organisation:
+  paragraphs:
+    - heading: Events
+      subheading:
+      text:
+        - subtext:
+          items:
+            - "10M annual reach (socials, media, events)"
+            - "Visibility - before, during and after - at our Summits, Meetups & Hackathons (Logo, Merch, Talks, Workshops, Recordings)"
+            - "Free Tickets for team and discounts for your partners"
+            - "Finding right builders for your beta, product to test or develop"
+            - "Speaking and mentoring opportunities"
+            - "Panel curation upon specific needs"
+            - "Bigger outreach and Impact (we bring your brand, your team and developing needs around every event we attend 
(ETHDam, ETHRome, ETHBrno, ETHBarcelona, BlackSky…)"
+            - "50 contributors (beyond core team)"
+    - heading: Research
+      subheading: We carry on research delivering essays, reports, infographics, github repos, decks, guidelines
+      text:
+        - subtext: Brand
+          items:
+            - "Raise awareness within specific inputs (category, specs, market)"
+            - "Empower trust (product of choice, Tier1 category service, top of mind)"
+            - "Logo at the end of every report"
+            - "Use report’s results stating you are supporting privacy research (positive image)"
+            - "Underline your role in the market"
+        - subtext: Growth
+          items:
+            - "Engage target audience via using (your and others) experts opinion"
+            - "Additional marketing content from infographics to charts"
+            - "Third party validation of your specific claims (if they are attested)"
+            - "Community building content"
+            - "Priority in our publications and newsletter"
+            - "Tailor made articles based upon specific needs"
+
+    - heading: Explorer
+      subheading: 3in1 a ranking system, database & comprehensive profiling to empower the general public in discerning the privacy levels, security, and reliability of Web3 projects.
+      text:
+        - subtext: Brand
+          items:
+            - "Raise awareness within the category (gain reach)"
+            - "Increase trust by building great profile"
+            - "Improve trust by receiving a third party validation"
+            - "Visibility through benchmarks"
+
+        - subtext: Product
+          items:
+            - "Increase trial or generate leads by building a transparent profile"
+            - "Support your releases"
+    - heading: Financial
+      subheading:
+      text:
+        - subtext:
+          items:
+            - "Tax optimization through donation"
+
+    - heading: Other
+      subheading:
+      text:
+        - subtext:
+          items:
+            - "Organizing educational seminars for your employees, clients, target audience"
+            - "Job listings (web, newsletter, socials…)"
+            - "We transform content you share in conferences into educational material"
+            - "Special insights on market growth and evolution"
+            - "Group for company members"
+            - "Access to special members-only events"
+    - heading: Tiers
+      subheading:
+      text:
+        - subtext:
+          items:
+            - "Membership fee: 7K - 40K EUR / year (depends on tier)"
+            - "Non-profit membership fee: 1K EUR / year"
+
   table:
     events:
       - objective: 6+ Events in different countires
         details: |
           1 Summit + 1 Hackathon + 3 Meetups [target outreach: 1000 people IRL]
-
         height: 50
-
     research:
       - objective: Privacy in Ethereum
         details: |
           The most comprehensive report of privacy
         url: /research/ethereum
-        height: 50
+        height: 40
       - objective: Use cases DB update & improve (500 → 700 privacy projects
         details: |
           Most extensive web3 db of privacy-enhancing solutions
         url: /research/ethereum
-        height: 80
+        height: 60
       - objective: Privacy Annual Report (150+ pages)
         details: |
           Showcase all happenings and achievements of the year (3rd Edition)
         url: /research/ethereum
-        height: 60
+        height: 40
       - objective: Privacy Awards
         details: |
           Annual vote of most popular and interesting privacy projects
         url: /research/ethereum
-        height: 60
+        height: 40
       - objective: Week in Privacy
         details: |
           Newsletter with round-up of the most important privacy news
         url: /research/ethereum
-        height: 60
+        height: 40
       - objective: Monthly Infographics & Articles
         details: |
           Release of useful material for tech & general public
         url: /research/ethereum
-        height: 30
+        height: 40
     tools:
       - objective: Privacy Explorer V.2
         details: |
           300 services, 5 new categories, improve scoring model
         url: /research/ethereum
-        height: 50
+        height: 40
       - objective: Privacy Routing tool (V0.1 release)
         details: |
           Help users to choose the right service for their transactions
         url: /research/ethereum
-        height: 50
+        height: 40
     education:
       - objective: Academy
         details: |
           101 privacy educational track with our partners
 
-        height: 50
+        height: 40
       - objective: Hackathon Curation Pack
         details: |
           Guidelines to help the builders uderstand actual issues
         url: /research/ethereum
-        height: 60
+        height: 40
       - objective: Privacy Guidelines for the public
         details: |
 
         url: /research/ethereum
-        height: 50
+        height: 40

src/pages/membership/individual.astro

@@ -38,7 +38,9 @@ import AboutWidget from "../../components/AboutWidget.astro";
               <span class="text-white font-bold text-[18px] leading-[1.4rem]">
                 €100 / Year
               </span>
-              <a class="button" href=""><button>BECOME a member</button></a>
+              <a class="button" href={core.links.telegram}
+                ><button>BECOME a member</button></a
+              >
             </div>
           </div>
         </div>

src/pages/membership/organisation.astro

@@ -1,6 +1,6 @@
 ---
 import BaseLayout from "../../layouts/base.astro";
-import * as config from "../config.yaml";
+import * as config from "../../config.yaml";
 import core from "../../core.json";
 import AboutFooter from "../../components/AboutFooter.astro";
 import AboutWidget from "../../components/AboutWidget.astro";
@@ -14,7 +14,7 @@ import OrganisationTableMobile from "../../components/OrganisationTableMobile.as
   subimage="/membership/membership.png"
 >
   <div class="middle-pane-medium my-10">
-    <div class="flex flex-col gap-8 md:max-w-[1000px]">
+    <div class="flex flex-col gap-8">
       <div class="flex flex-col gap-2">
         <h1 class="mb-[0px]">organisation membership</h1>
         <span class="">
@@ -147,156 +147,30 @@ import OrganisationTableMobile from "../../components/OrganisationTableMobile.as
           <p class="text-white text-[24px] font-bold my-8">
             Value we can deliver
           </p>
+          {
+            config.organisation.paragraphs.map((item) => (
               <div class="mb-16">
-            <p class="font-bold text-white text-[24px] mb-2">Events</p>
+                <p class="font-bold text-white text-[24px] mb-2">
-            <ul class="list-disc ml-4 text-white">
+                  {item.heading}
-              <li>10M annual reach (socials, media, events)</li>
+                </p>
-              <li>
+                <span class="mb-2">{item.subheading}</span>
-                Visibility - before, during and after - at our Summits, Meetups
+                {item.text.map((textItem) => (
-                & Hackathons (Logo, Merch, Talks, Workshops, Recordings)
+                  <>
-              </li>
+                    <p class="text-white font-bold text-[16px] mt-4">
-              <li>Free Tickets for team and discounts for your partners</li>
+                      {textItem.subtext}
-              <li>
+                    </p>
-                Finding right builders for your beta, product to test or develop
-              </li>
-              <li>Speaking and mentoring opportunities</li>
-              <li>Panel curation upon specific needs</li>
-              <li>
-                Bigger outreach and Impact (we bring your brand, your team and
-                developing needs around every event we attend 
(ETHDam, ETHRome,
-                ETHBrno, ETHBarcelona, BlackSky…)
-              </li>
-              <li>50 contributors (beyond core team)</li>
-            </ul>
-          </div>
-          <div class="mb-6">
-            <p class="font-bold text-white text-[24px]">Research</p>
-            <span class="mb-2">
-              We carry on research delivering essays, reports, infographics,
-              github repos, decks, guidelines
-            </span>
-            <div class="mt-4">
-              <p class="text-white font-bold text-[16px]">Brand</p>
-              <ul class="list-disc ml-4 text-white">
-                <li>
-                  Raise awareness within specific inputs (category, specs,
-                  market)
-                </li>
-                <li>
-                  Empower trust (product of choice, Tier1 category service, top
-                  of mind)
-                </li>
-                <li>Logo at the end of every report</li>
-                <li>
-                  Use report’s results stating you are supporting privacy
-                  research (positive image)
-                </li>
-                <li>Underline your role in the market</li>
-              </ul>
-            </div>
-            <div class="mt-6">
-              <p class="text-white font-bold text-[16px]">Growth</p>
-              <ul class="list-disc ml-4 text-white">
-                <li>
-                  Engage target audience via using (your and others) experts
-                  opinion
-                </li>
-                <li>
-                  Additional marketing content from infographics to charts
-                </li>
-                <li>
-                  Third party validation of your specific claims (if they are
-                  attested)
-                </li>
-                <li>Community building content</li>
-                <li>Priority in our publications and newsletter</li>
-                <li>Tailor made articles based upon specific needs</li>
-              </ul>
-            </div>
-          </div>
-          <div class="mb-6">
-            <p class="font-bold text-white text-[24px]">Explorer</p>
-            <span class="mb-2">
-              3in1: a ranking system, database & comprehensive profiling to
-              empower the general public in discerning the privacy levels,
-              security, and reliability of Web3 projects.
-            </span>
-            <div class="mt-4">
-              <p class="text-white font-bold text-[16px]">Brand</p>
-              <ul class="list-disc ml-4 text-white">
-                <li>Raise awareness within the category (gain reach)</li>
-                <li>Increase trust by building great profile</li>
-                <li>Improve trust by receiving a third party validation</li>
-                <li>Visibility through benchmarks</li>
-              </ul>
-            </div>
-            <div class="mt-4">
-              <p class="text-white font-bold text-[16px]">Product</p>
-              <ul class="list-disc ml-4 text-white">
-                <li>
-                  Increase trial or generate leads by building a transparent
-                  profile
-                </li>
-                <li>Support your releases</li>
-              </ul>
-            </div>
-          </div>
-          <div class="mb-4">
-            <p class="font-bold text-white text-[24px]">Academy</p>
-            <span class="mb-2">
-              We aim to realize Academy to educate tech and non tech people,
-              giving basics about digital privacy and practical use-cases,
-              directions…
-            </span>
-            <div class="mt-4">
-              <ul class="list-disc ml-4 text-white">
-                <li>Feature your experts opinion and content</li>
-                <li>Content joint production</li>
-                <li>
-                  Co-develop domain-specific courses (wallet privacy 101,
-                  ethereum privacy…)
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="mb-4">
-            <p class="font-bold text-white text-[24px]">Financial</p>
 
-            <div class="mt-4">
                     <ul class="list-disc ml-4 text-white">
-                <li>Tax optimization through donation</li>
+                      {textItem.items.map((item) => (
+                        <li>{item}</li>
+                      ))}
                     </ul>
+                  </>
+                ))}
               </div>
-          </div>
+            ))
-          <div class="mb-4">
+          }
-            <p class="font-bold text-white text-[24px]">Other</p>
 
-            <div class="mt-4">
-              <ul class="list-disc ml-4 text-white">
-                <li>
-                  Organizing educational seminars for your employees, clients,
-                  target audience
-                </li>
-                <li>Job listings (web, newsletter, socials…)</li>
-                <li>
-                  We transform content you share in conferences into educational
-                  material
-                </li>
-                <li>Special insights on market growth and evolution</li>
-                <li>Group for company members</li>
-                <li>Access to special members-only events</li>
-              </ul>
-            </div>
-          </div>
-          <div class="mb-4">
-            <p class="font-bold text-white text-[24px]">Tiers</p>
-            <div class="mt-4">
-              <ul class="list-disc ml-4 text-white">
-                <li>Membership fee: 7K - 40K EUR / year (depends on tier)</li>
-                <li>Non-profit membership fee: 1K EUR / year</li>
-              </ul>
-            </div>
-          </div>
           <span class="text-white">
             For Tier breakdown and details please write us
             <a href="mailto:hello@web3privacy.info" class="underline"