Empty Testimonial

1"use client";
2import { motion } from "motion/react";
3import { useState } from "react";
4import { HugeiconsIcon } from "@hugeicons/react";
5import { Add01Icon } from "@hugeicons/core-free-icons";
6 
7export default function EmptyTestimonial() {
8  const [isOpen, setIsOpen] = useState(false);
9  const [isHovered, setIsHovered] = useState(false);
10 
11  const pageVariants = {
12    spring: { type: "spring" as const, duration: 0.6 },
13  };
14 
15  return (
16    <div className="w-full flex flex-col items-center justify-center py-24 px-4">
17      <div className="mb-20 text-center">
18        <h2 className="text-3xl font-medium tracking-tight text-foreground md:text-4xl lg:text-5xl">
19          Wall of{" "}
20          <motion.span
21            onHoverStart={() => setIsHovered(true)}
22            onHoverEnd={() => setIsHovered(false)}
23            className="relative cursor-default inline-flex items-center gap-2 px-4 py-1 rounded-2xl bg-primary/5 border border-primary/10 text-primary hover:bg-primary/10 hover:border-primary/20 transition-colors duration-300"
24          >
25            Love
26            <motion.span
27              animate={
28                isHovered
29                  ? {
30                      scale: [1, 1.1, 1],
31                    }
32                  : { scale: 1 }
33              }
34              transition={{
35                duration: 0.7,
36                repeat: isHovered ? Infinity : 0,
37                ease: "easeInOut",
38              }}
39              className="inline-block"
40            >
41              💖
42            </motion.span>
43          </motion.span>
44        </h2>
45      </div>
46 
47      <div
48        onClick={() => setIsOpen(!isOpen)}
49        className="w-80 h-52 relative group cursor-pointer mb-12"
50      >
51        <div
52          className="folder-back relative w-[87.5%] mx-auto h-full flex justify-center rounded-xl overflow-visible"
53          style={{
54            background: "#EBEBEB",
55            border: "1px solid #D1D1D1",
56          }}
57        >
58          {[
59            {
60              initial: { rotate: -3, x: -38, y: 2 },
61              open: { rotate: -8, x: -70, y: -75 },
62              transition: {
63                type: "spring" as const,
64                bounce: 0.15,
65                stiffness: 160,
66                damping: 22,
67              },
68              className: "z-10",
69            },
70            {
71              initial: { rotate: 0, x: 0, y: 0 },
72              open: { rotate: 1, x: 2, y: -95 },
73              transition: {
74// … truncated