Skip to content

Commit fd4b43e

Browse files
vinzvincivinzvinci
authored
Merge pull request #36 from web3community/feat-custom-fonts
feat: custom fonts
2 parents 7a9d4a3 + 048093b commit fd4b43e

4 files changed

Lines changed: 175 additions & 42 deletions

File tree

‎src/layouts/Default.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ let { metaTitle } = Astro.props;
2020
<!-- TODO: <meta property="og:image" content="" /> -->
2121
</head>
2222

23-
<body class="text-gray-900">
23+
<body class="text-gray-900 font-body">
2424
<nav class="bg-white flex items-center justify-evenly w-screen h-20 fixed">
2525
<a href="https://devprotocol.xyz" class="text-gray-900">
2626
<img src="/assets/logo.png" alt="DevProtocol" class="max-h-8">

‎src/pages/index.astro‎

Lines changed: 127 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,76 +3,163 @@ import Layout from '../layouts/Default.astro';
33
---
44

55
<Layout metaTitle="Home | DevProtocol">
6-
<header class="flex flex-col items-center justify-center text-center text-lg pt-24 pb-20">
6+
<header
7+
class="
8+
flex flex-col
9+
items-center
10+
justify-center
11+
text-center text-lg
12+
pt-24
13+
pb-20
14+
"
15+
>
716
<a href="http://stakes.social/" class="mt-2">
8-
<button class="bg-pink-500 text-white py-2 px-4 rounded">Join now!</button>
9-
<img src="/assets/hand.png" alt="" class="ml-20 -mt-6 max-h-32">
17+
<button class="text-white py-2 px-4 rounded" style="background:#D500E6;">
18+
Join now!
19+
</button>
20+
<img src="/assets/hand.png" alt="" class="ml-20 -mt-6 max-h-32" />
1021
</a>
11-
<h2 class="font-black text-6xl my-6">Decentralized Creator Economy</h2>
12-
<p class="max-w-prose my-6">Everything Creators need to grow their business: monetization, governance, and community is right here. Dev Protocol is easy to start with no knowledge of blockchain. Welcome to the new ecosystem for Creators and for Patrons!</p>
22+
<h2 class="font-black font-display text-6xl my-6">
23+
Decentralized Creator Economy
24+
</h2>
25+
<p class="max-w-prose my-6">
26+
Everything creators need to grow their business: monetization, governance,
27+
and community is right here. Dev Protocol is easy to start with no
28+
knowledge of blockchain. Welcome to the new ecosystem for creators and
29+
patrons!
30+
</p>
1331
</header>
14-
<section class="flex flex-col items-center justify-center text-center text-lg pb-20">
32+
<section
33+
class="flex flex-col items-center justify-center text-center text-lg pb-20"
34+
>
1535
<a class="flex w-auto items-center">
16-
<img src="/assets/creator.png" alt="" class="max-h-56 ml-52">
17-
<p class="text-gray-400 ml-4 font-mono">Creative space by <br> White Russian Studio</p>
36+
<img src="/assets/creator.png" alt="" class="max-h-56 ml-52" />
37+
<p class="text-gray-400 ml-4 font-mono">
38+
Creative space by <br />
39+
White Russian Studio
40+
</p>
1841
</a>
19-
<h3 class="font-black text-3xl mt-4">Decentralized Creator Economy</h3>
20-
<p class="max-w-prose my-6">Dev Protocol offers a revolutionary and powerful solutions to grow and manage your business with blockchain. You can prove the ownership of your works and raise its revenue through support from the community. Let's start your creator economy today.</p>
21-
<a href="https://docs.devprotocol.xyz/en/stakes-social/onboard-guide/" class="underline font-bold">Know More</a>
42+
<h3 class="font-black font-display text-3xl mt-4">
43+
Decentralized Creator Economy
44+
</h3>
45+
<p class="max-w-prose my-6">
46+
Dev Protocol offers a revolutionary and powerful solution to grow and
47+
manage your business with blockchain. You can prove the ownership of your
48+
works and raise its revenue through support from the community. Let's start
49+
your creator economy today.
50+
</p>
51+
<a
52+
href="https://docs.devprotocol.xyz/en/stakes-social/onboard-guide/"
53+
class="underline font-bold"
54+
>Know More</a
55+
>
2256
<a href="https://stakes.social/create" class="mt-6">
23-
<button class="bg-black text-white py-2 px-6 rounded">Submit a project</button>
57+
<button class="bg-black text-white py-2 px-6 rounded">
58+
Submit a project
59+
</button>
2460
</a>
2561
</section>
2662
<hr class="mx-auto bg-gray-300 rounded h-1 mb-16" />
2763
<!-- TODO: Convert the below code to a slider of success stories -->
28-
<section class="flex flex-col items-center justify-center text-center text-lg pb-20">
29-
<p class="font-mono text-base mb-4 text-gray-400">Creator Success Stories</p>
30-
<h3 class="font-black text-3xl my-8">Staking is Stronger Than Donation</h3>
31-
<img src="/assets/vyper.png" alt="" class="max-h-56">
64+
<section
65+
class="flex flex-col items-center justify-center text-center text-lg pb-20"
66+
>
67+
<p class="font-mono text-base mb-4 text-gray-400">
68+
Creator Success Stories
69+
</p>
70+
<h3 class="font-black font-display text-3xl my-8">
71+
Staking is Stronger Than Donation
72+
</h3>
73+
<img src="/assets/vyper.png" alt="" class="max-h-56" />
3274
<p class="underline font-bold mt-6 font-mono">Vyper</p>
33-
<p class="max-w-prose my-6">Vyper is a Python-like language for writing EVM smart contracts. Vyper is used in Uniswap v1 and CurveFinance contracts. They had trouble collecting donations even though they were bringing in a lot of revenue for many blockchain projects. They raised $44,000 in donations in two years with GitCoin, and received $125,000 in compensation in one year with Dev Protocol.</p>
75+
<p class="max-w-prose my-6">
76+
Vyper is a Python-like language for writing EVM smart contracts. Vyper is
77+
used in Uniswap v1 and CurveFinance contracts. They had trouble collecting
78+
donations even though they were bringing in a lot of revenue for many
79+
blockchain projects. They raised $44,000 in donations in two years with
80+
GitCoin, and received $125,000 in compensation in one year with Dev
81+
Protocol.
82+
</p>
3483
<p class="font-mono text-base text-gray-400">1/10</p>
3584
</section>
36-
<section class="flex flex-col items-center justify-center text-center text-lg pb-20">
85+
<section
86+
class="flex flex-col items-center justify-center text-center text-lg pb-20"
87+
>
3788
<a class="flex w-auto items-center">
38-
<img src="/assets/patron.png" alt="" class="max-h-56 ml-52">
39-
<p class="text-gray-400 ml-4 font-mono">Creative space by <br> White Russian Studio</p>
89+
<img src="/assets/patron.png" alt="" class="max-h-56 ml-52" />
90+
<p class="text-gray-400 ml-4 font-mono">
91+
Creative space by <br />
92+
White Russian Studio
93+
</p>
4094
</a>
41-
<h3 class="font-black text-3xl my-4">Hi, Patron!</h3>
42-
<p class="max-w-prose my-6">Ever given up buying the work of your favorite creators for financial reasons? The Dev Protocol has made possible the opportunity for you to earn cryptos while supporting the creators. Welcome to the new Symbiotic Economy with creators!</p>
43-
<a href="https://docs.devprotocol.xyz/en/stakes-social/how-to-stake/" class="underline font-bold">Know More</a>
95+
<h3 class="font-black font-display text-3xl my-4">Hi, Patron!</h3>
96+
<p class="max-w-prose my-6">
97+
Ever given up buying the work of your favorite creators for financial
98+
reasons? The Dev Protocol has made possible the opportunity for you to
99+
earn cryptos while supporting the creators. Welcome to the new Symbiotic
100+
Economy with creators!
101+
</p>
102+
<a
103+
href="https://docs.devprotocol.xyz/en/stakes-social/how-to-stake/"
104+
class="underline font-bold"
105+
>Know More</a
106+
>
44107
<a href="https://stakes.social/" class="mt-6">
45-
<button class="bg-black text-white py-2 px-6 rounded">Start Staking</button>
108+
<button class="bg-black text-white py-2 px-6 rounded">
109+
Start Staking
110+
</button>
46111
</a>
47112
</section>
48113
<hr class="mx-auto bg-gray-300 rounded h-1 mb-16" />
49-
<section class="flex flex-col items-center justify-center text-center text-lg pb-20">
114+
<section
115+
class="flex flex-col items-center justify-center text-center text-lg pb-20"
116+
>
50117
<p class="text-gray-400 ml-4 font-mono">Seleted Projects</p>
51118
<!-- TODO: Add the selected projects cards, dynamically -->
52119
</section>
53-
<section class="flex flex-col items-center justify-center text-center text-lg pb-20">
54-
<p class="font-mono text-base mb-4 text-gray-400">Creator Success Stories</p>
55-
<h3 class="font-black text-3xl my-8">DEV Token</h3>
56-
<img src="/assets/devtoken.png" alt="" class="max-h-56">
57-
<a href="https://etherscan.io/token/0x5cAf454Ba92e6F2c929DF14667Ee360eD9fD5b26"><p class="underline font-bold mt-6 font-mono">View on Etherscan</p></a>
58-
<p class="max-w-prose my-6">DEV is an inflationary token that is rewarded to patrons and OSS projects for being active participants in the Dev Protocol ecosystem. The Dev Protocol inflation rate for minting is determined by the total amount of DEV staked versus OSS projects onboarded. The result is a sustainable counter-balance system.</p>
59-
<a href="https://app.uniswap.org/#/swap?outputCurrency=0x5caf454ba92e6f2c929df14667ee360ed9fd5b26&use=V2" class="mt-6">
120+
<section
121+
class="flex flex-col items-center justify-center text-center text-lg pb-20"
122+
>
123+
<p class="font-mono text-base mb-4 text-gray-400">
124+
Creator Success Stories
125+
</p>
126+
<h3 class="font-black font-display text-3xl my-8">DEV Token</h3>
127+
<img src="/assets/devtoken.png" alt="" class="max-h-56" />
128+
<a
129+
href="https://etherscan.io/token/0x5cAf454Ba92e6F2c929DF14667Ee360eD9fD5b26"
130+
><p class="underline font-bold mt-6 font-mono">View on Etherscan</p></a
131+
>
132+
<p class="max-w-prose my-6">
133+
DEV is an inflationary token that is rewarded to patrons and OSS projects
134+
for being active participants in the Dev Protocol ecosystem. The Dev
135+
Protocol inflation rate for minting is determined by the total amount of
136+
DEV staked versus OSS projects onboarded. The result is a sustainable
137+
counter-balance system.
138+
</p>
139+
<a
140+
href="https://app.uniswap.org/#/swap?outputCurrency=0x5caf454ba92e6f2c929df14667ee360ed9fd5b26&use=V2"
141+
class="mt-6"
142+
>
60143
<button class="bg-black text-white py-2 px-6 rounded">Buy Dev</button>
61144
</a>
62145
</section>
63146
<section class="bg-gray-100 flex justify-evenly items-center">
64-
<a href="#"><img src="/assets/sios.png" alt="Sios"></a>
65-
<a href="#"><img src="/assets/hashub.png" alt="Hashhub"></a>
66-
<a href="#"><img src="/assets/msstartups.png" alt="Microsoft for startups"></a>
67-
<a href="#"><img src="/assets/miraise.png" alt="Miraise"></a>
68-
<a href="#"><img src="/assets/monexventures.png" alt="Monex Ventures"></a>
147+
<a href="#"><img src="/assets/sios.png" alt="Sios" /></a>
148+
<a href="#"><img src="/assets/hashub.png" alt="Hashhub" /></a>
149+
<a href="#"
150+
><img src="/assets/msstartups.png" alt="Microsoft for startups"
151+
/></a>
152+
<a href="#"><img src="/assets/miraise.png" alt="Miraise" /></a>
153+
<a href="#"><img src="/assets/monexventures.png" alt="Monex Ventures" /></a>
69154
</section>
70155
<section class="bg-blue-500 px-20 py-28">
71-
<p class="font-base text-gray-100">Latest on Medium</p>
156+
<p class="font-display text-3xl text-gray-100">Latest on Medium</p>
72157
<!-- TODO: Find a way to add medium articles dynamically -->
73158
<a href="/devtokens" class="mt-6 mx-auto block">
74-
<button class="bg-white text-gray-900 py-2 px-6">See more on Medium</button>
75-
</a>
159+
<button class="bg-white font-display text-gray-900 py-2 px-6">
160+
See more on Medium
161+
</button>
162+
</a>
76163
</section>
77164
<footer class="flex bg-black text-white">
78165
<!-- TODO: Get the links for the socials from @vinzvinci and add them -->

