Scroll Animation Trigger Demo 1

1import React from "react";
2import { ScrollAnimationTrigger } from "../ui/scroll-animation-trigger";
3import { Palette } from "lucide-react";
4 
5export default function ScrollAnimationTriggerDemo1() {
6  return (
7    <div className="max-w-md mx-auto relative bg-background">
8      <ScrollAnimationTrigger
9        effect="color"
10        className="p-3 sm:p-4 md:p-6"
11        fromColor="#2b13c2"
12        toColor="#f002cc"
13      >
14        <div
15          className="bg-background p-6 sm:p-8 md:p-10 rounded-2xl sm:rounded-3xl shadow-xl w-full overflow-hidden relative group"
16          style={{
17            background:
18              "linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(43, 19, 194, 0.1))",
19          }}
20        >
21          <div className="absolute inset-0 opacity-10">
22            <svg
23              className="w-full h-full"
24              viewBox="0 0 100 100"
25              xmlns="http://www.w3.org/2000/svg"
26            >
27              <pattern
28                id="grid"
29                width="10"
30                height="10"
31                patternUnits="userSpaceOnUse"
32              >
33                <path
34                  d="M 10 0 L 0 0 0 10"
35                  fill="none"
36                  stroke="currentColor"
37                  strokeWidth="0.5"
38                />
39              </pattern>
40              <rect width="100%" height="100%" fill="url(#grid)" />
41            </svg>
42          </div>
43 
44          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-center mb-4 sm:mb-6">
45            <div className="p-3 sm:p-4 bg-background/50 rounded-xl shadow-md border border-pink-100 dark:border-pink-900 relative z-10 group-hover:shadow-pink-200 dark:group-hover:shadow-pink-900 transition-shadow duration-300">
46              <div className="absolute inset-0 bg-gradient-to-br from-pink-500 to-indigo-600 dark:from-pink-500 dark:to-indigo-600 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
47              <Palette className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8 relative z-10" />
48            </div>
49            <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-center sm:text-start">
50              Color Change
51            </h3>
52          </div>
53 
54          <p className="text-center sm:text-start text-sm sm:text-base md:text-lg leading-relaxed relative z-10 mb-4 sm:mb-6">
55            Watch the text transform through vibrant colors as you scroll
56            through this section, creating a playful and engaging visual
57// … truncated