diff options
| -rw-r--r-- | src/components/widgets/HeroBackground.astro | 128 | ||||
| -rw-r--r-- | src/pages/index.astro | 12 | ||||
| -rw-r--r-- | src/types.d.ts | 1 |
3 files changed, 138 insertions, 3 deletions
diff --git a/src/components/widgets/HeroBackground.astro b/src/components/widgets/HeroBackground.astro new file mode 100644 index 0000000..b5ea748 --- /dev/null +++ b/src/components/widgets/HeroBackground.astro @@ -0,0 +1,128 @@ +--- +import Image from '~/components/common/Image.astro'; +import Button from '~/components/ui/Button.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"> + <Button {...(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> diff --git a/src/pages/index.astro b/src/pages/index.astro index e095fe0..71567a1 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,7 +1,7 @@ --- import Layout from '~/layouts/PageLayout.astro'; -import Hero from '~/components/widgets/Hero2.astro'; +import Hero from '~/components/widgets/HeroBackground.astro'; import Features2Custom from '~/components/widgets/Features2Custom.astro'; import Steps2 from '~/components/widgets/Steps2.astro'; import Content from '~/components/widgets/Content.astro'; @@ -26,15 +26,21 @@ const metadata = { href: '#contact', icon: 'tabler:mail', }, - { text: 'Usługi', href: '#features' }, + { + text: 'Usługi', + href: '#features', + style: 'background-color: white !important; color: #111827 !important; border-color: white !important;', + class: 'hover:bg-gray-100 hover:border-gray-200', + }, ]} image={{ src: '~/assets/images/hero-image.webp', alt: 'CustomWorks - Profesjonalne usługi detailingu samochodowego', }} + logoPath="~/assets/images/customworks-logo.png" > <Fragment slot="title"> - <span class="text-accent dark:text-white"> + <span class="text-white"> <span class="block md:hidden">CustomWorks</span> <span class="hidden md:block">Detailing, wrapping, tuning</span> </span> diff --git a/src/types.d.ts b/src/types.d.ts index 657b477..3ecf68d 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -218,6 +218,7 @@ export interface Hero extends Omit<Headline, 'classes'>, Omit<Widget, 'isDark' | content?: string; actions?: string | CallToAction[]; image?: string | unknown; + logoPath?: string; } export interface Team extends Omit<Headline, 'classes'>, Widget { |