Skip to content

Commit 15b2792

Browse files
EGAMAGZEGAMAGZ
authored
feat: Added Discord invitation link in the footer and header (as a button) (#11)
* refactor: Added Discord invitation and removed X icon that will no longer be used * refactor: Returned sparkling button with the discord invitation
1 parent 956601e commit 15b2792

File tree

5 files changed

+180
-25
lines changed

5 files changed

+180
-25
lines changed

‎src/components/Footer.astro‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import IconFacebookBrand from "./icons/IconFacebookBrand.astro";
33
import IconInstagramBrand from "./icons/IconInstagramBrand.astro";
44
import IconGithubBrand from "./icons/IconGithubBrand.astro";
5-
import IconXBrand from "./icons/IconXBrand.astro";
65
import IconLinkedInBrand from "./icons/IconLinkedInBrand.astro";
6+
import IconDiscordBrand from "./icons/IconDiscordBrand.astro";
77
---
88

99
<footer class="bg-gray-900 text-white py-6">
@@ -32,5 +32,11 @@ import IconLinkedInBrand from "./icons/IconLinkedInBrand.astro";
3232
aria-label="GitHub">
3333
<IconGithubBrand class="size-6" />
3434
</a>
35+
<a href="https://discord.gg/cyXd37NTbq"
36+
class="text-gray-400 hover:text-white rounded-full p-2 bg-transparent"
37+
target="_blank"
38+
aria-label="Discord">
39+
<IconDiscordBrand class="size-6" />
40+
</a>
3541
</div>
3642
</footer>

‎src/components/icons/IconDiscordBrand.astro‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
interface Props {
3+
class?: string;
4+
}
5+
6+
const { class: className } = Astro.props;
7+
---
8+
<svg
9+
xmlns="http://www.w3.org/2000/svg"
10+
viewBox="0 0 24 24"
11+
fill="none"
12+
stroke="currentColor"
13+
stroke-width="2"
14+
stroke-linecap="round"
15+
stroke-linejoin="round"
16+
class={`icon icon-tabler icons-tabler-outline icon-tabler-brand-discord ${className ?? "size-6"}`}
17+
><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
18+
d="M8 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path
19+
d="M14 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path
20+
d="M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-.972 1.923a11.913 11.913 0 0 0 -4.053 0l-.975 -1.923c-1.5 .16 -3.043 .485 -4.5 1.5c-2 5.667 -2.167 9.833 -1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2 -2 2 -3"
21+
></path><path d="M7 16.5c3.5 1 6.5 1 10 0"></path></svg
22+
>

‎src/components/icons/IconXBrand.astro‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/pages/index.astro‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,15 @@ const events = (await getCollection("events"))
4040
Club de Desarrollo de Software en UPIICSA: Aprendiendo y creciendo
4141
juntos en tecnología.
4242
</p>
43+
<div class="pl-1">
44+
<a
45+
href="https://discord.gg/cyXd37NTbq"
46+
target="_blank"
47+
class="sparkling-btn"
48+
>
49+
Unete a nosotros
50+
</a>
51+
</div>
4352
</div>
4453
</section>
4554
<SectionContainer

‎src/styles/global.css‎

Lines changed: 142 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
@font-face {
44
font-family: "JetBrains Mono";
55
src:
6-
url("/fonts/JetBrainsMono-Light.woff2") format("woff2"),
7-
url("/fonts/JetBrainsMono-Regular.woff2") format("woff2"),
8-
url("/fonts/JetBrainsMono-Thin.woff2") format("woff2");
6+
url("fonts/JetBrainsMono-Light.woff2") format("woff2"),
7+
url("fonts/JetBrainsMono-Regular.woff2") format("woff2"),
8+
url("fonts/JetBrainsMono-Thin.woff2") format("woff2");
99
font-weight: normal;
1010
font-style: normal;
1111
}
@@ -30,6 +30,145 @@ body {
3030
);
3131
}
3232

33+
@keyframes topBubbles {
34+
0% {
35+
background-position:
36+
5% 90%,
37+
10% 90%,
38+
10% 90%,
39+
15% 90%,
40+
25% 90%,
41+
25% 90%,
42+
40% 90%,
43+
55% 90%,
44+
70% 90%;
45+
}
46+
47+
50% {
48+
background-position:
49+
0% 80%,
50+
0% 20%,
51+
10% 40%,
52+
20% 0%,
53+
30% 30%,
54+
22% 50%,
55+
50% 50%,
56+
65% 20%,
57+
90% 30%;
58+
}
59+
60+
100% {
61+
background-position:
62+
0% 70%,
63+
0% 10%,
64+
10% 30%,
65+
20% -10%,
66+
30% 20%,
67+
22% 40%,
68+
50% 40%,
69+
65% 10%,
70+
90% 20%;
71+
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
72+
}
73+
}
74+
75+
@keyframes bottomBubbles {
76+
0% {
77+
background-position:
78+
10% -10%,
79+
30% 10%,
80+
55% -10%,
81+
70% -10%,
82+
85% -10%,
83+
70% -10%,
84+
70% 0%;
85+
}
86+
87+
50% {
88+
background-position:
89+
0% 80%,
90+
20% 80%,
91+
45% 60%,
92+
60% 100%,
93+
75% 70%,
94+
95% 60%,
95+
105% 0%;
96+
}
97+
98+
100% {
99+
background-position:
100+
0% 90%,
101+
20% 90%,
102+
45% 70%,
103+
60% 110%,
104+
75% 80%,
105+
95% 70%,
106+
110% 10%;
107+
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
108+
}
109+
}
110+
111+
.sparkling-btn {
112+
@apply relative inline-block px-6 py-3 rounded-lg border-none text-white
113+
cursor-pointer bg-[#4ca4ca] transition-all duration-[0.2s];
114+
transition-timing-function: ease;
115+
&:active {
116+
transform: scale(0.95);
117+
}
118+
&::before, &::after {
119+
@apply absolute content-[""] w-[150%] left-[50%] h-full translate-x-[-50%]
120+
z-[-1000] bg-no-repeat;
121+
}
122+
&:hover {
123+
&::before {
124+
top: -70%;
125+
background-image:
126+
radial-gradient(circle, #4ca4ca 20%, transparent 20%),
127+
radial-gradient(circle, transparent 20%, #4ca4ca 20%, transparent 30%),
128+
radial-gradient(circle, #4ca4ca 20%, transparent 20%),
129+
radial-gradient(circle, #4ca4ca 20%, transparent 20%),
130+
radial-gradient(circle, transparent 10%, #4ca4ca 15%, transparent 20%),
131+
radial-gradient(circle, #4ca4ca 20%, transparent 20%),
132+
radial-gradient(circle, #4ca4ca 20%, transparent 20%),
133+
radial-gradient(circle, #4ca4ca 20%, transparent 20%),
134+
radial-gradient(circle, #4ca4ca 20%, transparent 20%);
135+
background-size:
136+
10% 10%,
137+
20% 20%,
138+
15% 15%,
139+
20% 20%,
140+
18% 18%,
141+
10% 10%,
142+
15% 15%,
143+
10% 10%,
144+
18% 18%;
145+
background-position: 50% 120%;
146+
animation: topBubbles 0.6s ease;
147+
}
148+
&::after {
149+
bottom: -70%;
150+
background-image:
151+
radial-gradient(circle, #4ca4ca 20%, transparent 20%),
152+
radial-gradient(circle, #4ca4ca 20%, transparent 20%),
153+
radial-gradient(circle, transparent 10%, #4ca4ca 15%, transparent 20%),
154+
radial-gradient(circle, #4ca4ca 20%, transparent 20%),
155+
radial-gradient(circle, #4ca4ca 20%, transparent 20%),
156+
radial-gradient(circle, #4ca4ca 20%, transparent 20%),
157+
radial-gradient(circle, #4ca4ca 20%, transparent 20%);
158+
background-size:
159+
15% 15%,
160+
20% 20%,
161+
18% 18%,
162+
20% 20%,
163+
15% 15%,
164+
20% 20%,
165+
18% 18%;
166+
background-position: 50% 0%;
167+
animation: bottomBubbles 0.6s ease;
168+
}
169+
}
170+
}
171+
33172
.card {
34173
@apply border-solid border-[0.1px] transition-colors ease-in duration-[0.2s];
35174
border-color: rgba(129, 129, 129, 0.19);

0 commit comments

Comments
 (0)