Header 3

1"use client";
2 
3import { Avatar, AvatarImage } from "@/components/ui/avatar";
4import { getAllPeople, getAvatarUrl, getImageKitUrl } from "@/lib/smoothui-data";
5import { ArrowDownRight, Star } from "lucide-react";
6import { motion, useReducedMotion } from "motion/react";
7import { AnimatedGroup, AnimatedText, Button, HeroHeader } from "@/components/smoothui/shared";
8 
9interface HeroShowcaseProps {
10  buttons?: {
11    primary?: {
12      text: string;
13      url: string;
14    };
15    secondary?: {
16      text: string;
17      url: string;
18    };
19  };
20  description?: string;
21  heading?: string;
22  reviews?: {
23    count: number;
24    avatars: {
25      src: string;
26      alt: string;
27    }[];
28    rating?: number;
29  };
30}
31 
32export function HeroShowcase({
33  heading = "Build beautiful UIs, effortlessly.",
34  description = "Smoothui gives you the building blocks to create stunning, animated interfaces in minutes.",
35  buttons = {
36    primary: {
37      text: "Get Started",
38      url: "#link",
39    },
40    secondary: {
41      text: "Watch demo",
42      url: "#link",
43    },
44  },
45  reviews = {
46    avatars: getAllPeople()
47      .slice(0, 5)
48      .map((person) => ({
49        alt: `${person.name} avatar`,
50        src: getAvatarUrl(person.avatar, 90),
51      })),
52    count: 200,
53    rating: 5.0,
54  },
55}: HeroShowcaseProps) {
56  const shouldReduceMotion = useReducedMotion();
57  return (
58    <>
59      <HeroHeader />
60      <main>
61        <motion.section
62          animate={
63            shouldReduceMotion
64              ? { opacity: 1 }
65              : { filter: "blur(0px)", opacity: 1, scale: 1 }
66          }
67          className="relative overflow-hidden bg-gradient-to-b from-background to-muted"
68          initial={
69            shouldReduceMotion
70              ? { opacity: 1 }
71              : { filter: "blur(12px)", opacity: 0, scale: 1.04 }
72          }
73          transition={
74            shouldReduceMotion
75              ? { duration: 0 }
76              : { bounce: 0.32, duration: 0.9, type: "spring" as const }
77          }
78        >
79          <div className="mx-auto grid max-w-5xl items-center gap-10 px-6 py-24 lg:grid-cols-2 lg:gap-20">
80            <AnimatedGroup
81              className="mx-auto flex flex-col items-center text-center md:ml-auto lg:max-w-3xl lg:items-start lg:text-left"
82              preset="blur-slide"
83            >
84              <AnimatedText
85                as="h1"
86                className="my-6 text-pretty font-bold text-4xl lg:text-6xl xl:text-7xl"
87              >
88// … truncated