Skip to content

Commit 105fbb2

Browse files
webstackdevwebstackdev
committed
Styling updates to Contact CTA on home page
1 parent 3670787 commit 105fbb2

13 files changed

Lines changed: 76 additions & 71 deletions

File tree

‎src/components/CallToAction/Contact/index.astro‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const descriptionId = `${id}-description`
4848
---
4949

5050
<section
51-
class="cta py-16 md:py-24 bg-linear-to-br from-(--color-primary) to-(--color-accent) relative overflow-hidden"
51+
class="cta py-6 md:py-12 bg-linear-to-br from-(--color-primary) to-(--color-accent) relative overflow-hidden"
5252
aria-labelledby={titleId}
5353
aria-describedby={descriptionId}
5454
>
@@ -65,24 +65,30 @@ const descriptionId = `${id}-description`
6565
</div>
6666

6767
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-(--z-raised)">
68-
<div class="max-w-4xl mx-auto text-center">
69-
<h2
70-
id={titleId}
71-
class="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6 leading-tight"
72-
>
73-
{title}
74-
</h2>
75-
<p
76-
id={descriptionId}
77-
class="text-lg md:text-xl text-white/90 mb-10 max-w-2xl mx-auto leading-relaxed"
78-
>
79-
{description}
80-
</p>
68+
<div
69+
class="max-w-5xl mx-auto grid gap-10 md:grid-cols-[minmax(0,1fr)_max-content] md:items-center"
70+
>
71+
<div class="min-w-0 text-center md:text-left">
72+
<h2
73+
id={titleId}
74+
class="text-xl md:text-4xl font-bold text-white mb-6 leading-tight"
75+
>
76+
{title}
77+
</h2>
78+
<p
79+
id={descriptionId}
80+
class="text-lg md:text-xl text-white/90 leading-relaxed"
81+
>
82+
{description}
83+
</p>
84+
</div>
8185

