"use client"; import AnimatedGradientBackground from "@/components/AnimatedBackground"; import { AnimatedGroup } from "@/components/animated-group"; import { Button } from "@/components/ui/button"; import Image from "next/image"; type GradientHeroShowcaseProps = { title?: string; description?: string; buttons?: { label: string; href?: string; variant?: "default" | "gradient"; }[]; images?: { src: string; alt: string }[]; }; export function GradientHeroShowcase({ title = "Innovation Meets Simplicity", description = "Discover cutting-edge solutions designed for the modern digital landscape.", buttons = [ { label: "Start Building", href: "#", variant: "default" }, { label: "Request a demo", href: "#", variant: "gradient" }, ], images = [ { src: "https://tailark.com/_next/image?url=%2Fmail2.png&w=3840&q=75", alt: "App screen dark", }, { src: "https://tailark.com/_next/image?url=%2Fmail2-light.png&w=3840&q=75", alt: "App screen light", }, ], }: GradientHeroShowcaseProps) { const transitionVariants = { item: { hidden: { opacity: 0, filter: "blur(12px)", y: 12 }, visible: { opacity: 1, filter: "blur(0px)", y: 0, transition: { type: "spring" as const, bounce: 0.3, duration: 1.5 }, }, }, }; return (

{title}

{description}

{buttons.map((btn, idx) => (

))}

{images.map((img, idx) => ( {img.alt}

))}

); }

Prop	Type	Default	Description
`title`	`string`	`"Innovation Meets Simplicity"`	The main heading text
`description`	`string`	`"Discover cutting-edge solutions..."`	The description text
`buttons`	`array`	`[...]`	Array of button objects with label, href, and variant
`images`	`array`	`[...]`	Array of image objects with src and alt properties

Gradient Hero Showcase

Revolutionize Your Workflow

Installation

Props

Revolutionize Your Workflow