Richard Bergsma
89e07308e2
- Adjusted padding and margin for elements in Hero2.astro to enhance layout consistency. - Updated font sizes and margins for .neon-title and .neon-subtitle in index.astro to improve readability on various screen sizes. - Introduced new media queries for better responsiveness across laptop, tablet, and mobile devices, ensuring a more adaptable design.
101 lines
3.5 KiB
Plaintext
101 lines
3.5 KiB
Plaintext
---
|
|
import Image from '~/components/common/Image.astro';
|
|
import Button from '~/components/ui/Button.astro';
|
|
import Background from '~/components/ui/Background.astro';
|
|
|
|
import type { Hero as Props } from '~/types';
|
|
|
|
const {
|
|
title = await Astro.slots.render('title'),
|
|
subtitle = await Astro.slots.render('subtitle'),
|
|
tagline,
|
|
|
|
content = await Astro.slots.render('content'),
|
|
actions = await Astro.slots.render('actions'),
|
|
image = await Astro.slots.render('image'),
|
|
|
|
id,
|
|
isDark = false,
|
|
bg = await Astro.slots.render('bg'),
|
|
} = Astro.props;
|
|
---
|
|
|
|
<section class="relative md:-mt-[76px] not-prose" {...id ? { id } : {}}>
|
|
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
|
|
<slot name="bg">
|
|
{bg ? <Fragment set:html={bg} /> : <Background isDark={isDark} showIcons={false} disableParallax={true} />}
|
|
</slot>
|
|
</div>
|
|
<div class="relative w-full px-0">
|
|
<div class="pt-0 md:pt-[76px] pointer-events-none"></div>
|
|
<div class="py-12 md:py-20 lg:py-0 lg:flex lg:items-center lg:h-screen lg:gap-8">
|
|
<div class="basis-1/2 text-center lg:text-left pb-10 md:pb-16 lg:pb-0 mx-auto pl-4 md:pl-8 lg:pl-12">
|
|
{
|
|
tagline && (
|
|
<p
|
|
class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter"
|
|
set:html={tagline}
|
|
/>
|
|
)
|
|
}
|
|
{
|
|
title && (
|
|
<h1
|
|
class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200 content-backdrop p-2 inline-block rounded-md"
|
|
set:html={title}
|
|
/>
|
|
)
|
|
}
|
|
<div class="max-w-3xl mx-auto lg:max-w-none">
|
|
{
|
|
subtitle && (
|
|
<p
|
|
class="text-base md:text-lg lg:text-xl text-muted mb-6 dark:text-slate-300 content-backdrop p-2 rounded-md"
|
|
set:html={subtitle}
|
|
/>
|
|
)
|
|
}
|
|
|
|
{
|
|
actions && (
|
|
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 lg:justify-start lg:m-0 lg:max-w-7xl content-backdrop p-2 rounded-md">
|
|
{Array.isArray(actions) ? (
|
|
actions.map((action) => (
|
|
<div class="flex w-full sm:w-auto">
|
|
<Button {...(action || {})} class="w-full sm:mb-0" />
|
|
</div>
|
|
))
|
|
) : (
|
|
<Fragment set:html={actions} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
{content && <Fragment set:html={content} />}
|
|
</div>
|
|
<div class="basis-1/2 hidden lg:flex items-center justify-center px-4 md:px-8 lg:px-12">
|
|
{
|
|
image && (
|
|
<div class="relative w-full max-w-2xl z-10">
|
|
{typeof image === 'string' ? (
|
|
<Fragment set:html={image} />
|
|
) : (
|
|
<Image
|
|
class="rounded-md w-full"
|
|
widths={[400, 768, 1024, 2040]}
|
|
sizes="(max-width: 767px) 400px, (max-width: 1023px) 768px, (max-width: 2039px) 1024px, 2040px"
|
|
loading="eager"
|
|
width={600}
|
|
height={600}
|
|
{...image}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|