Skip to content

Commit b55c364

Browse files
webstackdevwebstackdev
committed
Refactor Home Hero to be stand alone component
1 parent 7e59d0e commit b55c364

9 files changed

Lines changed: 86 additions & 108 deletions

File tree

src/components/Hero/__tests__/client.spec.ts renamed to src/components/Hero/Home/client/__tests__/index.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
22
import { readFileSync } from 'fs'
33
import { resolve } from 'path'
4-
import { HeroLoader } from '@components/Hero/client'
4+
import { HeroLoader } from '@components/Hero/Home/client'
55
import { gsap } from 'gsap'
66

77
// Setup function for DOM with hero SVG

src/components/Hero/client.ts renamed to src/components/Hero/Home/client/index.ts

File renamed without changes.

src/components/Hero/home/content.astro renamed to src/components/Hero/Home/content.astro

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,57 @@
33
* Hero Content Column - Home Variant
44
*/
55
import Sprite from '@components/Sprite/index.astro'
6-
import type { HomeContentProps as Props } from '@components/Hero/@types/content'
76
8-
export type { Props }
7+
export interface Props {
8+
pretitle: string
9+
benefits: Array<{
10+
text: string
11+
highlight: string
12+
}>
13+
primaryLink: {
14+
href: string
15+
text: string
16+
}
17+
secondaryLink: {
18+
href: string
19+
text: string
20+
}
21+
}
922
10-
const { pretitle, benefits, primaryLink, secondaryLink } = Astro.props
23+
const { pretitle, benefits, primaryLink, secondaryLink } = Astro.props as Props
1124
---
1225

1326
{/* Content Column */}
1427
<div class="order-2 lg:order-1 space-y-6">
1528
{/* Pretitle */}
1629
<span
17-
class="inline-block text-sm md:text-base font-bold tracking-wide text-[var(--color-primary)] uppercase"
30+
class="inline-block text-sm md:text-base font-bold tracking-wide text-primary uppercase"
1831
>
1932
{pretitle}
2033
</span>
2134

2235
{/* Main Title */}
2336
<h1
24-
class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--color-text)] leading-tight"
37+
class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-text leading-tight"
2538
>
2639
Building Modern Web Solutions That Drive Results
2740
</h1>
2841

