feat: make h1 thicker and add testimonials to hero section

This commit is contained in:
kudinDmitriyUp
2026-05-09 13:16:19 +00:00
parent 3bc9b1164c
commit b8d8608c43
2 changed files with 36 additions and 15 deletions

View File

@@ -5,13 +5,20 @@ import ImageOrVideo from "@/components/ui/ImageOrVideo";
import ScrollReveal from "@/components/ui/ScrollReveal";
import AvatarGroup from "@/components/ui/AvatarGroup";
type Testimonial = {
name: string;
role: string;
testimonial: string;
imageSrc: string;
};
type HeroBillboardProps = {
tag?: string;
title: string;
description: string;
primaryButton: { text: string; href: string };
secondaryButton: { text: string; href: string };
avatars?: { src: string }[];
testimonials?: Testimonial[];
avatarsLabel?: string;
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
@@ -21,7 +28,7 @@ const HeroBillboard = ({
description,
primaryButton,
secondaryButton,
avatars,
testimonials,
avatarsLabel,
imageSrc,
videoSrc,
@@ -31,8 +38,19 @@ const HeroBillboard = ({
<HeroBackgroundSlot />
<div className="flex flex-col gap-10 w-content-width mx-auto">
<div className="flex flex-col items-center gap-2 text-center">
{avatars && avatars.length > 0 ? (
<AvatarGroup avatars={avatars} label={avatarsLabel} />
{testimonials && testimonials.length > 0 ? (
<div className="flex flex-col items-center gap-4">
<AvatarGroup avatars={testimonials.map(t => ({ src: t.imageSrc }))} label={avatarsLabel} />
<div className="flex flex-wrap justify-center gap-8 mt-4">
{testimonials.map((testimonial, index) => (
<div key={index} className="max-w-xs text-center">
<p className="italic">"{testimonial.testimonial}"</p>
<p className="mt-2 font-semibold">{testimonial.name}</p>
<p className="text-sm text-gray-600">{testimonial.role}</p>
</div>
))}
</div>
</div>
) : tag ? (
<span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
) : null}
@@ -42,7 +60,7 @@ const HeroBillboard = ({
variant="slide-up"
gradientText={true}
tag="h1"
className="text-6xl font-medium text-balance"
className="text-6xl font-bold text-balance"
/>
<TextAnimation

View File

@@ -28,21 +28,24 @@ export default function HomePage() {
href: "#contact",
}}
imageSrc="http://img.b2bpic.net/free-photo/glass-wine-with-stunning-view-vineyard-sunset_23-2151514984.jpg"
avatars={[
testimonials={[
{
src: "http://img.b2bpic.net/free-photo/male-happy-female-clanging-glasses-wine-room_23-2148024586.jpg",
name: "Eleanor Vance",
role: "Wine Critic",
testimonial: "An unforgettable experience. The attention to detail is astonishing.",
imageSrc: "http://img.b2bpic.net/free-photo/people-enjoying-glass-wine-vineyard-with-stunning-nature-landscape_23-2151514988.jpg",
},
{
src: "http://img.b2bpic.net/free-photo/smiling-man-clanging-glasses-wine-with-woman_23-2148024467.jpg",
name: "Marcus Thorne",
role: "Sommelier",
testimonial: "A masterpiece of winemaking. Each bottle tells a story.",
imageSrc: "http://img.b2bpic.net/free-photo/life-home-with-young-adult-drinking-beverage_23-2149129073.jpg",
},
{
src: "http://img.b2bpic.net/free-photo/close-up-portrait-women-wine-balcony_329181-15442.jpg",
},
{
src: "http://img.b2bpic.net/free-photo/close-up-happy-people-celebrating_23-2149152905.jpg",
},
{
src: "http://img.b2bpic.net/free-photo/girl-friends-celebration-moments_23-2149168092.jpg",
name: "Sophia Rodriguez",
role: "Private Collector",
testimonial: "Vine & Vintages has become a staple in my collection. Simply exquisite.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-group-beautiful-women-taking-selfie_23-2148440494.jpg",
},
]}
avatarsLabel="Trusted by over 10,000 wine enthusiasts"