aura-ui-library 1.0.17 → 1.0.19

package/dist/index.js

@@ -34,6 +34,7 @@ __export(index_exports, {
   Carousel: () => Carousel,
   Footer: () => Footer,
   Grid: () => Grid,
+  Hero: () => Hero,
   HorizontalScrollSection: () => HorizontalScrollSection,
   Image: () => Image,
   Navbar: () => Navbar,
@@ -3759,24 +3760,31 @@ var ParallaxImage = ({
   const scrollIndicatorRef = (0, import_react17.useRef)(null);
   (0, import_react17.useEffect)(() => {
     const ctx = import_gsap17.gsap.context(() => {
-      import_gsap17.gsap.to(imageRef.current, {
-        yPercent: 20,
-        ease: "none",
-        scrollTrigger: {
-          trigger: sectionRef.current,
-          start: "top top",
-          end: "bottom top",
-          scrub: true
+      import_gsap17.gsap.fromTo(
+        imageRef.current,
+        { yPercent: -15 },
+        {
+          yPercent: 15,
+          ease: "none",
+          scrollTrigger: {
+            trigger: sectionRef.current,
+            start: "top bottom",
+            // Start when section enters viewport
+            end: "bottom top",
+            // End when section leaves viewport
+            scrub: true,
+            invalidateOnRefresh: true
+          }
         }
-      });
+      );
       import_gsap17.gsap.to(contentRef.current, {
-        y: 100,
+        y: 150,
         opacity: 0,
         ease: "none",
         scrollTrigger: {
           trigger: sectionRef.current,
           start: "top top",
-          end: "bottom 30%",
+          end: "bottom center",
           scrub: true
         }
       });
@@ -3837,10 +3845,11 @@ var ParallaxImage = ({
     },
     imageContainer: {
       position: "absolute",
-      inset: 0,
+      top: "-15%",
+      left: 0,
       width: "100%",
-      height: "110%",
-      // Taller than section for parallax room
+      height: "130%",
+      // Larger height for ample parallax range
       zIndex: 1
     },
     image: {
@@ -4056,13 +4065,213 @@ var SVGPathAnimation = ({
   return /* @__PURE__ */ import_react18.default.createElement("section", { ref: containerRef, style: styles.section }, /* @__PURE__ */ import_react18.default.createElement("div", { style: styles.svgContainer }, /* @__PURE__ */ import_react18.default.createElement("svg", { viewBox, style: styles.svg }, /* @__PURE__ */ import_react18.default.createElement("path", { ref: pathRef, d: path }))), /* @__PURE__ */ import_react18.default.createElement("div", { ref: textRef, style: styles.content }, /* @__PURE__ */ import_react18.default.createElement("h2", { style: styles.title }, title), /* @__PURE__ */ import_react18.default.createElement("p", { style: styles.subtitle }, subtitle)));
 };
 
-// src/components/ScrollAnimation/HorizontalScrollSection.jsx
+// src/components/Sections/Hero/Hero.jsx
 var import_react19 = __toESM(require("react"));
 var import_gsap19 = require("gsap");
-var import_ScrollTrigger3 = require("gsap/ScrollTrigger");
 var import_fi16 = require("react-icons/fi");
+var import_react_router_dom13 = require("react-router-dom");
+var Hero = ({
+  title = "Redefining Digital Aesthetics",
+  subtitle = "Aura UI delivers a suite of professional components engineered for high-performance and premium design systems.",
+  image = "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&q=80&w=1600",
+  align = "left",
+  layout = "split",
+  accentColor = "#6366f1",
+  textColor = "#ffffff",
+  height = "100vh",
+  btnText = "Explore Collection",
+  onBtnClick = null,
+  animationDuration = 1.6,
+  easing = "power4.out"
+}) => {
+  const sectionRef = (0, import_react19.useRef)(null);
+  const titleRef = (0, import_react19.useRef)(null);
+  const subRef = (0, import_react19.useRef)(null);
+  const btnRef = (0, import_react19.useRef)(null);
+  const imageRef = (0, import_react19.useRef)(null);
+  const orbitRef = (0, import_react19.useRef)(null);
+  const inRouter = (0, import_react_router_dom13.useInRouterContext)();
+  const navigate = inRouter ? (0, import_react_router_dom13.useNavigate)() : null;
+  (0, import_react19.useEffect)(() => {
+    const ctx = import_gsap19.gsap.context(() => {
+      const tl = import_gsap19.gsap.timeline({ defaults: { ease: easing, duration: animationDuration } });
+      import_gsap19.gsap.set([titleRef.current, subRef.current, btnRef.current], {
+        y: 60,
+        opacity: 0,
+        filter: "blur(15px)"
+      });
+      if (layout === "split") {
+        import_gsap19.gsap.set(imageRef.current, {
+          x: align === "left" ? 150 : -150,
+          opacity: 0,
+          scale: 1.1,
+          clipPath: "inset(0 100% 0 0)"
+        });
+      } else {
+        import_gsap19.gsap.set(imageRef.current, { scale: 1.25, opacity: 0 });
+      }
+      tl.to(sectionRef.current, { opacity: 1, duration: 0.8 }).to(imageRef.current, {
+        x: 0,
+        scale: 1,
+        opacity: 1,
+        clipPath: "inset(0 0% 0 0)",
+        duration: animationDuration + 0.4
+      }, 0).to([titleRef.current, subRef.current, btnRef.current], {
+        y: 0,
+        opacity: 1,
+        filter: "blur(0px)",
+        stagger: 0.15
+      }, "-=1.3");
+      import_gsap19.gsap.to(orbitRef.current, {
+        rotate: 360,
+        duration: 20,
+        repeat: -1,
+        ease: "none"
+      });
+    }, sectionRef);
+    return () => ctx.revert();
+  }, [layout, align, animationDuration, easing]);
+  const handleMagneticMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left - rect.width / 2;
+    const y = e.clientY - rect.top - rect.height / 2;
+    import_gsap19.gsap.to(e.currentTarget, {
+      x: x * 0.45,
+      y: y * 0.45,
+      duration: 0.6,
+      ease: "power2.out"
+    });
+  };
+  const handleMagneticLeave = (e) => {
+    import_gsap19.gsap.to(e.currentTarget, { x: 0, y: 0, duration: 0.8, ease: "elastic.out(1, 0.3)" });
+  };
+  const isCenter = align === "center";
+  const styles = {
+    section: {
+      position: "relative",
+      width: "100%",
+      height,
+      backgroundColor: "#030303",
+      color: textColor,
+      display: "flex",
+      flexDirection: layout === "split" ? align === "right" ? "row-reverse" : "row" : "column",
+      alignItems: "center",
+      justifyContent: isCenter ? "center" : "space-between",
+      overflow: "hidden",
+      fontFamily: '"Inter", -apple-system, sans-serif',
+      opacity: 0
+    },
+    backgroundOrbit: {
+      position: "absolute",
+      top: "50%",
+      left: align === "left" ? "70%" : "30%",
+      width: "800px",
+      height: "800px",
+      borderRadius: "50%",
+      background: `radial-gradient(circle, ${accentColor}11 0%, transparent 70%)`,
+      transform: "translate(-50%, -50%)",
+      pointerEvents: "none",
+      zIndex: 1
+    },
+    contentArea: {
+      flex: layout === "split" ? "0 0 50%" : "1",
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      padding: isCenter ? "0 5%" : align === "right" ? "0 10% 0 5%" : "0 5% 0 10%",
+      textAlign: align,
+      zIndex: 10,
+      position: layout === "overlay" ? "absolute" : "relative",
+      inset: layout === "overlay" ? 0 : "auto",
+      maxWidth: isCenter ? "900px" : "100%",
+      margin: isCenter ? "0 auto" : "0"
+    },
+    mediaArea: {
+      flex: layout === "split" ? "0 0 50%" : "1",
+      height: "100%",
+      width: layout === "overlay" ? "100%" : "50%",
+      position: layout === "overlay" ? "absolute" : "relative",
+      inset: layout === "overlay" ? 0 : "auto",
+      overflow: "hidden",
+      zIndex: layout === "overlay" ? 1 : 10
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      opacity: layout === "overlay" ? 0.35 : 1,
+      filter: layout === "overlay" ? "grayscale(40%)" : "none"
+    },
+    title: {
+      fontSize: "clamp(48px, 9vw, 120px)",
+      fontWeight: "900",
+      letterSpacing: "-5px",
+      lineHeight: "0.95",
+      margin: "0 0 32px 0",
+      textTransform: "uppercase",
+      color: textColor
+    },
+    subtitle: {
+      fontSize: "clamp(16px, 1.8vw, 22px)",
+      opacity: 0.5,
+      lineHeight: "1.6",
+      maxWidth: "600px",
+      margin: isCenter ? "0 auto 56px auto" : align === "right" ? "0 0 56px auto" : "0 0 56px 0",
+      fontWeight: "500"
+    },
+    button: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "14px",
+      padding: "22px 52px",
+      backgroundColor: accentColor,
+      color: "#fff",
+      borderRadius: "100px",
+      fontSize: "13px",
+      fontWeight: "800",
+      textTransform: "uppercase",
+      letterSpacing: "3px",
+      border: "none",
+      cursor: "pointer",
+      width: "fit-content",
+      textDecoration: "none",
+      alignSelf: align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start",
+      boxShadow: `0 25px 50px ${accentColor}35`,
+      transition: "background-color 0.4s ease, transform 0.4s ease"
+    },
+    overlay: {
+      position: "absolute",
+      inset: 0,
+      background: "linear-gradient(to bottom, rgba(3,3,3,0.2) 0%, rgba(3,3,3,0.9) 100%)",
+      zIndex: 5,
+      pointerEvents: "none",
+      display: layout === "overlay" ? "block" : "none"
+    }
+  };
+  return /* @__PURE__ */ import_react19.default.createElement("section", { ref: sectionRef, style: styles.section }, /* @__PURE__ */ import_react19.default.createElement("div", { ref: orbitRef, style: styles.backgroundOrbit }), /* @__PURE__ */ import_react19.default.createElement("div", { style: styles.mediaArea }, /* @__PURE__ */ import_react19.default.createElement("img", { ref: imageRef, src: image, alt: "Hero Media", style: styles.image }), layout === "overlay" && /* @__PURE__ */ import_react19.default.createElement("div", { style: styles.overlay })), /* @__PURE__ */ import_react19.default.createElement("div", { style: styles.contentArea }, /* @__PURE__ */ import_react19.default.createElement("h1", { ref: titleRef, style: styles.title }, title), /* @__PURE__ */ import_react19.default.createElement("p", { ref: subRef, style: styles.subtitle }, subtitle), /* @__PURE__ */ import_react19.default.createElement(
+    "button",
+    {
+      ref: btnRef,
+      style: styles.button,
+      onClick: onBtnClick,
+      onMouseMove: handleMagneticMove,
+      onMouseLeave: handleMagneticLeave,
+      onMouseEnter: (e) => import_gsap19.gsap.to(e.currentTarget, { y: -5, duration: 0.3 })
+    },
+    btnText,
+    " ",
+    /* @__PURE__ */ import_react19.default.createElement(import_fi16.FiArrowRight, null)
+  )));
+};
+
+// src/components/ScrollAnimation/HorizontalScrollSection.jsx
+var import_react20 = __toESM(require("react"));
+var import_gsap20 = require("gsap");
+var import_ScrollTrigger3 = require("gsap/ScrollTrigger");
+var import_fi17 = require("react-icons/fi");
 if (typeof window !== "undefined") {
-  import_gsap19.gsap.registerPlugin(import_ScrollTrigger3.ScrollTrigger);
+  import_gsap20.gsap.registerPlugin(import_ScrollTrigger3.ScrollTrigger);
 }
 var HorizontalScrollSection = ({
   items = [
@@ -4076,16 +4285,16 @@ var HorizontalScrollSection = ({
   animationDuration = 1.2,
   easing = "power4.out"
 }) => {
-  const sectionRef = (0, import_react19.useRef)(null);
-  const containerRef = (0, import_react19.useRef)(null);
-  const triggerRef = (0, import_react19.useRef)(null);
-  const progressRef = (0, import_react19.useRef)(null);
-  const itemRefs = (0, import_react19.useRef)([]);
-  (0, import_react19.useEffect)(() => {
-    const ctx = import_gsap19.gsap.context(() => {
+  const sectionRef = (0, import_react20.useRef)(null);
+  const containerRef = (0, import_react20.useRef)(null);
+  const triggerRef = (0, import_react20.useRef)(null);
+  const progressRef = (0, import_react20.useRef)(null);
+  const itemRefs = (0, import_react20.useRef)([]);
+  (0, import_react20.useEffect)(() => {
+    const ctx = import_gsap20.gsap.context(() => {
       const scrollWidth = containerRef.current.scrollWidth;
       const windowWidth = window.innerWidth;
-      const tl = import_gsap19.gsap.to(containerRef.current, {
+      const tl = import_gsap20.gsap.to(containerRef.current, {
         x: () => -(scrollWidth - windowWidth),
         ease: "none",
         scrollTrigger: {
@@ -4097,7 +4306,7 @@ var HorizontalScrollSection = ({
           invalidateOnRefresh: true,
           onUpdate: (self) => {
             if (progressRef.current) {
-              import_gsap19.gsap.to(progressRef.current, {
+              import_gsap20.gsap.to(progressRef.current, {
                 scaleX: self.progress,
                 duration: 0.1,
                 ease: "none",
@@ -4108,7 +4317,7 @@ var HorizontalScrollSection = ({
         }
       });
       itemRefs.current.forEach((item, index) => {
-        import_gsap19.gsap.fromTo(
+        import_gsap20.gsap.fromTo(
           item.querySelector(".item-content"),
           { opacity: 0, y: 50, scale: 0.95 },
           {
@@ -4124,7 +4333,7 @@ var HorizontalScrollSection = ({
           }
         );
       });
-      import_gsap19.gsap.fromTo(
+      import_gsap20.gsap.fromTo(
         sectionRef.current,
         { opacity: 0 },
         { opacity: 1, duration: animationDuration, ease: easing }
@@ -4133,22 +4342,22 @@ var HorizontalScrollSection = ({
     return () => ctx.revert();
   }, [items, animationDuration, easing]);
   const handleItemHover = (e, index) => {
-    import_gsap19.gsap.to(itemRefs.current[index], {
+    import_gsap20.gsap.to(itemRefs.current[index], {
       y: -10,
       duration: 0.4,
       ease: "power2.out"
     });
     const overlay = itemRefs.current[index].querySelector(".img-overlay");
-    if (overlay) import_gsap19.gsap.to(overlay, { opacity: 0.4, duration: 0.4 });
+    if (overlay) import_gsap20.gsap.to(overlay, { opacity: 0.4, duration: 0.4 });
   };
   const handleItemLeave = (index) => {
-    import_gsap19.gsap.to(itemRefs.current[index], {
+    import_gsap20.gsap.to(itemRefs.current[index], {
       y: 0,
       duration: 0.4,
       ease: "power2.out"
     });
     const overlay = itemRefs.current[index].querySelector(".img-overlay");
-    if (overlay) import_gsap19.gsap.to(overlay, { opacity: 0, duration: 0.4 });
+    if (overlay) import_gsap20.gsap.to(overlay, { opacity: 0, duration: 0.4 });
   };
   const styles = {
     triggerSection: {
@@ -4251,7 +4460,7 @@ var HorizontalScrollSection = ({
       transform: "scaleX(0)"
     }
   };
-  return /* @__PURE__ */ import_react19.default.createElement("div", { ref: triggerRef, style: styles.triggerSection }, /* @__PURE__ */ import_react19.default.createElement("div", { ref: containerRef, style: styles.outerContainer }, /* @__PURE__ */ import_react19.default.createElement("div", { style: styles.scroller }, items.map((item, i) => /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement("div", { ref: triggerRef, style: styles.triggerSection }, /* @__PURE__ */ import_react20.default.createElement("div", { ref: containerRef, style: styles.outerContainer }, /* @__PURE__ */ import_react20.default.createElement("div", { style: styles.scroller }, items.map((item, i) => /* @__PURE__ */ import_react20.default.createElement(
     "div",
     {
       key: item.id,
@@ -4260,10 +4469,10 @@ var HorizontalScrollSection = ({
       onMouseEnter: (e) => handleItemHover(e, i),
       onMouseLeave: () => handleItemLeave(i)
     },
-    /* @__PURE__ */ import_react19.default.createElement("img", { src: item.image, alt: item.title, style: styles.image, className: "item-bg" }),
-    /* @__PURE__ */ import_react19.default.createElement("div", { className: "img-overlay", style: styles.imgOverlay }),
-    /* @__PURE__ */ import_react19.default.createElement("div", { className: "item-content", style: styles.content }, /* @__PURE__ */ import_react19.default.createElement("div", { style: styles.badge(item.color) }, /* @__PURE__ */ import_react19.default.createElement(import_fi16.FiLayers, null), " ", item.id < 10 ? `0${item.id}` : item.id), /* @__PURE__ */ import_react19.default.createElement("h3", { style: styles.itemTitle }, item.title), /* @__PURE__ */ import_react19.default.createElement("p", { style: styles.itemDesc }, item.description), /* @__PURE__ */ import_react19.default.createElement("div", { style: { marginTop: "24px", display: "flex", alignItems: "center", gap: "10px", color: item.color, fontWeight: "700" } }, "Explore Case ", /* @__PURE__ */ import_react19.default.createElement(import_fi16.FiArrowRight, null)))
-  )))), /* @__PURE__ */ import_react19.default.createElement("div", { style: styles.progressBarWrap }, /* @__PURE__ */ import_react19.default.createElement("div", { ref: progressRef, style: styles.progressFill })));
+    /* @__PURE__ */ import_react20.default.createElement("img", { src: item.image, alt: item.title, style: styles.image, className: "item-bg" }),
+    /* @__PURE__ */ import_react20.default.createElement("div", { className: "img-overlay", style: styles.imgOverlay }),
+    /* @__PURE__ */ import_react20.default.createElement("div", { className: "item-content", style: styles.content }, /* @__PURE__ */ import_react20.default.createElement("div", { style: styles.badge(item.color) }, /* @__PURE__ */ import_react20.default.createElement(import_fi17.FiLayers, null), " ", item.id < 10 ? `0${item.id}` : item.id), /* @__PURE__ */ import_react20.default.createElement("h3", { style: styles.itemTitle }, item.title), /* @__PURE__ */ import_react20.default.createElement("p", { style: styles.itemDesc }, item.description), /* @__PURE__ */ import_react20.default.createElement("div", { style: { marginTop: "24px", display: "flex", alignItems: "center", gap: "10px", color: item.color, fontWeight: "700" } }, "Explore Case ", /* @__PURE__ */ import_react20.default.createElement(import_fi17.FiArrowRight, null)))
+  )))), /* @__PURE__ */ import_react20.default.createElement("div", { style: styles.progressBarWrap }, /* @__PURE__ */ import_react20.default.createElement("div", { ref: progressRef, style: styles.progressFill })));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -4272,6 +4481,7 @@ var HorizontalScrollSection = ({
   Carousel,
   Footer,
   Grid,
+  Hero,
   HorizontalScrollSection,
   Image,
   Navbar,

package/dist/index.mjs

@@ -3746,24 +3746,31 @@ var ParallaxImage = ({
   const scrollIndicatorRef = useRef17(null);
   useEffect17(() => {
     const ctx = gsap17.context(() => {
-      gsap17.to(imageRef.current, {
-        yPercent: 20,
-        ease: "none",
-        scrollTrigger: {
-          trigger: sectionRef.current,
-          start: "top top",
-          end: "bottom top",
-          scrub: true
+      gsap17.fromTo(
+        imageRef.current,
+        { yPercent: -15 },
+        {
+          yPercent: 15,
+          ease: "none",
+          scrollTrigger: {
+            trigger: sectionRef.current,
+            start: "top bottom",
+            // Start when section enters viewport
+            end: "bottom top",
+            // End when section leaves viewport
+            scrub: true,
+            invalidateOnRefresh: true
+          }
         }
-      });
+      );
       gsap17.to(contentRef.current, {
-        y: 100,
+        y: 150,
         opacity: 0,
         ease: "none",
         scrollTrigger: {
           trigger: sectionRef.current,
           start: "top top",
-          end: "bottom 30%",
+          end: "bottom center",
           scrub: true
         }
       });
@@ -3824,10 +3831,11 @@ var ParallaxImage = ({
     },
     imageContainer: {
       position: "absolute",
-      inset: 0,
+      top: "-15%",
+      left: 0,
       width: "100%",
-      height: "110%",
-      // Taller than section for parallax room
+      height: "130%",
+      // Larger height for ample parallax range
       zIndex: 1
     },
     image: {
@@ -4043,13 +4051,213 @@ var SVGPathAnimation = ({
   return /* @__PURE__ */ React18.createElement("section", { ref: containerRef, style: styles.section }, /* @__PURE__ */ React18.createElement("div", { style: styles.svgContainer }, /* @__PURE__ */ React18.createElement("svg", { viewBox, style: styles.svg }, /* @__PURE__ */ React18.createElement("path", { ref: pathRef, d: path }))), /* @__PURE__ */ React18.createElement("div", { ref: textRef, style: styles.content }, /* @__PURE__ */ React18.createElement("h2", { style: styles.title }, title), /* @__PURE__ */ React18.createElement("p", { style: styles.subtitle }, subtitle)));
 };
 
-// src/components/ScrollAnimation/HorizontalScrollSection.jsx
-import React19, { useRef as useRef19, useEffect as useEffect19 } from "react";
+// src/components/Sections/Hero/Hero.jsx
+import React19, { useRef as useRef19, useEffect as useEffect19, useState as useState9 } from "react";
 import { gsap as gsap19 } from "gsap";
+import { FiArrowRight as FiArrowRight7 } from "react-icons/fi";
+import { useNavigate as useNavigate13, useInRouterContext as useInRouterContext13 } from "react-router-dom";
+var Hero = ({
+  title = "Redefining Digital Aesthetics",
+  subtitle = "Aura UI delivers a suite of professional components engineered for high-performance and premium design systems.",
+  image = "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&q=80&w=1600",
+  align = "left",
+  layout = "split",
+  accentColor = "#6366f1",
+  textColor = "#ffffff",
+  height = "100vh",
+  btnText = "Explore Collection",
+  onBtnClick = null,
+  animationDuration = 1.6,
+  easing = "power4.out"
+}) => {
+  const sectionRef = useRef19(null);
+  const titleRef = useRef19(null);
+  const subRef = useRef19(null);
+  const btnRef = useRef19(null);
+  const imageRef = useRef19(null);
+  const orbitRef = useRef19(null);
+  const inRouter = useInRouterContext13();
+  const navigate = inRouter ? useNavigate13() : null;
+  useEffect19(() => {
+    const ctx = gsap19.context(() => {
+      const tl = gsap19.timeline({ defaults: { ease: easing, duration: animationDuration } });
+      gsap19.set([titleRef.current, subRef.current, btnRef.current], {
+        y: 60,
+        opacity: 0,
+        filter: "blur(15px)"
+      });
+      if (layout === "split") {
+        gsap19.set(imageRef.current, {
+          x: align === "left" ? 150 : -150,
+          opacity: 0,
+          scale: 1.1,
+          clipPath: "inset(0 100% 0 0)"
+        });
+      } else {
+        gsap19.set(imageRef.current, { scale: 1.25, opacity: 0 });
+      }
+      tl.to(sectionRef.current, { opacity: 1, duration: 0.8 }).to(imageRef.current, {
+        x: 0,
+        scale: 1,
+        opacity: 1,
+        clipPath: "inset(0 0% 0 0)",
+        duration: animationDuration + 0.4
+      }, 0).to([titleRef.current, subRef.current, btnRef.current], {
+        y: 0,
+        opacity: 1,
+        filter: "blur(0px)",
+        stagger: 0.15
+      }, "-=1.3");
+      gsap19.to(orbitRef.current, {
+        rotate: 360,
+        duration: 20,
+        repeat: -1,
+        ease: "none"
+      });
+    }, sectionRef);
+    return () => ctx.revert();
+  }, [layout, align, animationDuration, easing]);
+  const handleMagneticMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left - rect.width / 2;
+    const y = e.clientY - rect.top - rect.height / 2;
+    gsap19.to(e.currentTarget, {
+      x: x * 0.45,
+      y: y * 0.45,
+      duration: 0.6,
+      ease: "power2.out"
+    });
+  };
+  const handleMagneticLeave = (e) => {
+    gsap19.to(e.currentTarget, { x: 0, y: 0, duration: 0.8, ease: "elastic.out(1, 0.3)" });
+  };
+  const isCenter = align === "center";
+  const styles = {
+    section: {
+      position: "relative",
+      width: "100%",
+      height,
+      backgroundColor: "#030303",
+      color: textColor,
+      display: "flex",
+      flexDirection: layout === "split" ? align === "right" ? "row-reverse" : "row" : "column",
+      alignItems: "center",
+      justifyContent: isCenter ? "center" : "space-between",
+      overflow: "hidden",
+      fontFamily: '"Inter", -apple-system, sans-serif',
+      opacity: 0
+    },
+    backgroundOrbit: {
+      position: "absolute",
+      top: "50%",
+      left: align === "left" ? "70%" : "30%",
+      width: "800px",
+      height: "800px",
+      borderRadius: "50%",
+      background: `radial-gradient(circle, ${accentColor}11 0%, transparent 70%)`,
+      transform: "translate(-50%, -50%)",
+      pointerEvents: "none",
+      zIndex: 1
+    },
+    contentArea: {
+      flex: layout === "split" ? "0 0 50%" : "1",
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      padding: isCenter ? "0 5%" : align === "right" ? "0 10% 0 5%" : "0 5% 0 10%",
+      textAlign: align,
+      zIndex: 10,
+      position: layout === "overlay" ? "absolute" : "relative",
+      inset: layout === "overlay" ? 0 : "auto",
+      maxWidth: isCenter ? "900px" : "100%",
+      margin: isCenter ? "0 auto" : "0"
+    },
+    mediaArea: {
+      flex: layout === "split" ? "0 0 50%" : "1",
+      height: "100%",
+      width: layout === "overlay" ? "100%" : "50%",
+      position: layout === "overlay" ? "absolute" : "relative",
+      inset: layout === "overlay" ? 0 : "auto",
+      overflow: "hidden",
+      zIndex: layout === "overlay" ? 1 : 10
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      opacity: layout === "overlay" ? 0.35 : 1,
+      filter: layout === "overlay" ? "grayscale(40%)" : "none"
+    },
+    title: {
+      fontSize: "clamp(48px, 9vw, 120px)",
+      fontWeight: "900",
+      letterSpacing: "-5px",
+      lineHeight: "0.95",
+      margin: "0 0 32px 0",
+      textTransform: "uppercase",
+      color: textColor
+    },
+    subtitle: {
+      fontSize: "clamp(16px, 1.8vw, 22px)",
+      opacity: 0.5,
+      lineHeight: "1.6",
+      maxWidth: "600px",
+      margin: isCenter ? "0 auto 56px auto" : align === "right" ? "0 0 56px auto" : "0 0 56px 0",
+      fontWeight: "500"
+    },
+    button: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "14px",
+      padding: "22px 52px",
+      backgroundColor: accentColor,
+      color: "#fff",
+      borderRadius: "100px",
+      fontSize: "13px",
+      fontWeight: "800",
+      textTransform: "uppercase",
+      letterSpacing: "3px",
+      border: "none",
+      cursor: "pointer",
+      width: "fit-content",
+      textDecoration: "none",
+      alignSelf: align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start",
+      boxShadow: `0 25px 50px ${accentColor}35`,
+      transition: "background-color 0.4s ease, transform 0.4s ease"
+    },
+    overlay: {
+      position: "absolute",
+      inset: 0,
+      background: "linear-gradient(to bottom, rgba(3,3,3,0.2) 0%, rgba(3,3,3,0.9) 100%)",
+      zIndex: 5,
+      pointerEvents: "none",
+      display: layout === "overlay" ? "block" : "none"
+    }
+  };
+  return /* @__PURE__ */ React19.createElement("section", { ref: sectionRef, style: styles.section }, /* @__PURE__ */ React19.createElement("div", { ref: orbitRef, style: styles.backgroundOrbit }), /* @__PURE__ */ React19.createElement("div", { style: styles.mediaArea }, /* @__PURE__ */ React19.createElement("img", { ref: imageRef, src: image, alt: "Hero Media", style: styles.image }), layout === "overlay" && /* @__PURE__ */ React19.createElement("div", { style: styles.overlay })), /* @__PURE__ */ React19.createElement("div", { style: styles.contentArea }, /* @__PURE__ */ React19.createElement("h1", { ref: titleRef, style: styles.title }, title), /* @__PURE__ */ React19.createElement("p", { ref: subRef, style: styles.subtitle }, subtitle), /* @__PURE__ */ React19.createElement(
+    "button",
+    {
+      ref: btnRef,
+      style: styles.button,
+      onClick: onBtnClick,
+      onMouseMove: handleMagneticMove,
+      onMouseLeave: handleMagneticLeave,
+      onMouseEnter: (e) => gsap19.to(e.currentTarget, { y: -5, duration: 0.3 })
+    },
+    btnText,
+    " ",
+    /* @__PURE__ */ React19.createElement(FiArrowRight7, null)
+  )));
+};
+
+// src/components/ScrollAnimation/HorizontalScrollSection.jsx
+import React20, { useRef as useRef20, useEffect as useEffect20 } from "react";
+import { gsap as gsap20 } from "gsap";
 import { ScrollTrigger as ScrollTrigger3 } from "gsap/ScrollTrigger";
-import { FiArrowRight as FiArrowRight7, FiChevronRight as FiChevronRight3, FiLayers as FiLayers4 } from "react-icons/fi";
+import { FiArrowRight as FiArrowRight8, FiChevronRight as FiChevronRight3, FiLayers as FiLayers4 } from "react-icons/fi";
 if (typeof window !== "undefined") {
-  gsap19.registerPlugin(ScrollTrigger3);
+  gsap20.registerPlugin(ScrollTrigger3);
 }
 var HorizontalScrollSection = ({
   items = [
@@ -4063,16 +4271,16 @@ var HorizontalScrollSection = ({
   animationDuration = 1.2,
   easing = "power4.out"
 }) => {
-  const sectionRef = useRef19(null);
-  const containerRef = useRef19(null);
-  const triggerRef = useRef19(null);
-  const progressRef = useRef19(null);
-  const itemRefs = useRef19([]);
-  useEffect19(() => {
-    const ctx = gsap19.context(() => {
+  const sectionRef = useRef20(null);
+  const containerRef = useRef20(null);
+  const triggerRef = useRef20(null);
+  const progressRef = useRef20(null);
+  const itemRefs = useRef20([]);
+  useEffect20(() => {
+    const ctx = gsap20.context(() => {
       const scrollWidth = containerRef.current.scrollWidth;
       const windowWidth = window.innerWidth;
-      const tl = gsap19.to(containerRef.current, {
+      const tl = gsap20.to(containerRef.current, {
         x: () => -(scrollWidth - windowWidth),
         ease: "none",
         scrollTrigger: {
@@ -4084,7 +4292,7 @@ var HorizontalScrollSection = ({
           invalidateOnRefresh: true,
           onUpdate: (self) => {
             if (progressRef.current) {
-              gsap19.to(progressRef.current, {
+              gsap20.to(progressRef.current, {
                 scaleX: self.progress,
                 duration: 0.1,
                 ease: "none",
@@ -4095,7 +4303,7 @@ var HorizontalScrollSection = ({
         }
       });
       itemRefs.current.forEach((item, index) => {
-        gsap19.fromTo(
+        gsap20.fromTo(
           item.querySelector(".item-content"),
           { opacity: 0, y: 50, scale: 0.95 },
           {
@@ -4111,7 +4319,7 @@ var HorizontalScrollSection = ({
           }
         );
       });
-      gsap19.fromTo(
+      gsap20.fromTo(
         sectionRef.current,
         { opacity: 0 },
         { opacity: 1, duration: animationDuration, ease: easing }
@@ -4120,22 +4328,22 @@ var HorizontalScrollSection = ({
     return () => ctx.revert();
   }, [items, animationDuration, easing]);
   const handleItemHover = (e, index) => {
-    gsap19.to(itemRefs.current[index], {
+    gsap20.to(itemRefs.current[index], {
       y: -10,
       duration: 0.4,
       ease: "power2.out"
     });
     const overlay = itemRefs.current[index].querySelector(".img-overlay");
-    if (overlay) gsap19.to(overlay, { opacity: 0.4, duration: 0.4 });
+    if (overlay) gsap20.to(overlay, { opacity: 0.4, duration: 0.4 });
   };
   const handleItemLeave = (index) => {
-    gsap19.to(itemRefs.current[index], {
+    gsap20.to(itemRefs.current[index], {
       y: 0,
       duration: 0.4,
       ease: "power2.out"
     });
     const overlay = itemRefs.current[index].querySelector(".img-overlay");
-    if (overlay) gsap19.to(overlay, { opacity: 0, duration: 0.4 });
+    if (overlay) gsap20.to(overlay, { opacity: 0, duration: 0.4 });
   };
   const styles = {
     triggerSection: {
@@ -4238,7 +4446,7 @@ var HorizontalScrollSection = ({
       transform: "scaleX(0)"
     }
   };
-  return /* @__PURE__ */ React19.createElement("div", { ref: triggerRef, style: styles.triggerSection }, /* @__PURE__ */ React19.createElement("div", { ref: containerRef, style: styles.outerContainer }, /* @__PURE__ */ React19.createElement("div", { style: styles.scroller }, items.map((item, i) => /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement("div", { ref: triggerRef, style: styles.triggerSection }, /* @__PURE__ */ React20.createElement("div", { ref: containerRef, style: styles.outerContainer }, /* @__PURE__ */ React20.createElement("div", { style: styles.scroller }, items.map((item, i) => /* @__PURE__ */ React20.createElement(
     "div",
     {
       key: item.id,
@@ -4247,10 +4455,10 @@ var HorizontalScrollSection = ({
       onMouseEnter: (e) => handleItemHover(e, i),
       onMouseLeave: () => handleItemLeave(i)
     },
-    /* @__PURE__ */ React19.createElement("img", { src: item.image, alt: item.title, style: styles.image, className: "item-bg" }),
-    /* @__PURE__ */ React19.createElement("div", { className: "img-overlay", style: styles.imgOverlay }),
-    /* @__PURE__ */ React19.createElement("div", { className: "item-content", style: styles.content }, /* @__PURE__ */ React19.createElement("div", { style: styles.badge(item.color) }, /* @__PURE__ */ React19.createElement(FiLayers4, null), " ", item.id < 10 ? `0${item.id}` : item.id), /* @__PURE__ */ React19.createElement("h3", { style: styles.itemTitle }, item.title), /* @__PURE__ */ React19.createElement("p", { style: styles.itemDesc }, item.description), /* @__PURE__ */ React19.createElement("div", { style: { marginTop: "24px", display: "flex", alignItems: "center", gap: "10px", color: item.color, fontWeight: "700" } }, "Explore Case ", /* @__PURE__ */ React19.createElement(FiArrowRight7, null)))
-  )))), /* @__PURE__ */ React19.createElement("div", { style: styles.progressBarWrap }, /* @__PURE__ */ React19.createElement("div", { ref: progressRef, style: styles.progressFill })));
+    /* @__PURE__ */ React20.createElement("img", { src: item.image, alt: item.title, style: styles.image, className: "item-bg" }),
+    /* @__PURE__ */ React20.createElement("div", { className: "img-overlay", style: styles.imgOverlay }),
+    /* @__PURE__ */ React20.createElement("div", { className: "item-content", style: styles.content }, /* @__PURE__ */ React20.createElement("div", { style: styles.badge(item.color) }, /* @__PURE__ */ React20.createElement(FiLayers4, null), " ", item.id < 10 ? `0${item.id}` : item.id), /* @__PURE__ */ React20.createElement("h3", { style: styles.itemTitle }, item.title), /* @__PURE__ */ React20.createElement("p", { style: styles.itemDesc }, item.description), /* @__PURE__ */ React20.createElement("div", { style: { marginTop: "24px", display: "flex", alignItems: "center", gap: "10px", color: item.color, fontWeight: "700" } }, "Explore Case ", /* @__PURE__ */ React20.createElement(FiArrowRight8, null)))
+  )))), /* @__PURE__ */ React20.createElement("div", { style: styles.progressBarWrap }, /* @__PURE__ */ React20.createElement("div", { ref: progressRef, style: styles.progressFill })));
 };
 export {
   Button,
@@ -4258,6 +4466,7 @@ export {
   Carousel,
   Footer,
   Grid,
+  Hero,
   HorizontalScrollSection,
   Image,
   Navbar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aura-ui-library",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "A modern and customizable UI library for React applications.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",