mirror of
https://github.com/web3privacy/web
synced 2024-10-15 18:26:27 +02:00
Patched the changes suggested along with a few more improvements.
This commit is contained in:
NoobDeveloper412
parent
56d6071095
commit
d0b82da2fa
26 changed files with 1700 additions and 594 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 |
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 glitchTextOnceElements = document.querySelectorAll('.glitch-text');
|
||||
const glitchTextRepeatElements = document.querySelectorAll('.glitch-text-interval');
|
||||
|
||||
function animateScramble(element, text, duration = 1000) {
|
||||
const chars = [];
|
||||
element.innerHTML = '';
|
||||
const preScrambleWidth = element.offsetWidth;
|
||||
element.style.width = `${preScrambleWidth}px`;
|
||||
|
||||
for (let t = 0; t < text.length; t++) {
|
||||
const span = document.createElement('span');
|
||||
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 {
|
||||
chars[i].innerHTML = text[i] === ' ' ? ' ' : text[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
chars[i].innerHTML = text[i] === ' ' ? ' ' : text[i];
|
||||
}
|
||||
element.style.width = 'auto';
|
||||
element.isAnimating = false;
|
||||
}
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1
|
||||
});
|
||||
|
||||
glitchTextOnceElements.forEach((element) => {
|
||||
observer.observe(element);
|
||||
});
|
||||
|
||||
glitchTextRepeatElements.forEach((element) => {
|
||||
const text = element.innerText;
|
||||
|
||||
animateScramble(element, text);
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
if (!element.isAnimating) {
|
||||
animateScramble(element, text);
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
element.addEventListener('mouseenter', () => {
|
||||
if (!element.isAnimating) {
|
||||
clearInterval(intervalId);
|
||||
animateScramble(element, text, 800);
|
||||
element.isAnimating = true;
|
||||
|
||||
setTimeout(() => {
|
||||
element.isAnimating = false;
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', applyScrambleEffect);
|
||||
|
||||
|
|
@ -2,114 +2,147 @@
|
|||
import * as config from "../config.yaml";
|
||||
import core from "../core.json";
|
||||
import contributors from "../contributors.json";
|
||||
import { getPersonByGH } from "../lib/core.js";
|
||||
import PeopleCarousel from "../components/PeopleCarousel.astro";
|
||||
import SpeakerGrid from "./SpeakerGrid.astro";
|
||||
import SliderTestimonial from "./SliderTestimonial.astro";
|
||||
import MembersGrid from "./MembersGrid.astro";
|
||||
|
||||
function findPerson(src) {
|
||||
const p = core.people.find((p) =>
|
||||
src.refs?.twitter
|
||||
? p.refs?.twitter === src.refs.twitter
|
||||
: src.refs?.bsky
|
||||
? p.refs.bsky === src.refs.bsky
|
||||
: {}
|
||||
);
|
||||
if (p) {
|
||||
p.ct = src;
|
||||
}
|
||||
return p;
|
||||
}
|
||||
// Accept sectionsConfig as a prop
|
||||
const {
|
||||
sectionsConfig = [
|
||||
{ name: "community", visible: true, order: 1 },
|
||||
{ name: "socialLinks", visible: true, order: 2 },
|
||||
{ name: "speakers", visible: true, order: 3 },
|
||||
{ name: "core contributors", visible: true, order: 4 },
|
||||
{ name: "contributors", visible: true, order: 5 },
|
||||
{ name: "testimonials", visible: true, order: 6 },
|
||||
{ name: "membersGrid", visible: true, order: 7 },
|
||||
{ name: "communityPartners", visible: true, order: 8 },
|
||||
],
|
||||
} = Astro.props;
|
||||
|
||||
function personLink(person) {
|
||||
return person.refs?.twitter
|
||||
? `https://twitter.com/${person.refs.twitter}`
|
||||
: person.refs?.bsky
|
||||
? `https://bsky.app/profile/${person.refs.bsky}`
|
||||
: "#";
|
||||
}
|
||||
console.log(sectionsConfig);
|
||||
// Function to sort sections by order
|
||||
const sortedSections = sectionsConfig
|
||||
.filter((section) => section.visible)
|
||||
.sort((a, b) => a.order - b.order);
|
||||
---
|
||||
|
||||
<!-- <div class="mt-20">
|
||||
<h1><a href="https://docs.web3privacy.info/follow-us">Follow us</a></h1>
|
||||
<div class="w3pn-wgrid">
|
||||
{config.landing.follow.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-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">
|
||||
{
|
||||
sortedSections.map((section) => (
|
||||
<div>
|
||||
{section.name === "community" && (
|
||||
<div class="middle-pane-medium mt-16">
|
||||
<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>
|
||||
<div>{config.landing.community}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h2 class="my-6">Speakers</h2>
|
||||
<div class="flex gap-3 flex-wrap items-center">
|
||||
{
|
||||
core.people
|
||||
.filter((p) => !core.teams["core-team"].includes(p.id))
|
||||
.filter((p) => p.imageUrl)
|
||||
.map((person) => (
|
||||
<div>
|
||||
<a href={personLink(person)}>
|
||||
<img
|
||||
src={person.imageUrl}
|
||||
title={person.name}
|
||||
class="w-14 rounded-full aspect-square"
|
||||
/>
|
||||
{section.name === "socialLinks" && (
|
||||
<div class=" middle-pane-big 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" />
|
||||
@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" />
|
||||
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>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="flex gap-3 lg:gap-6 pt-4 flex-wrap mt-4 mb-14">
|
||||
<a href={core.links.cfp} class="button inverted"
|
||||
><button>Submit your proposal (CfP)</button></a
|
||||
>
|
||||
{section.name === "speakers" && (
|
||||
<div class="middle-pane-medium mt-16">
|
||||
<h1 class="my-6 glitch-text ">Speakers</h1>
|
||||
<SpeakerGrid people={core.people} team={core.teams["core-team"]} />
|
||||
</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">
|
||||
{
|
||||
// filter(p => !core.teams['core-team'].includes(getPersonByGH(p.login)?.id))
|
||||
contributors.items.map((contrib) => (
|
||||
{contributors.items.map((contrib) => (
|
||||
<div>
|
||||
<a href={contrib.html_url} target="_blank" title={contrib.login}>
|
||||
<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 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,236 +2,107 @@
|
|||
import AboutItem from "../components/AboutItem.astro";
|
||||
---
|
||||
|
||||
<div>
|
||||
<AboutItem
|
||||
title="AUDIENCES"
|
||||
subtext="For all of them we are building private platform to discuss and build privavy tooling and research"
|
||||
>
|
||||
<div class="w-full grid grid-cols-2">
|
||||
<div class="flex flex-col gap-[8px] text-white font-bold">
|
||||
<span> General public </span>
|
||||
<span> Projects </span>
|
||||
<span> Startupers</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[8px] text-white font-bold">
|
||||
<span> Developers </span>
|
||||
<span> Audit companies </span>
|
||||
<span> Investors</span>
|
||||
<AboutItem title="RESEARCH" subtext="">
|
||||
<div class="w-full">
|
||||
<div class="flex flex-col gap-[8px]">
|
||||
<p>
|
||||
We cultivate and foster a culture of privacy in web3 making data free
|
||||
and public.
|
||||
</p>
|
||||
<p>
|
||||
Check our annual reports, infographics, privacy awards, newsletter, and
|
||||
guidelines.
|
||||
</p>
|
||||
<a class="button inverted"><button>web3privacy Research</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</AboutItem>
|
||||
<AboutItem
|
||||
title="PLATFORM"
|
||||
subtext="We need to create activation points, that will push community around privacy forward and establish new connections"
|
||||
>
|
||||
<div class="flex flex-col gap-[8px] items-start">
|
||||
<div class="flex gap-[12px] md:items-center items-start w-full">
|
||||
<img src="/icons/query_stats.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-[110px]"
|
||||
>
|
||||
Market stats
|
||||
</span>
|
||||
<span class="md:block hidden">-</span>
|
||||
<span class="text-[1rem] w-full">
|
||||
Like Crunchbase, but free forever
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<AboutItem title="PROJECTS & TOOLS PRODUCTION" subtext="">
|
||||
<p class="mb-5">
|
||||
By developing free and open tools, <br /> we empower people to make informed
|
||||
decisions:
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col gap-5">
|
||||
<div class="flex gap-[12px] md:items-center items-start w-full">
|
||||
<img src="/icons/star_half.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-[140px]"
|
||||
>
|
||||
Privacy Ranking
|
||||
</span>
|
||||
<span class="md:block hidden">-</span>
|
||||
<span class="text-[1rem] w-full">
|
||||
Scoring and review of current privacy projects
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-[12px] md:items-center items-start w-full">
|
||||
<img src="/icons/school.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]">
|
||||
Academy
|
||||
</span>
|
||||
<span class="md:block hidden">-</span>
|
||||
<span class="text-[1rem] w-full"
|
||||
>Education for general public how to reach privacy
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-[12px] md:items-center items-start w-full">
|
||||
<img src="/icons/experiment.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]">
|
||||
Research
|
||||
</span>
|
||||
<span class="md:block hidden">-</span>
|
||||
<span class="text-[1rem] w-full">
|
||||
Anual reports, Frameworks, Tools, Books
|
||||
</span>
|
||||
</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
|
||||
class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center flex-nowrap space-x-5">
|
||||
<span
|
||||
class="font-bold text-white underline"
|
||||
style="text-underline-offset: 4px;"
|
||||
>
|
||||
<span class="font-bold text-white leading-[1rem] w-fit max-w-[140px]">
|
||||
Data
|
||||
PRIVACY EXPLORER
|
||||
</span>
|
||||
<span class="md:block hidden">-</span>
|
||||
<span class="text-[1rem] w-full"
|
||||
</div>
|
||||
<span class="text-[1rem] mt-0 w-full"
|
||||
>For Projects, Use-case list, Market & Funding info
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<img src="/icons/calendar_today.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">
|
||||
Events
|
||||
</span>
|
||||
<span class="md:block hidden">-</span>
|
||||
<span class="text-[1rem] w-full">
|
||||
Meetups, Summits, Hackathons, Camps
|
||||
</span>
|
||||
<div class="flex flex-row space-x-5 w-full">
|
||||
<div>
|
||||
<img src="/icons/experiment.svg" class="inline-block" />
|
||||
</div>
|
||||
</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"
|
||||
>
|
||||
<div>
|
||||
<div class="flex items-center flex-nowrap space-x-5">
|
||||
<span
|
||||
class="font-bold text-white leading-[1rem] w-full max-w-[220px]"
|
||||
class="font-bold text-white underline"
|
||||
style="text-underline-offset: 4px;"
|
||||
>
|
||||
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)
|
||||
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/local_florist.svg" class="inline-block" />
|
||||
<div
|
||||
class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center flex-nowrap space-x-5">
|
||||
<span
|
||||
class="font-bold text-white underline"
|
||||
style="text-underline-offset: 4px;"
|
||||
>
|
||||
<span class="font-bold text-white leading-[1rem] w-fit max-w-[140px]">
|
||||
Incubation
|
||||
WEEK IN PRIVACY
|
||||
</span>
|
||||
<span class="md:block hidden">-</span>
|
||||
<span class="text-[1rem] w-full"
|
||||
>Product managers facilitation, Business sustainability
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<AboutItem title="EDUCATION" subtext="">
|
||||
<div class="w-full">
|
||||
<div class="flex flex-col gap-[8px]">
|
||||
<p>
|
||||
We make privacy accessible for everyone, empowering people to learn and
|
||||
implement best practices effectively.
|
||||
</p>
|
||||
<p>
|
||||
From mentoring at hackathons, guidelines for developers, and the
|
||||
Cypherpunk Academy - we offer training, incubation, and acceleration
|
||||
programs.
|
||||
</p>
|
||||
<a class="button inverted"><button>Privacy Academy</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</AboutItem>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ const eventPoster = getEventPoster(item)
|
|||
}
|
||||
{/*<div class="text-sm"></div>*/}
|
||||
{item.links?.rsvp &&
|
||||
<a href={item.links?.rsvp} class="button inverted"><button>Join</button></a>
|
||||
<a href={item.links?.rsvp} class="button inverted border-2"><button>Join</button></a>
|
||||
}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
142
src/components/EventMasonry.astro
Normal file
142
src/components/EventMasonry.astro
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
---
|
||||
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="middle-pane-big flex flex-wrap lg:flex-nowrap gap-[3px]">
|
||||
{
|
||||
images.slice(0, 4).map((image, index) => (
|
||||
<div class="flex-auto overflow-hidden" key={index}>
|
||||
<img
|
||||
class="object-cover w-full max-h-[223px] cursor-pointer gallery-image"
|
||||
src={image}
|
||||
alt={`Image ${index + 1}`}
|
||||
data-index={index}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="middle-pane-big flex flex-wrap lg:flex-nowrap gap-[3px]">
|
||||
{
|
||||
images.slice(4).map((image, index) => (
|
||||
<div class="flex-auto overflow-hidden" key={index + 4}>
|
||||
<img
|
||||
class="object-cover w-full max-h-[223px] cursor-pointer gallery-image"
|
||||
src={image}
|
||||
alt={`Image ${index + 5}`}
|
||||
data-index={index + 4}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="image-modal hidden fixed inset-0 bg-black flex-col flex items-center justify-center z-50"
|
||||
>
|
||||
<div class="relative modal-content">
|
||||
<button class="absolute top-6 right-0 text-white close-modal z-100"
|
||||
></button
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col" style="width: 54vw; height: 60vh;">
|
||||
<img
|
||||
class="w-full h-full object-contain modal-image"
|
||||
src=""
|
||||
alt="Selected Image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex overflow-x-auto gap-3 mt-4 thumbnails">
|
||||
{
|
||||
images.map((image, index) => (
|
||||
<img
|
||||
key={index}
|
||||
class="w-24 h-24 object-contain cursor-pointer thumbnail-image"
|
||||
src={image}
|
||||
alt={`Thumbnail ${index + 1}`}
|
||||
data-index={index}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let selectedIndex = 0;
|
||||
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",
|
||||
];
|
||||
|
||||
function openModal(index) {
|
||||
selectedIndex = index;
|
||||
updateModalImage();
|
||||
document.querySelector(".image-modal").classList.remove("hidden");
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.querySelector(".image-modal").classList.add("hidden");
|
||||
}
|
||||
|
||||
function updateModalImage() {
|
||||
const imageSrc = images[selectedIndex];
|
||||
document.querySelector(".modal-image").src = imageSrc;
|
||||
}
|
||||
|
||||
function showNextImage() {
|
||||
selectedIndex = (selectedIndex + 1) % images.length;
|
||||
updateModalImage();
|
||||
}
|
||||
|
||||
function showPrevImage() {
|
||||
selectedIndex = (selectedIndex - 1 + images.length) % images.length;
|
||||
updateModalImage();
|
||||
}
|
||||
|
||||
document.querySelectorAll(".gallery-image").forEach((image) => {
|
||||
image.addEventListener("click", (event) => {
|
||||
const index = event.target.getAttribute("data-index");
|
||||
openModal(Number(index));
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelector(".close-modal").addEventListener("click", closeModal);
|
||||
|
||||
document.querySelector(".image-modal").addEventListener("click", (event) => {
|
||||
if (event.target === document.querySelector(".image-modal")) closeModal();
|
||||
});
|
||||
|
||||
document.querySelectorAll(".thumbnail-image").forEach((thumbnail) => {
|
||||
thumbnail.addEventListener("click", (event) => {
|
||||
const index = event.target.getAttribute("data-index");
|
||||
openModal(Number(index));
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "ArrowRight") showNextImage();
|
||||
if (event.key === "ArrowLeft") showPrevImage();
|
||||
if (event.key === "Escape") closeModal();
|
||||
});
|
||||
</script>
|
||||
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>
|
||||
176
src/components/MembershipOtherOptionsWidget.astro
Normal file
176
src/components/MembershipOtherOptionsWidget.astro
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
<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 px-6 z-[10] relative"
|
||||
>
|
||||
<div class="flex flex-col mb-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 z-[10] mb-4">
|
||||
<span class="text-white font-bold text-[18px]"> 2024 </span>
|
||||
<ul class="text-white">
|
||||
<a href="/" class="underline" style="text-underline-offset: 4px;">
|
||||
<li>Privacy</li></a
|
||||
>
|
||||
|
||||
<a href="/" class="underline" style="text-underline-offset: 4px;">
|
||||
<li>Scaling</li></a
|
||||
>
|
||||
<a href="/" class="underline" style="text-underline-offset: 4px;">
|
||||
<li>Exploration</li></a
|
||||
>
|
||||
<a href="/" class="underline" style="text-underline-offset: 4px;">
|
||||
<li>Ethereum</li></a
|
||||
>
|
||||
<a href="/" class="underline" style="text-underline-offset: 4px;">
|
||||
<li>Foundation</li></a
|
||||
>
|
||||
<a href="/" class="underline" style="text-underline-offset: 4px;">
|
||||
<li>Railgun</li></a
|
||||
>
|
||||
<a href="/" class="underline" style="text-underline-offset: 4px;">
|
||||
<li>Payy</li></a
|
||||
>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex flex-col z-[10] mb-4">
|
||||
<span class="text-white font-bold text-[18px] leading-[1.4rem]">
|
||||
2023
|
||||
</span>
|
||||
<p class="text-white leading-widest">
|
||||
<a
|
||||
href="#"
|
||||
class="hover:underline"
|
||||
style="text-underline-offset: 4px;"><span>Zcash</span></a
|
||||
> /
|
||||
<a
|
||||
href="#"
|
||||
class="hover:underline"
|
||||
style="text-underline-offset: 4px;"><span>Firo</span></a
|
||||
> /
|
||||
<a
|
||||
href="#"
|
||||
class="hover:underline"
|
||||
style="text-underline-offset: 4px;"><span>Firn</span></a
|
||||
> /
|
||||
<a
|
||||
href="#"
|
||||
class="hover:underline"
|
||||
style="text-underline-offset: 4px;"
|
||||
><span>Privacy Scaling Exploration</span></a
|
||||
> /
|
||||
<a
|
||||
href="#"
|
||||
class="hover:underline"
|
||||
style="text-underline-offset: 4px;"><span>Railgun</span></a
|
||||
> /
|
||||
<a
|
||||
href="#"
|
||||
class="hover:underline"
|
||||
style="text-underline-offset: 4px;"><span>ENS</span></a
|
||||
> /
|
||||
<a
|
||||
href="#"
|
||||
class="hover:underline"
|
||||
style="text-underline-offset: 4px;"
|
||||
><span>Navio (ex Navcoin)</span></a
|
||||
> /
|
||||
<a
|
||||
href="#"
|
||||
class="hover:underline"
|
||||
style="text-underline-offset: 4px;"><span>Panther</span></a
|
||||
> /
|
||||
<a
|
||||
href="#"
|
||||
class="hover:underline"
|
||||
style="text-underline-offset: 4px;"
|
||||
><span>AragonTKResearch</span></a
|
||||
> /
|
||||
<a
|
||||
href="#"
|
||||
class="hover:underline"
|
||||
style="text-underline-offset: 4px;"
|
||||
><span>Secret Network</span></a
|
||||
> /
|
||||
<a
|
||||
href="#"
|
||||
class="hover:underline"
|
||||
style="text-underline-offset: 4px;"><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>
|
||||
163
src/components/MembershipWidget.astro
Normal file
163
src/components/MembershipWidget.astro
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
---
|
||||
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] pt-2">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-6 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 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>
|
||||
|
||||
<div
|
||||
class="flex relative 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 z-50">
|
||||
<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="absolute 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] pt-2">
|
||||
Organisations
|
||||
</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-6 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="relative 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 z-50"
|
||||
>
|
||||
<div class="flex flex-col justify-end h-full gap-2">
|
||||
<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>
|
||||
<span
|
||||
>Membership for registered non-profit organizations is
|
||||
</span>
|
||||
<span
|
||||
class="text-white font-bold text-[24px] leading-[1.4rem]"
|
||||
>
|
||||
3,000 € / year
|
||||
</span>
|
||||
</div>
|
||||
<a class="button inverted" href={core.links.individual}
|
||||
><button>Request Tier Breakdown</button></a
|
||||
>
|
||||
</div>
|
||||
<img
|
||||
src="/about/image2.png"
|
||||
alt=""
|
||||
class="absolute 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 leading-6 ">{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>
|
||||
|
|
@ -151,11 +151,16 @@ function genHeading(str) {
|
|||
banner && typeof banner !== "object" && (
|
||||
<div class="w-full flex mt-20 sm:mt-32 middle-pane-medium">
|
||||
<div>
|
||||
<div class="w3pn-logo w-64 sm:w-72 lg:w-80 xl:w-96" />
|
||||
{/* <div class="w3pn-logo w-64 sm:w-72 lg:w-80 xl:w-96" /> */}
|
||||
<h1 class="glitch-text-interval text-6xl">
|
||||
web3privacy summit #1
|
||||
</h1>
|
||||
<div class="text-left mt-10">{config.hero.text}</div>
|
||||
<div class="mt-6">
|
||||
<a class="button" href="/about">
|
||||
<button>About Web3Privacy Now</button>
|
||||
<button>
|
||||
<strong>About US</strong>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -165,18 +170,13 @@ function genHeading(str) {
|
|||
{
|
||||
!banner && (
|
||||
<>
|
||||
<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">
|
||||
{/*<img src="/page-events.png" class="h-8 sm:h-14" title="Events" />*/}
|
||||
<pre>
|
||||
<code class="font-mono layout-heading ">
|
||||
{genHeading(title)}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="middle-pane-medium mt-8 sm:mt-14 sm:mb-8">
|
||||
<div class="leading-none flex justify-center mb-3 text-[4px] sm:text-[8px] text-white">
|
||||
<pre>{genHeading(title)}</pre>
|
||||
</div>
|
||||
<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 +188,79 @@ function genHeading(str) {
|
|||
<div
|
||||
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
|
||||
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"
|
||||
>
|
||||
<a href="/" class="w3pn-logo w-32"></a>
|
||||
<a href="/" class="w3pn-logo w-52"></a>
|
||||
<div class="text-md">
|
||||
<a
|
||||
href="https://github.com/web3privacy/web"
|
||||
class="text-white hover:underline">v{pkg.version}</a
|
||||
>
|
||||
</div>
|
||||
<div class="grow flex sm:justify-end">
|
||||
<div class="sm:flex justify-center flex-wrap gap-4 lg:gap-10">
|
||||
</div>
|
||||
|
||||
<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) => (
|
||||
<div class="flex gap-4 items-center menuItem lg:mb-0 mb-2">
|
||||
<div
|
||||
class="icon small opacity-50"
|
||||
class:list={[item.ico]}
|
||||
/>
|
||||
<div class="text-white hover:underline">
|
||||
<a href={item.url || core.links[item.link]}>
|
||||
{item.title}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4">
|
||||
<a href={item.url || core.links[item.link]}>{item.title}</a>
|
||||
</p>
|
||||
</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>
|
||||
|
||||
<!-- Load TextScramble.js -->
|
||||
<script src="/scripts/text-scramble.js" type="module"></script>
|
||||
<script>
|
||||
document.querySelector(".hamburger").addEventListener("click", () => {
|
||||
document.querySelector(".nav-links").classList.toggle("expanded");
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
@ -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="flex flex-col gap-[36px] md:order-2">
|
||||
<div class="md:hidden block mb-[12px] ">
|
||||
<h1>Our mission</h1>
|
||||
<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,58 +92,60 @@ import AboutWidget from "../components/AboutWidget.astro";
|
|||
>
|
||||
</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">
|
||||
<div class="grid grid-cols-2 gap-[8px]">
|
||||
<img src="/about/1.png" alt="" />
|
||||
<img src="/about/2.png" alt="" />
|
||||
<img src="/about/3.png" alt="" />
|
||||
<img src="/about/4.png" alt="" />
|
||||
<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>
|
||||
<a class="button inverted" href={"/events"}
|
||||
><button>EVENTS</button></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:mt-[56px] mt-[26px]">
|
||||
<h1>Our Projects & research</h1>
|
||||
<div set:html={config.landing.research} />
|
||||
<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.projects}
|
||||
><button>Projects</button></a
|
||||
>
|
||||
<a class="button inverted" href={core.links.research}
|
||||
><button>Research</button></a
|
||||
<a class="button inverted" href={core.links.manifesto}
|
||||
><button>Read More</button></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<h1>Topics</h1>
|
||||
<div class="columns-2 uppercase text-sm w3pn-topics">
|
||||
{config.landing.topics.map((topic) => <div>{topic}</div>)}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,48 +1,53 @@
|
|||
---
|
||||
|
||||
import BaseLayout from '../layouts/base.astro';
|
||||
import AboutFooter from '../components/AboutFooter.astro';
|
||||
import core from '../core.json';
|
||||
import articles from '../articles.json';
|
||||
import talks from '../talks.json';
|
||||
import explorer from '../explorer.json';
|
||||
import dbRepo from '../db-repo.json';
|
||||
import { format } from 'date-fns';
|
||||
import EventItem from '../components/EventItem.astro';
|
||||
import { isFutureDate } from '../lib/date';
|
||||
import BaseLayout from "../layouts/base.astro";
|
||||
import AboutFooter from "../components/AboutFooter.astro";
|
||||
import core from "../core.json";
|
||||
import articles from "../articles.json";
|
||||
import talks from "../talks.json";
|
||||
import dbRepo from "../db-repo.json";
|
||||
import { format } from "date-fns";
|
||||
import EventItem from "../components/EventItem.astro";
|
||||
import { isFutureDate } from "../lib/date";
|
||||
import EventMasonry from "../components/EventMasonry.astro";
|
||||
|
||||
const events = core.events;
|
||||
|
||||
const upcomingEvents = []
|
||||
let eventsPast = 0
|
||||
let eventsUpcoming = 0
|
||||
const upcomingEvents = [];
|
||||
let eventsPast = 0;
|
||||
let eventsUpcoming = 0;
|
||||
for (const ev of events) {
|
||||
let future = isFutureDate(ev.date)
|
||||
let future = isFutureDate(ev.date);
|
||||
if (future) {
|
||||
upcomingEvents.push(ev)
|
||||
eventsUpcoming++
|
||||
upcomingEvents.push(ev);
|
||||
eventsUpcoming++;
|
||||
} else {
|
||||
eventsPast++
|
||||
eventsPast++;
|
||||
}
|
||||
}
|
||||
|
||||
const featuredEvents = []
|
||||
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)
|
||||
if (
|
||||
["summit", "meetup", "online-summit"].includes(e.type) &&
|
||||
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="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="title">Events</div>
|
||||
<div class="numbers">
|
||||
|
|
@ -56,15 +61,28 @@ for (const e of upcomingEvents) {
|
|||
</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="flex items-center">
|
||||
<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>
|
||||
<!-- 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>
|
||||
<div class="big">{dbRepo.count}</div>
|
||||
|
|
@ -87,24 +105,38 @@ for (const e of upcomingEvents) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="middle-pane-medium mt-10">
|
||||
<!--div class="mt-10">
|
||||
<h1>Our Projects</h1>
|
||||
</div-->
|
||||
|
||||
<div class="mt-16">
|
||||
<h1>Featured Upcoming Events</h1>
|
||||
<h1>Featured Events</h1>
|
||||
</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">
|
||||
{featuredEvents.map((event) => (
|
||||
<EventItem item={event} />
|
||||
))}
|
||||
{featuredEvents.map((event) => <EventItem item={event} />)}
|
||||
</div>
|
||||
|
||||
<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 class="mt-16">
|
||||
|
|
@ -112,18 +144,30 @@ for (const e of upcomingEvents) {
|
|||
</div>
|
||||
|
||||
<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">
|
||||
<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 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 class="mt-16">
|
||||
|
|
@ -131,28 +175,38 @@ for (const e of upcomingEvents) {
|
|||
</div>
|
||||
|
||||
<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'}}>
|
||||
<a href={entry.url} class="w-full h-full" title={entry.title}></a>
|
||||
{
|
||||
talks.slice(0, 4).map((entry) => (
|
||||
<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 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>
|
||||
|
||||
<AboutFooter />
|
||||
</div>
|
||||
<script is:inline>
|
||||
document.querySelectorAll('.w3pn-hp-grid > div').forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
window.location = el.getAttribute('data-url');
|
||||
document.querySelectorAll(".w3pn-hp-grid > div").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
window.location = el.getAttribute("data-url");
|
||||
});
|
||||
});
|
||||
document.querySelectorAll('.w3pn-articles > div').forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
window.location = el.querySelector('a').getAttribute('href');
|
||||
document.querySelectorAll(".w3pn-articles > div").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
window.location = el.querySelector("a").getAttribute("href");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,30 @@
|
|||
---
|
||||
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"
|
||||
>
|
||||
<div class="middle-pane-medium my-10">
|
||||
<div
|
||||
class="flex items-center justify-center w-full text-center mt-20 mb-20"
|
||||
class="flex items-center justify-center w-full text-center my-12"
|
||||
>
|
||||
<h3 class="max-w-[900px] w-full">
|
||||
for all privacy advocates, projects and companies, we offer a simple and
|
||||
|
|
@ -21,10 +32,114 @@ 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-start 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 middle-pane-medium">
|
||||
<h1 class="my-6 ">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 middle-pane-medium">
|
||||
<h1 class="my-6 ">Community Partners</h1>
|
||||
<MembersGrid people={core.people} team={core.teams["core-team"]} />
|
||||
</div>
|
||||
|
||||
<AboutFooter {sectionsConfig} />
|
||||
</BaseLayout>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue