Skip to content

Commit 4b0f6ff

Browse files
gustavoquinalhagustavoquinalha
committed
-q
1 parent 37b2af9 commit 4b0f6ff

File tree

5 files changed

+326
-108
lines changed

5 files changed

+326
-108
lines changed

‎src/components/About.astro

Lines changed: 102 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,109 @@
11
---
2-
2+
import { Image } from "astro:assets";
3+
import Image1 from "../../public/1.jpg";
4+
import Image2 from "../../public/2.jpg";
5+
import Image3 from "../../public/3.jpg";
6+
import Image4 from "../../public/4.jpg";
7+
import Image5 from "../../public/5.jpg";
38
---
49

5-
<div class="max-w-7xl w-full mx-auto py-20">
6-
<div class="flex flex-col justify-center items-center bg-green-600 w-full rounded-xl shadow-lg">
7-
<div class="flex flex-col gap-8 w-full max-w-7xl mx-auto p-8 md:p-20">
8-
<h1 class="text-2xl md:text-4xl font-black text-neutral-900">
9-
Faça parte da maior comunidade do Paraná
10-
</h1>
11-
<p class="text-base md:text-xl text-neutral-800">
12-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut ipsa culpa veritatis qui ullam harum impedit voluptates velit? Accusantium sapiente illum cum, porro consequatur libero alias voluptatem voluptatum neque illo!
13-
</p>
14-
<div class="flex">
15-
<a
16-
href=""
17-
class="cursor-pointer rounded-full font-semibold leading-6 whitespace-nowrap block text-center bg-neutral-900 hover:bg-green-600 text-white text-base px-8 py-4 uppercase"
18-
>
19-
Entrar na comunidade
20-
</a>
10+
<div id="about" class="max-w-7xl w-full mx-auto py-20 about">
11+
<div
12+
class="flex flex-col lg:flex-row justify-center items-center w-full gap-8"
13+
>
14+
<div class="w-full flex flex-col gap-4 about-images">
15+
<div class="flex justify-center items-end gap-4">
16+
<Image
17+
src={Image2}
18+
id="about-image-1"
19+
class="about-image-1 rounded-xl border-2 border-green-600 h-60 w-60 object-cover object-center"
20+
alt=""
21+
/>
22+
<Image
23+
src={Image1}
24+
id="about-image-2"
25+
class="about-image-2 rounded-xl border-2 border-green-600 h-80 w-60 object-cover object-bottom"
26+
alt=""
27+
/>
28+
</div>
29+
<div class="flex justify-center items-start gap-4">
30+
<Image
31+
src={Image3}
32+
id="about-image-3"
33+
class="about-image-3 rounded-xl border-2 border-green-600 h-44 w-44 object-cover object-center"
34+
alt=""
35+
/>
36+
<Image
37+
src={Image4}
38+
id="about-image-4"
39+
class="about-image-4 rounded-xl border-2 border-green-600 h-80 w-60 object-cover object-center"
40+
alt=""
41+
/>
42+
<Image
43+
src={Image5}
44+
id="about-image-5"
45+
class="about-image-5 rounded-xl border-2 border-green-600 h-40 w-60 object-cover object-center"
46+
alt=""
47+
/>
48+
</div>
49+
</div>
50+
51+
<div class="w-full flex flex-col gap-8 text-about">
52+
<div
53+
class="flex flex-col text-2xl md:text-4xl lg:text-6xl font-black text-white text-left"
54+
>
55+
<span class="md:whitespace-nowrap">Conheça mais sobre</span>
56+
<span class="text-green-600 md:whitespace-nowrap">o DevParaná</span>
57+
</div>
58+
59+
<span class="text-white/80 text-base font-thin leading-7">
60+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi minus
61+
sit, earum assumenda iste obcaecati blanditiis. Consequatur laudantium
62+
cumque consectetur at quis? Nostrum magni obcaecati eius ipsum adipisci,
63+
excepturi aperiam.
64+
</span>
65+
66+
<div class="flex gap-4 justify-between items-start">
67+
68+
<span class="flex flex-col justify-center items-center text-center">
69+
<div class="font-bold text-2xl text-green-600">400+</div>
70+
<div class="font-bold text-base text-white">Usuários</div>
71+
</span>
72+
73+
<span class="flex flex-col justify-center items-center text-center">
74+
<div class="font-bold text-2xl text-green-600">600%</div>
75+
<div class="font-bold text-base text-white">Investment</div>
76+
</span>
77+
78+
<span class="flex flex-col justify-center items-center text-center">
79+
<div class="font-bold text-2xl text-green-600">100k</div>
80+
<div class="font-bold text-base text-white">Downloads</div>
81+
</span>
82+
83+
<span class="flex flex-col justify-center items-center text-center">
84+
<div class="font-bold text-2xl text-green-600">2000+</div>
85+
<div class="font-bold text-base text-white">Reviews</div>
86+
</span>
87+
2188
</div>
2289
</div>
2390
</div>
2491
</div>
92+
93+
<style>
94+
.about-image-1 {
95+
z-index: 50 !important;
96+
}
97+
.about-image-2 {
98+
z-index: 3 !important;
99+
}
100+
.about-image-3 {
101+
z-index: 10 !important;
102+
}
103+
.about-image-4 {
104+
z-index: 2 !important;
105+
}
106+
.about-image-5 {
107+
z-index: 1 !important;
108+
}
109+
</style>

