mirror of
https://github.com/web3privacy/web
synced 2024-10-15 18:26:27 +02:00
Merge pull request #25 from web3privacy/pages-dev
Home, About and Membership (Get Involved) - Redesign
This commit is contained in:
Mykola Siusko
GitHub
commit
4abd3827ef
27 changed files with 1526 additions and 521 deletions
BIN
public/events/masonry/1.webp
Normal file
BIN
public/events/masonry/1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/events/masonry/2.webp
Normal file
BIN
public/events/masonry/2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
public/events/masonry/3.webp
Normal file
BIN
public/events/masonry/3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
public/events/masonry/4.webp
Normal file
BIN
public/events/masonry/4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
BIN
public/events/masonry/5.webp
Normal file
BIN
public/events/masonry/5.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
public/events/masonry/6.webp
Normal file
BIN
public/events/masonry/6.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
public/events/masonry/7.webp
Normal file
BIN
public/events/masonry/7.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/events/masonry/8.webp
Normal file
BIN
public/events/masonry/8.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/events/masonry/9.webp
Normal file
BIN
public/events/masonry/9.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/hp-bg-redesign.webp
Normal file
BIN
public/hp-bg-redesign.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
13
public/icons/signal.svg
Normal file
13
public/icons/signal.svg
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_140_218)">
|
||||||
|
<path
|
||||||
|
d="M18.24 0.701236L18.78 2.88374C16.6557 3.40615 14.6227 4.24691 12.75 5.37749L11.595 3.44999C13.6587 2.20398 15.8991 1.27725 18.24 0.701236ZM29.76 0.701236L29.22 2.88374C31.3442 3.40615 33.3772 4.24691 35.25 5.37749L36.4125 3.44999C34.3464 2.20329 32.1035 1.27654 29.76 0.701236ZM3.44999 11.595C2.20398 13.6587 1.27725 15.8991 0.701236 18.24L2.88374 18.78C3.40615 16.6557 4.24691 14.6227 5.37749 12.75L3.44999 11.595ZM2.24999 24C2.24926 22.9092 2.33074 21.8198 2.49374 20.7412L0.269986 20.4037C-0.0899954 22.7877 -0.0899954 25.2122 0.269986 27.5962L2.49374 27.2587C2.33074 26.1802 2.24926 25.0908 2.24999 24ZM36.405 44.55L35.25 42.6225C33.3796 43.7524 31.3491 44.5931 29.2275 45.1162L29.7675 47.2987C32.1058 46.722 34.3435 45.7953 36.405 44.55ZM45.75 24C45.7507 25.0908 45.6692 26.1802 45.5062 27.2587L47.73 27.5962C48.09 25.2122 48.09 22.7877 47.73 20.4037L45.5062 20.7412C45.6692 21.8198 45.7507 22.9092 45.75 24ZM47.2987 29.76L45.1162 29.22C44.5938 31.3442 43.7531 33.3772 42.6225 35.25L44.55 36.4125C45.7967 34.3464 46.7234 32.1035 47.2987 29.76ZM27.2587 45.51C25.0984 45.835 22.9016 45.835 20.7412 45.51L20.4037 47.7337C22.7877 48.0937 25.2122 48.0937 27.5962 47.7337L27.2587 45.51ZM41.5087 36.9037C40.2115 38.6606 38.6579 40.2129 36.9 41.5087L38.235 43.32C40.1743 41.8941 41.8884 40.1851 43.32 38.25L41.5087 36.9037ZM36.9 6.49124C38.6582 7.78819 40.2118 9.34175 41.5087 11.1L43.32 9.74999C41.893 7.81602 40.1839 6.10701 38.25 4.67999L36.9 6.49124ZM6.49124 11.1C7.78819 9.34175 9.34175 7.78819 11.1 6.49124L9.74999 4.67999C7.81602 6.10701 6.10701 7.81602 4.67999 9.74999L6.49124 11.1ZM44.55 11.595L42.6225 12.75C43.7524 14.6204 44.5931 16.6508 45.1162 18.7725L47.2987 18.2325C46.722 15.8942 45.7953 13.6564 44.55 11.595ZM20.7412 2.49374C22.9016 2.16871 25.0984 2.16871 27.2587 2.49374L27.5962 0.269986C25.2122 -0.0899954 22.7877 -0.0899954 20.4037 0.269986L20.7412 2.49374ZM7.64624 43.9162L2.99999 45L4.08374 40.3537L1.89374 39.84L0.809986 44.4862C0.722695 44.859 0.731962 45.2479 0.836911 45.616C0.941859 45.9842 1.13902 46.3195 1.40973 46.5902C1.68044 46.861 2.01575 47.0581 2.38393 47.1631C2.75211 47.268 3.14098 47.2773 3.51374 47.19L8.15624 46.125L7.64624 43.9162ZM2.36249 37.8337L4.55249 38.3437L5.30249 35.1225C4.2093 33.2852 3.39421 31.2961 2.88374 29.22L0.701236 29.76C1.1905 31.7484 1.93413 33.6655 2.91374 35.4637L2.36249 37.8337ZM12.8625 42.7087L9.64124 43.4587L10.1512 45.6487L12.5212 45.0975C14.3195 46.0771 16.2365 46.8207 18.225 47.31L18.765 45.1275C16.6932 44.6109 14.7093 43.7908 12.8775 42.6937L12.8625 42.7087ZM24 4.49999C20.5159 4.50179 17.0959 5.43705 14.0957 7.20848C11.0955 8.97992 8.62472 11.5228 6.94032 14.5727C5.25593 17.6226 4.41944 21.0681 4.51787 24.5508C4.61629 28.0336 5.64603 31.4263 7.49999 34.3762L5.62499 42.375L13.6237 40.5C16.182 42.1113 19.0799 43.1056 22.0885 43.4045C25.0971 43.7033 28.134 43.2985 30.9593 42.222C33.7845 41.1455 36.3208 39.4267 38.3676 37.2015C40.4145 34.9764 41.9159 32.3057 42.7532 29.4006C43.5906 26.4954 43.7409 23.4354 43.1924 20.4622C42.6439 17.4889 41.4115 14.684 39.5926 12.2689C37.7738 9.85375 35.4182 7.89467 32.7121 6.54637C30.006 5.19808 27.0234 4.4975 24 4.49999Z"
|
||||||
|
fill="white" />
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_140_218">
|
||||||
|
<rect width="48" height="48" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
BIN
public/review.png
Normal file
BIN
public/review.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
99
public/scripts/text-scramble.js
Normal file
99
public/scripts/text-scramble.js
Normal file
|
|
@ -0,0 +1,99 @@
|
||||||
|
function applyScrambleEffect() {
|
||||||
|
const glitchTextElements = document.querySelectorAll('.glitch-text');
|
||||||
|
const glitchTextHoverElements = document.querySelectorAll('.glitch-text-hover');
|
||||||
|
|
||||||
|
function animateScramble(element, text, duration = 2000) {
|
||||||
|
const chars = [];
|
||||||
|
element.innerHTML = ''; // Clear the original text
|
||||||
|
|
||||||
|
// Measure the element's width before animation starts
|
||||||
|
const preScrambleWidth = element.offsetWidth;
|
||||||
|
element.style.width = `${preScrambleWidth}px`;
|
||||||
|
|
||||||
|
for (let t = 0; t < text.length; t++) {
|
||||||
|
const span = document.createElement('span');
|
||||||
|
|
||||||
|
// Check if the character is a space, then use to preserve it
|
||||||
|
span.innerHTML = text[t] === ' ' ? ' ' : text[t];
|
||||||
|
chars[t] = span;
|
||||||
|
span.style.display = 'inline-block';
|
||||||
|
element.appendChild(span);
|
||||||
|
}
|
||||||
|
|
||||||
|
const rand = Math.random;
|
||||||
|
const SECONDS = 1000;
|
||||||
|
const FPS = 30;
|
||||||
|
const animationLength = duration;
|
||||||
|
|
||||||
|
function animate3(k) {
|
||||||
|
const kk = k * text.length;
|
||||||
|
for (let i = 0; i < text.length; i++) {
|
||||||
|
if (kk < i) {
|
||||||
|
chars[i].innerHTML = String.fromCharCode(~~(65 + rand() * 26));
|
||||||
|
} else {
|
||||||
|
// Preserve spaces with
|
||||||
|
chars[i].innerHTML = text[i] === ' ' ? ' ' : text[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animation loop
|
||||||
|
let start = Date.now();
|
||||||
|
function animate() {
|
||||||
|
const current = Date.now();
|
||||||
|
const time = current - start;
|
||||||
|
const k = time / animationLength;
|
||||||
|
|
||||||
|
if (k < 1) {
|
||||||
|
setTimeout(animate, SECONDS / FPS);
|
||||||
|
animate3(k);
|
||||||
|
} else {
|
||||||
|
// Ensure the final text is revealed once the animation is complete
|
||||||
|
for (let i = 0; i < text.length; i++) {
|
||||||
|
chars[i].innerHTML = text[i] === ' ' ? ' ' : text[i];
|
||||||
|
}
|
||||||
|
// Restore the original width (optional if you want to revert to normal)
|
||||||
|
element.style.width = 'auto';
|
||||||
|
// Allow new hover events after the animation completes
|
||||||
|
element.isAnimating = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
animate();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use Intersection Observer to observe when the element comes into view
|
||||||
|
const observer = new IntersectionObserver((entries, observer) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const element = entry.target;
|
||||||
|
const text = element.innerText;
|
||||||
|
animateScramble(element, text);
|
||||||
|
observer.unobserve(element); // Stop observing after the animation has been triggered
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
threshold: 0.1 // Trigger when 10% of the element is visible
|
||||||
|
});
|
||||||
|
|
||||||
|
// Observe each glitchTextElement for when it comes into view
|
||||||
|
glitchTextElements.forEach((element) => {
|
||||||
|
observer.observe(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
glitchTextHoverElements.forEach((element) => {
|
||||||
|
const text = element.innerText;
|
||||||
|
|
||||||
|
element.isAnimating = false;
|
||||||
|
|
||||||
|
element.addEventListener('mouseenter', () => {
|
||||||
|
if (!element.isAnimating) {
|
||||||
|
element.isAnimating = true; // Set flag to prevent re-triggering during animation
|
||||||
|
animateScramble(element, text, 800);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', applyScrambleEffect);
|
||||||
|
|
||||||
|
|
@ -2,114 +2,147 @@
|
||||||
import * as config from "../config.yaml";
|
import * as config from "../config.yaml";
|
||||||
import core from "../core.json";
|
import core from "../core.json";
|
||||||
import contributors from "../contributors.json";
|
import contributors from "../contributors.json";
|
||||||
import { getPersonByGH } from "../lib/core.js";
|
import SpeakerGrid from "./SpeakerGrid.astro";
|
||||||
import PeopleCarousel from "../components/PeopleCarousel.astro";
|
import SliderTestimonial from "./SliderTestimonial.astro";
|
||||||
|
import MembersGrid from "./MembersGrid.astro";
|
||||||
|
|
||||||
function findPerson(src) {
|
// Accept sectionsConfig as a prop
|
||||||
const p = core.people.find((p) =>
|
const {
|
||||||
src.refs?.twitter
|
sectionsConfig = [
|
||||||
? p.refs?.twitter === src.refs.twitter
|
{ name: "community", visible: true, order: 1 },
|
||||||
: src.refs?.bsky
|
{ name: "socialLinks", visible: true, order: 2 },
|
||||||
? p.refs.bsky === src.refs.bsky
|
{ name: "speakers", visible: true, order: 3 },
|
||||||
: {}
|
{ name: "core contributors", visible: true, order: 4 },
|
||||||
);
|
{ name: "contributors", visible: true, order: 5 },
|
||||||
if (p) {
|
{ name: "testimonials", visible: true, order: 6 },
|
||||||
p.ct = src;
|
{ name: "membersGrid", visible: true, order: 7 },
|
||||||
}
|
{ name: "communityPartners", visible: true, order: 8 },
|
||||||
return p;
|
],
|
||||||
}
|
} = Astro.props;
|
||||||
|
|
||||||
function personLink(person) {
|
console.log(sectionsConfig);
|
||||||
return person.refs?.twitter
|
// Function to sort sections by order
|
||||||
? `https://twitter.com/${person.refs.twitter}`
|
const sortedSections = sectionsConfig
|
||||||
: person.refs?.bsky
|
.filter((section) => section.visible)
|
||||||
? `https://bsky.app/profile/${person.refs.bsky}`
|
.sort((a, b) => a.order - b.order);
|
||||||
: "#";
|
|
||||||
}
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- <div class="mt-20">
|
{
|
||||||
<h1><a href="https://docs.web3privacy.info/follow-us">Follow us</a></h1>
|
sortedSections.map((section) => (
|
||||||
<div class="w3pn-wgrid">
|
<div>
|
||||||
{config.landing.follow.map((item) => (
|
{section.name === "community" && (
|
||||||
<a href={item.url || core.links[item.link]} target="_blank">
|
<div class="middle-pane-medium mt-16">
|
||||||
<span><span class="icon" class:list={[item.ico || ""]}></span></span>
|
|
||||||
<span class="title">{item.name}</span>
|
|
||||||
<span>{item.text}</span>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-10">
|
|
||||||
<h1><a href="https://docs.web3privacy.info/communication">Coordination</a></h1>
|
|
||||||
<div class="w3pn-wgrid">
|
|
||||||
{config.landing.coord.map((item) => (
|
|
||||||
<a href={item.url || core.links[item.link]} target="_blank">
|
|
||||||
<span><span class="icon" class:list={[item.ico || ""]}></span></span>
|
|
||||||
<span class="title">{item.name}</span>
|
|
||||||
<span>{item.text}</span>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<div class="mt-16">
|
|
||||||
<h1>
|
<h1>
|
||||||
<a href="https://docs.web3privacy.info/get-involved">Join the Community</a>
|
<a
|
||||||
|
class="glitch-text"
|
||||||
|
href="https://docs.web3privacy.info/get-involved"
|
||||||
|
>
|
||||||
|
Join the Community
|
||||||
|
</a>
|
||||||
</h1>
|
</h1>
|
||||||
<div>{config.landing.community}</div>
|
<div>{config.landing.community}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<h2 class="my-6">Speakers</h2>
|
{section.name === "socialLinks" && (
|
||||||
<div class="flex gap-3 flex-wrap items-center">
|
<div class="grid place-items-center grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-2 pt-4 w-full">
|
||||||
{
|
<a
|
||||||
core.people
|
href={core.links.twitter}
|
||||||
.filter((p) => !core.teams["core-team"].includes(p.id))
|
class="bg-[#101010] w-full flex items-center justify-center w-full h-40 overflow-hidden"
|
||||||
.filter((p) => p.imageUrl)
|
>
|
||||||
.map((person) => (
|
<button class="flex flex-col items-center justify-center">
|
||||||
<div>
|
<div class="icon twitter" />
|
||||||
<a href={personLink(person)}>
|
@web3privacy
|
||||||
<img
|
</button>
|
||||||
src={person.imageUrl}
|
</a>
|
||||||
title={person.name}
|
<a
|
||||||
class="w-14 rounded-full aspect-square"
|
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" />
|
||||||
|
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" />
|
||||||
|
matrix
|
||||||
|
</button>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
))
|
)}
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex gap-3 lg:gap-6 pt-4 flex-wrap mt-4 mb-14">
|
{section.name === "speakers" && (
|
||||||
<a href={core.links.cfp} class="button inverted"
|
<div class="middle-pane-medium mt-16">
|
||||||
><button>Submit your proposal (CfP)</button></a
|
<h1 class="my-6 glitch-text">Speakers</h1>
|
||||||
>
|
<SpeakerGrid people={core.people} team={core.teams["core-team"]} />
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<h2 class="my-6">Git Contributors</h2>
|
{section.name === "core contributors" && (
|
||||||
|
<div class="middle-pane-medium mt-16">
|
||||||
|
<h1 class="my-6 glitch-text">Core Contributors</h1>
|
||||||
|
<SpeakerGrid people={core.people} team={core.teams["core-team"]} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{section.name === "contributors" && (
|
||||||
|
<div class="middle-pane-medium">
|
||||||
|
<h1 class="my-6 glitch-text">Contributors</h1>
|
||||||
<div class="flex gap-3 flex-wrap mb-4 items-center">
|
<div class="flex gap-3 flex-wrap mb-4 items-center">
|
||||||
{
|
{contributors.items.map((contrib) => (
|
||||||
// filter(p => !core.teams['core-team'].includes(getPersonByGH(p.login)?.id))
|
|
||||||
contributors.items.map((contrib) => (
|
|
||||||
<div>
|
<div>
|
||||||
<a href={contrib.html_url} target="_blank" title={contrib.login}>
|
<a
|
||||||
|
href={contrib.html_url}
|
||||||
|
target="_blank"
|
||||||
|
title={contrib.login}
|
||||||
|
>
|
||||||
<img
|
<img
|
||||||
src={contrib.avatar_url}
|
src={contrib.avatar_url}
|
||||||
class="w-14 rounded-full aspect-square"
|
class="w-14 rounded-full aspect-square"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-4 lg:gap-6 pt-4 flex-wrap">
|
||||||
|
<a href={core.links.telegram} class="button inverted">
|
||||||
|
<button>Become a Contributor</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{section.name === "testimonials" && (
|
||||||
|
<div class="middle-pane-medium">
|
||||||
|
<h1 class="my-6 mt-16 glitch-text">
|
||||||
|
What People Have To Say About US
|
||||||
|
</h1>
|
||||||
|
<SliderTestimonial />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{section.name === "membersGrid" && (
|
||||||
|
<div class="middle-pane-medium mt-16">
|
||||||
|
<h1 class="my-6 glitch-text">Members</h1>
|
||||||
|
<MembersGrid people={core.people} team={core.teams["core-team"]} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex gap-4 lg:gap-6 pt-4 flex-wrap">
|
|
||||||
<a href={core.links.telegram} class="button inverted"
|
|
||||||
><button>Telegram</button></a
|
|
||||||
>
|
|
||||||
<a href={core.links.signal} class="button inverted"
|
|
||||||
><button>Signal</button></a
|
|
||||||
>
|
|
||||||
<a href={core.links.matrix} class="button inverted"
|
|
||||||
><button>matrix hub</button></a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -2,54 +2,86 @@
|
||||||
import AboutItem from "../components/AboutItem.astro";
|
import AboutItem from "../components/AboutItem.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div>
|
<AboutItem title="RESEARCH" subtext="">
|
||||||
<AboutItem
|
<div class="w-full">
|
||||||
title="AUDIENCES"
|
<div class="flex flex-col gap-[8px]">
|
||||||
subtext="For all of them we are building private platform to discuss and build privavy tooling and research"
|
<p>
|
||||||
>
|
We cultivate and foster a culture of privacy in web3 making data free
|
||||||
<div class="w-full grid grid-cols-2">
|
and public.
|
||||||
<div class="flex flex-col gap-[8px] text-white font-bold">
|
</p>
|
||||||
<span> General public </span>
|
<p>
|
||||||
<span> Projects </span>
|
Check our annual reports, infographics, privacy awards, newsletter, and
|
||||||
<span> Startupers</span>
|
guidelines.
|
||||||
</div>
|
</p>
|
||||||
<div class="flex flex-col gap-[8px] text-white font-bold">
|
<a class="button inverted"><button>web3privacy Research</button></a>
|
||||||
<span> Developers </span>
|
|
||||||
<span> Audit companies </span>
|
|
||||||
<span> Investors</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</AboutItem>
|
</AboutItem>
|
||||||
<AboutItem
|
<AboutItem title="PROJECTS & TOOLS PRODUCTION" subtext="">
|
||||||
title="PLATFORM"
|
<p class="mb-5">
|
||||||
subtext="We need to create activation points, that will push community around privacy forward and establish new connections"
|
By developing free and open tools, <br /> we empower people to make informed
|
||||||
>
|
decisions:
|
||||||
<div class="flex flex-col gap-[8px] items-start">
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-5">
|
||||||
<div class="flex gap-[12px] md:items-center items-start w-full">
|
<div class="flex gap-[12px] md:items-center items-start w-full">
|
||||||
<img src="/icons/query_stats.svg" class="inline-block" />
|
<div class="flex flex-row space-x-5 w-full">
|
||||||
<div
|
<div>
|
||||||
class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
|
<img src="/icons/database.svg" class="inline-block" />
|
||||||
>
|
</div>
|
||||||
<span
|
<div>
|
||||||
class="font-bold text-white leading-[1rem] w-full max-w-[110px]"
|
<div class="flex items-center flex-nowrap space-x-5">
|
||||||
>
|
<span class="font-bold text-white"> PRIVACY EXPLORER </span>
|
||||||
Market stats
|
</div>
|
||||||
</span>
|
<span class="text-[1rem] mt-0 w-full"
|
||||||
<span class="md:block hidden">-</span>
|
>For Projects, Use-case list, Market & Funding info
|
||||||
<span class="text-[1rem] w-full">
|
|
||||||
Like Crunchbase, but free forever
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex gap-[12px] md:items-center items-start w-full">
|
<div class="flex gap-[12px] md:items-center items-start w-full">
|
||||||
|
<div class="flex flex-row space-x-5 w-full">
|
||||||
|
<div>
|
||||||
|
<img src="/icons/database.svg" class="inline-block" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center flex-nowrap space-x-5">
|
||||||
|
<span class="font-bold text-white w-fit">
|
||||||
|
HACKATHON IDEA GENERATOR
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-[1rem] mt-0 w-full"
|
||||||
|
>Helps developers build applications that address real-world
|
||||||
|
problems, that people will actually use.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-[12px] md:items-center items-start w-full">
|
||||||
|
<div class="flex flex-row space-x-5 w-full">
|
||||||
|
<div>
|
||||||
|
<img src="/icons/database.svg" class="inline-block" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center flex-nowrap space-x-5">
|
||||||
|
<span class="font-bold text-white w-fit"> WEEK IN PRIVACY </span>
|
||||||
|
</div>
|
||||||
|
<span class="text-[1rem] mt-0 w-full"
|
||||||
|
>Weekly newsletter with round-up of the most important news
|
||||||
|
happening around privacy in Web3
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="flex gap-[12px] md:items-center items-start w-full">
|
||||||
<img src="/icons/star_half.svg" class="inline-block" />
|
<img src="/icons/star_half.svg" class="inline-block" />
|
||||||
<div
|
<div
|
||||||
class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
|
class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
|
||||||
>
|
>
|
||||||
<span
|
<span class="font-bold text-white leading-[1rem] w-full max-w-[140px]">
|
||||||
class="font-bold text-white leading-[1rem] w-full max-w-[140px]"
|
|
||||||
>
|
|
||||||
Privacy Ranking
|
Privacy Ranking
|
||||||
</span>
|
</span>
|
||||||
<span class="md:block hidden">-</span>
|
<span class="md:block hidden">-</span>
|
||||||
|
|
@ -85,153 +117,22 @@ import AboutItem from "../components/AboutItem.astro";
|
||||||
Anual reports, Frameworks, Tools, Books
|
Anual reports, Frameworks, Tools, Books
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="flex gap-[12px] md:items-center items-start w-full">
|
|
||||||
<img src="/icons/database.svg" class="inline-block" />
|
|
||||||
<div
|
|
||||||
class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
|
|
||||||
>
|
|
||||||
<span class="font-bold text-white leading-[1rem] w-fit max-w-[140px]">
|
|
||||||
Data
|
|
||||||
</span>
|
|
||||||
<span class="md:block hidden">-</span>
|
|
||||||
<span class="text-[1rem] w-full"
|
|
||||||
>For Projects, Use-case list, Market & Funding info
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</AboutItem>
|
</AboutItem>
|
||||||
<AboutItem
|
|
||||||
title="ACTIVATIONS"
|
|
||||||
subtext="With all of that we want to focus everybody more in web3 related privacy issues, those are our estimates and long-term goals"
|
|
||||||
>
|
|
||||||
<div class="flex flex-col gap-[8px] items-start">
|
|
||||||
<div class="flex gap-[12px] md:items-center items-start w-full">
|
|
||||||
<img src="/icons/visibility_lock.svg" class="inline-block" />
|
|
||||||
<div
|
|
||||||
class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
|
|
||||||
>
|
|
||||||
<span class="font-bold text-white leading-[1rem] w-fit">
|
|
||||||
Advocacy
|
|
||||||
</span>
|
|
||||||
<span class="md:block hidden">-</span>
|
|
||||||
<span class="text-[1rem] w-full">
|
|
||||||
Branding “decentralization = privacy”
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex gap-[12px] md:items-center items-start w-full">
|
<AboutItem title="EDUCATION" subtext="">
|
||||||
<img src="/icons/calendar_today.svg" class="inline-block" />
|
<div class="w-full">
|
||||||
<div
|
<div class="flex flex-col gap-[8px]">
|
||||||
class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
|
<p>
|
||||||
>
|
We make privacy accessible for everyone, empowering people to learn and
|
||||||
<span class="font-bold text-white leading-[1rem] w-fit">
|
implement best practices effectively.
|
||||||
Events
|
</p>
|
||||||
</span>
|
<p>
|
||||||
<span class="md:block hidden">-</span>
|
From mentoring at hackathons, guidelines for developers, and the
|
||||||
<span class="text-[1rem] w-full">
|
Cypherpunk Academy - we offer training, incubation, and acceleration
|
||||||
Meetups, Summits, Hackathons, Camps
|
programs.
|
||||||
</span>
|
</p>
|
||||||
</div>
|
<a class="button inverted"><button>Privacy Academy</button></a>
|
||||||
</div>
|
|
||||||
<div class="flex gap-[12px] md:items-center items-start w-full">
|
|
||||||
<img src="/icons/group_work.svg" class="inline-block" />
|
|
||||||
<div
|
|
||||||
class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="font-bold text-white leading-[1rem] w-full max-w-[220px]"
|
|
||||||
>
|
|
||||||
Ecosystems collaboration
|
|
||||||
</span>
|
|
||||||
<span class="md:block hidden">-</span>
|
|
||||||
<span class="text-[1rem] w-full"> Networks, Alliances, Media </span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-[12px] md:items-center items-start w-full">
|
|
||||||
<img src="/icons/encrypted.svg" class="inline-block" />
|
|
||||||
<div
|
|
||||||
class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
|
|
||||||
>
|
|
||||||
<span class="font-bold text-white leading-[1rem] w-fit max-w-[140px]">
|
|
||||||
Standartisation
|
|
||||||
</span>
|
|
||||||
<span class="md:block hidden">-</span>
|
|
||||||
<span class="text-[1rem] w-full">
|
|
||||||
Privacy-features, security audit (example)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-[12px] md:items-center items-start w-full">
|
|
||||||
<img src="/icons/local_florist.svg" class="inline-block" />
|
|
||||||
<div
|
|
||||||
class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
|
|
||||||
>
|
|
||||||
<span class="font-bold text-white leading-[1rem] w-fit max-w-[140px]">
|
|
||||||
Incubation
|
|
||||||
</span>
|
|
||||||
<span class="md:block hidden">-</span>
|
|
||||||
<span class="text-[1rem] w-full"
|
|
||||||
>Product managers facilitation, Business sustainability
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</AboutItem>
|
</AboutItem>
|
||||||
<AboutItem variant="secondary" title="GOALS">
|
|
||||||
<div class="flex md:flex-row flex-col gap-[32px]">
|
|
||||||
<div class="flex flex-col gap-[16px]">
|
|
||||||
<div class="flex flex-col gap-[4px]">
|
|
||||||
<span class="font-bold text-white my-2 leading-[1rem] uppercase">
|
|
||||||
GENERAL PUBLIC
|
|
||||||
</span>
|
|
||||||
<ul class="list-decimal ml-[18px]">
|
|
||||||
<li>Milions of educated users</li>
|
|
||||||
<li>Higher privacy culture</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-[4px]">
|
|
||||||
<span class="font-bold text-white my-2 leading-[1rem] uppercase">
|
|
||||||
PROJECTS
|
|
||||||
</span>
|
|
||||||
<ul class="list-decimal ml-[18px]">
|
|
||||||
<li>Better privacy features</li>
|
|
||||||
<li>New use-cases</li>
|
|
||||||
<li>Efficient demos</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-[4px]">
|
|
||||||
<span class="font-bold text-white my-2 leading-[1rem] uppercase">
|
|
||||||
SECURITY AUDIT COMPANIES
|
|
||||||
</span>
|
|
||||||
<ul class="list-decimal ml-[18px]">
|
|
||||||
<li>New “privacy audit” category</li>
|
|
||||||
<li>Significant growth of audited projects.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-[16px]">
|
|
||||||
<div class="flex flex-col gap-[4px]">
|
|
||||||
<span class="font-bold text-white mb-2 mt-0 leading-[1rem] uppercase">
|
|
||||||
DEVELOPERS
|
|
||||||
</span>
|
|
||||||
<ul class="list-decimal ml-[18px] w-full">
|
|
||||||
<li>More devs building privacy</li>
|
|
||||||
<li>More sustainable projects.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-[4px] w-full">
|
|
||||||
<span class="font-bold text-white my-2 leading-[1rem] uppercase">
|
|
||||||
STARTUPERS
|
|
||||||
</span>
|
|
||||||
<ul class="list-decimal ml-[18px]">
|
|
||||||
<li>More privacy-oriented projects</li>
|
|
||||||
<li>Longer runway</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</AboutItem>
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
29
src/components/EventMasonry.astro
Normal file
29
src/components/EventMasonry.astro
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
---
|
||||||
|
const {
|
||||||
|
images = [
|
||||||
|
"/events/masonry/1.webp",
|
||||||
|
"/events/masonry/2.webp",
|
||||||
|
"/events/masonry/3.webp",
|
||||||
|
"/events/masonry/4.webp",
|
||||||
|
"/events/masonry/5.webp",
|
||||||
|
"/events/masonry/6.webp",
|
||||||
|
"/events/masonry/7.webp",
|
||||||
|
"/events/masonry/8.webp",
|
||||||
|
"/events/masonry/9.webp",
|
||||||
|
],
|
||||||
|
} = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="flex flex-wrap gap-[3px]">
|
||||||
|
{
|
||||||
|
images.map((image, index) => (
|
||||||
|
<div class="flex-auto overflow-hidden">
|
||||||
|
<img
|
||||||
|
class="object-cover w-full lg:max-h-[120px] xl:max-h-[223px]"
|
||||||
|
src={image}
|
||||||
|
alt={`Image ${index + 1}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
129
src/components/MembersGrid.astro
Normal file
129
src/components/MembersGrid.astro
Normal 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
123
src/components/MembershipOtherOptionsWidget.astro
Normal 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
152
src/components/MembershipWidget.astro
Normal 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>
|
||||||
176
src/components/SliderTestimonial.astro
Normal file
176
src/components/SliderTestimonial.astro
Normal file
|
|
@ -0,0 +1,176 @@
|
||||||
|
---
|
||||||
|
const testimonials = [
|
||||||
|
{
|
||||||
|
author: "Matteo",
|
||||||
|
text: `balance between Transparency and Privacy, accountable and unaccountable, manifest and secret, convex and concave, 1 and 0 is one of the most fun puzzles.`,
|
||||||
|
imageUrl: "/review.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
author: "Jane",
|
||||||
|
text: `This platform has opened my eyes to the potential of blockchain technology in a way that I never imagined. The community is vibrant and full of innovation.`,
|
||||||
|
imageUrl: "/review.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
author: "Alex",
|
||||||
|
text: `It's amazing to see how much transparency can coexist with privacy, and this is the best representation of how it can work. Great work!`,
|
||||||
|
imageUrl: "/review.png",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
let currentTestimonial = 0;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="w-full mx-auto px-8 border-2 border-[#202020]">
|
||||||
|
<div class="relative testimonial-fade active" id="testimonial-container">
|
||||||
|
<div class="flex items-center justify-center overflow-hidden">
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
src={testimonials[currentTestimonial].imageUrl}
|
||||||
|
class="grayscale"
|
||||||
|
alt="Review Image"
|
||||||
|
id="testimonial-image"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="relative lg:w-9/12">
|
||||||
|
<div class="relative py-12 px-8 text-gray-700 leading-relaxed">
|
||||||
|
<h2 class="font-bold" id="testimonial-author">
|
||||||
|
{testimonials[currentTestimonial].author}:
|
||||||
|
</h2>
|
||||||
|
<p class="leading-tight" id="testimonial-text">
|
||||||
|
"{testimonials[currentTestimonial].text}"
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Buttons -->
|
||||||
|
<div class="absolute inset-y-0 left-0 lg:flex lg:items-center">
|
||||||
|
<button
|
||||||
|
class="mt-24 lg:mt-0 -ml-6 h-12 w-12 rounded-full p-3 shadow-lg"
|
||||||
|
id="prev-button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-full w-full text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M5.41 11H21a1 1 0 0 1 0 2H5.41l5.3 5.3a1 1 0 0 1-1.42 1.4l-7-7a1 1 0 0 1 0-1.4l7-7a1 1 0 0 1 1.42 1.4L5.4 11z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="absolute inset-y-0 right-0 lg:flex lg:items-center">
|
||||||
|
<button
|
||||||
|
class="mt-24 lg:mt-0 -mr-6 h-12 w-12 rounded-full p-3 shadow-lg"
|
||||||
|
id="next-button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-full w-full text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M18.59 13H3a1 1 0 0 1 0-2h15.59l-5.3-5.3a1 1 0 1 1 1.42-1.4l7 7a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.42-1.4l5.3-5.3z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
testimonials.map((_, index) => (
|
||||||
|
<button
|
||||||
|
class={`h-3 w-3 rounded-full ${index === currentTestimonial ? "bg-white" : "bg-transparent border"}`}
|
||||||
|
id={`dot-${index}`}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
const testimonials = [
|
||||||
|
{
|
||||||
|
author: "Matteo",
|
||||||
|
text: `balance between Transparency and Privacy, accountable and unaccountable, manifest and secret, convex and concave, 1 and 0 is one of the most fun puzzles.`,
|
||||||
|
imageUrl: "/review.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
author: "Jane",
|
||||||
|
text: `This platform has opened my eyes to the potential of blockchain technology in a way that I never imagined. The community is vibrant and full of innovation.`,
|
||||||
|
imageUrl: "/review.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
author: "Alex",
|
||||||
|
text: `It's amazing to see how much transparency can coexist with privacy, and this is the best representation of how it can work. Great work!`,
|
||||||
|
imageUrl: "/review.png",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
let currentTestimonial = 0;
|
||||||
|
|
||||||
|
const container = document.getElementById("testimonial-container");
|
||||||
|
const authorElement = document.getElementById("testimonial-author");
|
||||||
|
const textElement = document.getElementById("testimonial-text");
|
||||||
|
const imageElement = document.getElementById("testimonial-image");
|
||||||
|
|
||||||
|
const dots = testimonials.map((_, index) =>
|
||||||
|
document.getElementById(`dot-${index}`)
|
||||||
|
);
|
||||||
|
|
||||||
|
function showTestimonial(index) {
|
||||||
|
currentTestimonial = index;
|
||||||
|
const testimonial = testimonials[currentTestimonial];
|
||||||
|
|
||||||
|
// Add fade-out class before changing the content
|
||||||
|
container.classList.remove("active");
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
// Update content after fade-out
|
||||||
|
authorElement.innerText = testimonial.author;
|
||||||
|
textElement.innerText = `"${testimonial.text}"`;
|
||||||
|
imageElement.src = testimonial.imageUrl;
|
||||||
|
|
||||||
|
// Add fade-in class
|
||||||
|
container.classList.add("active");
|
||||||
|
}, 500); // Match with the CSS transition duration
|
||||||
|
|
||||||
|
// Update dots
|
||||||
|
dots.forEach((dot, i) => {
|
||||||
|
if (i === currentTestimonial) {
|
||||||
|
dot.classList.add("bg-white");
|
||||||
|
dot.classList.remove("bg-transparent", "border");
|
||||||
|
} else {
|
||||||
|
dot.classList.remove("bg-white");
|
||||||
|
dot.classList.add("bg-transparent", "border");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("prev-button").addEventListener("click", () => {
|
||||||
|
showTestimonial(
|
||||||
|
(currentTestimonial - 1 + testimonials.length) % testimonials.length
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("next-button").addEventListener("click", () => {
|
||||||
|
showTestimonial((currentTestimonial + 1) % testimonials.length);
|
||||||
|
});
|
||||||
|
|
||||||
|
dots.forEach((dot, index) => {
|
||||||
|
dot.addEventListener("click", () => {
|
||||||
|
showTestimonial(index);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Automatically change testimonial every 6 seconds
|
||||||
|
setInterval(() => {
|
||||||
|
showTestimonial((currentTestimonial + 1) % testimonials.length);
|
||||||
|
}, 6000);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
49
src/components/SpeakerGrid.astro
Normal file
49
src/components/SpeakerGrid.astro
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
---
|
||||||
|
const { people, team } = Astro.props;
|
||||||
|
|
||||||
|
// Filter the people and limit the results to 12
|
||||||
|
const filteredPeople = people
|
||||||
|
.filter((p) => !team.includes(p.id))
|
||||||
|
.filter((p) => p.imageUrl)
|
||||||
|
.slice(0, 12); // Limit to the first 12 people
|
||||||
|
|
||||||
|
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 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
|
||||||
|
{filteredPeople.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"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<div class="mt-4">
|
||||||
|
<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>
|
||||||
|
|
@ -22,7 +22,7 @@ header:
|
||||||
link: news
|
link: news
|
||||||
- name: Docs
|
- name: Docs
|
||||||
link: docs
|
link: docs
|
||||||
- name: Membership
|
- name: Get Involved
|
||||||
link: membership
|
link: membership
|
||||||
url: /membership
|
url: /membership
|
||||||
#- name: Manifesto
|
#- name: Manifesto
|
||||||
|
|
|
||||||
|
|
@ -155,7 +155,9 @@ function genHeading(str) {
|
||||||
<div class="text-left mt-10">{config.hero.text}</div>
|
<div class="text-left mt-10">{config.hero.text}</div>
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<a class="button" href="/about">
|
<a class="button" href="/about">
|
||||||
<button>About Web3Privacy Now</button>
|
<button>
|
||||||
|
<strong>About US</strong>
|
||||||
|
</button>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -167,7 +169,6 @@ function genHeading(str) {
|
||||||
<>
|
<>
|
||||||
<div class="middle-pane-medium mt-8 sm:mt-14 mb-2 sm:mb-8">
|
<div class="middle-pane-medium mt-8 sm:mt-14 mb-2 sm:mb-8">
|
||||||
<div class="leading-none flex justify-center text-[4px] sm:text-[8px] text-white">
|
<div class="leading-none flex justify-center text-[4px] sm:text-[8px] text-white">
|
||||||
{/*<img src="/page-events.png" class="h-8 sm:h-14" title="Events" />*/}
|
|
||||||
<pre>
|
<pre>
|
||||||
<code class="font-mono layout-heading ">
|
<code class="font-mono layout-heading ">
|
||||||
{genHeading(title)}
|
{genHeading(title)}
|
||||||
|
|
@ -176,7 +177,7 @@ function genHeading(str) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-center w-full text-center">
|
<div class="flex items-center justify-center w-full text-center">
|
||||||
<h3 class=" w-full max-w-[938px]">{subtext}</h3>
|
<h3 class=" w-full max-w-[938px] glitch-text">{subtext}</h3>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
@ -188,40 +189,79 @@ function genHeading(str) {
|
||||||
<div
|
<div
|
||||||
class="border border-t-2 border-b-0 border-l-0 border-r-0 border-[#0f0f0f] mt-20 pt-10 pb-10"
|
class="border border-t-2 border-b-0 border-l-0 border-r-0 border-[#0f0f0f] mt-20 pt-10 pb-10"
|
||||||
>
|
>
|
||||||
<div class="middle-pane-big">
|
|
||||||
<div
|
<div
|
||||||
class="flex gap-10 text-lg items-center flex-wrap align-top"
|
class="flex mx-6 gap-10 text-lg items-center flex-wrap align-top"
|
||||||
id="footerMenu"
|
id="footerMenu"
|
||||||
>
|
>
|
||||||
<a href="/" class="w3pn-logo w-32"></a>
|
<a href="/" class="w3pn-logo w-52"></a>
|
||||||
<div class="text-md">
|
<div class="text-md">
|
||||||
<a
|
<a
|
||||||
href="https://github.com/web3privacy/web"
|
href="https://github.com/web3privacy/web"
|
||||||
class="text-white hover:underline">v{pkg.version}</a
|
class="text-white hover:underline">v{pkg.version}</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="grow flex sm:justify-end">
|
</div>
|
||||||
<div class="sm:flex justify-center flex-wrap gap-4 lg:gap-10">
|
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<div class="mx-6 py-10 text-center md:text-left">
|
||||||
|
<div class="grid-1 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
<div class="">
|
||||||
|
<p class="mb-4">
|
||||||
|
<a href="#!">Manifesto</a>
|
||||||
|
</p>
|
||||||
|
<p class="mb-4">
|
||||||
|
<a href="#!">How to get involved?</a>
|
||||||
|
</p>
|
||||||
|
<p class="mb-4">
|
||||||
|
<a href="#!">Grants / Support Us</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-4">
|
||||||
|
<a href="#!">Events</a>
|
||||||
|
</p>
|
||||||
|
<p class="mb-4">
|
||||||
|
<a href="#!">Articles</a>
|
||||||
|
</p>
|
||||||
|
<p class="mb-4">
|
||||||
|
<a href="#!">Talks</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-4">
|
||||||
|
<a href="/#">Privacy Explorer</a>
|
||||||
|
</p>
|
||||||
|
<p class="mb-4">
|
||||||
|
<a href="/#">Privacy use-cases database</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="py-10 md:text-left">
|
||||||
|
<div class="grid-1 grid gap-4 md:grid-cols-2 lg:grid-cols-5">
|
||||||
{
|
{
|
||||||
config.footer.menu.map((item) => (
|
config.footer.menu.map((item) => (
|
||||||
<div class="flex gap-4 items-center menuItem lg:mb-0 mb-2">
|
<div>
|
||||||
<div
|
<p class="mb-4">
|
||||||
class="icon small opacity-50"
|
<a href={item.url || core.links[item.link]}>{item.title}</a>
|
||||||
class:list={[item.ico]}
|
</p>
|
||||||
/>
|
|
||||||
<div class="text-white hover:underline">
|
|
||||||
<a href={item.url || core.links[item.link]}>
|
|
||||||
{item.title}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--Copyright section-->
|
||||||
|
<div class="bg-black/5 p-6 text-start">
|
||||||
|
<a class="font-semibold" href="https://tw-elements.com/"
|
||||||
|
>All rights not reserved, Creative commons 2024 - Web3Privacy z.s.</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Load TextScramble.js -->
|
||||||
|
<script src="/scripts/text-scramble.js" type="module"></script>
|
||||||
<script>
|
<script>
|
||||||
document.querySelector(".hamburger").addEventListener("click", () => {
|
document.querySelector(".hamburger").addEventListener("click", () => {
|
||||||
document.querySelector(".nav-links").classList.toggle("expanded");
|
document.querySelector(".nav-links").classList.toggle("expanded");
|
||||||
|
|
|
||||||
|
|
@ -4,14 +4,55 @@ import * as config from "../config.yaml";
|
||||||
import core from "../core.json";
|
import core from "../core.json";
|
||||||
import AboutFooter from "../components/AboutFooter.astro";
|
import AboutFooter from "../components/AboutFooter.astro";
|
||||||
import AboutItemGrid from "../components/AboutItemGrid.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
|
<BaseLayout
|
||||||
title="About web3privacy"
|
title="About web3privacy"
|
||||||
image="og_about"
|
image="og_about"
|
||||||
subimage="/about/about.png"
|
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="middle-pane-medium mt-10">
|
||||||
<!-- <div class="mb-20">
|
<!-- <div class="mb-20">
|
||||||
|
|
@ -23,24 +64,24 @@ import AboutWidget from "../components/AboutWidget.astro";
|
||||||
<div class="grid grid-cols-1 xl:grid-cols-2 gap-16 mb-[82px]">
|
<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="flex flex-col gap-[36px] md:order-2">
|
||||||
<div class="md:hidden block mb-[12px] ">
|
<div class="md:hidden block mb-[12px] ">
|
||||||
<h1>Our mission</h1>
|
<h1>activism. care. solidarity.</h1>
|
||||||
<div set:html={config.landing.mission} />
|
<div set:html={config.landing.mission} />
|
||||||
<div class="mt-8 flex gap-6 items-center w-full">
|
<div class="mt-8 flex gap-6 items-center w-full">
|
||||||
<a class="button inverted" href={core.links.manifesto}
|
<a class="button inverted" href={core.links.manifesto}
|
||||||
><button>Read manifesto</button></a
|
><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
|
><button>Join us</button></a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h1>how we support privacy in web3</h1>
|
<h1 class="glitch-text">how we support privacy in web3</h1>
|
||||||
|
|
||||||
<AboutItemGrid />
|
<AboutItemGrid />
|
||||||
</div>
|
</div>
|
||||||
<div class="md:order-1 order-2">
|
<div class="md:order-1 order-2">
|
||||||
<div class="md:block hidden">
|
<div class="md:block hidden">
|
||||||
<h1>Our mission</h1>
|
<h1 class="glitch-text">activism. care. solidarity.</h1>
|
||||||
<div set:html={config.landing.mission} />
|
<div set:html={config.landing.mission} />
|
||||||
<div class="mt-8 flex gap-6 items-center w-full">
|
<div class="mt-8 flex gap-6 items-center w-full">
|
||||||
<a class="button inverted" href={core.links.manifesto}
|
<a class="button inverted" href={core.links.manifesto}
|
||||||
|
|
@ -51,7 +92,40 @@ import AboutWidget from "../components/AboutWidget.astro";
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</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 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>
|
<h1>our events</h1>
|
||||||
<div set:html={config.landing.event} />
|
<div set:html={config.landing.event} />
|
||||||
<div class="mt-8 flex flex-col gap-6 items-start w-full">
|
<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
|
><button>EVENTS</button></a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="md:mt-[56px] mt-[26px]">
|
<!-- <div class="md:mt-[56px] mt-[26px]">
|
||||||
<h1>Our Projects & research</h1>
|
<h1>Our Projects & research</h1>
|
||||||
<div set:html={config.landing.research} />
|
<div set:html={config.landing.research} />
|
||||||
<div class="mt-8 flex gap-6 items-center w-full">
|
<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
|
><button>Research</button></a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<!-- <div>
|
<!-- <div>
|
||||||
<h1>Topics</h1>
|
<h1>Topics</h1>
|
||||||
<div class="columns-2 uppercase text-sm w3pn-topics">
|
<div class="columns-2 uppercase text-sm w3pn-topics">
|
||||||
|
|
@ -86,23 +160,25 @@ import AboutWidget from "../components/AboutWidget.astro";
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<AboutWidget variant="membership" />
|
</div>
|
||||||
<div
|
<div class="my-10">
|
||||||
class="flex md:flex-row flex-col items-center gap-[24px] justify-center w-full mt-[24px]"
|
<EventMasonry />
|
||||||
>
|
</div>
|
||||||
<div class="md:mt-[56px] mt-[26px] max-w-[460px] md:order-1 order-2">
|
|
||||||
<h1>empowering community with our brand</h1>
|
<div class="middle-pane-medium">
|
||||||
<div set:html={config.landing.merch} />
|
<div class="mb-6">
|
||||||
<div class="mt-8 flex gap-6 items-center w-full">
|
{featuredEvents.map((event) => <EventItem item={event} />)}
|
||||||
<a class="button inverted" href={core.links.brand}
|
</div>
|
||||||
><button>Brand on Github</button></a
|
|
||||||
|
<div class="mt-6">
|
||||||
|
<a href="/events" class="button inverted"
|
||||||
|
><button>Show all events</button></a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="md:order-2 order-1">
|
<div class="middle-pane-medium mt-10">
|
||||||
<img src="/about/stickers.png" alt="" />
|
<AboutFooter {sectionsConfig} />
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<AboutFooter />
|
|
||||||
</div>
|
</div>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,53 @@
|
||||||
---
|
---
|
||||||
|
import BaseLayout from "../layouts/base.astro";
|
||||||
import BaseLayout from '../layouts/base.astro';
|
import AboutFooter from "../components/AboutFooter.astro";
|
||||||
import AboutFooter from '../components/AboutFooter.astro';
|
import core from "../core.json";
|
||||||
import core from '../core.json';
|
import articles from "../articles.json";
|
||||||
import articles from '../articles.json';
|
import talks from "../talks.json";
|
||||||
import talks from '../talks.json';
|
import dbRepo from "../db-repo.json";
|
||||||
import explorer from '../explorer.json';
|
import { format } from "date-fns";
|
||||||
import dbRepo from '../db-repo.json';
|
import EventItem from "../components/EventItem.astro";
|
||||||
import { format } from 'date-fns';
|
import { isFutureDate } from "../lib/date";
|
||||||
import EventItem from '../components/EventItem.astro';
|
import EventMasonry from "../components/EventMasonry.astro";
|
||||||
import { isFutureDate } from '../lib/date';
|
|
||||||
|
|
||||||
const events = core.events;
|
const events = core.events;
|
||||||
|
|
||||||
const upcomingEvents = []
|
const upcomingEvents = [];
|
||||||
let eventsPast = 0
|
let eventsPast = 0;
|
||||||
let eventsUpcoming = 0
|
let eventsUpcoming = 0;
|
||||||
for (const ev of events) {
|
for (const ev of events) {
|
||||||
let future = isFutureDate(ev.date)
|
let future = isFutureDate(ev.date);
|
||||||
if (future) {
|
if (future) {
|
||||||
upcomingEvents.push(ev)
|
upcomingEvents.push(ev);
|
||||||
eventsUpcoming++
|
eventsUpcoming++;
|
||||||
} else {
|
} else {
|
||||||
eventsPast++
|
eventsPast++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const featuredEvents = []
|
const featuredEvents = [];
|
||||||
for (const e of upcomingEvents) {
|
for (const e of upcomingEvents) {
|
||||||
if (featuredEvents.length > 2) {
|
if (featuredEvents.length > 2) {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
if (['summit', 'meetup', 'online-summit'].includes(e.type) &&
|
if (
|
||||||
e.links?.rsvp && !featuredEvents.find(ex => ex.type === e.type)) {
|
["summit", "meetup", "online-summit"].includes(e.type) &&
|
||||||
featuredEvents.push(e)
|
e.links?.rsvp &&
|
||||||
|
!featuredEvents.find((ex) => ex.type === e.type)
|
||||||
|
) {
|
||||||
|
featuredEvents.push(e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout banner="true" description="Advocates worldwide are uniting to make privacy fundamental pillar of the Web3 industry, transforming it into a cultural movement that champions freedom and decentralization.">
|
<BaseLayout
|
||||||
|
banner="true"
|
||||||
|
description="Advocates worldwide are uniting to make privacy fundamental pillar of the Web3 industry, transforming it into a cultural movement that champions freedom and decentralization."
|
||||||
|
>
|
||||||
<div class="middle-pane-big">
|
<div class="middle-pane-big">
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 w3pn-hp-grid gap-2 mt-2">
|
<div
|
||||||
|
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 w3pn-hp-grid gap-2 mt-2"
|
||||||
|
>
|
||||||
<div class="bg-events" data-url="/events">
|
<div class="bg-events" data-url="/events">
|
||||||
<div class="title">Events</div>
|
<div class="title">Events</div>
|
||||||
<div class="numbers">
|
<div class="numbers">
|
||||||
|
|
@ -56,15 +61,28 @@ for (const e of upcomingEvents) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-projects relative" data-url="https://github.com/web3privacy/web3privacy/blob/main/README.md#contents">
|
<div
|
||||||
|
class="bg-projects relative"
|
||||||
|
data-url="https://github.com/web3privacy/web3privacy/blob/main/README.md#contents"
|
||||||
|
>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="icon github small mr-1.5 inline-block"></div>
|
<div class="icon github small mr-1.5 inline-block"></div>
|
||||||
<div class="text-white mt-1 ml-1.5"><a href="https://github.com/web3privacy/web3privacy/blob/main/README.md#contents">Web3 Privacy Database</a></div>
|
<div class="text-white mt-1 ml-1.5">
|
||||||
|
<a
|
||||||
|
href="https://github.com/web3privacy/web3privacy/blob/main/README.md#contents"
|
||||||
|
>Web3 Privacy Database</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Place this tag where you want the button to render. -->
|
<!-- Place this tag where you want the button to render. -->
|
||||||
<div class="flex items-center absolute top-4 right-4 text-white opacity-30"><div class="icon star small mr-1.5"></div> {dbRepo.stars}</div>
|
<div
|
||||||
|
class="flex items-center absolute top-4 right-4 text-white opacity-30"
|
||||||
|
>
|
||||||
|
<div class="icon star small mr-1.5"></div>
|
||||||
|
{dbRepo.stars}
|
||||||
|
</div>
|
||||||
<div class="numbers">
|
<div class="numbers">
|
||||||
<div>
|
<div>
|
||||||
<div class="big">{dbRepo.count}</div>
|
<div class="big">{dbRepo.count}</div>
|
||||||
|
|
@ -87,24 +105,38 @@ for (const e of upcomingEvents) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="middle-pane-medium mt-10">
|
<div class="middle-pane-medium mt-10">
|
||||||
<!--div class="mt-10">
|
<!--div class="mt-10">
|
||||||
<h1>Our Projects</h1>
|
<h1>Our Projects</h1>
|
||||||
</div-->
|
</div-->
|
||||||
|
|
||||||
<div class="mt-16">
|
<div class="mt-16">
|
||||||
<h1>Featured Upcoming Events</h1>
|
<h1>Featured Events</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="text-left">
|
||||||
|
Our gatherings aim to build understanding and solidarity among diverse
|
||||||
|
interest groups, cultures, states, chains, ecosystems, and backgrounds. We
|
||||||
|
bring together Web3 and non-tech individuals, builders, researchers,
|
||||||
|
philosophers, lawyers, policymakers, hacktivists, key players, local
|
||||||
|
communities, and the general public. Formats: Meetups, Summits,
|
||||||
|
Congresses, Hackathons, Camp fires
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-10">
|
||||||
|
<EventMasonry />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="middle-pane-medium">
|
||||||
<div class="mb-6">
|
<div class="mb-6">
|
||||||
{featuredEvents.map((event) => (
|
{featuredEvents.map((event) => <EventItem item={event} />)}
|
||||||
<EventItem item={event} />
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<a href="/events" class="button inverted"><button>Show all events</button></a>
|
<a href="/events" class="button inverted"
|
||||||
|
><button>Show all events</button></a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-16">
|
<div class="mt-16">
|
||||||
|
|
@ -112,18 +144,30 @@ for (const e of upcomingEvents) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w3pn-articles grid md:grid-cols-2 gap-6">
|
<div class="w3pn-articles grid md:grid-cols-2 gap-6">
|
||||||
{articles.slice(0,4).map((entry) => (
|
{
|
||||||
<div class="basegrid-entry aspect-video" style={{backgroundImage: `url("${entry.img}")`, backgroundSize: '100% 100%;'}}>
|
articles.slice(0, 4).map((entry) => (
|
||||||
|
<div
|
||||||
|
class="basegrid-entry aspect-video"
|
||||||
|
style={{
|
||||||
|
backgroundImage: `url("${entry.img}")`,
|
||||||
|
backgroundSize: "100% 100%;",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<a href={entry.url}>{entry.title}</a>
|
<a href={entry.url}>{entry.title}</a>
|
||||||
<span class="date">{format(new Date(entry.date), 'MMMM do, yyyy')}</span>
|
<span class="date">
|
||||||
|
{format(new Date(entry.date), "MMMM do, yyyy")}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-8">
|
<div class="mt-8">
|
||||||
<a href={core.links.mirror} class="button inverted"><button>More articles on Mirror</button></a>
|
<a href={core.links.mirror} class="button inverted"
|
||||||
|
><button>More articles on Mirror</button></a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-16">
|
<div class="mt-16">
|
||||||
|
|
@ -131,28 +175,38 @@ for (const e of upcomingEvents) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-6">
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
{talks.slice(0,4).map((entry) => (
|
{
|
||||||
<div class="basegrid-entry aspect-video" style={{backgroundImage: `url("${entry.img}")`, backgroundSize: 'cover', backgroundPosition: 'center'}}>
|
talks.slice(0, 4).map((entry) => (
|
||||||
<a href={entry.url} class="w-full h-full" title={entry.title}></a>
|
<div
|
||||||
|
class="basegrid-entry aspect-video"
|
||||||
|
style={{
|
||||||
|
backgroundImage: `url("${entry.img}")`,
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundPosition: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<a href={entry.url} class="w-full h-full" title={entry.title} />
|
||||||
</div>
|
</div>
|
||||||
))}
|
))
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-8">
|
<div class="mt-8">
|
||||||
<a href={core.links.youtube} class="button inverted"><button>More talks on YouTube</button></a>
|
<a href={core.links.youtube} class="button inverted"
|
||||||
|
><button>More talks on YouTube</button></a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<AboutFooter />
|
<AboutFooter />
|
||||||
</div>
|
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
document.querySelectorAll('.w3pn-hp-grid > div').forEach(el => {
|
document.querySelectorAll(".w3pn-hp-grid > div").forEach((el) => {
|
||||||
el.addEventListener('click', () => {
|
el.addEventListener("click", () => {
|
||||||
window.location = el.getAttribute('data-url');
|
window.location = el.getAttribute("data-url");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
document.querySelectorAll('.w3pn-articles > div').forEach(el => {
|
document.querySelectorAll(".w3pn-articles > div").forEach((el) => {
|
||||||
el.addEventListener('click', () => {
|
el.addEventListener("click", () => {
|
||||||
window.location = el.querySelector('a').getAttribute('href');
|
window.location = el.querySelector("a").getAttribute("href");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,24 @@
|
||||||
---
|
---
|
||||||
import BaseLayout from "../../layouts/base.astro";
|
import BaseLayout from "../../layouts/base.astro";
|
||||||
import * as config from "../config.yaml";
|
|
||||||
import core from "../../core.json";
|
import core from "../../core.json";
|
||||||
import AboutFooter from "../../components/AboutFooter.astro";
|
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
|
<BaseLayout
|
||||||
title="MEMBERSHIP"
|
title="GET INVOLVED"
|
||||||
image="og_membership"
|
image="og_membership"
|
||||||
subimage="/membership/membership.png"
|
subimage="/membership/membership.png"
|
||||||
>
|
>
|
||||||
|
|
@ -21,10 +32,115 @@ import AboutWidget from "../../components/AboutWidget.astro";
|
||||||
part of our ecosystem.
|
part of our ecosystem.
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<AboutWidget variant="membership" />
|
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
|
<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>
|
</BaseLayout>
|
||||||
|
|
|
||||||
|
|
@ -28,13 +28,28 @@
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Add animation */
|
||||||
|
.testimonial-fade {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-fade.active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glitch-text {
|
||||||
|
font-family: Major Mono Display, ui-monospace, SFMono-Regular, Menlo, Monaco,
|
||||||
|
Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
|
|
||||||
body, p, div {
|
body, p, div {
|
||||||
@apply text-[#909090] leading-8;
|
@apply text-[#C0C0C0] leading-8;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4 {
|
h1, h2, h3, h4 {
|
||||||
|
|
@ -58,7 +73,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#intro {
|
#intro {
|
||||||
background-image: url(/hp-bg.webp);
|
background-image: url(/hp-bg-redesign.webp);
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
background-color: #0f0f0f;
|
background-color: #0f0f0f;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue