refactor: 'JoinCommunity' component is now tailwind

This commit is contained in:
Juan Di Toro 2023-08-15 17:21:42 +02:00
parent d4f198be25
commit 6468471299
5 changed files with 44 additions and 25 deletions

View File

@ -2,7 +2,7 @@
// import './Legal.scss';
---
<section id="legal" class="mx-20 lg:mx-40">
<section id="legal" class="mx-20 lg:mx-40 pb-40">
<h2 class="text-3xl lg:text-4xl font-display my-10">Tax and Legal</h2>
<p class="text-lg lg:text-xl font-body text-body my-5">
<strong

View File

@ -190,7 +190,7 @@ await addCurrency(
src={currency.qrSmall}
/>
</div>
<div class="flex flex-row-reverse px-5 py-2 rounded-md text-body items-start justify-between">
<div class="flex flex-row-reverse px-5 py-2 rounded-md text-body items-start justify-between mt-4">
<button
id="copy-address"
class="w-7 h-7 bg-gray-500"

View File

@ -1,38 +1,54 @@
---
import './JoinCommunity.scss';
// import "./JoinCommunity.scss";
import svgGit from '/src/assets/icons/git.svg?raw';
import svgGithub from '/src/assets/icons/github.svg?raw';
import svgDiscord from '/src/assets/icons/discord.svg?raw';
import svgTwitter from '/src/assets/icons/twitter.svg?raw';
import svgGit from "/src/assets/icons/git.svg?raw";
import svgGithub from "/src/assets/icons/github.svg?raw";
import svgDiscord from "/src/assets/icons/discord.svg?raw";
import svgTwitter from "/src/assets/icons/twitter.svg?raw";
---
<section id="join-community">
<div>
<h2>
<section
id="join-community"
class="bg-primary space-between text-black p-20 lg:px-40 flex flex-col lg:flex-row"
>
<div class="w-full">
<h2 class="text-3xl font-bold lg:text-4xl font-display">
Join our community, lend a hand.
</h2>
<p>
<p class="text-xl lg:text-2xl font-body">
Web3 gives people control over their data, privacy, and ownership.
</p>
</div>
<div>
<a href="https://git.lumeweb.com" title="Git" class="git-logo">
<Fragment set:html={svgGit} />
</a>
</div>
<div>
<a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
<div class="flex flex-row gap-14">
<a
href="https://git.lumeweb.com"
title="Git"
class="w-16 h-16 text-blue-charcoal hover:text-black transition-colors duration-200 cursor-pointer"
>
<Fragment set:html={svgGit} />
</a>
<a
href="https://github.com/LumeWeb"
title="GitHub"
class="w-16 h-16 text-blue-charcoal hover:text-black transition-colors duration-200 cursor-pointer"
>
<Fragment set:html={svgGithub} />
</a>
</div>
<div>
<a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
<a
href="https://discord.gg/qpC8ADp3rS"
title="Discord"
class="mt-2 w-16 h-16 text-blue-charcoal hover:text-black transition-colors duration-200 cursor-pointer"
>
<Fragment set:html={svgDiscord} />
</a>
</div>
<div>
<a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
<a
href="https://twitter.com/lumeweb3"
title="Twitter"
class="w-16 h-16 text-blue-charcoal hover:text-black transition-colors duration-200 cursor-pointer"
>
<Fragment set:html={svgTwitter} />
</a>
</div>

View File

@ -41,7 +41,8 @@
--color-aquamarine: #7afcbb;
--color-dark-aquamarine: #1F4A3D;
--color-gray: #C7C7C7;
--color-blue-charcoal: #020e10;
--color-charcoal: #020e10;
--color-blue-charcoal: #0B3F48;
}
html {

View File

@ -9,6 +9,8 @@ module.exports = {
"dark-aquamarine": 'var(--color-dark-aquamarine)',
body: 'var(--color-gray)',
"gradient-aqua": "linear-gradient(to right, var(--color-dark-aquamarine), var(--color-aquamarine))",
"blue-charcoal": 'var(--color-blue-charcoal)',
"charcoal": 'var(--color-charcoal)',
}
},
fontFamily: {