web3privacy/web
1
0
Fork 0
mirror of https://github.com/web3privacy/web synced 2024-10-15 18:26:27 +02:00
Code Issues Projects Releases Packages Wiki Activity

Added the membership components along with the about page contents.

Browse source
This commit is contained in:
NoobDeveloper412 2024-09-12 09:09:28 +05:00
parent c79e185acc
commit 3a1666ee8e
5 changed files with 632 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
src/components/MembersGrid.astro Normal file
View file

@ -0,0 +1,129 @@
---
const { people, team } = Astro.props;
// Dummy data for now:
let filteredPeople = [
{
id: "guy-zyskind",
name: "Guy Zyskind",
caption:
"Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
country: "is",
refs: {
twitter: "GuyZys",
},
imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
thumbs: {
"64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
"128":
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
"400":
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
},
},
{
id: "guy-zyskind",
name: "Guy Zyskind",
caption:
"Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
country: "is",
refs: {
twitter: "GuyZys",
},
imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
thumbs: {
"64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
"128":
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
"400":
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
},
},
{
id: "guy-zyskind",
name: "Guy Zyskind",
caption:
"Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
country: "is",
refs: {
twitter: "GuyZys",
},
imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
thumbs: {
"64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
"128":
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
"400":
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
},
},
{
id: "guy-zyskind",
name: "Guy Zyskind",
caption:
"Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
country: "is",
refs: {
twitter: "GuyZys",
},
imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
thumbs: {
"64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
"128":
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
"400":
"https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
},
},
];
// NOTE: Uncomment this if you want to filter people dynamically based upon a specific parameter
// const filteredPeople = people
// .filter((p) => !team.includes(p.id))
// .filter((p) => p.imageUrl);
// Limit the number of members to 12 (2 rows with a max of 6 columns each)
const limitedPeople = filteredPeople.slice(0, 12);
function personLink(person) {
return person.refs?.twitter
? `https://twitter.com/${person.refs.twitter}`
: person.refs?.bsky
? `https://bsky.app/profile/${person.refs.bsky}`
: "#";
}
function truncateCaption(caption) {
if (!caption) return "";
const words = caption.split(" ");
if (words.length > 10) {
return words.slice(0, 20).join(" ") + "...";
}
return caption;
}
---
<div
class="grid place-items-center grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-2"
>
{
limitedPeople.map((person) => (
<div class=" max-w-xs w-full h-[340px] bg-transparent overflow-hidden p-1 space-y-1 mb-2">
<a href={personLink(person)}>
<img
src={person.imageUrl}
alt={person.name}
class="w-full h-48 object-cover filter grayscale"
/>
</a>
<div class=" flex items-center justify-center flex-col pt-8">
<h3 class="text-lg font-bold">{person.name}</h3>
{person.refs && person.refs.twitter && (
<p class="text-sm text-gray-500">@{person.refs.twitter}</p>
)}
{/* <p class="text-sm">{truncateCaption(person.caption)}</p> */}
</div>
</div>
))
}
</div>

123
src/components/MembershipOtherOptionsWidget.astro Normal file
View file

