1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
---
import Image from '~/components/common/Image.astro';
import HeroButton from '~/components/ui/HeroButton.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,
bg = await Astro.slots.render('bg'),
logoPath = '~/assets/images/customworks-logo.png',
} = Astro.props;
---
<section class="relative md:-mt-[76px] not-prose min-h-screen flex items-center" {...id ? { id } : {}}>
<!-- Background Image -->
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
{
image && (
<div class="absolute inset-0">
{typeof image === 'string' ? (
<Fragment set:html={image} />
) : (
<Image
class="w-full h-full object-cover"
widths={[400, 768, 1024, 2040]}
sizes="100vw"
loading="eager"
width={1920}
height={1080}
aspectRatio="16:9"
{...image}
/>
)}
</div>
)
}
<!-- Dark overlay for better text readability -->
<div class="absolute inset-0 bg-black bg-opacity-50"></div>
<slot name="bg">
{bg ? <Fragment set:html={bg} /> : null}
</slot>
</div>
<!-- Content -->
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 w-full">
<div class="pt-0 md:pt-[76px] pointer-events-none"></div>
<div class="py-12 md:py-20 lg:py-0 text-center">
<div class="max-w-4xl mx-auto">
<!-- Logo -->
{
logoPath && (
<div class="mb-8 intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter">
<Image
src={logoPath}
alt="CustomWorks Logo"
class="mx-auto max-h-20 md:max-h-24 lg:max-h-28 w-auto object-contain"
widths={[200, 300, 400]}
sizes="(max-width: 767px) 200px, (max-width: 1023px) 300px, 400px"
loading="eager"
width={400}
height={200}
/>
</div>
)
}
{
tagline && (
<p
class="text-base text-white font-bold tracking-wide uppercase intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter mb-4"
set:html={tagline}
/>
)
}
{
title && (
<h1
class="text-5xl md:text-6xl lg:text-7xl font-bold leading-tighter tracking-tighter mb-6 font-heading text-white intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter"
set:html={title}
/>
)
}
{
subtitle && (
<p
class="text-xl md:text-2xl text-white/90 mb-8 dark:text-white/90 intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter max-w-3xl mx-auto"
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-center lg:m-0 lg:max-w-7xl intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter">
{Array.isArray(actions) ? (
actions.map((action) => (
<div class="flex w-full sm:w-auto">
<HeroButton {...(action || {})} class="w-full sm:mb-0" />
</div>
))
) : (
<Fragment set:html={actions} />
)}
</div>
)
}
{
content && (
<div class="mt-8 intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter">
<Fragment set:html={content} />
</div>
)
}
</div>
</div>
</div>
</section>
|
