dot013/guz.one
1
0
Fork 0
Code Issues Pull Requests Activity

feat: hero component

Browse Source
This commit is contained in:
Gustavo "Guz" L. de Mello
2024-05-24 15:59:09 -03:00
parent 84ef620259
commit dc4d0ec5e0
5 changed files with 82 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/hero.templ Normal file
View File

@@ -0,0 +1,32 @@
package components
templ Hero() {
<header
class="flex flex-col lg:flex-row w-89% lg:w-60% lg:justify-between"
style="--anim-slide-from-y: 10px; --anim-delay: 120ms; --anim-duration: 0.6s;"
>
<img
src="/logo-013.svg"
class="w-50% lg:w-25% animate slide-from-b fade-in"
style="--anim-stagger: 1; opacity: 0;"
/>
<hgroup class="font-cal w-full lg:max-w-45rem">
<h1
class="prose text-8xl lg:text-7xl lg:mb-0 animate slide-from-b fade-in"
style="--anim-stagger: 2; opacity: 0;"
>
<q class="after:content-[''] before:content-['']">
Someone who's trying to improve
</q>
</h1>
<p
class="text-6xl lg:text-3xl lg:mt-3 opacity-0 animate slide-from-b fade-in"
style="--anim-stagger: 3; opacity: 0;"
>
<cite class="not-italic before:content-['-'] before:pr-2">
guz013
</cite>
</p>
</hgroup>
</header>
}