‎src/styles/global.css‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,42 @@
1+
@font-face {
2+
font-family: "Whyte";
3+
src: url("https://devstaticasset.azureedge.net/font/ABCWhyte-Regular.woff2")
4+
format("woff2");
5+
font-style: normal;
6+
font-weight: 400;
7+
font-display: swap;
8+
}
9+
10+
@font-face {
11+
font-family: "WhyteInktrap";
12+
src: url("https://devstaticasset.azureedge.net/font/ABCWhyteInktrap-Bold.woff2")
13+
format("woff2");
14+
font-style: bold;
15+
font-weight: 900;
16+
font-display: swap;
17+
}
18+
19+
@font-face {
20+
font-family: "WhyteInktrap";
21+
src: url("https://devstaticasset.azureedge.net/font/ABCWhyteInktrap-Regular.woff2")
22+
format("woff2");
23+
font-style: normal;
24+
font-weight: 400;
25+
font-display: swap;
26+
}
27+
28+
@font-face {
29+
font-family: "IBM Plex Mono";
30+
font-style: normal;
31+
font-weight: 400;
32+
font-display: swap;
33+
src: url(https://fonts.gstatic.com/s/ibmplexmono/v7/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2)
34+
format("woff2");
35+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
36+
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
37+
U+FEFF, U+FFFD;
38+
}
39+
140
@tailwind base;
241
@tailwind components;
3-
@tailwind utilities;
42+
@tailwind utilities;

‎tailwind.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
module.exports = {
22
mode: "jit",
33
purge: ["./public/**/*.html", "./src/**/*.{astro,js,jsx,svelte,ts,tsx,vue}"],
4+
theme: {
5+
fontFamily: {
6+
'mono': ['IBM Plex Mono', 'monospace'],
7+
'display': ['WhyteInktrap', "sans-serif"],
8+
'body': ['"Whyte"', "sans-serif"],
9+
}
10+
}
411
};

0 commit comments

Comments
 (0)