Skip to content

Commit a7cb47a

Browse files
dtinthclaude[bot]
dtinth
and
claude[bot]
committed
Refactor hero section into separate component
- Extract hero section with all animations and styles to HeroSection.astro - Simplify index.astro by removing complex hero implementation - Improve component organization and maintainability 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <209825114+claude[bot]@users.noreply.github.com>
1 parent 4293a17 commit a7cb47a

2 files changed

Lines changed: 105 additions & 102 deletions

File tree

‎src/components/HeroSection.astro‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
import brain from "../assets/brain.webp?url";
3+
import eyes from "../assets/eyes.webp?url";
4+
import heroBg from "../assets/hero-bg.webp?url";
5+
import logotype from "../assets/logotype.svg?url";
6+
import manorah from "../assets/manorah_cappuccina_blur.webp?url";
7+
---
8+
9+
<style>
10+
@keyframes fadeDown {
11+
from {
12+
opacity: 0;
13+
transform: translateY(-30px);
14+
}
15+
to {
16+
opacity: 1;
17+
transform: translateY(0);
18+
}
19+
}
20+
21+
@keyframes fadeUp {
22+
from {
23+
opacity: 0;
24+
transform: translateY(30px);
25+
}
26+
to {
27+
opacity: 1;
28+
transform: translateY(0);
29+
}
30+
}
31+
32+
@keyframes fadeLeft {
33+
from {
34+
opacity: 0;
35+
transform: translateX(30px);
36+
}
37+
to {
38+
opacity: 1;
39+
transform: translateX(0);
40+
}
41+
}
42+
43+
@keyframes fadeRight {
44+
from {
45+
opacity: 0;
46+
transform: translateX(-30px);
47+
}
48+
to {
49+
opacity: 1;
50+
transform: translateX(0);
51+
}
52+
}
53+
54+
.animate-fade-down {
55+
animation: fadeDown 1s ease-out 0.5s both;
56+
}
57+
58+
.animate-fade-up {
59+
animation: fadeUp 1s ease-out 0.2s both;
60+
}
61+
62+
.animate-fade-left {
63+
animation: fadeLeft 1s ease-out 0.7s both;
64+
}
65+
66+
.animate-fade-right {
67+
animation: fadeRight 1s ease-out 0.7s both;
68+
}
69+
</style>
70+
71+
<section
72+
class="px-4 pt-16 relative bg-cover bg-center overflow-hidden"
73+
style={`background-image: url(${heroBg})`}
74+
>
75+
<div class="flex flex-col justify-center items-center relative">
76+
<img
77+
src={logotype}
78+
alt="Stupido Hackettino"
79+
class="w-[420px] mb-0 z-10 relative animate-fade-down"
80+
/>
81+
<div class="relative">
82+
<img
83+
src={manorah}
84+
alt="Manorah Cappuccina Blur"
85+
class="w-[640px] rounded-lg shadow-lg -mt-20 z-20 relative animate-fade-up"
86+
/>
87+
<img
88+
src={eyes}
89+
alt="Eyes"
90+
class="absolute -left-1 top-1/3 -translate-1/2 w-[30%] z-15 animate-fade-right"
91+
/>
92+
<img
93+
src={brain}
94+
alt="Brain"
95+
class="absolute -right-1 top-1/2 -translate-y-1/2 translate-x-1/2 w-[30%] z-15 animate-fade-left"
96+
/>
97+
</div>
98+
</div>
99+
<div
100+
class="absolute inset-x-0 bottom-0 h-[480px] bg-gradient-to-t from-[#012976] to-transparent pointer-events-none z-30"
101+
>
102+
</div>
103+
</section>

‎src/pages/index.astro‎

Lines changed: 2 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,8 @@
11
---
2-
import brain from "../assets/brain.webp?url";
3-
import eyes from "../assets/eyes.webp?url";
4-
import heroBg from "../assets/hero-bg.webp?url";
5-
import logotype from "../assets/logotype.svg?url";
6-
import manorah from "../assets/manorah_cappuccina_blur.webp?url";
2+
import HeroSection from "../components/HeroSection.astro";
73
import Layout from "../layouts/Layout.astro";
84
---
95

10-
<style>
11-
@keyframes fadeDown {
12-
from {
13-
opacity: 0;
14-
transform: translateY(-30px);
15-
}
16-
to {
17-
opacity: 1;
18-
transform: translateY(0);
19-
}
20-
}
21-
22-
@keyframes fadeUp {
23-
from {
24-
opacity: 0;
25-
transform: translateY(30px);
26-
}
27-
to {
28-
opacity: 1;
29-
transform: translateY(0);
30-
}
31-
}
32-
33-
@keyframes fadeLeft {
34-
from {
35-
opacity: 0;
36-
transform: translateX(30px);
37-
}
38-
to {
39-
opacity: 1;
40-
transform: translateX(0);
41-
}
42-
}
43-
44-
@keyframes fadeRight {
45-
from {
46-
opacity: 0;
47-
transform: translateX(-30px);
48-
}
49-
to {
50-
opacity: 1;
51-
transform: translateX(0);
52-
}
53-
}
54-
55-
.animate-fade-down {
56-
animation: fadeDown 1s ease-out 0.5s both;
57-
}
58-
59-
.animate-fade-up {
60-
animation: fadeUp 1s ease-out 0.2s both;
61-
}
62-
63-
.animate-fade-left {
64-
animation: fadeLeft 1s ease-out 0.7s both;
65-
}
66-
67-
.animate-fade-right {
68-
animation: fadeRight 1s ease-out 0.7s both;
69-
}
70-
</style>
71-
726
<Layout>
73-
<main class="bg-black">
74-
<section
75-
class="px-4 pt-16 relative bg-cover bg-center overflow-hidden"
76-
style={`background-image: url(${heroBg})`}
77-
>
78-
<div class="flex flex-col justify-center items-center relative">
79-
<img
80-
src={logotype}
81-
alt="Stupido Hackettino"
82-
class="w-[420px] mb-0 z-10 relative animate-fade-down"
83-
/>
84-
<div class="relative">
85-
<img
86-
src={manorah}
87-
alt="Manorah Cappuccina Blur"
88-
class="w-[640px] rounded-lg shadow-lg -mt-20 z-20 relative animate-fade-up"
89-
/>
90-
<img
91-
src={eyes}
92-
alt="Eyes"
93-
class="absolute -left-1 top-1/3 -translate-1/2 w-[30%] z-15 animate-fade-right"
94-
/>
95-
<img
96-
src={brain}
97-
alt="Brain"
98-
class="absolute -right-1 top-1/2 -translate-y-1/2 translate-x-1/2 w-[30%] z-15 animate-fade-left"
99-
/>
100-
</div>
101-
</div>
102-
<div
103-
class="absolute inset-x-0 bottom-0 h-[480px] bg-gradient-to-t from-[#012976] to-transparent pointer-events-none z-30"
104-
>
105-
</div>
106-
</section>
107-
</main>
7+
<HeroSection />
1088
</Layout>

0 commit comments

Comments
 (0)