@ -0,0 +1,123 @@
<div class="flex flex-col md:flex-row gap-8">
<div class="flex flex-col h-full">
<div class="bg-white px-[16px] text-black">
<h3 style="color:black !important" class="pb-[3px]">SPONSORSHIP</h3>
</div>
<div class="border-4 h-full border-white w-full">
<div
class="w-full h-full md:border-x-4 md:border-b-4 border-l-0 md:border-b-0 border-b-4 border-white"
>
<div class="flex flex-col h-full justify-between p-4 z-[10] relative">
<div class="flex flex-col">
<p>
Members are our chosen collaborators for mutual support and
growth. Rather than one-time deals for individual events or
projects, we strive for consistent collaboration to achieve
lasting impact.
</p>
<span class="leading-[1.4rem]">
Become an integral part of our community! Join us with building
privacy platform we all need.
</span>
</div>
<div class="flex flex-col md:px-[24px] z-[10]">
<span class="text-white font-bold text-[18px]"> 2024 </span>
<ul class="ml-[18px] text-white">
<li>
Privacy<li>
<li>Scaling</li>
<li>Exploration</li>
<li>Ethereum</li>
<li>Foundation</li>
<li>Railgun</li>
<li>Payy</li>
</li>
</li>
</ul>
</div>
<div class="flex flex-col md:px-[24px] z-[10]">
<span class="text-white font-bold text-[18px] leading-[1.4rem]">
2023
</span>
<p class="text-white font-bold leading-widest">
<a href="#" class="hover:underline"><span>Zcash</span></a> /
<a href="#" class="hover:underline"><span>Firo</span></a> /
<a href="#" class="hover:underline"><span>Firn</span></a> /
<a href="#" class="hover:underline"
><span>Privacy Scaling Exploration</span></a
> /
<a href="#" class="hover:underline"><span>Railgun</span></a> /
<a href="#" class="hover:underline"><span>ENS</span></a> /
<a href="#" class="hover:underline"
><span>Navio (ex Navcoin)</span></a
> /
<a href="#" class="hover:underline"><span>Panther</span></a> /
<a href="#" class="hover:underline"
><span>AragonTKResearch</span></a
> /
<a href="#" class="hover:underline"><span>Secret Network</span></a
> /
<a href="#" class="hover:underline"><span>Waku</span></a>
</p>
</div>
<a class="button inverted"><button>BECOME A SPONSOR</button></a>
</div>
</div>
</div>
</div>
<div class="flex flex-col justify-between gap-8">
<div class="">
<div class="bg-white w-full px-[16px] text-black">
<h3 style="color:black !important" class="pb-[3px]">DONATE</h3>
</div>
<div class="border-4 border-white w-full">
<div
class="w-full md:border-x-4 md:border-b-4 border-l-0 md:border-b-0 border-b-4 border-white p-4"
>
<div
class="flex flex-col h-full justify-between gap-10 z-[10]"
>
<div class="flex flex-col my-4">
<p>
Members are our chosen collaborators for mutual support and
growth. Rather than one-time deals for individual events or
projects, we strive for consistent collaboration to achieve
lasting impact.
</p>
<p class="text-white mt-4">
<strong
>Support our independence, help us to advocate for freedom</strong
>
</p>
</div>
<a class="button inverted"><button>DONATE</button></a>
</div>
</div>
</div>
</div>
<div class="">
<div class="bg-white w-full px-[16px] text-black">
<h3 style="color:black !important" class="pb-[3px]">
SPEAK at our events
</h3>
</div>
<div class="border-4 border-white w-full">
<div
class="w-full md:border-x-4 md:border-b-4 border-l-0 md:border-b-0 border-b-4 border-white p-4"
>
<div class="flex flex-col justify-between gap-10 z-[10] ">
<div class="flex flex-col my-4">
<p>
At Web3Privacy Now, we are dedicated to fostering growth,
innovation, and collaboration. We offer a supportive environment
where like-minded individuals come together to share knowledge,
spark creativity, and drive positive change.
</p>
</div>
</div>
<a class="button inverted"><button>SPEAK AT OUR EVENTS</button></a>
</div>
</div>
</div>
</div>
</div>

152
src/components/MembershipWidget.astro Normal file
View file

