Skip to content

Commit

Permalink
Port to tailwind & make dynamic
Browse files Browse the repository at this point in the history
  • Loading branch information
@versecafe @ADKaster
versecafe authored and ADKaster committed Jul 9, 2024
1 parent 31b5a8a commit 0923845
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 160 deletions.
144 changes: 76 additions & 68 deletions src/components/landing/sponsors.astro
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,82 @@
<section class="sponsors" id="sponsors">
---
const sponsors = [
{
name: "Platinum",
sponsors: [
{
name: "Shopify",
href: "https://www.shopify.com/",
logo: "/assets/img/sponsor-shopify.svg",
},
],
},
{
name: "Silver",
sponsors: [
{
name: "Packet Clearing House",
href: "https://www.pch.net/",
logo: "/assets/img/sponsor-pch.svg",
},
{
name: "Null Games",
href: "https://www.null.com/",
logo: "/assets/img/sponsor-null.svg",
},
{
name: "Playbit",
href: "https://www.playb.it/",
logo: "/assets/img/sponsor-playbit.svg",
},
{
name: "ohne-makler.net",
href: "https://www.ohne-makler.net/",
logo: "/assets/img/sponsor-ohne-makler.svg",
},
],
},
{
name: "Bronze",
sponsors: [
{
name: "Tuple",
href: "https://www.tuple.app/",
logo: "/assets/img/sponsor-tuple.svg",
},
],
},
];
---

<section class="relative mb-24 px-5 lg:mb-28" id="sponsors">
<div class="sponsors__eclipse-big"></div>
<div class="sponsors__eclipse-medium"></div>
<div class="container">
<h2 class="text-center">Sponsors</h2>
<div class="sponsors__wrapper">
<div class="sponsors__block">
<div class="sponsors__title">
<span class="sponsors__title-line"></span>
<span class="sponsors__title-text">Platinum</span>
<span class="sponsors__title-line"></span>
</div>
<div class="sponsors__grid">
<div class="sponsors__grid-item">
<a href="https://www.shopify.com/"
><img src="/assets/img/sponsor-shopify.svg" alt="Shopify" /></a
>
</div>
</div>
</div>

<div class="sponsors__block">
<div class="sponsors__title">
<span class="sponsors__title-line"></span>
<span class="sponsors__title-text">Silver</span>
<span class="sponsors__title-line"></span>
</div>
<div class="sponsors__grid">
<div class="sponsors__grid-item">
<a href="https://www.pch.net/"
><img
src="/assets/img/sponsor-pch.svg"
alt="Packet Clearing House"
/></a
>
</div>
<div class="sponsors__grid-item">
<a href="https://www.null.com/"
><img src="/assets/img/sponsor-null.svg" alt="Null Games" /></a
>
</div>
<div class="sponsors__grid-item">
<a href="https://www.playb.it/"
><img src="/assets/img/sponsor-playbit.svg" alt="Playbit" /></a
>
</div>
<div class="sponsors__grid-item">
<a href="https://www.ohne-makler.net/"
><img
src="/assets/img/sponsor-ohne-makler.svg"
alt="ohne-makler.net"
/></a
>
</div>
</div>
</div>

<div class="sponsors__block">
<div class="sponsors__title">
<span class="sponsors__title-line"></span>
<span class="sponsors__title-text">Bronze</span>
<span class="sponsors__title-line"></span>
</div>
<div class="sponsors__grid">
<div class="sponsors__grid-item">
<a href="https://www.tuple.app/"
><img src="/assets/img/sponsor-tuple.svg" alt="Tuple" /></a
>
<h2 class="text-center mb-12">Sponsors</h2>
{
sponsors.map((tier) => {
return (
<div class="mb-[64px] relative">
<div class="flex items-center mb-6">
<span class="block w-full h-[1px] bg-[#d3d2d6]" />
<span class="text-2xl font-semibold px-5">{tier.name}</span>
<span class="block w-full h-[1px] bg-[#d3d2d6]" />
</div>
<div class="flex flex-wrap items-center justify-center gap-4">
{tier.sponsors.map((sponsor) => {
return (
<div class="relative flex items-center justify-center min-h-[102px] border-[6px] border-[#fff] rounded-[30px] shadow-[0_0_8px_0_rgba(202,205,226,0.38)] p-4">
<a href={sponsor.href}>
{" "}
<img src={sponsor.logo} alt={sponsor.name} />{" "}
</a>
</div>
);
})}
</div>
</div>
</div>
</div>
</div>
);
})
}
</div>
</section>
92 changes: 0 additions & 92 deletions src/styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -694,18 +694,6 @@ a {
}
}

.sponsors {
position: relative;
margin-bottom: 100px;
padding: 0 20px;
}

@media (min-width: 768px) {
.sponsors {
margin-bottom: 114px;
}
}

.sponsors__eclipse-big {
position: absolute;
top: -200px;
Expand Down Expand Up @@ -733,86 +721,6 @@ a {
display: block;
}

.sponsors h2 {
color: #000;
margin-bottom: 50px;
}

.sponsors__block {
margin-bottom: 64px;
position: relative;
}

.sponsors__title {
display: flex;
align-items: center;
margin-bottom: 24px;
}

.sponsors__title-text {
font-size: 24px;
font-weight: 600;
line-height: 150%;
letter-spacing: 0.2px;
padding: 0 20px;
}

.sponsors__title-line {
width: 100%;
height: 1px;
background: #d3d2d6;
display: block;
}

.sponsors__grid {
display: flex;
flex-wrap: wrap;
align-content: center;
grid-template-columns: 1fr 1fr;
gap: 16px;
justify-content: center;
}

.sponsors__grid-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 102px;
border: 6px solid #fff;
border-radius: 30px;
box-shadow: 0 0 8px 0 rgba(202, 205, 226, 0.3803921569);
padding: 16px;
}

.sponsors__grid-small {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}

.sponsors__grid-small-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 70px;
max-height: 70px;
border: 6px solid #fff;
border-radius: 30px;
padding: 16px;
box-shadow: 0 0 8px 0 rgba(202, 205, 226, 0.3803921569);
}

.sponsors__grid-small-item > span {
font-weight: 600;
background-image: linear-gradient(#6d98cc, #8a64e5);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.faq {
position: relative;
padding: 0 20px 140px 20px;
Expand Down

0 comments on commit 0923845

Please sign in to comment.