2942
{/* Benefits Section */}
3043
{
3144
benefits && benefits.length > 0 && (
32-
<div class="bg-[var(--color-bg-offset)] rounded-2xl p-6 md:p-8 border border-[var(--color-border)]">
33-
<div class="text-sm font-semibold text-[var(--color-text-offset)] mb-4 uppercase tracking-wide">
45+
<div class="bg-bg-offset rounded-2xl p-6 md:p-8 border border-border">
46+
<div class="text-sm font-semibold text-offset mb-4 uppercase tracking-wide">
3447
Up to:
3548
</div>
3649
<ul class="space-y-4">
3750
{benefits.map(benefit => (
3851
<li class="flex items-start gap-3">
39-
<span class="flex-shrink-0 w-6 h-6 text-[var(--color-success)] [&_.icon]:w-6 [&_.icon]:h-6 [&_.icon]:stroke-current">
52+
<span class="shrink-0 w-6 h-6 text-success [&_.icon]:w-6 [&_.icon]:h-6 [&_.icon]:stroke-current">
4053
<Sprite name="check" />
4154
</span>
42-
<span class="text-base md:text-lg text-[var(--color-text)]">
43-
<strong class="font-bold text-[var(--color-primary)]">{benefit.highlight}</strong>{' '}
55+
<span class="text-base md:text-lg text-text">
56+
<strong class="font-bold text-primary">{benefit.highlight}</strong>{' '}
4457
{benefit.text}
4558
</span>
4659
</li>
@@ -56,7 +69,7 @@ const { pretitle, benefits, primaryLink, secondaryLink } = Astro.props
5669
primaryLink && (
5770
<a
5871
href={primaryLink.href}
59-
class="group inline-block px-8 py-4 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-semibold rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 text-center"
72+
class="group inline-block px-8 py-4 bg-primary hover:bg-primary-hover text-white font-semibold rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 text-center"
6073
>
6174
{primaryLink.text}
6275
<svg
@@ -79,7 +92,7 @@ const { pretitle, benefits, primaryLink, secondaryLink } = Astro.props
7992
secondaryLink && (
8093
<a
8194
href={secondaryLink.href}
82-
class="group inline-block px-8 py-4 bg-transparent border-2 border-[var(--color-border)] hover:border-[var(--color-primary)] text-[var(--color-text)] hover:text-[var(--color-primary)] font-semibold rounded-xl transition-all duration-200 text-center"
95+
class="group inline-block px-8 py-4 bg-transparent border-2 border-border hover:border-primary text-text hover:text-primary font-semibold rounded-xl transition-all duration-200 text-center"
8396
>
8497
{secondaryLink.text}
8598
<svg

src/components/Hero/home/ctaLinks.astro renamed to src/components/Hero/Home/ctaLinks.astro

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,18 @@
22
/**
33
* Hero CTA Links - Home Variant
44
*/
5-
import type { CtaProps as Props } from '@components/Hero/@types/ctaLinks'
6-
7-
export type { Props }
5+
export interface Props {
6+
primaryLink: {
7+
href: string
8+
text: string
9+
}
10+
secondaryLink: {
11+
href: string
12+
text: string
13+
}
14+
}
815
9-
const { primaryLink, secondaryLink } = Astro.props
16+
const { primaryLink, secondaryLink } = Astro.props as Props
1017
---
1118

1219
{/* CTA Links */}
@@ -15,7 +22,7 @@ const { primaryLink, secondaryLink } = Astro.props
1522
primaryLink && (
1623
<a
1724
href={primaryLink.href}
18-
class="group inline-block px-8 py-4 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-semibold rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 text-center"
25+
class="group inline-block px-8 py-4 bg-primary hover:bg-primary-hover text-white font-semibold rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 text-center"
1926
>
2027
{primaryLink.text}
2128
<svg
@@ -38,7 +45,7 @@ const { primaryLink, secondaryLink } = Astro.props
3845
secondaryLink && (
3946
<a
4047
href={secondaryLink.href}
41-
class="group inline-block px-8 py-4 bg-transparent border-2 border-[var(--color-border)] hover:border-[var(--color-primary)] text-[var(--color-text)] hover:text-[var(--color-primary)] font-semibold rounded-xl transition-all duration-200 text-center"
48+
class="group inline-block px-8 py-4 bg-transparent border-2 border-border hover:border-primary text-text hover:text-primary font-semibold rounded-xl transition-all duration-200 text-center"
4249
>
4350
{secondaryLink.text}
4451
<svg

src/components/Hero/home/hero.webp renamed to src/components/Hero/Home/hero.webp

File renamed without changes.

src/components/Hero/home/image.astro renamed to src/components/Hero/Home/image.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import heroSvg from '@assets/images/site/hero.svg?raw'
1313
</div>
1414

1515
<script>
16-
import { HeroLoader } from '@components/Hero/client'
16+
import { HeroLoader } from '@components/Hero/Home/client'
1717

1818
document.addEventListener('astro:page-load', () => {
1919
HeroLoader.init()

‎src/components/Hero/Home/index.astro‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
import Content from './content.astro'
3+
import ImageBlock from './image.astro'
4+
5+
interface Benefit {
6+
text: string
7+
highlight: string
8+
}
9+
10+
interface Link {
11+
href: string
12+
text: string
13+
}
14+
15+
export interface Props {
16+
pretitle?: string
17+
benefits?: Benefit[]
18+
primaryLink?: Link
19+
secondaryLink?: Link
20+
}
21+
22+
const {
23+
pretitle = 'Client-Focused Web Application Developer',
24+
benefits = [
25+
{ text: 'increase in sales', highlight: '57%' },
26+
{ text: 'ROI for every $1', highlight: '$114' },
27+
{ text: 'conversion', highlight: 'Up to 400%' },
28+
],
29+
primaryLink = { href: '/services/web-development', text: 'Improve Your Product' },
30+
secondaryLink = { href: '/services/consulting', text: 'Start from scratch' },
31+
} = Astro.props
32+
---
33+
34+
<section class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16 lg:py-20">
35+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
36+
<Content
37+
pretitle={pretitle}
38+
benefits={benefits}
39+
primaryLink={primaryLink}
40+
secondaryLink={secondaryLink}
41+
/>
42+
43+
<ImageBlock />
44+
</div>
45+
</section>

‎src/components/Hero/index.astro‎

Lines changed: 0 additions & 87 deletions
This file was deleted.

‎test/e2e/specs/11-regression/hero-animation-mobile-menu-pause.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*
77
* @see src/components/scripts/animationLifecycle.ts
88
* @see src/components/Navigation/client.ts
9-
* @see src/components/Hero/client.ts
9+
* @see src/components/Hero/Home/client/index.ts
1010
*/
1111

1212
import { BasePage, test, expect } from '@test/e2e/helpers'

0 commit comments

Comments
 (0)