aura-ui-library 1.0.11 → 1.0.13

package/dist/index.js

@@ -31,7 +31,10 @@ var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
   Carousel: () => Carousel,
+  Footer: () => Footer,
+  Grid: () => Grid,
   Image: () => Image,
+  ImageEffectScrolling: () => ImageEffectScrolling,
   Navbar: () => Navbar,
   PinterestGrid: () => PinterestGrid,
   ProductCard: () => ProductCard,
@@ -39,6 +42,7 @@ __export(index_exports, {
   SideBar: () => SideBar,
   Skills: () => Skills,
   Spotlight: () => Spotlight,
+  Testimonials: () => Testimonials,
   TextImage: () => TextImage,
   TextWriting: () => TextWriting
 });
@@ -69,7 +73,14 @@ var Button = ({
   const buttonRef = (0, import_react.useRef)(null);
   const textRef = (0, import_react.useRef)(null);
   const iconRef = (0, import_react.useRef)(null);
-  const navigate = (0, import_react_router_dom.useNavigate)();
+  const inRouter = (0, import_react_router_dom.useInRouterContext)();
+  const navigate = inRouter ? (0, import_react_router_dom.useNavigate)() : null;
+  const handleNavigate = (path) => {
+    if (path) {
+      if (navigate) navigate(path);
+      else window.location.assign(path);
+    }
+  };
   (0, import_react.useEffect)(() => {
     const ctx = import_gsap.gsap.context(() => {
       import_gsap.gsap.from(buttonRef.current, {
@@ -128,7 +139,7 @@ var Button = ({
       filter: "brightness(1.1)",
       duration: 0.1
     });
-    if (to) navigate(to);
+    if (to) handleNavigate(to);
     if (onClick) onClick(e);
   };
   const Icon = IconName ? FiIcons[IconName] : null;
@@ -2756,6 +2767,7 @@ var TextImage = ({
   textColor = "#ffffff",
   fontSize = "clamp(48px, 8vw, 120px)",
   fontWeight = "900",
+  imageHeight = "1em",
   animationDuration = 1.2,
   easing = "power4.out"
 }) => {
@@ -2838,52 +2850,927 @@ var TextImage = ({
       display: "inline-block",
       willChange: "transform, opacity"
     },
-    imageWrap: (shape) => ({
-      display: "inline-block",
-      height: "0.8em",
-      aspectRatio: shape === "pill" ? "2/1" : "1/1",
-      margin: "0 0.1em",
-      borderRadius: shape === "circle" ? "50%" : shape === "pill" ? "100px" : "24px",
-      overflow: "hidden",
-      border: `2px solid rgba(255,255,255,0.1)`,
-      cursor: "pointer",
-      willChange: "transform, opacity",
-      verticalAlign: "middle"
-    }),
+    imageWrap: (shape, size, radius) => {
+      const h = size || imageHeight;
+      let br = radius;
+      if (!br) {
+        if (shape === "circle") br = "50%";
+        else if (shape === "pill") br = "100px";
+        else if (shape === "rounded") br = "24px";
+        else if (shape === "square") br = "8px";
+        else br = "0px";
+      }
+      let clipPath = "none";
+      if (shape === "diamond") clipPath = "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)";
+      if (shape === "hexagon") clipPath = "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)";
+      return {
+        display: "inline-block",
+        height: h,
+        aspectRatio: shape === "pill" ? "2/1" : "1/1",
+        margin: "0 0.1em",
+        borderRadius: br,
+        clipPath,
+        overflow: "hidden",
+        border: `2px solid rgba(255,255,255,0.1)`,
+        cursor: "pointer",
+        willChange: "transform, opacity",
+        verticalAlign: "middle"
+      };
+    },
     image: {
       width: "100%",
       height: "100%",
       objectFit: "cover"
     }
   };
-  return /* @__PURE__ */ import_react12.default.createElement("div", { ref: containerRef, style: styles.container }, segments.map(
-    (seg, i) => seg.type === "text" ? /* @__PURE__ */ import_react12.default.createElement(
-      "span",
-      {
-        key: i,
-        ref: (el) => segmentRefs.current[i] = el,
-        style: styles.text
-      },
-      seg.value
-    ) : /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement("div", { ref: containerRef, style: styles.container }, segments.map((seg, i) => {
+    const isString = typeof seg === "string";
+    const type = isString ? "text" : seg.type || (seg.image ? "image" : "text");
+    const value = isString ? seg : seg.value || seg.text || seg.image;
+    if (type === "text") {
+      return /* @__PURE__ */ import_react12.default.createElement(
+        "span",
+        {
+          key: i,
+          ref: (el) => segmentRefs.current[i] = el,
+          style: styles.text
+        },
+        value
+      );
+    }
+    return /* @__PURE__ */ import_react12.default.createElement(
       "div",
       {
         key: i,
         ref: (el) => segmentRefs.current[i] = el,
-        style: styles.imageWrap(seg.shape),
+        style: styles.imageWrap(seg.shape, seg.size, seg.radius),
         onMouseEnter: (e) => handleImageHover(e, i),
         onMouseLeave: () => handleImageLeave(i),
         onClick: () => handleNavigate(seg.path)
       },
-      /* @__PURE__ */ import_react12.default.createElement("img", { src: seg.value, alt: "accent", style: styles.image })
-    )
-  ));
+      /* @__PURE__ */ import_react12.default.createElement("img", { src: value, alt: "accent", style: styles.image })
+    );
+  }));
+};
+
+// src/components/Grid/Grid.jsx
+var import_react13 = __toESM(require("react"));
+var import_react_router_dom11 = require("react-router-dom");
+var import_gsap13 = require("gsap");
+var import_fi12 = require("react-icons/fi");
+var Grid = ({
+  items = [
+    { id: 1, title: "Architecture", description: "Deep neural networks for vision.", icon: /* @__PURE__ */ import_react13.default.createElement(import_fi12.FiLayers, null), span: "row-2", color: "#6366f1", image: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?auto=format&fit=crop&q=80&w=800" },
+    { id: 2, title: "Design", description: "Editorial interfaces.", icon: /* @__PURE__ */ import_react13.default.createElement(import_fi12.FiLayout, null), span: "col-2", color: "#f43f5e", image: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&q=80&w=800" },
+    { id: 3, title: "Speed", description: "Optimized for 120fps.", icon: /* @__PURE__ */ import_react13.default.createElement(import_fi12.FiZap, null), span: "normal", color: "#10b981" },
+    { id: 4, title: "Structure", description: "Bento-style layouts.", icon: /* @__PURE__ */ import_react13.default.createElement(import_fi12.FiGrid, null), span: "normal", color: "#fb7185" },
+    { id: 5, title: "Future", description: "Next-gen interactions.", icon: /* @__PURE__ */ import_react13.default.createElement(import_fi12.FiBox, null), span: "col-2", color: "#8b5cf6", image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&q=80&w=800" }
+  ],
+  accentColor = "#6366f1",
+  gap = "24px",
+  columns = "repeat(3, 1fr)",
+  animationDuration = 1.2,
+  easing = "power4.out"
+}) => {
+  const containerRef = (0, import_react13.useRef)(null);
+  const cardRefs = (0, import_react13.useRef)([]);
+  const inRouter = (0, import_react_router_dom11.useInRouterContext)();
+  const navigate = inRouter ? (0, import_react_router_dom11.useNavigate)() : null;
+  const handleNavigate = (path) => {
+    if (path) {
+      if (navigate) navigate(path);
+      else window.location.assign(path);
+    }
+  };
+  (0, import_react13.useEffect)(() => {
+    const ctx = import_gsap13.gsap.context(() => {
+      import_gsap13.gsap.fromTo(
+        cardRefs.current,
+        {
+          opacity: 0,
+          y: 40,
+          scale: 0.95,
+          filter: "blur(10px)"
+        },
+        {
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          filter: "blur(0px)",
+          stagger: 0.1,
+          duration: animationDuration,
+          ease: easing,
+          clearProps: "filter"
+        }
+      );
+    }, containerRef);
+    return () => ctx.revert();
+  }, [items, animationDuration, easing]);
+  const handleMouseMove = (e, index) => {
+    const card = cardRefs.current[index];
+    const { left, top, width, height } = card.getBoundingClientRect();
+    const x = (e.clientX - (left + width / 2)) / (width / 2);
+    const y = (e.clientY - (top + height / 2)) / (height / 2);
+    import_gsap13.gsap.to(card, {
+      rotateY: x * 8,
+      rotateX: -y * 8,
+      transformPerspective: 1e3,
+      duration: 0.4,
+      ease: "power2.out"
+    });
+    const glow = card.querySelector(".glow");
+    if (glow) {
+      import_gsap13.gsap.to(glow, {
+        opacity: 0.4,
+        x: x * 50,
+        y: y * 50,
+        duration: 0.3
+      });
+    }
+  };
+  const handleMouseLeave = (index) => {
+    import_gsap13.gsap.to(cardRefs.current[index], {
+      rotateY: 0,
+      rotateX: 0,
+      duration: 0.6,
+      ease: "power3.out"
+    });
+    const glow = cardRefs.current[index].querySelector(".glow");
+    if (glow) {
+      import_gsap13.gsap.to(glow, { opacity: 0, duration: 0.5 });
+    }
+  };
+  const styles = {
+    gridContainer: {
+      display: "grid",
+      gridTemplateColumns: columns,
+      gap,
+      width: "100%",
+      padding: "40px",
+      boxSizing: "border-box",
+      backgroundColor: "transparent",
+      fontFamily: '"Inter", sans-serif'
+    },
+    card: (item) => {
+      var _a, _b;
+      return {
+        position: "relative",
+        gridColumn: ((_a = item.span) == null ? void 0 : _a.includes("col-2")) ? "span 2" : "span 1",
+        gridRow: ((_b = item.span) == null ? void 0 : _b.includes("row-2")) ? "span 2" : "span 1",
+        minHeight: "240px",
+        backgroundColor: "rgba(20, 20, 20, 0.4)",
+        borderRadius: "32px",
+        overflow: "hidden",
+        border: "1px solid rgba(255, 255, 255, 0.05)",
+        backdropFilter: "blur(16px)",
+        WebkitBackdropFilter: "blur(16px)",
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-end",
+        padding: "32px",
+        transition: "border-color 0.3s ease",
+        willChange: "transform, opacity"
+      };
+    },
+    glow: (color) => ({
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: "150%",
+      height: "150%",
+      background: `radial-gradient(circle at center, ${color || accentColor}22 0%, transparent 70%)`,
+      transform: "translate(-50%, -50%)",
+      pointerEvents: "none",
+      opacity: 0,
+      zIndex: 1
+    }),
+    image: {
+      position: "absolute",
+      inset: 0,
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      opacity: 0.4,
+      zIndex: 0,
+      transition: "transform 0.5s ease"
+    },
+    content: {
+      position: "relative",
+      zIndex: 2
+    },
+    icon: (color) => ({
+      width: "48px",
+      height: "48px",
+      borderRadius: "14px",
+      backgroundColor: `${color || accentColor}22`,
+      color: color || accentColor,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "24px",
+      marginBottom: "20px"
+    }),
+    title: {
+      fontSize: "24px",
+      fontWeight: "800",
+      color: "#fff",
+      margin: "0 0 8px 0",
+      letterSpacing: "-0.5px"
+    },
+    description: {
+      fontSize: "15px",
+      color: "rgba(255, 255, 255, 0.5)",
+      margin: 0,
+      lineHeight: "1.5"
+    },
+    arrow: {
+      position: "absolute",
+      top: "32px",
+      right: "32px",
+      color: "rgba(255, 255, 255, 0.2)",
+      fontSize: "20px",
+      transition: "all 0.3s ease"
+    }
+  };
+  return /* @__PURE__ */ import_react13.default.createElement("div", { ref: containerRef, style: styles.gridContainer }, items.map((item, i) => /* @__PURE__ */ import_react13.default.createElement(
+    "div",
+    {
+      key: item.id,
+      ref: (el) => cardRefs.current[i] = el,
+      style: styles.card(item),
+      onMouseMove: (e) => handleMouseMove(e, i),
+      onMouseLeave: () => handleMouseLeave(i),
+      onClick: () => handleNavigate(item.path),
+      onMouseEnter: (e) => {
+        const arrow = e.currentTarget.querySelector(".arrow");
+        if (arrow) import_gsap13.gsap.to(arrow, { x: 5, y: -5, color: item.color || accentColor });
+        const img = e.currentTarget.querySelector("img");
+        if (img) import_gsap13.gsap.to(img, { scale: 1.1, opacity: 0.6 });
+      }
+    },
+    /* @__PURE__ */ import_react13.default.createElement("div", { className: "glow", style: styles.glow(item.color) }),
+    item.image && /* @__PURE__ */ import_react13.default.createElement("img", { src: item.image, alt: item.title, style: styles.image }),
+    /* @__PURE__ */ import_react13.default.createElement("div", { className: "arrow", style: styles.arrow }, /* @__PURE__ */ import_react13.default.createElement(import_fi12.FiArrowUpRight, null)),
+    /* @__PURE__ */ import_react13.default.createElement("div", { style: styles.content }, /* @__PURE__ */ import_react13.default.createElement("div", { style: styles.icon(item.color) }, item.icon), /* @__PURE__ */ import_react13.default.createElement("h3", { style: styles.title }, item.title), /* @__PURE__ */ import_react13.default.createElement("p", { style: styles.description }, item.description))
+  )));
+};
+
+// src/components/ImageEffect/ImageEffect.jsx
+var import_react14 = __toESM(require("react"));
+var import_react_router_dom12 = require("react-router-dom");
+var import_gsap14 = require("gsap");
+var import_ScrollTrigger = require("gsap/ScrollTrigger");
+var import_fi13 = require("react-icons/fi");
+import_gsap14.gsap.registerPlugin(import_ScrollTrigger.ScrollTrigger);
+var ImageEffectScrolling = ({
+  images = [
+    { id: 1, src: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&q=80&w=800", title: "Aether Flow" },
+    { id: 2, src: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&q=80&w=800", title: "Neural Nexus" },
+    { id: 3, src: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?auto=format&fit=crop&q=80&w=800", title: "Neon Gradients" },
+    { id: 4, src: "https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&q=80&w=800", title: "Geometry Labs" },
+    { id: 5, src: "https://images.unsplash.com/photo-1614850523296-d8c1af93d400?auto=format&fit=crop&q=80&w=800", title: "Liquid Void" },
+    { id: 6, src: "https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?auto=format&fit=crop&q=80&w=800", title: "Digital Ether" }
+  ],
+  accentColor = "#6366f1",
+  textColor = "#ffffff",
+  waveIntensity = 15,
+  scrollSpeed = 1,
+  animationDuration = 1.5,
+  easing = "power4.out"
+}) => {
+  const sectionRef = (0, import_react14.useRef)(null);
+  const containerRef = (0, import_react14.useRef)(null);
+  const imageRefs = (0, import_react14.useRef)([]);
+  const contentRef = (0, import_react14.useRef)(null);
+  const inRouter = (0, import_react_router_dom12.useInRouterContext)();
+  const navigate = inRouter ? (0, import_react_router_dom12.useNavigate)() : null;
+  const handleNavigate = (path) => {
+    if (path) {
+      if (navigate) navigate(path);
+      else window.location.assign(path);
+    }
+  };
+  (0, import_react14.useEffect)(() => {
+    const ctx = import_gsap14.gsap.context(() => {
+      const sections = imageRefs.current;
+      const totalWidth = containerRef.current.scrollWidth;
+      import_gsap14.gsap.to(containerRef.current, {
+        x: () => -(totalWidth - window.innerWidth),
+        ease: "none",
+        scrollTrigger: {
+          trigger: sectionRef.current,
+          pin: true,
+          scrub: 1,
+          start: "top top",
+          end: () => `+=${totalWidth}`,
+          anticipatePin: 1,
+          onUpdate: (self) => {
+            const velocity = self.getVelocity();
+            const skew = velocity / 500 * waveIntensity;
+            sections.forEach((img) => {
+              import_gsap14.gsap.to(img, {
+                skewX: skew,
+                duration: 0.5,
+                ease: "power2.out",
+                overwrite: "auto"
+              });
+            });
+          }
+        }
+      });
+      import_gsap14.gsap.fromTo(
+        imageRefs.current,
+        { opacity: 0, y: 100, scale: 0.8 },
+        {
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          stagger: 0.1,
+          duration: animationDuration,
+          ease: easing
+        }
+      );
+      sections.forEach((img) => {
+        const innerImg = img.querySelector("img");
+        import_gsap14.gsap.to(innerImg, {
+          x: -100,
+          ease: "none",
+          scrollTrigger: {
+            trigger: img,
+            containerAnimation: import_gsap14.gsap.getProperty(containerRef.current, "gsap"),
+            // This is tricky for scrub
+            scrub: true,
+            horizontal: true
+          }
+        });
+      });
+    }, sectionRef);
+    return () => ctx.revert();
+  }, [images, waveIntensity, animationDuration, easing]);
+  const handleMouseEnter = (e) => {
+    import_gsap14.gsap.to(e.currentTarget, {
+      scale: 1.05,
+      zIndex: 10,
+      duration: 0.6,
+      ease: "expo.out"
+    });
+    const overlay = e.currentTarget.querySelector(".overlay");
+    import_gsap14.gsap.to(overlay, { opacity: 1, duration: 0.4 });
+  };
+  const handleMouseLeave = (e) => {
+    import_gsap14.gsap.to(e.currentTarget, {
+      scale: 1,
+      zIndex: 1,
+      duration: 0.6,
+      ease: "expo.out"
+    });
+    const overlay = e.currentTarget.querySelector(".overlay");
+    import_gsap14.gsap.to(overlay, { opacity: 0, duration: 0.4 });
+  };
+  const styles = {
+    section: {
+      position: "relative",
+      width: "100%",
+      height: "100vh",
+      overflow: "hidden",
+      backgroundColor: "#050505",
+      display: "flex",
+      alignItems: "center"
+    },
+    container: {
+      display: "flex",
+      paddingLeft: "10vw",
+      paddingRight: "10vw",
+      gap: "50px",
+      alignItems: "center",
+      willChange: "transform"
+    },
+    imageItem: {
+      position: "relative",
+      flex: "0 0 45vh",
+      height: "60vh",
+      borderRadius: "24px",
+      overflow: "hidden",
+      cursor: "pointer",
+      backgroundColor: "#111",
+      willChange: "transform, skewX",
+      transformStyle: "preserve-3d"
+    },
+    image: {
+      width: "120%",
+      // Wider for parallax gap
+      height: "100%",
+      objectFit: "cover",
+      pointerEvents: "none",
+      transform: "translateX(0)"
+    },
+    overlay: {
+      position: "absolute",
+      inset: 0,
+      background: "linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%)",
+      opacity: 0,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      padding: "30px",
+      color: "#fff",
+      zIndex: 2,
+      pointerEvents: "none"
+    },
+    title: {
+      fontSize: "24px",
+      fontWeight: "800",
+      marginBottom: "8px",
+      fontFamily: '"Inter", sans-serif',
+      textTransform: "uppercase",
+      letterSpacing: "2px"
+    },
+    subtitle: {
+      fontSize: "12px",
+      opacity: 0.6,
+      textTransform: "uppercase",
+      letterSpacing: "4px"
+    },
+    navIndicator: {
+      position: "absolute",
+      bottom: "10vh",
+      left: "50%",
+      transform: "translateX(-50%)",
+      color: "rgba(255,255,255,0.2)",
+      fontSize: "12px",
+      textTransform: "uppercase",
+      letterSpacing: "5px",
+      zIndex: 10
+    }
+  };
+  return /* @__PURE__ */ import_react14.default.createElement("div", { ref: sectionRef, style: styles.section }, /* @__PURE__ */ import_react14.default.createElement("div", { style: styles.navIndicator }, "Scroll To Explore"), /* @__PURE__ */ import_react14.default.createElement("div", { ref: containerRef, style: styles.container }, images.map((img, i) => /* @__PURE__ */ import_react14.default.createElement(
+    "div",
+    {
+      key: img.id,
+      ref: (el) => imageRefs.current[i] = el,
+      style: styles.imageItem,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: () => handleNavigate(img.path)
+    },
+    /* @__PURE__ */ import_react14.default.createElement("div", { className: "overlay", style: styles.overlay }, /* @__PURE__ */ import_react14.default.createElement("span", { style: styles.subtitle }, "Gallery Item 0", i + 1), /* @__PURE__ */ import_react14.default.createElement("h3", { style: styles.title }, img.title), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", color: accentColor } }, "View Project ", /* @__PURE__ */ import_react14.default.createElement(import_fi13.FiArrowRight, null))),
+    /* @__PURE__ */ import_react14.default.createElement("img", { src: img.src, alt: img.title, style: styles.image })
+  ))));
+};
+
+// src/components/Testimonial/Testimonial.jsx
+var import_react15 = __toESM(require("react"));
+var import_gsap15 = require("gsap");
+var import_fi14 = require("react-icons/fi");
+var import_hi = require("react-icons/hi");
+var Testimonials = ({
+  items = [
+    {
+      id: 1,
+      name: "Alex Rivera",
+      role: "Director of Product",
+      company: "Linear",
+      content: "The attention to detail in Aura's design system is unprecedented. It transformed our workflow in weeks.",
+      rating: 5,
+      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&q=80&w=150"
+    },
+    {
+      id: 2,
+      name: "Sarah Chen",
+      role: "Lead Designer",
+      company: "Stripe",
+      content: "Fluidity and performance are at the core of these components. The GSAP integrations are truly world-class.",
+      rating: 5,
+      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=150"
+    },
+    {
+      id: 3,
+      name: "Marcus Thorne",
+      role: "Founding Engineer",
+      company: "Vercel",
+      content: "Clean, performant, and absolutely stunning. Aura is the benchmark for modern React components.",
+      rating: 5,
+      avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=150"
+    }
+  ],
+  accentColor = "#6366f1",
+  bgColor = "rgba(255, 255, 255, 0.03)",
+  textColor = "#ffffff",
+  animationDuration = 1.2,
+  easing = "power4.out"
+}) => {
+  const containerRef = (0, import_react15.useRef)(null);
+  const cardRefs = (0, import_react15.useRef)([]);
+  const titleRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
+    const ctx = import_gsap15.gsap.context(() => {
+      const tl = import_gsap15.gsap.timeline({ defaults: { ease: easing, duration: animationDuration } });
+      tl.fromTo(
+        titleRef.current,
+        { opacity: 0, y: 30 },
+        { opacity: 1, y: 0 }
+      ).fromTo(
+        cardRefs.current,
+        {
+          opacity: 0,
+          y: 50,
+          scale: 0.95,
+          filter: "blur(10px)"
+        },
+        {
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          filter: "blur(0px)",
+          stagger: 0.15,
+          clearProps: "filter"
+        },
+        "-=0.8"
+      );
+    }, containerRef);
+    return () => ctx.revert();
+  }, [items, animationDuration, easing]);
+  const handleCardHover = (e, index) => {
+    import_gsap15.gsap.to(cardRefs.current[index], {
+      y: -12,
+      scale: 1.02,
+      backgroundColor: "rgba(255, 255, 255, 0.06)",
+      borderColor: accentColor,
+      duration: 0.4,
+      ease: "power2.out"
+    });
+    const icon = cardRefs.current[index].querySelector(".quote-icon");
+    import_gsap15.gsap.to(icon, {
+      scale: 1.2,
+      rotate: 15,
+      color: accentColor,
+      duration: 0.4
+    });
+  };
+  const handleCardLeave = (index) => {
+    import_gsap15.gsap.to(cardRefs.current[index], {
+      y: 0,
+      scale: 1,
+      backgroundColor: bgColor,
+      borderColor: "rgba(255, 255, 255, 0.05)",
+      duration: 0.5,
+      ease: "power2.inOut"
+    });
+    const icon = cardRefs.current[index].querySelector(".quote-icon");
+    import_gsap15.gsap.to(icon, {
+      scale: 1,
+      rotate: 0,
+      color: "rgba(255, 255, 255, 0.2)",
+      duration: 0.5
+    });
+  };
+  const styles = {
+    section: {
+      padding: "120px 5%",
+      backgroundColor: "transparent",
+      fontFamily: '"Inter", -apple-system, sans-serif',
+      color: textColor,
+      width: "100%",
+      boxSizing: "border-box"
+    },
+    header: {
+      textAlign: "center",
+      marginBottom: "80px"
+    },
+    title: {
+      fontSize: "clamp(32px, 5vw, 64px)",
+      fontWeight: "900",
+      letterSpacing: "-2px",
+      marginBottom: "16px"
+    },
+    subtitle: {
+      fontSize: "16px",
+      opacity: 0.5,
+      letterSpacing: "2px",
+      textTransform: "uppercase"
+    },
+    grid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
+      gap: "32px",
+      maxWidth: "1200px",
+      margin: "0 auto"
+    },
+    card: {
+      position: "relative",
+      padding: "48px",
+      backgroundColor: bgColor,
+      borderRadius: "32px",
+      border: "1px solid rgba(255, 255, 255, 0.05)",
+      backdropFilter: "blur(16px)",
+      WebkitBackdropFilter: "blur(16px)",
+      cursor: "pointer",
+      willChange: "transform, opacity",
+      transition: "border-color 0.3s ease"
+    },
+    quoteIcon: {
+      position: "absolute",
+      top: "32px",
+      right: "40px",
+      fontSize: "32px",
+      color: "rgba(255, 255, 255, 0.1)",
+      willChange: "transform"
+    },
+    content: {
+      fontSize: "18px",
+      lineHeight: "1.6",
+      marginBottom: "32px",
+      position: "relative",
+      fontWeight: "500"
+    },
+    footer: {
+      display: "flex",
+      alignItems: "center",
+      gap: "16px"
+    },
+    avatar: {
+      width: "56px",
+      height: "56px",
+      borderRadius: "16px",
+      objectFit: "cover",
+      border: `2px solid ${accentColor}33`
+    },
+    info: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    name: {
+      fontSize: "16px",
+      fontWeight: "700"
+    },
+    role: {
+      fontSize: "13px",
+      opacity: 0.5
+    },
+    stars: {
+      display: "flex",
+      gap: "2px",
+      color: "#fbbf24",
+      marginBottom: "16px"
+    }
+  };
+  return /* @__PURE__ */ import_react15.default.createElement("section", { ref: containerRef, style: styles.section }, /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.header }, /* @__PURE__ */ import_react15.default.createElement("span", { style: styles.subtitle }, "Testimonials"), /* @__PURE__ */ import_react15.default.createElement("h2", { ref: titleRef, style: styles.title }, "Trusted by Visionaries")), /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.grid }, items.map((item, i) => /* @__PURE__ */ import_react15.default.createElement(
+    "div",
+    {
+      key: item.id,
+      ref: (el) => cardRefs.current[i] = el,
+      style: styles.card,
+      onMouseEnter: (e) => handleCardHover(e, i),
+      onMouseLeave: () => handleCardLeave(i)
+    },
+    /* @__PURE__ */ import_react15.default.createElement("div", { className: "quote-icon", style: styles.quoteIcon }, /* @__PURE__ */ import_react15.default.createElement(import_hi.HiQuoteLeft, null)),
+    /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.stars }, [...Array(item.rating)].map((_, i2) => /* @__PURE__ */ import_react15.default.createElement(import_fi14.FiStar, { key: i2 }))),
+    /* @__PURE__ */ import_react15.default.createElement("p", { style: styles.content }, '"', item.content, '"'),
+    /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.footer }, /* @__PURE__ */ import_react15.default.createElement("img", { src: item.avatar, alt: item.name, style: styles.avatar }), /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.info }, /* @__PURE__ */ import_react15.default.createElement("span", { style: styles.name }, item.name), /* @__PURE__ */ import_react15.default.createElement("span", { style: styles.role }, item.role, " @ ", item.company)))
+  ))));
+};
+
+// src/components/Footer/Footer.jsx
+var import_react16 = __toESM(require("react"));
+var import_react_router_dom13 = require("react-router-dom");
+var import_gsap16 = require("gsap");
+var import_fi15 = require("react-icons/fi");
+var Footer = ({
+  brandName = "AURA",
+  accentColor = "#6366f1",
+  bgColor = "#0a0a0a",
+  textColor = "#ffffff",
+  navLinks = [
+    { label: "Home", path: "/" },
+    { label: "Components", path: "/components" },
+    { label: "Showcase", path: "/showcase" },
+    { label: "Documentation", path: "/docs" }
+  ],
+  socialLinks = [
+    { icon: /* @__PURE__ */ import_react16.default.createElement(import_fi15.FiGithub, null), url: "https://github.com" },
+    { icon: /* @__PURE__ */ import_react16.default.createElement(import_fi15.FiTwitter, null), url: "https://twitter.com" },
+    { icon: /* @__PURE__ */ import_react16.default.createElement(import_fi15.FiLinkedin, null), url: "https://linkedin.com" },
+    { icon: /* @__PURE__ */ import_react16.default.createElement(import_fi15.FiInstagram, null), url: "https://instagram.com" }
+  ],
+  animationDuration = 1.2,
+  easing = "power4.out"
+}) => {
+  const footerRef = (0, import_react16.useRef)(null);
+  const topBtnRef = (0, import_react16.useRef)(null);
+  const columnRefs = (0, import_react16.useRef)([]);
+  const socialRefs = (0, import_react16.useRef)([]);
+  const inRouter = (0, import_react_router_dom13.useInRouterContext)();
+  const navigate = inRouter ? (0, import_react_router_dom13.useNavigate)() : null;
+  const handleNavigate = (path) => {
+    if (path) {
+      if (navigate) navigate(path);
+      else window.location.assign(path);
+    }
+  };
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+  (0, import_react16.useEffect)(() => {
+    const ctx = import_gsap16.gsap.context(() => {
+      const tl = import_gsap16.gsap.timeline({
+        scrollTrigger: {
+          trigger: footerRef.current,
+          start: "top bottom-=100px"
+        }
+      });
+      tl.fromTo(
+        columnRefs.current,
+        { opacity: 0, y: 30 },
+        {
+          opacity: 1,
+          y: 0,
+          stagger: 0.1,
+          duration: animationDuration,
+          ease: easing
+        }
+      ).fromTo(
+        socialRefs.current,
+        { opacity: 0, scale: 0.8 },
+        {
+          opacity: 1,
+          scale: 1,
+          stagger: 0.1,
+          duration: 0.8,
+          ease: "back.out(2)"
+        },
+        "-=0.5"
+      );
+    }, footerRef);
+    return () => ctx.revert();
+  }, [animationDuration, easing]);
+  const handleSocialMove = (e, index) => {
+    const { clientX, clientY, currentTarget } = e;
+    const { left, top, width, height } = currentTarget.getBoundingClientRect();
+    const x = (clientX - (left + width / 2)) * 0.4;
+    const y = (clientY - (top + height / 2)) * 0.4;
+    import_gsap16.gsap.to(currentTarget, {
+      x,
+      y,
+      duration: 0.3,
+      ease: "power2.out"
+    });
+  };
+  const handleSocialLeave = (index) => {
+    import_gsap16.gsap.to(socialRefs.current[index], {
+      x: 0,
+      y: 0,
+      duration: 0.6,
+      ease: "elastic.out(1, 0.3)"
+    });
+  };
+  const styles = {
+    footer: {
+      position: "relative",
+      width: "100%",
+      backgroundColor: bgColor,
+      color: textColor,
+      padding: "80px 5% 40px",
+      fontFamily: '"Inter", sans-serif',
+      boxSizing: "border-box",
+      overflow: "hidden"
+    },
+    grid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+      gap: "40px",
+      marginBottom: "60px"
+    },
+    brandColumn: {
+      gridColumn: "span 1"
+    },
+    brandTitle: {
+      fontSize: "32px",
+      fontWeight: "900",
+      letterSpacing: "-1.5px",
+      marginBottom: "20px",
+      color: accentColor
+    },
+    brandDesc: {
+      fontSize: "14px",
+      lineHeight: "1.6",
+      opacity: 0.5,
+      maxWidth: "240px"
+    },
+    colTitle: {
+      fontSize: "16px",
+      fontWeight: "700",
+      marginBottom: "24px",
+      textTransform: "uppercase",
+      letterSpacing: "1px"
+    },
+    link: {
+      display: "block",
+      fontSize: "14px",
+      color: textColor,
+      textDecoration: "none",
+      marginBottom: "12px",
+      opacity: 0.5,
+      transition: "opacity 0.3s ease, color 0.3s ease",
+      cursor: "pointer"
+    },
+    socialContainer: {
+      display: "flex",
+      gap: "16px",
+      marginTop: "20px"
+    },
+    socialIcon: {
+      width: "40px",
+      height: "40px",
+      borderRadius: "12px",
+      backgroundColor: "rgba(255, 255, 255, 0.05)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "20px",
+      color: textColor,
+      cursor: "pointer",
+      transition: "background-color 0.3s ease",
+      willChange: "transform"
+    },
+    bottom: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingTop: "40px",
+      borderTop: "1px solid rgba(255, 255, 255, 0.05)",
+      fontSize: "12px",
+      opacity: 0.3
+    },
+    topBtn: {
+      position: "absolute",
+      top: "40px",
+      right: "5%",
+      width: "50px",
+      height: "50px",
+      borderRadius: "15px",
+      backgroundColor: accentColor,
+      color: "#fff",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "20px",
+      cursor: "pointer",
+      border: "none",
+      boxShadow: `0 10px 20px ${accentColor}33`,
+      willChange: "transform"
+    }
+  };
+  return /* @__PURE__ */ import_react16.default.createElement("footer", { ref: footerRef, style: styles.footer }, /* @__PURE__ */ import_react16.default.createElement(
+    "button",
+    {
+      ref: topBtnRef,
+      style: styles.topBtn,
+      onClick: scrollToTop,
+      onMouseEnter: (e) => import_gsap16.gsap.to(e.currentTarget, { scale: 1.1, y: -5, duration: 0.3 }),
+      onMouseLeave: (e) => import_gsap16.gsap.to(e.currentTarget, { scale: 1, y: 0, duration: 0.3 })
+    },
+    /* @__PURE__ */ import_react16.default.createElement(import_fi15.FiArrowUp, null)
+  ), /* @__PURE__ */ import_react16.default.createElement("div", { style: styles.grid }, /* @__PURE__ */ import_react16.default.createElement("div", { ref: (el) => columnRefs.current[0] = el, style: styles.brandColumn }, /* @__PURE__ */ import_react16.default.createElement("div", { style: styles.brandTitle }, brandName), /* @__PURE__ */ import_react16.default.createElement("p", { style: styles.brandDesc }, "Elevating digital experiences with cinematic design systems and high-performance React components."), /* @__PURE__ */ import_react16.default.createElement("div", { style: styles.socialContainer }, socialLinks.map((social, i) => /* @__PURE__ */ import_react16.default.createElement(
+    "a",
+    {
+      key: i,
+      href: social.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      ref: (el) => socialRefs.current[i] = el,
+      style: styles.socialIcon,
+      onMouseMove: (e) => handleSocialMove(e, i),
+      onMouseLeave: () => handleSocialLeave(i),
+      onMouseEnter: (e) => e.currentTarget.style.backgroundColor = accentColor
+    },
+    social.icon
+  )))), /* @__PURE__ */ import_react16.default.createElement("div", { ref: (el) => columnRefs.current[1] = el }, /* @__PURE__ */ import_react16.default.createElement("div", { style: styles.colTitle }, "Navigation"), navLinks.map((link, i) => /* @__PURE__ */ import_react16.default.createElement(
+    "span",
+    {
+      key: i,
+      style: styles.link,
+      onClick: () => handleNavigate(link.path),
+      onMouseEnter: (e) => {
+        e.currentTarget.style.opacity = 1;
+        e.currentTarget.style.color = accentColor;
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.opacity = 0.5;
+        e.currentTarget.style.color = textColor;
+      }
+    },
+    link.label
+  ))), /* @__PURE__ */ import_react16.default.createElement("div", { ref: (el) => columnRefs.current[2] = el }, /* @__PURE__ */ import_react16.default.createElement("div", { style: styles.colTitle }, "Support"), /* @__PURE__ */ import_react16.default.createElement("a", { href: "mailto:hello@aura-ui.com", style: styles.link, onMouseEnter: (e) => e.currentTarget.style.opacity = 1, onMouseLeave: (e) => e.currentTarget.style.opacity = 0.5 }, "Help Center"), /* @__PURE__ */ import_react16.default.createElement("a", { href: "#", style: styles.link, onMouseEnter: (e) => e.currentTarget.style.opacity = 1, onMouseLeave: (e) => e.currentTarget.style.opacity = 0.5 }, "Changelog"), /* @__PURE__ */ import_react16.default.createElement("a", { href: "#", style: styles.link, onMouseEnter: (e) => e.currentTarget.style.opacity = 1, onMouseLeave: (e) => e.currentTarget.style.opacity = 0.5 }, "Terms"), /* @__PURE__ */ import_react16.default.createElement("a", { href: "#", style: styles.link, onMouseEnter: (e) => e.currentTarget.style.opacity = 1, onMouseLeave: (e) => e.currentTarget.style.opacity = 0.5 }, "Privacy")), /* @__PURE__ */ import_react16.default.createElement("div", { ref: (el) => columnRefs.current[3] = el }, /* @__PURE__ */ import_react16.default.createElement("div", { style: styles.colTitle }, "Contact"), /* @__PURE__ */ import_react16.default.createElement("div", { style: { ...styles.link, display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react16.default.createElement(import_fi15.FiMail, null), " hello@aura-ui.com"), /* @__PURE__ */ import_react16.default.createElement("div", { style: { ...styles.link, display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react16.default.createElement(import_fi15.FiMapPin, null), " San Francisco, CA"))), /* @__PURE__ */ import_react16.default.createElement("div", { style: styles.bottom }, /* @__PURE__ */ import_react16.default.createElement("div", null, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", brandName, " UI Library. All rights reserved."), /* @__PURE__ */ import_react16.default.createElement("div", { style: { display: "flex", gap: "20px" } }, /* @__PURE__ */ import_react16.default.createElement("span", null, "Version 1.2.0"), /* @__PURE__ */ import_react16.default.createElement("span", null, "Open Source"))));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   Carousel,
+  Footer,
+  Grid,
   Image,
+  ImageEffectScrolling,
   Navbar,
   PinterestGrid,
   ProductCard,
@@ -2891,6 +3778,7 @@ var TextImage = ({
   SideBar,
   Skills,
   Spotlight,
+  Testimonials,
   TextImage,
   TextWriting
 });