‎src/components/Counter.astro

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<script>
2+
function iniciarContador(dataFinal: any) {
3+
const intervalo = setInterval(function () {
4+
const agora = new Date().getTime();
5+
const distancia = dataFinal - agora;
6+
7+
const dias = Math.floor(distancia / (1000 * 60 * 60 * 24));
8+
const horas = Math.floor(
9+
(distancia % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
10+
);
11+
const minutos = Math.floor((distancia % (1000 * 60 * 60)) / (1000 * 60));
12+
const segundos = Math.floor((distancia % (1000 * 60)) / 1000);
13+
14+
document.getElementById("days")!.innerHTML = dias.toString();
15+
document.getElementById("hours")!.innerHTML = horas.toString();
16+
document.getElementById("minutes")!.innerHTML = minutos.toString();
17+
document.getElementById("seconds")!.innerHTML = segundos.toString();
18+
19+
if (distancia < 0) {
20+
clearInterval(intervalo);
21+
document.getElementById("counter")!.innerHTML = "EXPIRADO";
22+
}
23+
}, 1000);
24+
}
25+
26+
const dataFinal = new Date("Jun 7, 2024 15:37:25").getTime();
27+
28+
iniciarContador(dataFinal);
29+
</script>
30+
31+
<div class="w-full mx-auto max-w-7xl">
32+
<div
33+
class="grid grid-cols-4 justify-center items-center gap-2 md:gap-4"
34+
id="counter"
35+
>
36+
<div
37+
class="w-full rounded-lg min-h-32 p-6 border border-green-600/50 bg-green-800/10 text-white flex flex-col justify-center items-center text-center"
38+
>
39+
<div
40+
class="text-2xl md:text-4xl lg:text-6xl font-bold text-green-600"
41+
id="days"
42+
>
43+
12
44+
</div>
45+
<span class="text-lg md:text-xl lg:text-2xl font-normal">Dias</span>
46+
</div>
47+
48+
<div
49+
class="w-full rounded-lg min-h-32 p-6 border border-green-600/50 bg-green-800/10 text-white flex flex-col justify-center items-center text-center"
50+
>
51+
<div
52+
class="text-2xl md:text-4xl lg:text-6xl font-bold text-green-600"
53+
id="hours"
54+
>
55+
04
56+
</div>
57+
<span class="text-lg md:text-xl lg:text-2xl font-normal">Horas</span>
58+
</div>
59+
60+
<div
61+
class="w-full rounded-lg min-h-32 p-6 border border-green-600/50 bg-green-800/10 text-white flex flex-col justify-center items-center text-center"
62+
>
63+
<div
64+
class="text-2xl md:text-4xl lg:text-6xl font-bold text-green-600"
65+
id="minutes"
66+
>
67+
43
68+
</div>
69+
<span class="text-lg md:text-xl lg:text-2xl font-normal">Min</span>
70+
</div>
71+
72+
<div
73+
class="w-full rounded-lg min-h-32 p-6 border border-green-600/50 bg-green-800/10 text-white flex flex-col justify-center items-center text-center"
74+
>
75+
<div
76+
class="text-2xl md:text-4xl lg:text-6xl font-bold text-green-600"
77+
id="seconds"
78+
>
79+
55
80+
</div>
81+
<span class="text-lg md:text-xl lg:text-2xl font-normal">Seg</span>
82+
</div>
83+
</div>
84+
</div>

‎src/components/Hero.astro

Lines changed: 41 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -9,78 +9,51 @@ import arrowDownImage from "../../public/arrow-down.svg";
99

1010
<div class="hero w-full overflow-hidden">
1111
<div
12-
class="w-full mx-auto px-4 md:px-8 lg:px-12 min-h-auto md:min-h-screen h-full flex flex-col justify-between items-stretch gap-10 py-10"
12+
class="w-full mx-auto px-4 md:px-8 lg:px-12 min-h-auto lg:min-h-screen h-full flex flex-col justify-between items-stretch gap-10 py-10"
1313
>
1414
<div
15-
class="animate-top z-50 w-full mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 justify-center md:justify-between items-center"
15+
class="animate-top z-50 w-full mx-auto flex gap-4 lg:gap-8 justify-center lg:justify-between items-center"
1616
>
1717
<div
18-
class="col-span-2 md:col-span-1 flex justify-center md:justify-start items-center gap-1 md:gap-2"
18+
class="flex justify-center lg:justify-start items-center gap-1 lg:gap-2"
1919
>
20-
<Image src={logoImage} class="max-w-80 md:max-w-96 w-full" alt="Logo" />
20+
<Image src={logoImage} class="max-w-80 lg:max-w-96 w-full" alt="Logo" />
2121
</div>
2222

23-
<div
24-
class="col-span-2 justify-end md:justify-center items-center gap-6 hidden md:flex"
25-
>
26-
<div class="flex gap-6">
23+
<div class="justify-end items-center gap-6 hidden lg:flex">
24+
<div class="flex gap-6 justify-center items-center">
2725
<a
2826
href="#"
29-
class="text-white/80 hover:text-green-600 text-base md:text-lg"
27+
class="text-white/80 hover:text-green-600 text-base lg:text-lg whitespace-nowrap"
3028
>Página inicial</a
3129
>
3230
<a
3331
href="#"
34-
class="text-white/80 hover:text-green-600 text-base md:text-lg"
32+
class="text-white/80 hover:text-green-600 text-base lg:text-lg whitespace-nowrap"
3533
>Sobre</a
3634
>
3735
<a
3836
href="#"
39-
class="text-white/80 hover:text-green-600 text-base md:text-lg"
37+
class="text-white/80 hover:text-green-600 text-base lg:text-lg whitespace-nowrap"
4038
>Palestrantes</a
4139
>
4240
<a
4341
href="#"
44-
class="text-white/80 hover:text-green-600 text-base md:text-lg"
42+
class="text-white/80 hover:text-green-600 text-base lg:text-lg whitespace-nowrap"
4543
>Cronograma</a
4644
>
47-
</div>
48-
</div>
49-
50-
<div
51-
class="col-span-2 md:col-span-1 flex justify-center md:justify-end items-center gap-1 md:gap-2"
52-
>
53-
<div
54-
class="w-14 h-14 lg:w-18 lg:h-18 rounded-lg bg-green-800/10 text-white flex flex-col justify-center items-center text-center"
55-
>
56-
<span class="text-base md:text-lg lg:text-xl font-bold text-green-600"
57-
>12</span
58-
>
59-
<span class="text-xs font-normal">Dias</span>
60-
</div>
61-
<div
62-
class="w-14 h-14 lg:w-18 lg:h-18 rounded-lg bg-green-800/10 text-white flex flex-col justify-center items-center text-center"
63-
>
64-
<span class="text-base md:text-lg lg:text-xl font-bold text-green-600"
65-
>04</span
66-
>
67-
<span class="text-xs font-normal">Horas</span>
68-
</div>
69-
<div
70-
class="w-14 h-14 lg:w-18 lg:h-18 rounded-lg bg-green-800/10 text-white flex flex-col justify-center items-center text-center"
71-
>
72-
<span class="text-base md:text-lg lg:text-xl font-bold text-green-600"
73-
>43</span
45+
<a
46+
href="#"
47+
class="text-white/80 hover:text-green-600 text-base lg:text-lg whitespace-nowrap"
7448
>
75-
<span class="text-xs font-normal">Min</span>
76-
</div>
77-
<div
78-
class="w-14 h-14 lg:w-18 lg:h-18 rounded-lg bg-green-800/10 text-white flex flex-col justify-center items-center text-center"
79-
>
80-
<span class="text-base md:text-lg lg:text-xl font-bold text-green-600"
81-
>55</span
49+
<Image src={instagramImage} width={24} alt="Instagram" />
50+
</a>
51+
<a
52+
href="#"
53+
class="text-white/80 hover:text-green-600 text-base lg:text-lg whitespace-nowrap"
8254
>
83-
<span class="text-xs font-normal">Seg</span>
55+
<Image src={twitterImage} width={24} alt="Twitter" />
56+
</a>
8457
</div>
8558
</div>
8659
</div>
@@ -89,6 +62,19 @@ import arrowDownImage from "../../public/arrow-down.svg";
8962
class="w-full flex flex-col lg:flex-row items-center justify-center lg:justify-end gap-8 lg:gap-0 relative"
9063
>
9164
<div class="z-50 flex flex-col gap-8 w-full relative lg:absolute right-0">
65+
<div class="animate-top flex justify-center lg:justify-start gap-3">
66+
<div
67+
class="border bg-green-950/60 border-green-600 rounded-full text-sm md:text-base font-medium text-green-600 px-3 py-1.5"
68+
>
69+
<span>07 de Junho | 16:20</span>
70+
</div>
71+
<div
72+
class="border bg-green-950/60 border-green-600 rounded-full text-sm md:text-base font-medium text-green-600 px-3 py-1.5"
73+
>
74+
<span>Maringá | Pr</span>
75+
</div>
76+
</div>
77+
9278
<div
9379
class="flex flex-col text-hero text-2xl md:text-4xl lg:text-6xl xl:text-7xl font-black text-white text-center lg:text-left"
9480
>
@@ -111,7 +97,7 @@ import arrowDownImage from "../../public/arrow-down.svg";
11197
</div>
11298

11399
<div
114-
class="animate-top hero-img border-2 border-green-600 rounded-xl bg-neutral-950 mb-10"
100+
class="animate-top hero-img border-2 border-green-600 rounded-xl bg-neutral-950"
115101
>
116102
<Image
117103
src={heroImage}
@@ -121,47 +107,13 @@ import arrowDownImage from "../../public/arrow-down.svg";
121107
</div>
122108
</div>
123109

124-
<div class="animate-top w-full grid grid-cols-1 md:grid-cols-3">
125-
<div class="text-center md:text-left w-full">
126-
<div class="flex gap-3">
127-
<div
128-
class="border bg-green-800/20 border-green-600/50 rounded-full text-sm md:text-base font-medium text-green-600 px-3 py-1.5"
129-
>
130-
<span>07 de Junho | 16:20</span>
131-
</div>
132-
<div
133-
class="border bg-green-800/20 border-green-600/50 rounded-full text-sm md:text-base font-medium text-green-600 px-3 py-1.5"
134-
>
135-
<span>Maringá | Pr</span>
136-
</div>
137-
</div>
138-
<!-- <div class="text-base md:text-xl font-medium text-white">
139-
<span>07 de Junho</span>
140-
<span class="text-green-600">16:20</span>
141-
</div> -->
142-
</div>
143-
144-
<div class="hidden md:flex justify-center items-center btn-scroll-down">
145-
<a
146-
href="#"
147-
class="w-10 h-10 bg-green-700 hover:bg-green-600 rounded-full flex justify-center items-center text-center"
148-
>
149-
<Image src={arrowDownImage} width={20} alt="Arrow down" />
150-
</a>
151-
</div>
152-
153-
<div class="text-center md:text-right w-full">
154-
<!-- <span class="text-base md:text-xl font-medium text-white"
155-
>Maringá <span class="text-green-600">PR</span></span
156-
> -->
157-
158-
<div
159-
class="col-span-1 justify-center md:justify-end items-center gap-6 hidden md:flex"
160-
>
161-
<Image src={instagramImage} width={30} alt="Instagram" />
162-
<Image src={twitterImage} width={30} alt="Twitter" />
163-
</div>
164-
</div>
110+
<div class="animate-top w-full flex justify-center items-center">
111+
<a
112+
href="#"
113+
class="w-10 h-10 bg-green-700 hover:bg-green-600 rounded-full flex justify-center items-center text-center btn-scroll-down"
114+
>
115+
<Image src={arrowDownImage} width={20} alt="Arrow down" />
116+
</a>
165117
</div>
166118
</div>
167119
</div>

0 commit comments

Comments
 (0)