Header 2

1"use client";
2 
3import { getImageKitUrl } from "@/lib/smoothui-data";
4import { motion, useReducedMotion } from "motion/react";
5import { AnimatedGroup, AnimatedText, Button, HeroHeader } from "@/components/smoothui/shared";
6 
7interface HeroProductProps {
8  badgeText?: string;
9  description?: string;
10  heading?: string;
11  imageAlt?: string;
12  imageSrc?: string;
13  primaryButton?: {
14    text: string;
15    url: string;
16  };
17  secondaryButton?: {
18    text: string;
19    url: string;
20  };
21}
22 
23export function HeroProduct({
24  badgeText = "New animation library",
25  heading = "Build Beautiful UIs, Effortlessly",
26  description = "Craft. Build. Ship Modern Websites With Smooth Animations.",
27  primaryButton = {
28    text: "Start Building",
29    url: "#link",
30  },
31  secondaryButton = {
32    text: "Watch Video",
33    url: "#link",
34  },
35  imageSrc = getImageKitUrl("/images/hero-smoothui.png", {
36    format: "auto",
37    quality: 85,
38    width: 1200,
39  }),
40  imageAlt = "SmoothUI desktop application interface",
41}: HeroProductProps) {
42  const shouldReduceMotion = useReducedMotion();
43  return (
44    <div className="relative">
45      <HeroHeader />
46      <main>
47        <motion.section
48          animate={
49            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }
50          }
51          className="relative overflow-hidden"
52          initial={
53            shouldReduceMotion ? { opacity: 1 } : { opacity: 0, scale: 1.02 }
54          }
55          transition={
56            shouldReduceMotion
57              ? { duration: 0 }
58              : {
59                  duration: 0.8,
60                  ease: [0.25, 0.46, 0.45, 0.94], // ease-out-quad
61                }
62          }
63        >
64          <div className="py-20 md:py-36">
65            <div className="relative z-10 mx-auto max-w-5xl px-6 text-center">
66              <AnimatedGroup className="space-y-8" preset="blur-slide">
67                {/* Badge with animated sparkle */}
68                <motion.div
69                  animate={
70                    shouldReduceMotion
71                      ? { opacity: 1 }
72                      : { opacity: 1, scale: 1, y: 0 }
73                  }
74                  initial={
75                    shouldReduceMotion
76                      ? { opacity: 1 }
77                      : { opacity: 0, scale: 0.9, y: 20 }
78                  }
79                  transition={
80                    shouldReduceMotion
81                      ? { duration: 0 }
82                      : {
83                          delay: 0.1,
84// … truncated