Animated Gradient Demo

1"use client"
2 
3import React from "react"
4 
5import AnimatedGradient from "@/components/fancy/background/animated-gradient-with-svg"
6 
7interface BentoCardProps {
8  title: string
9  subtitle?: string
10  description?: string
11  buttonText?: string
12  align?: "left" | "center"
13}
14 
15const gradientColors = ["#FF0000", "#FF4500", "#FF9900"]
16 
17const BentoCard: React.FC<BentoCardProps> = ({
18  title,
19  subtitle,
20  description,
21  buttonText,
22  align = "left",
23}) => (
24  <div className="relative overflow-hidden rounded-2xl min-h-[120px] sm:min-h-[180px] w-dvw h-dvh flex flex-col justify-between p-4 sm:p-6 font-medium">
25    <span className="absolute inset-0 z-0 pointer-events-none bg-[#ff592f]">
26      <AnimatedGradient colors={gradientColors} speed={10} blur="medium" />
27    </span>
28    <div
29      className={`relative z-10 flex-1 ${align === "center" ? "items-center text-center" : "items-start text-left"} flex flex-col justify-between w-full h-full`}
30    >
31      <div>
32        <div className="text-white text-xs sm:text-sm md:text-base font-semibold -mb-0.5">
33          {title}
34        </div>
35        {subtitle && (
36          <div className="text-white/80 text-[10px] sm:text-xs md:text-sm mb-1 sm:mb-2">
37            {subtitle}
38          </div>
39        )}
40      </div>
41      {description && (
42        <div className="text-white text-[10px] sm:text-xs mt-auto mb-1 sm:mb-2 text-pretty leading-tight">{description}</div>
43      )}
44      {buttonText && (
45        <button className="mt-2 sm:mt-4 px-2 sm:px-3 py-0.5 sm:py-1 rounded-full border border-white text-white text-[10px] sm:text-xs font-medium transition-colors cursor-pointer">
46          {buttonText}
47        </button>
48      )}
49    </div>
50  </div>
51)
52 
53const AnimatedGradientDemo: React.FC = () => {
54  return (
55    <div className="w-full h-full flex items-center justify-center bg-background px-20 sm:px-8 py-8 sm:py-16">
56      <div className="grid grid-cols-1 sm:grid-cols-12 gap-2 w-full max-w-lg">
57        {/* Top left card */}
58        <div className="sm:col-span-8 h-32 sm:h-48">
59          <BentoCard
60            title="Animated Bento"
61            subtitle="#001"
62            description="Using only SVG circles and blur"
63          />
64        </div>
65        {/* Top right card */}
66        <div className="h-32 sm:h-48 sm:col-span-4">
67          <BentoCard title="Gradients" buttonText="Explore More"  />
68        </div>
69      </div>
70    </div>
71  )
72}
73 
74export default AnimatedGradientDemo