82-
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
86+
<div
87+
class="w-fit flex flex-col sm:flex-row gap-4 justify-center md:justify-start items-center md:items-start"
88+
>
8389
<a
8490
href={primaryLink.href}
85-
class="inline-flex items-center justify-center px-8 py-4 bg-white text-primary font-semibold rounded-xl hover:bg-white/90 transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5 min-w-50 text-center"
91+
class="inline-flex items-center justify-center p-4 bg-white text-primary font-semibold rounded-xl hover:bg-white/90 transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5 text-center no-underline"
8692
>
8793
{primaryLink.text}
8894
<svg
@@ -104,7 +110,7 @@ const descriptionId = `${id}-description`
104110
secondaryLink && (
105111
<a
106112
href={secondaryLink.href}
107-
class="inline-flex items-center justify-center px-8 py-4 bg-transparent border-2 border-white text-white font-semibold rounded-xl hover:bg-white hover:text-primary transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5 min-w-50 text-center"
113+
class="inline-flex items-center justify-center p-4 bg-transparent border-2 border-white text-white text-center font-semibold no-underline rounded-xl duration-200 hover:bg-white hover:text-primary transition-all hover:shadow-xl hover:-translate-y-0.5"
108114
>
109115
{secondaryLink.text}
110116
</a>

‎src/components/CallToAction/Newsletter/home.astro‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,16 @@ const {
256256
formId="newsletter_form"
257257
variant="newsletter-cta-home"
258258
/>
259+
260+
<p
261+
id="newsletter-message"
262+
class="text-xs text-content-offset leading-relaxed"
263+
role="status"
264+
aria-live="polite"
265+
aria-atomic="true"
266+
>
267+
You'll receive a confirmation email. Click the link to complete your subscription.
268+
</p>
259269
</form>
260270
</div>
261271
</div>

‎src/components/Consent/Checkbox/client/__fixtures__/checkbox.fixture.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import type { CheckboxFixtureProps } from '@components/Consent/Checkbox/client/t
44
55
const fixtureProps: CheckboxFixtureProps = {
66
purpose: 'Responding to your inquiry',
7+
variant: 'default',
78
wrapInForm: true,
89
...Astro.props,
910
}

‎src/components/Forms/Contact/index.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,7 @@ import './validation.css'
248248
purpose="responding to your inquiry"
249249
formId="contact-form"
250250
id="contact-gdpr-consent"
251+
variant="default"
251252
/>
252253

253254
<!-- Data Retention Notice -->

‎src/components/Forms/Download/index.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ const downloadUrl = `/downloads/${fileName}`
129129
purpose="providing your requested download"
130130
formId="download-form"
131131
id="download-gdpr-consent"
132+
variant="default"
132133
/>
133134

134135
<!-- Privacy Notice -->

‎src/components/Home/Skills/client/__fixtures__/skillsCarousel.fixture.astro‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,5 @@
11
---
22
import Skills from '@components/Home/Skills/index.astro'
3-
import type { CollectionEntry } from 'astro:content'
4-
5-
const skills = [
6-
{
7-
data: {
8-
slug: 'aws',
9-
displayName: 'AWS',
10-
logo: undefined,
11-
},
12-
},
13-
{
14-
data: {
15-
slug: 'kubernetes',
16-
displayName: 'Kubernetes',
17-
logo: undefined,
18-
},
19-
},
20-
{
21-
data: {
22-
slug: 'terraform',
23-
displayName: 'Terraform',
24-
logo: undefined,
25-
},
26-
},
27-
] as unknown as Array<CollectionEntry<'tags'>>
283
---
294

30-
<Skills skills={skills} />
5+
<Skills title="Technologies and Skills" />

‎src/components/Testimonials/index.astro‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -154,29 +154,29 @@ const singleTestimonial = shouldRenderSingle ? testimonials.at(0) : undefined
154154
</svg>
155155
</button>
156156

157-
<div class="mt-8 flex items-center justify-center gap-3">
158-
<div
159-
class="embla__dots flex gap-2 justify-center"
160-
role="group"
161-
aria-label="Testimonial navigation"
162-
/>
163-
{showControls && (
164-
<button
165-
type="button"
166-
class="relative flex items-center justify-center rounded-full border border-trim bg-content-inverse p-1 shadow-lg transition-colors hover:bg-page-offset focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
167-
data-testimonials-autoplay-toggle
168-
aria-label="Pause testimonials"
169-
aria-pressed="false"
170-
>
171-
<span data-testimonials-icon="pause">
172-
<Icon name="pause" size={20} />
173-
</span>
174-
<span data-testimonials-icon="play" class="hidden">
175-
<Icon name="play" size={20} />
176-
</span>
177-
</button>
178-
)}
179-
</div>
157+
{showControls && (
158+
<div class="mt-8 flex items-center justify-center gap-3">
159+
<div
160+
class="embla__dots flex gap-2 justify-center"
161+
role="group"
162+
aria-label="Testimonial navigation"
163+
/>
164+
<button
165+
type="button"
166+
class="relative flex items-center justify-center rounded-full border border-trim bg-content-inverse p-1 shadow-lg transition-colors hover:bg-page-offset focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
167+
data-testimonials-autoplay-toggle
168+
aria-label="Pause testimonials"
169+
aria-pressed="false"
170+
>
171+
<span data-testimonials-icon="pause">
172+
<Icon name="pause" size={20} />
173+
</span>
174+
<span data-testimonials-icon="play" class="hidden">
175+
<Icon name="play" size={20} />
176+
</span>
177+
</button>
178+
</div>
179+
)}
180180
</>
181181
)}
182182
</div>

‎src/pages/articles/[...slug].astro‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,13 @@ const section = `Articles`
107107
Other things I've written
108108
</h2>
109109
</header>
110-
<Carousel title="" variant="suggested" currentSlug={article.id} limit={5} type="articles" />
110+
<Carousel
111+
title=""
112+
variant="suggested"
113+
currentSlug={article.id}
114+
limit={5}
115+
type="articles"
116+
showReadMore={false}
117+
/>
111118
</section>
112119
</MarkdownLayout>

‎src/pages/articles/index.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ const section = 'Tags'
5959
limit={articlesForTag.length}
6060
type="articles"
6161
items={articlesForTag}
62+
showReadMore={false}
6263
/>
6364
</section>
6465
)

‎src/pages/case-studies/[slug].astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ const section = 'Case Studies'
113113
currentSlug={caseStudy.id}
114114
limit={4}
115115
type="case-studies"
116+
showReadMore={false}
116117
/>
117118
</section>
118119
</MarkdownLayout>

0 commit comments

Comments
 (0)