@ -0,0 +1,152 @@
---
import core from "../core.json";
---
<div class="flex flex-col md:flex-row gap-8">
<div>
<div class="bg-white w-full px-[16px] text-black">
<h3 style="color:black !important" class="pb-[3px]">INDIVIDUAL</h3>
</div>
<div class="border-4 h-full border-white w-full">
<div
class="w-full h-full md:border-x-4 md:border-b-4 border-l-0 md:border-b-0 border-b-4 border-white"
>
<div class="flex flex-col h-full justify-between px-4 z-[10] relative">
<div class="flex flex-col my-4">
<p>
Members are our chosen collaborators for mutual support and
growth. Rather than one-time deals for individual events or
projects, we strive for consistent collaboration to achieve
lasting impact.
</p>
<span class="leading-[1.4rem]">
Become an integral part of our community! Join us with building
privacy platform we all need.
</span>
</div>
<div class="flex flex-col gap-[16px] md:p-[24px] z-[10]">
<span class="text-white font-bold text-[18px] leading-[1.4rem]">
Benefits
</span>
<ul class="list-disc ml-[18px] text-white">
<li>You are supporting a good thing!</li>
<li>Guaranteed access to all our events</li>
<li>Swag Privacy Pack</li>
<li>Deals from our partners</li>
<li>Voting rights in our association</li>
</ul>
</div>
<div
class="flex w-full md:justify-between md:flex-row flex-col gap-[8px] md:items-end"
>
<div class="flex flex-col justify-end h-full gap-4 mb-4 md:mb-8">
<span>Price</span>
<span class="text-white font-bold text-[24px] leading-[1.4rem]">
€100 / Year
</span>
<a class="button inverted" href={core.links.individual}
><button>BECOME A MEMBER</button></a
>
<p class="max-w-72 text-sm">
After making your donation, kindly send us the tx hash, your
T-shirt size, and let us know if you would like your membership
to be public or kept private.
</p>
</div>
<img
src="/about/image1.png"
alt=""
class="hidden md:block right-0 bottom-0 md:w-[280px] md:h-auto"
/>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="bg-white w-full px-[16px] text-black">
<h3 style="color:black !important" class="pb-[3px]">INDIVIDUAL</h3>
</div>
<div class="border-4 h-full border-white w-full">
<div
class="w-full h-full md:border-x-4 md:border-b-4 border-l-0 md:border-b-0 border-b-4 border-white"
>
<div class="flex flex-col h-full justify-between px-4 z-[10] relative">
<div class="flex flex-col my-4">
<p>
Members are our chosen collaborators for mutual support and
growth. Rather than one-time deals for individual events or
projects, we strive for consistent collaboration to achieve
lasting impact.
</p>
</div>
<div class="flex flex-col gap-[16px] md:p-[24px] z-[10]">
<span class="text-white font-bold text-[18px] leading-[1.4rem]">
Benefits
</span>
<ul class="list-disc ml-4 text-white">
<li>
<span class="font-bold leading-wide"> Greater Exposure </span>
<p>
Ensure visibility at all our events [Congresses, Summits &
Hackathons]
</p>
</li>
<li>
<span class="font-bold leading-wide"> Access to Talent </span>
<p>Grow impact through strategic, targeted communications.</p>
</li>
<li>
<span class="font-bold leading-wide"> Tought Leadership </span>
<p>Participate in speaking engagements and mentorship roles.</p>
</li>
<li>
<span class="font-bold leading-wide">
Deals from our partners
</span>
<p>More details about the deals from our partners.</p>
</li>
<li>
<span class="font-bold leading-wide"> Focused Engagement </span>
<p>
Reach and interact with specific, highly-relevant audiences.
</p>
</li>
</ul>
</div>
<div
class="flex w-full md:justify-between md:flex-row flex-col gap-[8px] md:items-end"
>
<div
class="flex w-full md:justify-between md:flex-row flex-col gap-[8px] md:items-end"
>
<div class="flex flex-col justify-end h-full gap-4 mb-4 md:mb-8">
<span>Our membership has multiple tiers ranging from</span>
<span class="text-white font-bold text-[24px] leading-[1.4rem]">
7,000 to 70,000 € / year
</span>
<a class="button inverted" href={core.links.individual}
><button>BECOME A MEMBER</button></a
>
<p class="max-w-72 text-sm">
After making your donation, kindly send us the tx hash, your
T-shirt size, and let us know if you would like your
membership to be public or kept private.
</p>
</div>
<img
src="/about/image2.png"
alt=""
class="hidden md:block right-0 bottom-0 md:w-[450px] md:h-auto"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

128
src/pages/about.astro
View file

