Skip to content

Commit 90edf28

Browse files
webstackdevwebstackdev
committed
Styling fixes to testimonials on home page
1 parent de12524 commit 90edf28

3 files changed

Lines changed: 108 additions & 113 deletions

File tree

‎src/components/Carousel/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
214214
<span class="flex justify-end mr-4">
215215
<a
216216
href="/articles"
217-
class="inline-flex items-center px-6 py-3 bg-content-active text-content-inverse font-semibold rounded-lg hover:bg-content no-underline hover:no-underline transition-all duration-200"
217+
class="relative inline-flex items-center px-6 py-3 bg-content-active text-content-inverse font-semibold rounded-lg hover:bg-content no-underline hover:no-underline transition-all duration-200 focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-0.5 focus-visible:after:border-spotlight"
218218
>
219219
Read More Articles
220220
<svg

‎src/components/Testimonials/index.astro‎

Lines changed: 104 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -57,128 +57,127 @@ const singleTestimonial = shouldRenderSingle ? testimonials.at(0) : undefined
5757
{
5858
testimonials.length > 0 &&
5959
(shouldRenderSingle ? (
60-
<section class="bg-page-offset py-8" aria-labelledby={headingId}>
61-
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
62-
<header class="text-center mb-6">
63-
<h2 id={headingId} class="text-3xl md:text-4xl font-bold mb-4">{title}</h2>
64-
{leadText && (
65-
<p class="text-xl text-content-active max-w-3xl mx-auto">{leadText}</p>
66-
)}
67-
</header>
68-
69-
<div class="max-w-4xl mx-auto">
70-
{singleTestimonial && <Card testimonial={singleTestimonial} />}
71-
</div>
60+
<div class="bg-page-offset max-w-6xl mx-auto px-4 sm:px-6 lg:px-8" aria-labelledby={headingId}>
61+
<header class="text-center mb-6">
62+
<h2 id={headingId} class="text-3xl md:text-4xl font-bold mb-4">{title}</h2>
63+
{leadText && (
64+
<p class="text-xl text-content-active max-w-3xl mx-auto">{leadText}</p>
65+
)}
66+
</header>
67+
68+
<div class="max-w-4xl mx-auto">
69+
{singleTestimonial && <Card testimonial={singleTestimonial} />}
7270
</div>
73-
</section>
71+
</div>
7472
) : (
7573
<testimonials-carousel
7674
data-carousel
7775
class="block"
7876
role="region"
7977
aria-roledescription="carousel"
8078
aria-label={title}
79+
aria-labelledby={headingId}
8180
>
82-
<section class="bg-page-offset py-8" aria-labelledby={headingId}>
83-
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
84-
<header class="text-center mb-6">
85-
<h2 id={headingId} class="text-3xl md:text-4xl font-bold mb-4">{title}</h2>
86-
{leadText && (
87-
<p class="text-xl text-content-active max-w-3xl mx-auto">{leadText}</p>
88-
)}
89-
</header>
90-
91-
{/* Embla Carousel for Testimonials */}
92-
<div class="testimonials-embla relative">
93-
<div class="embla__viewport overflow-hidden">
94-
<div class="embla__container flex">
95-
{testimonials.map((testimonial, index) => (
96-
<div
97-
class="embla__slide flex-[0_0_100%] min-w-0 px-4"
98-
data-testimonials-slide
99-
role="group"
100-
aria-roledescription="slide"
101-
aria-label={`Testimonial ${index + 1} of ${testimonials.length}`}
102-
>
103-
<Card testimonial={testimonial} />
104-
</div>
105-
))}
106-
</div>
107-
</div>
81+
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-4 md:pb-6 lg:pb-8">
82+
<header class="mb-6">
83+
<h2 id={headingId} class="font-sans text-lg font-bold text-primary uppercase tracking-widest">
84+
{title}
85+
</h2>
86+
{leadText && (
87+
<p class="text-center text-xl text-content-active max-w-3xl mx-auto">{leadText}</p>
88+
)}
89+
</header>
10890

109-
{/* Navigation Buttons */}
110-
{testimonials.length > 1 && (
111-
<>
112-
<button
113-
type="button"
114-
class="embla__button embla__button--prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed 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"
115-
aria-label="Previous testimonial"
91+
{/* Embla Carousel for Testimonials */}
92+
<div class="testimonials-embla relative">
93+
<div class="embla__viewport overflow-hidden">
94+
<div class="embla__container flex">
95+
{testimonials.map((testimonial, index) => (
96+
<div
97+
class="embla__slide flex-[0_0_100%] min-w-0 px-4"
98+
data-testimonials-slide
99+
role="group"
100+
aria-roledescription="slide"
101+
aria-label={`Testimonial ${index + 1} of ${testimonials.length}`}
116102
>
117-
<svg
118-
class="w-6 h-6"
119-
fill="none"
120-
stroke="currentColor"
121-
viewBox="0 0 24 24"
122-
aria-hidden="true"
123-
focusable="false"
124-
>
125-
<path
126-
stroke-linecap="round"
127-
stroke-linejoin="round"
128-
stroke-width="2"
129-
d="M15 19l-7-7 7-7"
130-
/>
131-
</svg>
132-
</button>
103+
<Card testimonial={testimonial} />
104+
</div>
105+
))}
106+
</div>
107+
</div>
133108

109+
{/* Navigation Buttons */}
110+
{testimonials.length > 1 && (
111+
<>
112+
<button
113+
type="button"
114+
class="embla__button embla__button--prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed 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"
115+
aria-label="Previous testimonial"
116+
>
117+
<svg
118+
class="w-6 h-6"
119+
fill="none"
120+
stroke="currentColor"
121+
viewBox="0 0 24 24"
122+
aria-hidden="true"
123+
focusable="false"
124+
>
125+
<path
126+
stroke-linecap="round"
127+
stroke-linejoin="round"
128+
stroke-width="2"
129+
d="M15 19l-7-7 7-7"
130+
/>
131+
</svg>
132+
</button>
133+
134+
<button
135+
type="button"
136+
class="embla__button embla__button--next absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed 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"
137+
aria-label="Next testimonial"
138+
>
139+
<svg
140+
class="w-6 h-6"
141+
fill="none"
142+
stroke="currentColor"
143+
viewBox="0 0 24 24"
144+
aria-hidden="true"
145+
focusable="false"
146+
>
147+
<path
148+
stroke-linecap="round"
149+
stroke-linejoin="round"
150+
stroke-width="2"
151+
d="M9 5l7 7-7 7"
152+
/>
153+
</svg>
154+
</button>
155+
156+
<div class="mt-8 flex items-center justify-center gap-3">
157+
<div
158+
class="embla__dots flex gap-2 justify-center"
159+
role="group"
160+
aria-label="Testimonial navigation"
161+
/>
134162
<button
135163
type="button"
136-
class="embla__button embla__button--next absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed 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"
137-
aria-label="Next testimonial"
164+
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"
165+
data-testimonials-autoplay-toggle
166+
aria-label="Pause testimonials"
167+
aria-pressed="false"
138168
>
139-
<svg
140-
class="w-6 h-6"
141-
fill="none"
142-
stroke="currentColor"
143-
viewBox="0 0 24 24"
144-
aria-hidden="true"
145-
focusable="false"
146-
>
147-
<path
148-
stroke-linecap="round"
149-
stroke-linejoin="round"
150-
stroke-width="2"
151-
d="M9 5l7 7-7 7"
152-
/>
153-
</svg>
169+
<span data-testimonials-icon="pause">
170+
<Icon name="pause" size={20} />
171+
</span>
172+
<span data-testimonials-icon="play" class="hidden">
173+
<Icon name="play" size={20} />
174+
</span>
154175
</button>
155-
156-
<div class="mt-8 flex items-center justify-center gap-3">
157-
<div
158-
class="embla__dots flex gap-2 justify-center"
159-
role="group"
160-
aria-label="Testimonial navigation"
161-
/>
162-
<button
163-
type="button"
164-
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"
165-
data-testimonials-autoplay-toggle
166-
aria-label="Pause testimonials"
167-
aria-pressed="false"
168-
>
169-
<span data-testimonials-icon="pause">
170-
<Icon name="pause" size={20} />
171-
</span>
172-
<span data-testimonials-icon="play" class="hidden">
173-
<Icon name="play" size={20} />
174-
</span>
175-
</button>
176-
</div>
177-
</>
178-
)}
179-
</div>
176+
</div>
177+
</>
178+
)}
180179
</div>
181-
</section>
180+
</div>
182181
</testimonials-carousel>
183182
))
184183
}

‎src/pages/index.astro‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -130,13 +130,9 @@ const sectionClasses = 'container mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8 lg:p
130130
</section>
131131

132132
<!-- Testimonials Section -->
133-
<Testimonials
134-
title="What Clients Say"
135-
leadText={
136-
`Don't just take my word for it - hear from the businesses I've helped ` +
137-
`transform their technical infrastructure.`
138-
}
139-
/>
133+
<section class:list={['container mx-auto px-4 sm:px-6 lg:px-8 pb-4 md:pb-8 lg:pb-12']}>
134+
<Testimonials title="What Clients Say" />
135+
</section>
140136

141137
<!-- Primary CTA Section -->
142138
<section class:list={[sectionClasses]}>

0 commit comments

Comments
 (0)