@sachin-tosa/tosa 1.0.4 → 1.0.6

package/dist/tosa.es.js

@@ -1,148 +1,148 @@
-import re, { useState as te } from "react";
-var E = { exports: {} }, v = {};
-var Y;
-function ne() {
-  if (Y) return v;
-  Y = 1;
-  var l = /* @__PURE__ */ Symbol.for("react.transitional.element"), f = /* @__PURE__ */ Symbol.for("react.fragment");
-  function u(d, o, s) {
-    var p = null;
-    if (s !== void 0 && (p = "" + s), o.key !== void 0 && (p = "" + o.key), "key" in o) {
-      s = {};
-      for (var b in o)
-        b !== "key" && (s[b] = o[b]);
-    } else s = o;
-    return o = s.ref, {
-      $$typeof: l,
-      type: d,
-      key: p,
-      ref: o !== void 0 ? o : null,
-      props: s
+import ne, { useState as G, useEffect as oe } from "react";
+var S = { exports: {} }, w = {};
+var F;
+function ie() {
+  if (F) return w;
+  F = 1;
+  var a = /* @__PURE__ */ Symbol.for("react.transitional.element"), m = /* @__PURE__ */ Symbol.for("react.fragment");
+  function u(f, s, c) {
+    var b = null;
+    if (c !== void 0 && (b = "" + c), s.key !== void 0 && (b = "" + s.key), "key" in s) {
+      c = {};
+      for (var g in s)
+        g !== "key" && (c[g] = s[g]);
+    } else c = s;
+    return s = c.ref, {
+      $$typeof: a,
+      type: f,
+      key: b,
+      ref: s !== void 0 ? s : null,
+      props: c
     };
   }
-  return v.Fragment = f, v.jsx = u, v.jsxs = u, v;
+  return w.Fragment = m, w.jsx = u, w.jsxs = u, w;
 }
-var h = {};
-var I;
-function ae() {
-  return I || (I = 1, process.env.NODE_ENV !== "production" && (function() {
-    function l(e) {
+var y = {};
+var W;
+function se() {
+  return W || (W = 1, process.env.NODE_ENV !== "production" && (function() {
+    function a(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === Q ? null : e.displayName || e.name || null;
+        return e.$$typeof === re ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
         case _:
           return "Fragment";
-        case X:
+        case J:
           return "Profiler";
-        case W:
+        case X:
           return "StrictMode";
-        case G:
+        case Z:
           return "Suspense";
-        case H:
+        case Q:
           return "SuspenseList";
-        case Z:
+        case ee:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case U:
+          case q:
             return "Portal";
-          case J:
+          case H:
             return e.displayName || "Context";
-          case q:
-            return (e._context.displayName || "Context") + ".Consumer";
           case V:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case B:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case B:
-            return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
-          case k:
+          case K:
+            return r = e.displayName || null, r !== null ? r : a(e.type) || "Memo";
+          case j:
             r = e._payload, e = e._init;
             try {
-              return l(e(r));
+              return a(e(r));
             } catch {
             }
         }
       return null;
     }
-    function f(e) {
+    function m(e) {
       return "" + e;
     }
     function u(e) {
       try {
-        f(e);
+        m(e);
         var r = !1;
       } catch {
         r = !0;
       }
       if (r) {
         r = console;
-        var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return t.call(
+        var n = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n.call(
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          n
-        ), f(e);
+          o
+        ), m(e);
       }
     }
-    function d(e) {
+    function f(e) {
       if (e === _) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === k)
+      if (typeof e == "object" && e !== null && e.$$typeof === j)
         return "<...>";
       try {
-        var r = l(e);
+        var r = a(e);
         return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function o() {
-      var e = y.A;
+    function s() {
+      var e = T.A;
       return e === null ? null : e.getOwner();
     }
-    function s() {
+    function c() {
       return Error("react-stack-top-frame");
     }
-    function p(e) {
-      if (N.call(e, "key")) {
+    function b(e) {
+      if ($.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function b(e, r) {
-      function t() {
-        C || (C = !0, console.error(
+    function g(e, r) {
+      function n() {
+        Y || (Y = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           r
         ));
       }
-      t.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: t,
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
         configurable: !0
       });
     }
-    function F() {
-      var e = l(this.type);
-      return P[e] || (P[e] = !0, console.error(
+    function d() {
+      var e = a(this.type);
+      return L[e] || (L[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function D(e, r, t, n, x, T) {
-      var a = t.ref;
+    function h(e, r, n, o, E, N) {
+      var i = n.ref;
       return e = {
-        $$typeof: A,
+        $$typeof: z,
         type: e,
         key: r,
-        props: t,
-        _owner: n
-      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
+        props: n,
+        _owner: o
+      }, (i !== void 0 ? i : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: F
+        get: d
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -157,111 +157,111 @@ function ae() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: x
+        value: E
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: T
+        value: N
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function j(e, r, t, n, x, T) {
-      var a = r.children;
-      if (a !== void 0)
-        if (n)
-          if (K(a)) {
-            for (n = 0; n < a.length; n++)
-              S(a[n]);
-            Object.freeze && Object.freeze(a);
+    function P(e, r, n, o, E, N) {
+      var i = r.children;
+      if (i !== void 0)
+        if (o)
+          if (te(i)) {
+            for (o = 0; o < i.length; o++)
+              A(i[o]);
+            Object.freeze && Object.freeze(i);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else S(a);
-      if (N.call(r, "key")) {
-        a = l(e);
-        var m = Object.keys(r).filter(function(ee) {
-          return ee !== "key";
+        else A(i);
+      if ($.call(r, "key")) {
+        i = a(e);
+        var v = Object.keys(r).filter(function(ae) {
+          return ae !== "key";
         });
-        n = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", $[a + n] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error(
+        o = 0 < v.length ? "{key: someKey, " + v.join(": ..., ") + ": ...}" : "{key: someKey}", D[i + o] || (v = 0 < v.length ? "{" + v.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          n,
-          a,
-          m,
-          a
-        ), $[a + n] = !0);
-      }
-      if (a = null, t !== void 0 && (u(t), a = "" + t), p(r) && (u(r.key), a = "" + r.key), "key" in r) {
-        t = {};
-        for (var w in r)
-          w !== "key" && (t[w] = r[w]);
-      } else t = r;
-      return a && b(
-        t,
+          o,
+          i,
+          v,
+          i
+        ), D[i + o] = !0);
+      }
+      if (i = null, n !== void 0 && (u(n), i = "" + n), b(r) && (u(r.key), i = "" + r.key), "key" in r) {
+        n = {};
+        for (var C in r)
+          C !== "key" && (n[C] = r[C]);
+      } else n = r;
+      return i && g(
+        n,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), D(
+      ), h(
         e,
-        a,
-        t,
-        o(),
-        x,
-        T
+        i,
+        n,
+        s(),
+        E,
+        N
       );
     }
-    function S(e) {
-      O(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === k && (e._payload.status === "fulfilled" ? O(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function A(e) {
+      O(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === j && (e._payload.status === "fulfilled" ? O(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
     function O(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === A;
+      return typeof e == "object" && e !== null && e.$$typeof === z;
     }
-    var g = re, A = /* @__PURE__ */ Symbol.for("react.transitional.element"), U = /* @__PURE__ */ Symbol.for("react.portal"), _ = /* @__PURE__ */ Symbol.for("react.fragment"), W = /* @__PURE__ */ Symbol.for("react.strict_mode"), X = /* @__PURE__ */ Symbol.for("react.profiler"), q = /* @__PURE__ */ Symbol.for("react.consumer"), J = /* @__PURE__ */ Symbol.for("react.context"), V = /* @__PURE__ */ Symbol.for("react.forward_ref"), G = /* @__PURE__ */ Symbol.for("react.suspense"), H = /* @__PURE__ */ Symbol.for("react.suspense_list"), B = /* @__PURE__ */ Symbol.for("react.memo"), k = /* @__PURE__ */ Symbol.for("react.lazy"), Z = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), y = g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, N = Object.prototype.hasOwnProperty, K = Array.isArray, R = console.createTask ? console.createTask : function() {
+    var k = ne, z = /* @__PURE__ */ Symbol.for("react.transitional.element"), q = /* @__PURE__ */ Symbol.for("react.portal"), _ = /* @__PURE__ */ Symbol.for("react.fragment"), X = /* @__PURE__ */ Symbol.for("react.strict_mode"), J = /* @__PURE__ */ Symbol.for("react.profiler"), V = /* @__PURE__ */ Symbol.for("react.consumer"), H = /* @__PURE__ */ Symbol.for("react.context"), B = /* @__PURE__ */ Symbol.for("react.forward_ref"), Z = /* @__PURE__ */ Symbol.for("react.suspense"), Q = /* @__PURE__ */ Symbol.for("react.suspense_list"), K = /* @__PURE__ */ Symbol.for("react.memo"), j = /* @__PURE__ */ Symbol.for("react.lazy"), ee = /* @__PURE__ */ Symbol.for("react.activity"), re = /* @__PURE__ */ Symbol.for("react.client.reference"), T = k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, te = Array.isArray, R = console.createTask ? console.createTask : function() {
       return null;
     };
-    g = {
+    k = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var C, P = {}, M = g.react_stack_bottom_frame.bind(
-      g,
-      s
-    )(), L = R(d(s)), $ = {};
-    h.Fragment = _, h.jsx = function(e, r, t) {
-      var n = 1e4 > y.recentlyCreatedOwnerStacks++;
-      return j(
+    var Y, L = {}, I = k.react_stack_bottom_frame.bind(
+      k,
+      c
+    )(), M = R(f(c)), D = {};
+    y.Fragment = _, y.jsx = function(e, r, n) {
+      var o = 1e4 > T.recentlyCreatedOwnerStacks++;
+      return P(
         e,
         r,
-        t,
+        n,
         !1,
-        n ? Error("react-stack-top-frame") : M,
-        n ? R(d(e)) : L
+        o ? Error("react-stack-top-frame") : I,
+        o ? R(f(e)) : M
       );
-    }, h.jsxs = function(e, r, t) {
-      var n = 1e4 > y.recentlyCreatedOwnerStacks++;
-      return j(
+    }, y.jsxs = function(e, r, n) {
+      var o = 1e4 > T.recentlyCreatedOwnerStacks++;
+      return P(
         e,
         r,
-        t,
+        n,
         !0,
-        n ? Error("react-stack-top-frame") : M,
-        n ? R(d(e)) : L
+        o ? Error("react-stack-top-frame") : I,
+        o ? R(f(e)) : M
       );
     };
-  })()), h;
+  })()), y;
 }
-var z;
-function oe() {
-  return z || (z = 1, process.env.NODE_ENV === "production" ? E.exports = ne() : E.exports = ae()), E.exports;
+var U;
+function le() {
+  return U || (U = 1, process.env.NODE_ENV === "production" ? S.exports = ie() : S.exports = se()), S.exports;
 }
-var i = oe();
-const c = (() => {
-  const l = document.createElement("style");
-  return l.textContent = `
+var t = le();
+const p = (() => {
+  const a = document.createElement("style");
+  return a.textContent = `
     * {
       margin: 0;
       padding: 0;
@@ -372,33 +372,8 @@ const c = (() => {
       transform: translateY(-9.5px) rotate(-45deg);
     }
 
-    .demoContent {
-      padding: 4rem 2rem;
-      max-width: 1200px;
-      margin: 0 auto;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-    }
-
-    .demoSection {
-      margin-bottom: 3rem;
-      padding: 3rem 2rem;
-      background: #f8f9fa;
-      border-radius: 12px;
-      scroll-margin-top: 80px;
-    }
-
-    .demoSection h2 {
-      color: #1a1a2e;
-      margin-bottom: 1rem;
-      font-size: 2rem;
-    }
-
-    .demoSection p {
-      color: #666;
-      line-height: 1.8;
-      font-size: 1.1rem;
-    }
-
+    
+    
     @media (max-width: 768px) {
       .hamburger {
         display: flex;
@@ -475,7 +450,7 @@ const c = (() => {
         width: 100%;
       }
     }
-  `, document.head.querySelector("[data-navbar-styles]") || (l.setAttribute("data-navbar-styles", ""), document.head.appendChild(l)), {
+  `, document.head.querySelector("[data-navbar-styles]") || (a.setAttribute("data-navbar-styles", ""), document.head.appendChild(a)), {
     navbar: "navbar",
     navContainer: "navContainer",
     logo: "logo",
@@ -484,54 +459,594 @@ const c = (() => {
     hamburger: "hamburger",
     bar: "bar",
     active: "active",
-    open: "open",
-    demoContent: "demoContent",
-    demoSection: "demoSection"
+    open: "open"
   };
 })();
-function se({ brand: l = "TOSA", links: f = ["Home", "About", "Services", "Contact"] }) {
-  const [u, d] = te(!1);
-  return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-    /* @__PURE__ */ i.jsx("nav", { className: c.navbar, children: /* @__PURE__ */ i.jsxs("div", { className: c.navContainer, children: [
-      /* @__PURE__ */ i.jsx("div", { className: c.logo, children: l }),
-      /* @__PURE__ */ i.jsxs(
-        "button",
-        {
-          className: `${c.hamburger} ${u ? c.active : ""}`,
-          onClick: () => d(!u),
-          "aria-label": "Toggle menu",
-          "aria-expanded": u,
-          children: [
-            /* @__PURE__ */ i.jsx("span", { className: c.bar }),
-            /* @__PURE__ */ i.jsx("span", { className: c.bar }),
-            /* @__PURE__ */ i.jsx("span", { className: c.bar })
-          ]
-        }
-      ),
-      /* @__PURE__ */ i.jsx("ul", { className: `${c.navMenu} ${u ? c.open : ""}`, children: f.map((o, s) => /* @__PURE__ */ i.jsx("li", { children: /* @__PURE__ */ i.jsx(
-        "a",
-        {
-          href: `#${o.toLowerCase()}`,
-          className: c.navLink,
-          onClick: () => d(!1),
-          children: o
-        }
-      ) }, s)) })
-    ] }) }),
-    /* @__PURE__ */ i.jsx("div", { className: c.demoContent, children: f.map((o, s) => /* @__PURE__ */ i.jsxs("section", { id: o.toLowerCase(), className: c.demoSection, children: [
-      /* @__PURE__ */ i.jsx("h2", { children: o }),
-      /* @__PURE__ */ i.jsxs("p", { children: [
-        "This is the ",
-        o,
-        " section. The navbar stays fixed at the top and smoothly transitions on mobile devices. Scroll down to see the sticky behavior in action. The navigation links will smoothly scroll to each section."
-      ] })
-    ] }, s)) })
-  ] });
+function de({ brand: a = "TOSA", links: m = ["Home", "About", "Services", "Contact"] }) {
+  const [u, f] = G(!1);
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx("nav", { className: p.navbar, children: /* @__PURE__ */ t.jsxs("div", { className: p.navContainer, children: [
+    /* @__PURE__ */ t.jsx("div", { className: p.logo, children: a }),
+    /* @__PURE__ */ t.jsxs(
+      "button",
+      {
+        className: `${p.hamburger} ${u ? p.active : ""}`,
+        onClick: () => f(!u),
+        "aria-label": "Toggle menu",
+        "aria-expanded": u,
+        children: [
+          /* @__PURE__ */ t.jsx("span", { className: p.bar }),
+          /* @__PURE__ */ t.jsx("span", { className: p.bar }),
+          /* @__PURE__ */ t.jsx("span", { className: p.bar })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx("ul", { className: `${p.navMenu} ${u ? p.open : ""}`, children: m.map((s, c) => /* @__PURE__ */ t.jsx("li", { children: /* @__PURE__ */ t.jsx(
+      "a",
+      {
+        href: `#${s.toLowerCase()}`,
+        className: p.navLink,
+        onClick: () => f(!1),
+        children: s
+      }
+    ) }, c)) })
+  ] }) }) });
 }
-function le() {
-  return /* @__PURE__ */ i.jsx("nav", { children: /* @__PURE__ */ i.jsx("h1", { children: "Hello cards" }) });
+function ue() {
+  return /* @__PURE__ */ t.jsx("nav", { children: /* @__PURE__ */ t.jsx("h1", { children: "Hello cards" }) });
+}
+const x = (() => {
+  const a = document.createElement("style");
+  return a.textContent = `
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .heroSection {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 2rem;
+      background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .heroSection::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: 
+        radial-gradient(circle at 20% 50%, rgba(0, 216, 255, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(0, 153, 204, 0.1) 0%, transparent 50%);
+      pointer-events: none;
+    }
+
+    .heroContent {
+      max-width: 1200px;
+      text-align: center;
+      z-index: 1;
+      animation: fadeInUp 1s ease-out;
+    }
+
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(30px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .heroTitle {
+      font-size: 4.5rem;
+      font-weight: 800;
+      color: #fff;
+      margin-bottom: 1.5rem;
+      line-height: 1.2;
+      background: linear-gradient(135deg, #fff 0%, #00d8ff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      animation: fadeInUp 1s ease-out 0.2s backwards;
+    }
+
+    .heroSubtitle {
+      font-size: 1.3rem;
+      color: #b8b8b8;
+      margin-bottom: 3rem;
+      line-height: 1.8;
+      max-width: 700px;
+      margin-left: auto;
+      margin-right: auto;
+      animation: fadeInUp 1s ease-out 0.4s backwards;
+    }
+
+    .buttonGroup {
+      display: flex;
+      gap: 1.5rem;
+      justify-content: center;
+      flex-wrap: wrap;
+      animation: fadeInUp 1s ease-out 0.6s backwards;
+    }
+
+    .btnPrimary {
+      padding: 1rem 2.5rem;
+      font-size: 1.1rem;
+      font-weight: 600;
+      border: none;
+      border-radius: 50px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      background: linear-gradient(135deg, #00d8ff 0%, #0099cc 100%);
+      color: #fff;
+      box-shadow: 0 4px 15px rgba(0, 216, 255, 0.3);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .btnPrimary::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+      transition: left 0.5s ease;
+    }
+
+    .btnPrimary:hover::before {
+      left: 100%;
+    }
+
+    .btnPrimary:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 6px 25px rgba(0, 216, 255, 0.5);
+    }
+
+    .btnPrimary:active {
+      transform: translateY(-1px);
+    }
+
+    .btnSecondary {
+      padding: 1rem 2.5rem;
+      font-size: 1.1rem;
+      font-weight: 600;
+      border: 2px solid #00d8ff;
+      border-radius: 50px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      background: transparent;
+      color: #00d8ff;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .btnSecondary::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border-radius: 50%;
+      background: #00d8ff;
+      transform: translate(-50%, -50%);
+      transition: width 0.5s ease, height 0.5s ease;
+      z-index: -1;
+    }
+
+    .btnSecondary:hover::before {
+      width: 300px;
+      height: 300px;
+    }
+
+    .btnSecondary:hover {
+      color: #fff;
+      border-color: #00d8ff;
+      transform: translateY(-3px);
+      box-shadow: 0 6px 25px rgba(0, 216, 255, 0.3);
+    }
+
+    .btnSecondary:active {
+      transform: translateY(-1px);
+    }
+
+    @media (max-width: 768px) {
+      .heroTitle {
+        font-size: 3rem;
+      }
+
+      .heroSubtitle {
+        font-size: 1.1rem;
+        margin-bottom: 2rem;
+      }
+
+      .buttonGroup {
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .btnPrimary,
+      .btnSecondary {
+        width: 100%;
+        max-width: 300px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .heroSection {
+        padding: 1.5rem;
+      }
+
+      .heroTitle {
+        font-size: 2.2rem;
+      }
+
+      .heroSubtitle {
+        font-size: 1rem;
+      }
+
+      .btnPrimary,
+      .btnSecondary {
+        padding: 0.9rem 2rem;
+        font-size: 1rem;
+      }
+    }
+  `, document.head.querySelector("[data-hero-styles]") || (a.setAttribute("data-hero-styles", ""), document.head.appendChild(a)), {
+    heroSection: "heroSection",
+    heroContent: "heroContent",
+    heroTitle: "heroTitle",
+    heroSubtitle: "heroSubtitle",
+    buttonGroup: "buttonGroup",
+    btnPrimary: "btnPrimary",
+    btnSecondary: "btnSecondary"
+  };
+})();
+function fe() {
+  return /* @__PURE__ */ t.jsx("section", { className: x.heroSection, children: /* @__PURE__ */ t.jsxs("div", { className: x.heroContent, children: [
+    /* @__PURE__ */ t.jsx("h1", { className: x.heroTitle, children: "Welcome to the Future" }),
+    /* @__PURE__ */ t.jsx("p", { className: x.heroSubtitle, children: "Discover innovative solutions that transform your ideas into reality. We're here to help you build something extraordinary and take your vision to the next level." }),
+    /* @__PURE__ */ t.jsxs("div", { className: x.buttonGroup, children: [
+      /* @__PURE__ */ t.jsx("button", { className: x.btnPrimary, children: "Get Started" }),
+      /* @__PURE__ */ t.jsx("button", { className: x.btnSecondary, children: "Learn More" })
+    ] })
+  ] }) });
+}
+const l = (() => {
+  const a = document.createElement("style");
+  return a.textContent = `
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .carouselContainer {
+      position: relative;
+      width: 100%;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 2rem;
+      overflow: hidden;
+    }
+
+    .carousel {
+      position: relative;
+      width: 100%;
+      height: 500px;
+      border-radius: 20px;
+      overflow: hidden;
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+    }
+
+    .slideWrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    .slide {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      transition: opacity 1s ease-in-out;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .slide.active {
+      opacity: 1;
+      z-index: 1;
+    }
+
+    .slideImage {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .slideContent {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
+      padding: 3rem 2rem 2rem;
+      color: #fff;
+      z-index: 2;
+    }
+
+    .slideTitle {
+      font-size: 2.5rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    }
+
+    .slideDescription {
+      font-size: 1.1rem;
+      color: #e0e0e0;
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+    }
+
+    .arrow {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      background: rgba(0, 216, 255, 0.8);
+      border: none;
+      color: #fff;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      cursor: pointer;
+      z-index: 10;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.5rem;
+      backdrop-filter: blur(10px);
+    }
+
+    .arrow:hover {
+      background: rgba(0, 216, 255, 1);
+      transform: translateY(-50%) scale(1.1);
+      box-shadow: 0 5px 20px rgba(0, 216, 255, 0.5);
+    }
+
+    .arrow:active {
+      transform: translateY(-50%) scale(0.95);
+    }
+
+    .arrowLeft {
+      left: 20px;
+    }
+
+    .arrowRight {
+      right: 20px;
+    }
+
+    .dots {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 10px;
+      z-index: 10;
+    }
+
+    .dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.5);
+      border: 2px solid rgba(255, 255, 255, 0.8);
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+
+    .dot:hover {
+      background: rgba(255, 255, 255, 0.8);
+      transform: scale(1.2);
+    }
+
+    .dot.active {
+      background: #00d8ff;
+      border-color: #00d8ff;
+      transform: scale(1.3);
+    }
+
+    @media (max-width: 768px) {
+      .carousel {
+        height: 400px;
+        border-radius: 15px;
+      }
+
+      .slideTitle {
+        font-size: 1.8rem;
+      }
+
+      .slideDescription {
+        font-size: 1rem;
+      }
+
+      .arrow {
+        width: 40px;
+        height: 40px;
+        font-size: 1.2rem;
+      }
+
+      .arrowLeft {
+        left: 10px;
+      }
+
+      .arrowRight {
+        right: 10px;
+      }
+
+      .slideContent {
+        padding: 2rem 1.5rem 1.5rem;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .carouselContainer {
+        padding: 1rem;
+      }
+
+      .carousel {
+        height: 300px;
+        border-radius: 10px;
+      }
+
+      .slideTitle {
+        font-size: 1.4rem;
+      }
+
+      .slideDescription {
+        font-size: 0.9rem;
+      }
+
+      .arrow {
+        width: 35px;
+        height: 35px;
+        font-size: 1rem;
+      }
+
+      .dots {
+        bottom: 15px;
+      }
+
+      .dot {
+        width: 10px;
+        height: 10px;
+      }
+    }
+  `, document.head.querySelector("[data-carousel-styles]") || (a.setAttribute("data-carousel-styles", ""), document.head.appendChild(a)), {
+    carouselContainer: "carouselContainer",
+    carousel: "carousel",
+    slideWrapper: "slideWrapper",
+    slide: "slide",
+    active: "active",
+    slideImage: "slideImage",
+    slideContent: "slideContent",
+    slideTitle: "slideTitle",
+    slideDescription: "slideDescription",
+    arrow: "arrow",
+    arrowLeft: "arrowLeft",
+    arrowRight: "arrowRight",
+    dots: "dots",
+    dot: "dot"
+  };
+})();
+function pe({
+  slides: a = [
+    {
+      image: "https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?w=1200",
+      title: "Mountain Adventure",
+      description: "Explore the breathtaking beauty of nature"
+    },
+    {
+      image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200",
+      title: "Ocean Views",
+      description: "Discover serene coastal landscapes"
+    },
+    {
+      image: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1200",
+      title: "Forest Trails",
+      description: "Journey through lush green forests"
+    },
+    {
+      image: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1200",
+      title: "Sunset Paradise",
+      description: "Experience magical golden hour moments"
+    }
+  ],
+  autoPlay: m = !0,
+  autoPlayInterval: u = 5e3
+}) {
+  const [f, s] = G(0), c = () => {
+    s((d) => (d + 1) % a.length);
+  }, b = () => {
+    s((d) => (d - 1 + a.length) % a.length);
+  }, g = (d) => {
+    s(d);
+  };
+  return oe(() => {
+    if (m) {
+      const d = setInterval(c, u);
+      return () => clearInterval(d);
+    }
+  }, [f, m, u]), /* @__PURE__ */ t.jsx("div", { className: l.carouselContainer, children: /* @__PURE__ */ t.jsxs("div", { className: l.carousel, children: [
+    /* @__PURE__ */ t.jsx("div", { className: l.slideWrapper, children: a.map((d, h) => /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        className: `${l.slide} ${h === f ? l.active : ""}`,
+        children: [
+          /* @__PURE__ */ t.jsx(
+            "img",
+            {
+              src: d.image,
+              alt: d.title,
+              className: l.slideImage
+            }
+          ),
+          /* @__PURE__ */ t.jsxs("div", { className: l.slideContent, children: [
+            /* @__PURE__ */ t.jsx("h2", { className: l.slideTitle, children: d.title }),
+            /* @__PURE__ */ t.jsx("p", { className: l.slideDescription, children: d.description })
+          ] })
+        ]
+      },
+      h
+    )) }),
+    /* @__PURE__ */ t.jsx(
+      "button",
+      {
+        className: `${l.arrow} ${l.arrowLeft}`,
+        onClick: b,
+        "aria-label": "Previous slide",
+        children: "‹"
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      "button",
+      {
+        className: `${l.arrow} ${l.arrowRight}`,
+        onClick: c,
+        "aria-label": "Next slide",
+        children: "›"
+      }
+    ),
+    /* @__PURE__ */ t.jsx("div", { className: l.dots, children: a.map((d, h) => /* @__PURE__ */ t.jsx(
+      "button",
+      {
+        className: `${l.dot} ${h === f ? l.active : ""}`,
+        onClick: () => g(h),
+        "aria-label": `Go to slide ${h + 1}`
+      },
+      h
+    )) })
+  ] }) });
 }
 export {
-  le as Card,
-  se as Navbar
+  ue as Card,
+  pe as Carousal,
+  fe as HeroSection,
+  de as Navbar
 };