@ -4,14 +4,55 @@ import * as config from "../config.yaml";
import core from "../core.json";
import AboutFooter from "../components/AboutFooter.astro";
import AboutItemGrid from "../components/AboutItemGrid.astro";
import AboutWidget from "../components/AboutWidget.astro";
import EventMasonry from "../components/EventMasonry.astro";
import EventItem from "../components/EventItem.astro";
import { isFutureDate } from "../lib/date";
const events = core.events;
const upcomingEvents = [];
let eventsPast = 0;
let eventsUpcoming = 0;
const sectionsConfig = [
{ name: "testimonials", visible: true, order: 1 },
{ name: "core contributors", visible: true, order: 2 },
{ name: "contributors", visible: true, order: 3 },
{ name: "membersGrid", visible: true, order: 4 },
{ name: "socialLinks", visible: true, order: 5 },
// { name: "community", visible: false, order: 6 },
];
for (const ev of events) {
let future = isFutureDate(ev.date);
if (future) {
upcomingEvents.push(ev);
eventsUpcoming++;
} else {
eventsPast++;
}
}
const featuredEvents = [];
for (const e of upcomingEvents) {
if (featuredEvents.length > 2) {
break;
}
if (
["summit", "meetup", "online-summit"].includes(e.type) &&
e.links?.rsvp &&
!featuredEvents.find((ex) => ex.type === e.type)
) {
featuredEvents.push(e);
}
}
---
<BaseLayout
title="About web3privacy"
image="og_about"
subimage="/about/about.png"
subtext="we are a privacy focused ecosystem of hacktivists, researchers, lawyers, event organisers... pushing web3privacy forward"
subtext="We are a think-and-do tank of hundreds of people, projects, and organizations committed to protecting and advancing civil liberties, decentralization, and open-source software."
>
<div class="middle-pane-medium mt-10">
<!-- <div class="mb-20">
@ -22,25 +63,25 @@ import AboutWidget from "../components/AboutWidget.astro";
<div class="grid grid-cols-1 xl:grid-cols-2 gap-16 mb-[82px]">
<div class="flex flex-col gap-[36px] md:order-2">
<div class="md:hidden block mb-[12px]">
<h1>Our mission</h1>
<div class="md:hidden block mb-[12px] ">
<h1>activism. care. solidarity.</h1>
<div set:html={config.landing.mission} />
<div class="mt-8 flex gap-6 items-center w-full">
<a class="button inverted" href={core.links.manifesto}
><button>Read manifesto</button></a
>
<a class="button" href={core.links.telegram}
<a class="button font-bold" href={core.links.telegram}
><button>Join us</button></a
>
</div>
</div>
<h1>how we support privacy in web3</h1>
<h1 class="glitch-text">how we support privacy in web3</h1>
<AboutItemGrid />
</div>
<div class="md:order-1 order-2">
<div class="md:block hidden">
<h1>Our mission</h1>
<h1 class="glitch-text">activism. care. solidarity.</h1>
<div set:html={config.landing.mission} />
<div class="mt-8 flex gap-6 items-center w-full">
<a class="button inverted" href={core.links.manifesto}
@ -51,7 +92,40 @@ import AboutWidget from "../components/AboutWidget.astro";
>
</div>
</div>
<div class="md:mt-[56px] mt-[26px]">
<hr class="mt-10 border-[#e0e0e0]" />
<div class="md:block hidden mt-[26px]">
<h1 class="glitch-text">Our mission</h1>
<div set:html={config.landing.mission} />
</div>
<hr class="mt-10 border-[#e0e0e0]" />
<div class="mt-[26px]">
<h1 class="glitch-text">why privacy</h1>
<p class="mt-0 glitch-text w-full">
In any society, privacy is essential for protecting civil liberties
and human rights.
<br />
<br />
Privacy enables individuals to participate in political processes without
fear of retribution or surveillance, ensuring that they can freely express
their views, associate with others, and engage in activism. <br />
<br />
Robust privacy practices assist in balancing power between individuals
and the state or corporations. Without them, unchecked surveillance and
control leads to a loss of personal freedoms and the rise of authoritarianism.
<br />
<br /> When we talk about privacy, we are discussing more than just data
protection. We are addressing the fate of our societies, their present,
and their future.
</p>
<div class="mt-8 flex gap-6 items-center w-full">
<a class="button inverted" href={core.links.manifesto}
><button>Read More</button></a
>
</div>
</div>
<!-- <div class="md:mt-[56px] mt-[26px]">
<h1>our events</h1>
<div set:html={config.landing.event} />
<div class="mt-8 flex flex-col gap-6 items-start w-full">
@ -65,8 +139,8 @@ import AboutWidget from "../components/AboutWidget.astro";
><button>EVENTS</button></a
>
</div>
</div>
<div class="md:mt-[56px] mt-[26px]">
</div> -->
<!-- <div class="md:mt-[56px] mt-[26px]">
<h1>Our Projects & research</h1>
<div set:html={config.landing.research} />
<div class="mt-8 flex gap-6 items-center w-full">
@ -77,7 +151,7 @@ import AboutWidget from "../components/AboutWidget.astro";
><button>Research</button></a
>
</div>
</div>
</div> -->
<!-- <div>
<h1>Topics</h1>
<div class="columns-2 uppercase text-sm w3pn-topics">
@ -86,23 +160,25 @@ import AboutWidget from "../components/AboutWidget.astro";
</div> -->
</div>
</div>
<AboutWidget variant="membership" />
<div
class="flex md:flex-row flex-col items-center gap-[24px] justify-center w-full mt-[24px]"
>
<div class="md:mt-[56px] mt-[26px] max-w-[460px] md:order-1 order-2">
<h1>empowering community with our brand</h1>
<div set:html={config.landing.merch} />
<div class="mt-8 flex gap-6 items-center w-full">
<a class="button inverted" href={core.links.brand}
><button>Brand on Github</button></a
</div>
<div class="my-10">
<EventMasonry />
</div>
<div class="middle-pane-medium">
<div class="mb-6">
{featuredEvents.map((event) => <EventItem item={event} />)}
</div>
<div class="mt-6">
<a href="/events" class="button inverted"
><button>Show all events</button></a
>
</div>
</div>
<div class="md:order-2 order-1">
<img src="/about/stickers.png" alt="" />
</div>
</div>
<AboutFooter />
<div class="middle-pane-medium mt-10">
<AboutFooter {sectionsConfig} />
</div>
</BaseLayout>

