web/src/components/AboutWidget.astro
2024-07-20 15:54:54 +02:00

125 lines
4.3 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
import * as config from "../config.yaml";
import core from "../core.json";
interface Props {
variant?: "about" | "membership";
}
const { variant = "about" } = Astro.props;
---
<div>
<div class="border-4 border-white w-full">
<div class="bg-white w-full text-center px-[16px] text-black">
<h3 style="color:black !important" class="pb-[3px]">
together we are stronger
</h3>
</div>
<div class="grid md:grid-cols-2 grid-cols-1">
<div
class="relative w-full md:border-l-4 border-l-0 md:border-b-0 border-b-4 border-white"
>
<div class="flex flex-col gap-[16px] p-[24px] z-[10]">
<div class="flex flex-col">
<span class="text-white font-bold">INDIVIDUAL</span>
<span class="leading-[1.4rem]"
>Become an integral part of our community! Join us with building
privacy platform we all need.</span
>
</div>
<ul class="list-disc ml-[18px] text-white">
<li>You are supporting good thing!</li>
<li>Guaranteed access to all our events</li>
<li>Privacy swag bundle</li>
<li>Deals from our partners</li>
<li>Voting rights in our association</li>
<li></li>
</ul>
<div
class="flex w-full md:justify-between md:flex-row flex-col gap-[8px] md:items-center"
>
<div class="flex flex-col">
<span>Price</span>
<span class="text-white font-bold text-[18px] leading-[1.4rem]">
€100 / Year
</span>
</div>
<a
class="button"
href={variant === "about"
? "/membership"
: "/membership/individual"}
><button
>{variant === "about" ? "LEARN MORE" : "INDIVIDUAL"}</button
></a
>
</div>
</div>
<img
src="/about/image1.png"
alt=""
class="absolute right-0 bottom-0 z-[-1]"
/>
</div>
<div
class="relative w-full md:border-l-4 border-l-0 md:border-b-0 border-b-4 border-white"
>
<div class="flex flex-col gap-[16px] p-[24px] z-[10]">
<div class="flex flex-col">
<span class="text-white font-bold">ORGANISATION</span>
<span class="leading-[1.4rem]"
>Instead of proposing partnerships for every event and/or
initiative,we decided to implement a continuous membership
approach.</span
>
</div>
<ul class="list-disc ml-[18px] text-white">
<li>Visibility at our Summits, Meetups & Hackathons</li>
<li>Free Tickets & discounts for your partners</li>
<li>
Finding right builders for your beta, product to test or develop
</li>
<li>Speaking and mentoring opportunities</li>
<li>Raise awareness within specific inputs</li>
<li>Engage target audience</li>
</ul>
<div
class="flex w-full md:justify-between md:flex-row flex-col gap-[8px] md:items-center"
>
<div class="flex flex-col">
<span>Price</span>
<span class="text-white font-bold text-[18px] leading-[1.4rem]">
Variable tiers
</span>
</div>
<a
class="button"
href={variant === "about"
? "/membership"
: "/membership/organisation"}
><button
>{variant === "about" ? "LEARN MORE" : "ORGANISATION"}</button
></a
>
</div>
</div>
<img
src="/about/image2.png"
alt=""
class="absolute right-0 bottom-0 z-[-1]"
/>
</div>
</div>
</div>
<a href={core.links.donate} target="_blank">
<span
class="text-white md:text-center text-left w-full flex md:items-center justify-center mt-[24px]"
>
<span class="flex md:items-center items-start gap-[8px]">
<img src="/icons/gift.svg" alt="" class="md:mt-[0px] mt-[4px]" />
Or if you like our ideas and community you can privately donate via Ethereum
/ Bitcoin / Monero or support us on Gitcoin Grants
</span>
</span>
</a>
</div>