Marco
cc935420ec
Tablet layout (768-1023px) hit the md: grid switch exactly where the fluid clamp() tokens were already at their floor, leaving no room to shrink. Moves the fluid floor and structural breakpoint down together to sm: (640px) so real tablets always get the fluid, desktop-like structure; consolidates the ad-hoc md:+lg: patchwork in Hero/About/ Newsletter/Footer/Tools back onto one line, leaving documented lg: exceptions where content genuinely doesn't fit yet. Also shortens the Hero heading to a single sentence with no trailing period (the brand's orange dot already renders one, animated).
56 lines
2.6 KiB
TypeScript
56 lines
2.6 KiB
TypeScript
import Image from "next/image";
|
|
import { Reveal, RevealGroup, RevealItem } from "./Reveal";
|
|
import type { Testimonial } from "../lib/payload";
|
|
|
|
// Shared by /todo-cards, /newsletter, and /challenge — all three were
|
|
// already pixel-identical (bg-muted filled card, no border, decorative
|
|
// quote-mark, quote on top with flex-1 pushing the avatar/name row to the
|
|
// bottom, hover-lift + avatar-scale), kept in sync deliberately as one
|
|
// visual pattern across pages rather than each page's own (differing)
|
|
// Figma spec for this one section. max-w-[1600px] matches Challenge's
|
|
// testimonial container cap, the widest of the three original values —
|
|
// a deliberate compromise so all three read consistently across viewports
|
|
// instead of one looking narrower than the others past ~1440px.
|
|
export function TestimonialsGrid({ testimonials }: { testimonials: Testimonial[] }) {
|
|
if (testimonials.length === 0) return null;
|
|
|
|
return (
|
|
<section className="w-full bg-bg-base flex flex-col gap-8 items-center py-12 sm:py-16 px-[var(--layout-padding-x)]">
|
|
<div className="max-w-[1600px] mx-auto w-full flex flex-col gap-8 items-center">
|
|
<Reveal
|
|
className="font-semibold text-h-emphasis text-text-primary text-center"
|
|
style={{ fontFamily: "var(--font-lora)" }}
|
|
>
|
|
Was andere sagen
|
|
</Reveal>
|
|
|
|
<RevealGroup className="grid grid-cols-1 sm:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full">
|
|
{testimonials.map((t) => (
|
|
<RevealItem
|
|
key={t.id}
|
|
className="group relative sm:col-span-4 bg-bg-muted rounded-xl p-6 flex flex-col gap-4 transition-transform duration-300 hover:-translate-y-1"
|
|
>
|
|
<span
|
|
aria-hidden
|
|
className="absolute top-4 right-6 font-bold text-[2.5rem] text-[#ccc] leading-none select-none"
|
|
>
|
|
”
|
|
</span>
|
|
<p className="flex-1 text-body-sm text-text-primary leading-[1.6] pr-8">{t.quote}</p>
|
|
<div className="flex items-center gap-3">
|
|
<div className="relative size-10 shrink-0 rounded-full overflow-hidden transition-transform duration-300 group-hover:scale-110">
|
|
<Image src={t.avatar} alt={t.name} fill sizes="40px" className="object-cover" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-body-sm text-text-primary">{t.name}</p>
|
|
<p className="text-body-sm text-text-muted">{t.role}</p>
|
|
</div>
|
|
</div>
|
|
</RevealItem>
|
|
))}
|
|
</RevealGroup>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|