Scroll Animation Trigger Demo 2

1import React from "react";
2import { ScrollAnimationTrigger } from "../ui/scroll-animation-trigger";
3import { RefreshCw } from "lucide-react";
4 
5export default function ScrollAnimationTriggerDemo2() {
6  return (
7    <div className="max-w-md mx-auto relative">
8      <ScrollAnimationTrigger
9        effect="rotate"
10        className="p-3 sm:p-4 md:p-6"
11        delay={0.3}
12        fromRotation={-15}
13        toRotation={0}
14      >
15        <div className="bg-background p-6 sm:p-8 md:p-10 rounded-2xl sm:rounded-3xl shadow-xl w-full border-t border-l border-amber-200 dark:border-amber-500 relative overflow-hidden group">
16          <div className="absolute top-0 right-0 w-1/4 h-1/4 rounded-full bg-amber-300 dark:bg-amber-300 -mr-5 -mt-5 blur-xl sm:blur-2xl"></div>
17          <div className="absolute bottom-0 left-0 w-1/5 h-1/5 rounded-full bg-amber-300 dark:bg-amber-300 -ml-3 -mb-3 blur-md sm:blur-xl"></div>
18 
19          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-center mb-4 sm:mb-6">
20            <div className="p-3 sm:p-4 bg-white dark:bg-zinc-800 rounded-xl shadow-md border border-amber-100 dark:border-amber-900 relative z-10 group-hover:shadow-amber-200 dark:group-hover:shadow-amber-900/30 transition-shadow duration-300">
21              <div className="absolute inset-0 bg-gradient-to-br from-amber-500 to-amber-600 dark:from-amber-500 dark:to-amber-600 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
22              <div className="relative z-10">
23                <RefreshCw className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8 text-amber-500 dark:text-amber-400" />
24              </div>
25            </div>
26            <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-center sm:text-start text-amber-800 dark:text-amber-300">
27              Rotation Effect
28            </h3>
29          </div>
30 
31          <p className="text-amber-700/80 dark:text-amber-300/90 text-center sm:text-start text-sm sm:text-base md:text-lg leading-relaxed relative z-10 mb-4 sm:mb-6">
32            This content spins into place as you scroll, adding a dynamic and
33            playful element to the page that catches the eye.
34          </p>
35 
36          <div className="mt-4 sm:mt-6 flex flex-wrap items-center gap-2 justify-center sm:justify-start">
37            <div className="p-1.5 sm:p-2 rounded-md bg-amber-500/20 dark:bg-amber-500/10">
38              <div className="w-4 h-4 sm:w-5 sm:h-5 rounded-sm bg-amber-500 dark:bg-amber-400"></div>
39// … truncated