ahmido
eeb5c98450
## Summary - rebuild `apps/website` on the pinned ScrewFast Astro foundation - replace the legacy page/content/component structure with the new section and UI architecture - add Starlight-based docs and the new public route set for platform, pricing, trust, legal, and guides - refresh website tooling, dependencies, and Playwright smoke coverage for the new site shell ## Scope - touches `apps/website` and the matching spec artifacts for feature 402 - does not modify `apps/platform` ## Testing - not run in this step Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de> Reviewed-on: #393
74 lines
2.2 KiB
Plaintext
74 lines
2.2 KiB
Plaintext
---
|
|
// Import AvatarTestimonialSection component for use in this module
|
|
import AvatarTestimonialSection from '../../ui/avatars/AvatarTestimonialSection.astro';
|
|
|
|
// Define props from Astro
|
|
const { title, testimonials } = Astro.props;
|
|
|
|
// Define TypeScript interface for Testimonial
|
|
interface Testimonial {
|
|
content: string;
|
|
author: string;
|
|
role: string;
|
|
avatarSrc: string;
|
|
avatarAlt: string;
|
|
}
|
|
|
|
// Define TypeScript interface for props
|
|
interface Props {
|
|
title: string;
|
|
testimonials: Testimonial[];
|
|
}
|
|
---
|
|
|
|
{/* Main div that wraps the testimonials section */}
|
|
<section
|
|
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
|
|
id="testimonials"
|
|
>
|
|
{/* Title of the testimonials section */}
|
|
<div class="mb-6 w-3/4 max-w-2xl sm:mb-10 md:mb-16 lg:w-1/2">
|
|
<h2
|
|
class="text-2xl font-bold text-balance text-neutral-800 sm:text-3xl lg:text-4xl dark:text-neutral-200"
|
|
>
|
|
{title}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{/* Looping through each testimonial data and rendering it */}
|
|
{
|
|
testimonials.map(testimonial => (
|
|
<div class="flex h-auto">
|
|
<div class="flex flex-col rounded-xl bg-neutral-50 dark:bg-neutral-700">
|
|
<div class="flex-auto p-4 md:p-6">
|
|
{/* Testimonial content */}
|
|
<p class="text-base text-pretty text-neutral-600 italic md:text-lg dark:text-neutral-300">
|
|
{testimonial.content}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rounded-b-xl bg-neutral-300/30 p-4 md:px-7 dark:bg-neutral-900/30">
|
|
<div class="flex items-center">
|
|
<AvatarTestimonialSection
|
|
src={testimonial.avatarSrc}
|
|
alt={testimonial.avatarAlt}
|
|
/>
|
|
|
|
<div class="ms-3 grow">
|
|
<p class="text-sm font-bold text-neutral-800 sm:text-base dark:text-neutral-200">
|
|
{testimonial.author}
|
|
</p>
|
|
<p class="text-xs text-neutral-600 dark:text-neutral-400">
|
|
{testimonial.role}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</section>
|