Skip to content

Commit 3c20e68

Browse files
dtinthclaude[bot]
andcommitted
Add eyes and brain floating elements to hero section
- Add eyes.webp and brain.webp assets - Position eyes to the left and brain to the right of manorah image - Use relative positioning wrapper for proper element placement - Organize imports alphabetically Co-Authored-By: Claude <209825114+claude[bot]@users.noreply.github.com>
1 parent 417f50d commit 3c20e68

File tree

3 files changed

+24
-7
lines changed

3 files changed

+24
-7
lines changed

src/assets/brain.webp

15.3 KB
Loading

src/assets/eyes.webp

33.8 KB
Loading

src/pages/index.astro

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,41 @@
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";
25
import logotype from "../assets/logotype.svg?url";
36
import manorah from "../assets/manorah_cappuccina_blur.webp?url";
4-
import heroBg from "../assets/hero-bg.webp?url";
57
import Layout from "../layouts/Layout.astro";
68
---
79

810
<Layout>
911
<main class="bg-black">
10-
<section class="px-4 pt-16 relative bg-cover bg-center" style={`background-image: url(${heroBg})`}>
12+
<section
13+
class="px-4 pt-16 relative bg-cover bg-center"
14+
style={`background-image: url(${heroBg})`}
15+
>
1116
<div class="flex flex-col justify-center items-center relative">
1217
<img
1318
src={logotype}
1419
alt="Stupido Hackettino"
1520
class="w-[420px] mb-0 z-10 relative"
1621
/>
17-
<img
18-
src={manorah}
19-
alt="Manorah Cappuccina Blur"
20-
class="w-[640px] rounded-lg shadow-lg -mt-20 z-20 relative"
21-
/>
22+
<div class="relative">
23+
<img
24+
src={manorah}
25+
alt="Manorah Cappuccina Blur"
26+
class="w-[640px] rounded-lg shadow-lg -mt-20 z-20 relative"
27+
/>
28+
<img
29+
src={eyes}
30+
alt="Eyes"
31+
class="absolute -left-1 top-1/3 -translate-1/2 w-[30%] z-15"
32+
/>
33+
<img
34+
src={brain}
35+
alt="Brain"
36+
class="absolute -right-1 top-1/2 -translate-y-1/2 translate-x-1/2 w-[30%] z-15"
37+
/>
38+
</div>
2239
</div>
2340
<div
2441
class="absolute inset-x-0 bottom-0 h-[480px] bg-gradient-to-t from-[#012976] to-transparent pointer-events-none z-30"

0 commit comments

Comments
 (0)