128
src/pages/membership/index.astro
View file

@ -1,13 +1,24 @@
---
import BaseLayout from "../../layouts/base.astro";
import * as config from "../config.yaml";
import core from "../../core.json";
import AboutFooter from "../../components/AboutFooter.astro";
import AboutWidget from "../../components/AboutWidget.astro";
import MembershipWidget from "../../components/MembershipWidget.astro";
import contributors from "../../contributors.json";
import MembershipOtherOptionsWidget from "../../components/MembershipOtherOptionsWidget.astro";
import MembersGrid from "../../components/MembersGrid.astro";
const sectionsConfig = [
// { name: "membersGrid", visible: true, order: 1 },
// { name: "socialLinks", visible: true, order: 2 },
// { name: "testimonials", visible: true, order: 1 },
// { name: "speakers", visible: true, order: 2 },
// { name: "contributors", visible: true, order: 3 },
// { name: "community", visible: false, order: 6 },
];
---
<BaseLayout
title="MEMBERSHIP"
title="GET INVOLVED"
image="og_membership"
subimage="/membership/membership.png"
>
@ -21,10 +32,115 @@ import AboutWidget from "../../components/AboutWidget.astro";
part of our ecosystem.
</h3>
</div>
<div>
<AboutWidget variant="membership" />
</div>
<AboutFooter />
<div class="middle-pane-medium my-10">
<div class="border-4 border-white">
<div class="bg-white w-full px-[16px] text-black">
<h3 style="color:black !important " class="pb-[3px] pl-4 font-[21px]">
Github Contributors
</h3>
</div>
<div class="w-full text-center my-10 text-lg">
<p>
This is the kind of support we value most: open-source, grassroots
initiatives driven by individual passion and the desire to create
something meaningful.
</p>
</div>
<div class="flex gap-3 flex-wrap mb-4 justify-center items-center mx-4">
{
contributors.items.map((contrib) => (
<div>
<a href={contrib.html_url} target="_blank" title={contrib.login}>
<img
src={contrib.avatar_url}
class="w-14 rounded-full aspect-square"
/>
</a>
</div>
))
}
</div>
<div class="flex gap-4 p-4 lg:gap-6 pt-4 flex-wrap">
<a href={core.links.telegram} class="button inverted">
<button>Become a Contributor</button>
</a>
</div>
</div>
<div class="my-10">
<h1 class="font-[32px]">membership</h1>
<MembershipWidget />
</div>
</div>
<div class="middle-pane-medium mt-20">
<h1 class="font-[32px]">other ways</h1>
<MembershipOtherOptionsWidget />
</div>
<div class="mt-16">
<h1 class="my-6 middle-pane-medium">Members</h1>
<MembersGrid people={core.people} team={core.teams["core-team"]} />
</div>
<div class="middle-pane-medium my-10">
<h1>Join the community</h1>
<p>
We thrive on uniting diverse perspectives, skills, and visions. Both
online and offline, we bring together tech and non-tech individuals,
activists, key players, hackers, lawyers, researchers, philosophers,
policymakers, local communities, and grassroots movements.
</p>
<div
class="grid place-items-center grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-2 pt-4 w-full"
>
<a
href={core.links.twitter}
class="bg-[#101010] w-full flex items-center justify-center w-full h-40 overflow-hidden"
>
<button class="flex flex-col items-center justify-center">
<div class="icon twitter"></div>
@web3privacy
</button>
</a>
<a
href={core.links.telegram}
class="bg-[#101010] w-full flex items-center justify-center w-full h-40 overflow-hidden"
>
<button class="flex flex-col items-center justify-center">
<div class="icon telegram"></div>
Telegram
</button>
</a>
<a
href={core.links.signal}
class="bg-[#101010] w-full flex items-center justify-center w-full h-40 overflow-hidden"
>
<button class="flex flex-col items-center justify-center">
<div class="icon"><img src="/icons/signal.svg" alt=""></div>
Signal
</button>
</a>
<a
href={core.links.matrix}
class="bg-[#101010] w-full flex items-center justify-center w-full h-40 overflow-hidden"
>
<button class="flex flex-col items-center justify-center">
<div class="icon matrix"></div>
matrix
</button>
</a>
</div>
</div>
<div class="mt-16">
<h1 class="my-6 middle-pane-medium">Community Partners</h1>
<MembersGrid people={core.people} team={core.teams["core-team"]} />
</div>
<AboutFooter {sectionsConfig} />
</BaseLayout>