@sachin-tosa/tosa 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tosa.es.js +375 -146
- package/dist/tosa.umd.js +209 -3
- package/package.json +1 -1
package/dist/tosa.es.js
CHANGED
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
import
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
function
|
|
5
|
-
if (
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
function u
|
|
1
|
+
import te, { useState as ne } from "react";
|
|
2
|
+
var k = { exports: {} }, g = {};
|
|
3
|
+
var $;
|
|
4
|
+
function ae() {
|
|
5
|
+
if ($) return g;
|
|
6
|
+
$ = 1;
|
|
7
|
+
var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), f = /* @__PURE__ */ Symbol.for("react.fragment");
|
|
8
|
+
function d(u, i, l) {
|
|
9
9
|
var p = null;
|
|
10
|
-
if (
|
|
11
|
-
|
|
12
|
-
for (var
|
|
13
|
-
|
|
14
|
-
} else
|
|
15
|
-
return
|
|
16
|
-
$$typeof:
|
|
17
|
-
type:
|
|
10
|
+
if (l !== void 0 && (p = "" + l), i.key !== void 0 && (p = "" + i.key), "key" in i) {
|
|
11
|
+
l = {};
|
|
12
|
+
for (var h in i)
|
|
13
|
+
h !== "key" && (l[h] = i[h]);
|
|
14
|
+
} else l = i;
|
|
15
|
+
return i = l.ref, {
|
|
16
|
+
$$typeof: s,
|
|
17
|
+
type: u,
|
|
18
18
|
key: p,
|
|
19
|
-
ref:
|
|
20
|
-
props:
|
|
19
|
+
ref: i !== void 0 ? i : null,
|
|
20
|
+
props: l
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
|
-
return
|
|
23
|
+
return g.Fragment = f, g.jsx = d, g.jsxs = d, g;
|
|
24
24
|
}
|
|
25
|
-
var
|
|
25
|
+
var x = {};
|
|
26
26
|
var I;
|
|
27
|
-
function
|
|
27
|
+
function oe() {
|
|
28
28
|
return I || (I = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
29
|
-
function
|
|
29
|
+
function s(e) {
|
|
30
30
|
if (e == null) return null;
|
|
31
31
|
if (typeof e == "function")
|
|
32
|
-
return e.$$typeof ===
|
|
32
|
+
return e.$$typeof === K ? null : e.displayName || e.name || null;
|
|
33
33
|
if (typeof e == "string") return e;
|
|
34
34
|
switch (e) {
|
|
35
|
-
case
|
|
35
|
+
case w:
|
|
36
36
|
return "Fragment";
|
|
37
|
-
case
|
|
37
|
+
case q:
|
|
38
38
|
return "Profiler";
|
|
39
|
-
case W:
|
|
40
|
-
return "StrictMode";
|
|
41
39
|
case G:
|
|
42
|
-
return "
|
|
40
|
+
return "StrictMode";
|
|
43
41
|
case H:
|
|
42
|
+
return "Suspense";
|
|
43
|
+
case B:
|
|
44
44
|
return "SuspenseList";
|
|
45
|
-
case
|
|
45
|
+
case Q:
|
|
46
46
|
return "Activity";
|
|
47
47
|
}
|
|
48
48
|
if (typeof e == "object")
|
|
49
49
|
switch (typeof e.tag == "number" && console.error(
|
|
50
50
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
51
51
|
), e.$$typeof) {
|
|
52
|
-
case
|
|
52
|
+
case W:
|
|
53
53
|
return "Portal";
|
|
54
54
|
case J:
|
|
55
55
|
return e.displayName || "Context";
|
|
56
|
-
case
|
|
56
|
+
case X:
|
|
57
57
|
return (e._context.displayName || "Context") + ".Consumer";
|
|
58
58
|
case V:
|
|
59
59
|
var r = e.render;
|
|
60
60
|
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
61
|
-
case
|
|
62
|
-
return r = e.displayName || null, r !== null ? r :
|
|
63
|
-
case
|
|
61
|
+
case Z:
|
|
62
|
+
return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
|
|
63
|
+
case S:
|
|
64
64
|
r = e._payload, e = e._init;
|
|
65
65
|
try {
|
|
66
|
-
return
|
|
66
|
+
return s(e(r));
|
|
67
67
|
} catch {
|
|
68
68
|
}
|
|
69
69
|
}
|
|
@@ -72,7 +72,7 @@ function ae() {
|
|
|
72
72
|
function f(e) {
|
|
73
73
|
return "" + e;
|
|
74
74
|
}
|
|
75
|
-
function
|
|
75
|
+
function d(e) {
|
|
76
76
|
try {
|
|
77
77
|
f(e);
|
|
78
78
|
var r = !1;
|
|
@@ -81,68 +81,68 @@ function ae() {
|
|
|
81
81
|
}
|
|
82
82
|
if (r) {
|
|
83
83
|
r = console;
|
|
84
|
-
var
|
|
85
|
-
return
|
|
84
|
+
var n = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
85
|
+
return n.call(
|
|
86
86
|
r,
|
|
87
87
|
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
88
|
-
|
|
88
|
+
a
|
|
89
89
|
), f(e);
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
|
-
function
|
|
93
|
-
if (e ===
|
|
94
|
-
if (typeof e == "object" && e !== null && e.$$typeof ===
|
|
92
|
+
function u(e) {
|
|
93
|
+
if (e === w) return "<>";
|
|
94
|
+
if (typeof e == "object" && e !== null && e.$$typeof === S)
|
|
95
95
|
return "<...>";
|
|
96
96
|
try {
|
|
97
|
-
var r =
|
|
97
|
+
var r = s(e);
|
|
98
98
|
return r ? "<" + r + ">" : "<...>";
|
|
99
99
|
} catch {
|
|
100
100
|
return "<...>";
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
|
-
function
|
|
104
|
-
var e =
|
|
103
|
+
function i() {
|
|
104
|
+
var e = E.A;
|
|
105
105
|
return e === null ? null : e.getOwner();
|
|
106
106
|
}
|
|
107
|
-
function
|
|
107
|
+
function l() {
|
|
108
108
|
return Error("react-stack-top-frame");
|
|
109
109
|
}
|
|
110
110
|
function p(e) {
|
|
111
|
-
if (
|
|
111
|
+
if (O.call(e, "key")) {
|
|
112
112
|
var r = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
113
113
|
if (r && r.isReactWarning) return !1;
|
|
114
114
|
}
|
|
115
115
|
return e.key !== void 0;
|
|
116
116
|
}
|
|
117
|
-
function
|
|
118
|
-
function
|
|
119
|
-
|
|
117
|
+
function h(e, r) {
|
|
118
|
+
function n() {
|
|
119
|
+
A || (A = !0, console.error(
|
|
120
120
|
"%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)",
|
|
121
121
|
r
|
|
122
122
|
));
|
|
123
123
|
}
|
|
124
|
-
|
|
125
|
-
get:
|
|
124
|
+
n.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
125
|
+
get: n,
|
|
126
126
|
configurable: !0
|
|
127
127
|
});
|
|
128
128
|
}
|
|
129
|
-
function
|
|
130
|
-
var e =
|
|
131
|
-
return
|
|
129
|
+
function U() {
|
|
130
|
+
var e = s(this.type);
|
|
131
|
+
return z[e] || (z[e] = !0, console.error(
|
|
132
132
|
"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."
|
|
133
133
|
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
134
134
|
}
|
|
135
|
-
function D(e, r,
|
|
136
|
-
var
|
|
135
|
+
function D(e, r, n, a, y, T) {
|
|
136
|
+
var o = n.ref;
|
|
137
137
|
return e = {
|
|
138
|
-
$$typeof:
|
|
138
|
+
$$typeof: C,
|
|
139
139
|
type: e,
|
|
140
140
|
key: r,
|
|
141
|
-
props:
|
|
142
|
-
_owner:
|
|
143
|
-
}, (
|
|
141
|
+
props: n,
|
|
142
|
+
_owner: a
|
|
143
|
+
}, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
|
|
144
144
|
enumerable: !1,
|
|
145
|
-
get:
|
|
145
|
+
get: U
|
|
146
146
|
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
147
147
|
configurable: !1,
|
|
148
148
|
enumerable: !1,
|
|
@@ -157,7 +157,7 @@ function ae() {
|
|
|
157
157
|
configurable: !1,
|
|
158
158
|
enumerable: !1,
|
|
159
159
|
writable: !0,
|
|
160
|
-
value:
|
|
160
|
+
value: y
|
|
161
161
|
}), Object.defineProperty(e, "_debugTask", {
|
|
162
162
|
configurable: !1,
|
|
163
163
|
enumerable: !1,
|
|
@@ -165,103 +165,103 @@ function ae() {
|
|
|
165
165
|
value: T
|
|
166
166
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
167
167
|
}
|
|
168
|
-
function j(e, r,
|
|
169
|
-
var
|
|
170
|
-
if (
|
|
171
|
-
if (
|
|
172
|
-
if (
|
|
173
|
-
for (
|
|
174
|
-
|
|
175
|
-
Object.freeze && Object.freeze(
|
|
168
|
+
function j(e, r, n, a, y, T) {
|
|
169
|
+
var o = r.children;
|
|
170
|
+
if (o !== void 0)
|
|
171
|
+
if (a)
|
|
172
|
+
if (ee(o)) {
|
|
173
|
+
for (a = 0; a < o.length; a++)
|
|
174
|
+
N(o[a]);
|
|
175
|
+
Object.freeze && Object.freeze(o);
|
|
176
176
|
} else
|
|
177
177
|
console.error(
|
|
178
178
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
179
179
|
);
|
|
180
|
-
else
|
|
181
|
-
if (
|
|
182
|
-
|
|
183
|
-
var
|
|
184
|
-
return
|
|
180
|
+
else N(o);
|
|
181
|
+
if (O.call(r, "key")) {
|
|
182
|
+
o = s(e);
|
|
183
|
+
var b = Object.keys(r).filter(function(re) {
|
|
184
|
+
return re !== "key";
|
|
185
185
|
});
|
|
186
|
-
|
|
186
|
+
a = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", L[o + a] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
187
187
|
`A props object containing a "key" prop is being spread into JSX:
|
|
188
188
|
let props = %s;
|
|
189
189
|
<%s {...props} />
|
|
190
190
|
React keys must be passed directly to JSX without using spread:
|
|
191
191
|
let props = %s;
|
|
192
192
|
<%s key={someKey} {...props} />`,
|
|
193
|
-
n,
|
|
194
193
|
a,
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
194
|
+
o,
|
|
195
|
+
b,
|
|
196
|
+
o
|
|
197
|
+
), L[o + a] = !0);
|
|
198
198
|
}
|
|
199
|
-
if (
|
|
200
|
-
|
|
201
|
-
for (var
|
|
202
|
-
|
|
203
|
-
} else
|
|
204
|
-
return
|
|
205
|
-
|
|
199
|
+
if (o = null, n !== void 0 && (d(n), o = "" + n), p(r) && (d(r.key), o = "" + r.key), "key" in r) {
|
|
200
|
+
n = {};
|
|
201
|
+
for (var R in r)
|
|
202
|
+
R !== "key" && (n[R] = r[R]);
|
|
203
|
+
} else n = r;
|
|
204
|
+
return o && h(
|
|
205
|
+
n,
|
|
206
206
|
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
207
207
|
), D(
|
|
208
208
|
e,
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
209
|
+
o,
|
|
210
|
+
n,
|
|
211
|
+
i(),
|
|
212
|
+
y,
|
|
213
213
|
T
|
|
214
214
|
);
|
|
215
215
|
}
|
|
216
|
-
function
|
|
217
|
-
|
|
216
|
+
function N(e) {
|
|
217
|
+
P(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === S && (e._payload.status === "fulfilled" ? P(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
218
218
|
}
|
|
219
|
-
function
|
|
220
|
-
return typeof e == "object" && e !== null && e.$$typeof ===
|
|
219
|
+
function P(e) {
|
|
220
|
+
return typeof e == "object" && e !== null && e.$$typeof === C;
|
|
221
221
|
}
|
|
222
|
-
var
|
|
222
|
+
var v = te, C = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), w = /* @__PURE__ */ Symbol.for("react.fragment"), G = /* @__PURE__ */ Symbol.for("react.strict_mode"), q = /* @__PURE__ */ Symbol.for("react.profiler"), X = /* @__PURE__ */ Symbol.for("react.consumer"), J = /* @__PURE__ */ Symbol.for("react.context"), V = /* @__PURE__ */ Symbol.for("react.forward_ref"), H = /* @__PURE__ */ Symbol.for("react.suspense"), B = /* @__PURE__ */ Symbol.for("react.suspense_list"), Z = /* @__PURE__ */ Symbol.for("react.memo"), S = /* @__PURE__ */ Symbol.for("react.lazy"), Q = /* @__PURE__ */ Symbol.for("react.activity"), K = /* @__PURE__ */ Symbol.for("react.client.reference"), E = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, ee = Array.isArray, _ = console.createTask ? console.createTask : function() {
|
|
223
223
|
return null;
|
|
224
224
|
};
|
|
225
|
-
|
|
225
|
+
v = {
|
|
226
226
|
react_stack_bottom_frame: function(e) {
|
|
227
227
|
return e();
|
|
228
228
|
}
|
|
229
229
|
};
|
|
230
|
-
var
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
)(),
|
|
234
|
-
|
|
235
|
-
var
|
|
230
|
+
var A, z = {}, Y = v.react_stack_bottom_frame.bind(
|
|
231
|
+
v,
|
|
232
|
+
l
|
|
233
|
+
)(), M = _(u(l)), L = {};
|
|
234
|
+
x.Fragment = w, x.jsx = function(e, r, n) {
|
|
235
|
+
var a = 1e4 > E.recentlyCreatedOwnerStacks++;
|
|
236
236
|
return j(
|
|
237
237
|
e,
|
|
238
238
|
r,
|
|
239
|
-
|
|
239
|
+
n,
|
|
240
240
|
!1,
|
|
241
|
-
|
|
242
|
-
|
|
241
|
+
a ? Error("react-stack-top-frame") : Y,
|
|
242
|
+
a ? _(u(e)) : M
|
|
243
243
|
);
|
|
244
|
-
},
|
|
245
|
-
var
|
|
244
|
+
}, x.jsxs = function(e, r, n) {
|
|
245
|
+
var a = 1e4 > E.recentlyCreatedOwnerStacks++;
|
|
246
246
|
return j(
|
|
247
247
|
e,
|
|
248
248
|
r,
|
|
249
|
-
|
|
249
|
+
n,
|
|
250
250
|
!0,
|
|
251
|
-
|
|
252
|
-
|
|
251
|
+
a ? Error("react-stack-top-frame") : Y,
|
|
252
|
+
a ? _(u(e)) : M
|
|
253
253
|
);
|
|
254
254
|
};
|
|
255
|
-
})()),
|
|
255
|
+
})()), x;
|
|
256
256
|
}
|
|
257
|
-
var
|
|
258
|
-
function
|
|
259
|
-
return
|
|
257
|
+
var F;
|
|
258
|
+
function ie() {
|
|
259
|
+
return F || (F = 1, process.env.NODE_ENV === "production" ? k.exports = ae() : k.exports = oe()), k.exports;
|
|
260
260
|
}
|
|
261
|
-
var
|
|
261
|
+
var t = ie();
|
|
262
262
|
const c = (() => {
|
|
263
|
-
const
|
|
264
|
-
return
|
|
263
|
+
const s = document.createElement("style");
|
|
264
|
+
return s.textContent = `
|
|
265
265
|
* {
|
|
266
266
|
margin: 0;
|
|
267
267
|
padding: 0;
|
|
@@ -475,7 +475,7 @@ const c = (() => {
|
|
|
475
475
|
width: 100%;
|
|
476
476
|
}
|
|
477
477
|
}
|
|
478
|
-
`, document.head.querySelector("[data-navbar-styles]") || (
|
|
478
|
+
`, document.head.querySelector("[data-navbar-styles]") || (s.setAttribute("data-navbar-styles", ""), document.head.appendChild(s)), {
|
|
479
479
|
navbar: "navbar",
|
|
480
480
|
navContainer: "navContainer",
|
|
481
481
|
logo: "logo",
|
|
@@ -489,49 +489,278 @@ const c = (() => {
|
|
|
489
489
|
demoSection: "demoSection"
|
|
490
490
|
};
|
|
491
491
|
})();
|
|
492
|
-
function
|
|
493
|
-
const [
|
|
494
|
-
return /* @__PURE__ */
|
|
495
|
-
/* @__PURE__ */
|
|
496
|
-
/* @__PURE__ */
|
|
497
|
-
/* @__PURE__ */
|
|
492
|
+
function le({ brand: s = "TOSA", links: f = ["Home", "About", "Services", "Contact"] }) {
|
|
493
|
+
const [d, u] = ne(!1);
|
|
494
|
+
return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
|
|
495
|
+
/* @__PURE__ */ t.jsx("nav", { className: c.navbar, children: /* @__PURE__ */ t.jsxs("div", { className: c.navContainer, children: [
|
|
496
|
+
/* @__PURE__ */ t.jsx("div", { className: c.logo, children: s }),
|
|
497
|
+
/* @__PURE__ */ t.jsxs(
|
|
498
498
|
"button",
|
|
499
499
|
{
|
|
500
|
-
className: `${c.hamburger} ${
|
|
501
|
-
onClick: () =>
|
|
500
|
+
className: `${c.hamburger} ${d ? c.active : ""}`,
|
|
501
|
+
onClick: () => u(!d),
|
|
502
502
|
"aria-label": "Toggle menu",
|
|
503
|
-
"aria-expanded":
|
|
503
|
+
"aria-expanded": d,
|
|
504
504
|
children: [
|
|
505
|
-
/* @__PURE__ */
|
|
506
|
-
/* @__PURE__ */
|
|
507
|
-
/* @__PURE__ */
|
|
505
|
+
/* @__PURE__ */ t.jsx("span", { className: c.bar }),
|
|
506
|
+
/* @__PURE__ */ t.jsx("span", { className: c.bar }),
|
|
507
|
+
/* @__PURE__ */ t.jsx("span", { className: c.bar })
|
|
508
508
|
]
|
|
509
509
|
}
|
|
510
510
|
),
|
|
511
|
-
/* @__PURE__ */
|
|
511
|
+
/* @__PURE__ */ t.jsx("ul", { className: `${c.navMenu} ${d ? c.open : ""}`, children: f.map((i, l) => /* @__PURE__ */ t.jsx("li", { children: /* @__PURE__ */ t.jsx(
|
|
512
512
|
"a",
|
|
513
513
|
{
|
|
514
|
-
href: `#${
|
|
514
|
+
href: `#${i.toLowerCase()}`,
|
|
515
515
|
className: c.navLink,
|
|
516
|
-
onClick: () =>
|
|
517
|
-
children:
|
|
516
|
+
onClick: () => u(!1),
|
|
517
|
+
children: i
|
|
518
518
|
}
|
|
519
|
-
) },
|
|
519
|
+
) }, l)) })
|
|
520
520
|
] }) }),
|
|
521
|
-
/* @__PURE__ */
|
|
522
|
-
/* @__PURE__ */
|
|
523
|
-
/* @__PURE__ */
|
|
521
|
+
/* @__PURE__ */ t.jsx("div", { className: c.demoContent, children: f.map((i, l) => /* @__PURE__ */ t.jsxs("section", { id: i.toLowerCase(), className: c.demoSection, children: [
|
|
522
|
+
/* @__PURE__ */ t.jsx("h2", { children: i }),
|
|
523
|
+
/* @__PURE__ */ t.jsxs("p", { children: [
|
|
524
524
|
"This is the ",
|
|
525
|
-
|
|
525
|
+
i,
|
|
526
526
|
" 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."
|
|
527
527
|
] })
|
|
528
|
-
] },
|
|
528
|
+
] }, l)) })
|
|
529
529
|
] });
|
|
530
530
|
}
|
|
531
|
-
function
|
|
532
|
-
return /* @__PURE__ */
|
|
531
|
+
function ce() {
|
|
532
|
+
return /* @__PURE__ */ t.jsx("nav", { children: /* @__PURE__ */ t.jsx("h1", { children: "Hello cards" }) });
|
|
533
|
+
}
|
|
534
|
+
const m = (() => {
|
|
535
|
+
const s = document.createElement("style");
|
|
536
|
+
return s.textContent = `
|
|
537
|
+
* {
|
|
538
|
+
margin: 0;
|
|
539
|
+
padding: 0;
|
|
540
|
+
box-sizing: border-box;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.heroSection {
|
|
544
|
+
min-height: 100vh;
|
|
545
|
+
display: flex;
|
|
546
|
+
flex-direction: column;
|
|
547
|
+
justify-content: center;
|
|
548
|
+
align-items: center;
|
|
549
|
+
padding: 2rem;
|
|
550
|
+
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
|
551
|
+
position: relative;
|
|
552
|
+
overflow: hidden;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
.heroSection::before {
|
|
556
|
+
content: '';
|
|
557
|
+
position: absolute;
|
|
558
|
+
top: 0;
|
|
559
|
+
left: 0;
|
|
560
|
+
right: 0;
|
|
561
|
+
bottom: 0;
|
|
562
|
+
background:
|
|
563
|
+
radial-gradient(circle at 20% 50%, rgba(0, 216, 255, 0.1) 0%, transparent 50%),
|
|
564
|
+
radial-gradient(circle at 80% 80%, rgba(0, 153, 204, 0.1) 0%, transparent 50%);
|
|
565
|
+
pointer-events: none;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
.heroContent {
|
|
569
|
+
max-width: 1200px;
|
|
570
|
+
text-align: center;
|
|
571
|
+
z-index: 1;
|
|
572
|
+
animation: fadeInUp 1s ease-out;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
@keyframes fadeInUp {
|
|
576
|
+
from {
|
|
577
|
+
opacity: 0;
|
|
578
|
+
transform: translateY(30px);
|
|
579
|
+
}
|
|
580
|
+
to {
|
|
581
|
+
opacity: 1;
|
|
582
|
+
transform: translateY(0);
|
|
583
|
+
}
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
.heroTitle {
|
|
587
|
+
font-size: 4.5rem;
|
|
588
|
+
font-weight: 800;
|
|
589
|
+
color: #fff;
|
|
590
|
+
margin-bottom: 1.5rem;
|
|
591
|
+
line-height: 1.2;
|
|
592
|
+
background: linear-gradient(135deg, #fff 0%, #00d8ff 100%);
|
|
593
|
+
-webkit-background-clip: text;
|
|
594
|
+
-webkit-text-fill-color: transparent;
|
|
595
|
+
background-clip: text;
|
|
596
|
+
animation: fadeInUp 1s ease-out 0.2s backwards;
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
.heroSubtitle {
|
|
600
|
+
font-size: 1.3rem;
|
|
601
|
+
color: #b8b8b8;
|
|
602
|
+
margin-bottom: 3rem;
|
|
603
|
+
line-height: 1.8;
|
|
604
|
+
max-width: 700px;
|
|
605
|
+
margin-left: auto;
|
|
606
|
+
margin-right: auto;
|
|
607
|
+
animation: fadeInUp 1s ease-out 0.4s backwards;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.buttonGroup {
|
|
611
|
+
display: flex;
|
|
612
|
+
gap: 1.5rem;
|
|
613
|
+
justify-content: center;
|
|
614
|
+
flex-wrap: wrap;
|
|
615
|
+
animation: fadeInUp 1s ease-out 0.6s backwards;
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
.btnPrimary {
|
|
619
|
+
padding: 1rem 2.5rem;
|
|
620
|
+
font-size: 1.1rem;
|
|
621
|
+
font-weight: 600;
|
|
622
|
+
border: none;
|
|
623
|
+
border-radius: 50px;
|
|
624
|
+
cursor: pointer;
|
|
625
|
+
transition: all 0.3s ease;
|
|
626
|
+
background: linear-gradient(135deg, #00d8ff 0%, #0099cc 100%);
|
|
627
|
+
color: #fff;
|
|
628
|
+
box-shadow: 0 4px 15px rgba(0, 216, 255, 0.3);
|
|
629
|
+
position: relative;
|
|
630
|
+
overflow: hidden;
|
|
631
|
+
}
|
|
632
|
+
|
|
633
|
+
.btnPrimary::before {
|
|
634
|
+
content: '';
|
|
635
|
+
position: absolute;
|
|
636
|
+
top: 0;
|
|
637
|
+
left: -100%;
|
|
638
|
+
width: 100%;
|
|
639
|
+
height: 100%;
|
|
640
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
641
|
+
transition: left 0.5s ease;
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
.btnPrimary:hover::before {
|
|
645
|
+
left: 100%;
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
.btnPrimary:hover {
|
|
649
|
+
transform: translateY(-3px);
|
|
650
|
+
box-shadow: 0 6px 25px rgba(0, 216, 255, 0.5);
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.btnPrimary:active {
|
|
654
|
+
transform: translateY(-1px);
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.btnSecondary {
|
|
658
|
+
padding: 1rem 2.5rem;
|
|
659
|
+
font-size: 1.1rem;
|
|
660
|
+
font-weight: 600;
|
|
661
|
+
border: 2px solid #00d8ff;
|
|
662
|
+
border-radius: 50px;
|
|
663
|
+
cursor: pointer;
|
|
664
|
+
transition: all 0.3s ease;
|
|
665
|
+
background: transparent;
|
|
666
|
+
color: #00d8ff;
|
|
667
|
+
position: relative;
|
|
668
|
+
overflow: hidden;
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
.btnSecondary::before {
|
|
672
|
+
content: '';
|
|
673
|
+
position: absolute;
|
|
674
|
+
top: 50%;
|
|
675
|
+
left: 50%;
|
|
676
|
+
width: 0;
|
|
677
|
+
height: 0;
|
|
678
|
+
border-radius: 50%;
|
|
679
|
+
background: #00d8ff;
|
|
680
|
+
transform: translate(-50%, -50%);
|
|
681
|
+
transition: width 0.5s ease, height 0.5s ease;
|
|
682
|
+
z-index: -1;
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
.btnSecondary:hover::before {
|
|
686
|
+
width: 300px;
|
|
687
|
+
height: 300px;
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
.btnSecondary:hover {
|
|
691
|
+
color: #fff;
|
|
692
|
+
border-color: #00d8ff;
|
|
693
|
+
transform: translateY(-3px);
|
|
694
|
+
box-shadow: 0 6px 25px rgba(0, 216, 255, 0.3);
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
.btnSecondary:active {
|
|
698
|
+
transform: translateY(-1px);
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
@media (max-width: 768px) {
|
|
702
|
+
.heroTitle {
|
|
703
|
+
font-size: 3rem;
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
.heroSubtitle {
|
|
707
|
+
font-size: 1.1rem;
|
|
708
|
+
margin-bottom: 2rem;
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
.buttonGroup {
|
|
712
|
+
flex-direction: column;
|
|
713
|
+
gap: 1rem;
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
.btnPrimary,
|
|
717
|
+
.btnSecondary {
|
|
718
|
+
width: 100%;
|
|
719
|
+
max-width: 300px;
|
|
720
|
+
}
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
@media (max-width: 480px) {
|
|
724
|
+
.heroSection {
|
|
725
|
+
padding: 1.5rem;
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
.heroTitle {
|
|
729
|
+
font-size: 2.2rem;
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
.heroSubtitle {
|
|
733
|
+
font-size: 1rem;
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
.btnPrimary,
|
|
737
|
+
.btnSecondary {
|
|
738
|
+
padding: 0.9rem 2rem;
|
|
739
|
+
font-size: 1rem;
|
|
740
|
+
}
|
|
741
|
+
}
|
|
742
|
+
`, document.head.querySelector("[data-hero-styles]") || (s.setAttribute("data-hero-styles", ""), document.head.appendChild(s)), {
|
|
743
|
+
heroSection: "heroSection",
|
|
744
|
+
heroContent: "heroContent",
|
|
745
|
+
heroTitle: "heroTitle",
|
|
746
|
+
heroSubtitle: "heroSubtitle",
|
|
747
|
+
buttonGroup: "buttonGroup",
|
|
748
|
+
btnPrimary: "btnPrimary",
|
|
749
|
+
btnSecondary: "btnSecondary"
|
|
750
|
+
};
|
|
751
|
+
})();
|
|
752
|
+
function de() {
|
|
753
|
+
return /* @__PURE__ */ t.jsx("section", { className: m.heroSection, children: /* @__PURE__ */ t.jsxs("div", { className: m.heroContent, children: [
|
|
754
|
+
/* @__PURE__ */ t.jsx("h1", { className: m.heroTitle, children: "Welcome to the Future" }),
|
|
755
|
+
/* @__PURE__ */ t.jsx("p", { className: m.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." }),
|
|
756
|
+
/* @__PURE__ */ t.jsxs("div", { className: m.buttonGroup, children: [
|
|
757
|
+
/* @__PURE__ */ t.jsx("button", { className: m.btnPrimary, children: "Get Started" }),
|
|
758
|
+
/* @__PURE__ */ t.jsx("button", { className: m.btnSecondary, children: "Learn More" })
|
|
759
|
+
] })
|
|
760
|
+
] }) });
|
|
533
761
|
}
|
|
534
762
|
export {
|
|
535
|
-
|
|
536
|
-
|
|
763
|
+
ce as Card,
|
|
764
|
+
de as HeroSection,
|
|
765
|
+
le as Navbar
|
|
537
766
|
};
|
package/dist/tosa.umd.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(u,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],p):(u=typeof globalThis<"u"?globalThis:u||self,p(u.Tosa={},u.React))})(this,(function(u,p){"use strict";var k={exports:{}},g={};var P;function W(){if(P)return g;P=1;var s=Symbol.for("react.transitional.element"),b=Symbol.for("react.fragment");function d(f,i,l){var v=null;if(l!==void 0&&(v=""+l),i.key!==void 0&&(v=""+i.key),"key"in i){l={};for(var y in i)y!=="key"&&(l[y]=i[y])}else l=i;return i=l.ref,{$$typeof:s,type:f,key:v,ref:i!==void 0?i:null,props:l}}return g.Fragment=b,g.jsx=d,g.jsxs=d,g}var x={};var C;function G(){return C||(C=1,process.env.NODE_ENV!=="production"&&(function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===se?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case K:return"Profiler";case Q:return"StrictMode";case ne:return"Suspense";case ae:return"SuspenseList";case ie: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 Z:return"Portal";case re:return e.displayName||"Context";case ee:return(e._context.displayName||"Context")+".Consumer";case te:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case oe:return r=e.displayName||null,r!==null?r:s(e.type)||"Memo";case _:r=e._payload,e=e._init;try{return s(e(r))}catch{}}return null}function b(e){return""+e}function d(e){try{b(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,a=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.",a),b(e)}}function f(e){if(e===E)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===_)return"<...>";try{var r=s(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function i(){var e=T.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function v(e){if(L.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function y(e,r){function n(){I||(I=!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))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function H(){var e=s(this.type);return $[e]||($[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 B(e,r,n,a,S,j){var o=n.ref;return e={$$typeof:M,type:e,key:r,props:n,_owner:a},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:H}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:S}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:j}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function A(e,r,n,a,S,j){var o=r.children;if(o!==void 0)if(a)if(le(o)){for(a=0;a<o.length;a++)z(o[a]);Object.freeze&&Object.freeze(o)}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 z(o);if(L.call(r,"key")){o=s(e);var h=Object.keys(r).filter(function(ce){return ce!=="key"});a=0<h.length?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}",D[o+a]||(h=0<h.length?"{"+h.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
2
|
let props = %s;
|
|
3
3
|
<%s {...props} />
|
|
4
4
|
React keys must be passed directly to JSX without using spread:
|
|
5
5
|
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,
|
|
6
|
+
<%s key={someKey} {...props} />`,a,o,h,o),D[o+a]=!0)}if(o=null,n!==void 0&&(d(n),o=""+n),v(r)&&(d(r.key),o=""+r.key),"key"in r){n={};for(var N in r)N!=="key"&&(n[N]=r[N])}else n=r;return o&&y(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),B(e,o,n,i(),S,j)}function z(e){Y(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===_&&(e._payload.status==="fulfilled"?Y(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function Y(e){return typeof e=="object"&&e!==null&&e.$$typeof===M}var w=p,M=Symbol.for("react.transitional.element"),Z=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),Q=Symbol.for("react.strict_mode"),K=Symbol.for("react.profiler"),ee=Symbol.for("react.consumer"),re=Symbol.for("react.context"),te=Symbol.for("react.forward_ref"),ne=Symbol.for("react.suspense"),ae=Symbol.for("react.suspense_list"),oe=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),ie=Symbol.for("react.activity"),se=Symbol.for("react.client.reference"),T=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,le=Array.isArray,R=console.createTask?console.createTask:function(){return null};w={react_stack_bottom_frame:function(e){return e()}};var I,$={},F=w.react_stack_bottom_frame.bind(w,l)(),U=R(f(l)),D={};x.Fragment=E,x.jsx=function(e,r,n){var a=1e4>T.recentlyCreatedOwnerStacks++;return A(e,r,n,!1,a?Error("react-stack-top-frame"):F,a?R(f(e)):U)},x.jsxs=function(e,r,n){var a=1e4>T.recentlyCreatedOwnerStacks++;return A(e,r,n,!0,a?Error("react-stack-top-frame"):F,a?R(f(e)):U)}})()),x}var O;function X(){return O||(O=1,process.env.NODE_ENV==="production"?k.exports=W():k.exports=G()),k.exports}var t=X();const c=(()=>{const s=document.createElement("style");return s.textContent=`
|
|
7
7
|
* {
|
|
8
8
|
margin: 0;
|
|
9
9
|
padding: 0;
|
|
@@ -217,4 +217,210 @@ React keys must be passed directly to JSX without using spread:
|
|
|
217
217
|
width: 100%;
|
|
218
218
|
}
|
|
219
219
|
}
|
|
220
|
-
`,document.head.querySelector("[data-navbar-styles]")||(
|
|
220
|
+
`,document.head.querySelector("[data-navbar-styles]")||(s.setAttribute("data-navbar-styles",""),document.head.appendChild(s)),{navbar:"navbar",navContainer:"navContainer",logo:"logo",navMenu:"navMenu",navLink:"navLink",hamburger:"hamburger",bar:"bar",active:"active",open:"open",demoContent:"demoContent",demoSection:"demoSection"}})();function q({brand:s="TOSA",links:b=["Home","About","Services","Contact"]}){const[d,f]=p.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx("nav",{className:c.navbar,children:t.jsxs("div",{className:c.navContainer,children:[t.jsx("div",{className:c.logo,children:s}),t.jsxs("button",{className:`${c.hamburger} ${d?c.active:""}`,onClick:()=>f(!d),"aria-label":"Toggle menu","aria-expanded":d,children:[t.jsx("span",{className:c.bar}),t.jsx("span",{className:c.bar}),t.jsx("span",{className:c.bar})]}),t.jsx("ul",{className:`${c.navMenu} ${d?c.open:""}`,children:b.map((i,l)=>t.jsx("li",{children:t.jsx("a",{href:`#${i.toLowerCase()}`,className:c.navLink,onClick:()=>f(!1),children:i})},l))})]})}),t.jsx("div",{className:c.demoContent,children:b.map((i,l)=>t.jsxs("section",{id:i.toLowerCase(),className:c.demoSection,children:[t.jsx("h2",{children:i}),t.jsxs("p",{children:["This is the ",i," 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."]})]},l))})]})}function J(){return t.jsx("nav",{children:t.jsx("h1",{children:"Hello cards"})})}const m=(()=>{const s=document.createElement("style");return s.textContent=`
|
|
221
|
+
* {
|
|
222
|
+
margin: 0;
|
|
223
|
+
padding: 0;
|
|
224
|
+
box-sizing: border-box;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.heroSection {
|
|
228
|
+
min-height: 100vh;
|
|
229
|
+
display: flex;
|
|
230
|
+
flex-direction: column;
|
|
231
|
+
justify-content: center;
|
|
232
|
+
align-items: center;
|
|
233
|
+
padding: 2rem;
|
|
234
|
+
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
|
235
|
+
position: relative;
|
|
236
|
+
overflow: hidden;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.heroSection::before {
|
|
240
|
+
content: '';
|
|
241
|
+
position: absolute;
|
|
242
|
+
top: 0;
|
|
243
|
+
left: 0;
|
|
244
|
+
right: 0;
|
|
245
|
+
bottom: 0;
|
|
246
|
+
background:
|
|
247
|
+
radial-gradient(circle at 20% 50%, rgba(0, 216, 255, 0.1) 0%, transparent 50%),
|
|
248
|
+
radial-gradient(circle at 80% 80%, rgba(0, 153, 204, 0.1) 0%, transparent 50%);
|
|
249
|
+
pointer-events: none;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.heroContent {
|
|
253
|
+
max-width: 1200px;
|
|
254
|
+
text-align: center;
|
|
255
|
+
z-index: 1;
|
|
256
|
+
animation: fadeInUp 1s ease-out;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
@keyframes fadeInUp {
|
|
260
|
+
from {
|
|
261
|
+
opacity: 0;
|
|
262
|
+
transform: translateY(30px);
|
|
263
|
+
}
|
|
264
|
+
to {
|
|
265
|
+
opacity: 1;
|
|
266
|
+
transform: translateY(0);
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.heroTitle {
|
|
271
|
+
font-size: 4.5rem;
|
|
272
|
+
font-weight: 800;
|
|
273
|
+
color: #fff;
|
|
274
|
+
margin-bottom: 1.5rem;
|
|
275
|
+
line-height: 1.2;
|
|
276
|
+
background: linear-gradient(135deg, #fff 0%, #00d8ff 100%);
|
|
277
|
+
-webkit-background-clip: text;
|
|
278
|
+
-webkit-text-fill-color: transparent;
|
|
279
|
+
background-clip: text;
|
|
280
|
+
animation: fadeInUp 1s ease-out 0.2s backwards;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.heroSubtitle {
|
|
284
|
+
font-size: 1.3rem;
|
|
285
|
+
color: #b8b8b8;
|
|
286
|
+
margin-bottom: 3rem;
|
|
287
|
+
line-height: 1.8;
|
|
288
|
+
max-width: 700px;
|
|
289
|
+
margin-left: auto;
|
|
290
|
+
margin-right: auto;
|
|
291
|
+
animation: fadeInUp 1s ease-out 0.4s backwards;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.buttonGroup {
|
|
295
|
+
display: flex;
|
|
296
|
+
gap: 1.5rem;
|
|
297
|
+
justify-content: center;
|
|
298
|
+
flex-wrap: wrap;
|
|
299
|
+
animation: fadeInUp 1s ease-out 0.6s backwards;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.btnPrimary {
|
|
303
|
+
padding: 1rem 2.5rem;
|
|
304
|
+
font-size: 1.1rem;
|
|
305
|
+
font-weight: 600;
|
|
306
|
+
border: none;
|
|
307
|
+
border-radius: 50px;
|
|
308
|
+
cursor: pointer;
|
|
309
|
+
transition: all 0.3s ease;
|
|
310
|
+
background: linear-gradient(135deg, #00d8ff 0%, #0099cc 100%);
|
|
311
|
+
color: #fff;
|
|
312
|
+
box-shadow: 0 4px 15px rgba(0, 216, 255, 0.3);
|
|
313
|
+
position: relative;
|
|
314
|
+
overflow: hidden;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.btnPrimary::before {
|
|
318
|
+
content: '';
|
|
319
|
+
position: absolute;
|
|
320
|
+
top: 0;
|
|
321
|
+
left: -100%;
|
|
322
|
+
width: 100%;
|
|
323
|
+
height: 100%;
|
|
324
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
325
|
+
transition: left 0.5s ease;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.btnPrimary:hover::before {
|
|
329
|
+
left: 100%;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.btnPrimary:hover {
|
|
333
|
+
transform: translateY(-3px);
|
|
334
|
+
box-shadow: 0 6px 25px rgba(0, 216, 255, 0.5);
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.btnPrimary:active {
|
|
338
|
+
transform: translateY(-1px);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.btnSecondary {
|
|
342
|
+
padding: 1rem 2.5rem;
|
|
343
|
+
font-size: 1.1rem;
|
|
344
|
+
font-weight: 600;
|
|
345
|
+
border: 2px solid #00d8ff;
|
|
346
|
+
border-radius: 50px;
|
|
347
|
+
cursor: pointer;
|
|
348
|
+
transition: all 0.3s ease;
|
|
349
|
+
background: transparent;
|
|
350
|
+
color: #00d8ff;
|
|
351
|
+
position: relative;
|
|
352
|
+
overflow: hidden;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.btnSecondary::before {
|
|
356
|
+
content: '';
|
|
357
|
+
position: absolute;
|
|
358
|
+
top: 50%;
|
|
359
|
+
left: 50%;
|
|
360
|
+
width: 0;
|
|
361
|
+
height: 0;
|
|
362
|
+
border-radius: 50%;
|
|
363
|
+
background: #00d8ff;
|
|
364
|
+
transform: translate(-50%, -50%);
|
|
365
|
+
transition: width 0.5s ease, height 0.5s ease;
|
|
366
|
+
z-index: -1;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.btnSecondary:hover::before {
|
|
370
|
+
width: 300px;
|
|
371
|
+
height: 300px;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.btnSecondary:hover {
|
|
375
|
+
color: #fff;
|
|
376
|
+
border-color: #00d8ff;
|
|
377
|
+
transform: translateY(-3px);
|
|
378
|
+
box-shadow: 0 6px 25px rgba(0, 216, 255, 0.3);
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.btnSecondary:active {
|
|
382
|
+
transform: translateY(-1px);
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
@media (max-width: 768px) {
|
|
386
|
+
.heroTitle {
|
|
387
|
+
font-size: 3rem;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.heroSubtitle {
|
|
391
|
+
font-size: 1.1rem;
|
|
392
|
+
margin-bottom: 2rem;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.buttonGroup {
|
|
396
|
+
flex-direction: column;
|
|
397
|
+
gap: 1rem;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.btnPrimary,
|
|
401
|
+
.btnSecondary {
|
|
402
|
+
width: 100%;
|
|
403
|
+
max-width: 300px;
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
@media (max-width: 480px) {
|
|
408
|
+
.heroSection {
|
|
409
|
+
padding: 1.5rem;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.heroTitle {
|
|
413
|
+
font-size: 2.2rem;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.heroSubtitle {
|
|
417
|
+
font-size: 1rem;
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
.btnPrimary,
|
|
421
|
+
.btnSecondary {
|
|
422
|
+
padding: 0.9rem 2rem;
|
|
423
|
+
font-size: 1rem;
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
`,document.head.querySelector("[data-hero-styles]")||(s.setAttribute("data-hero-styles",""),document.head.appendChild(s)),{heroSection:"heroSection",heroContent:"heroContent",heroTitle:"heroTitle",heroSubtitle:"heroSubtitle",buttonGroup:"buttonGroup",btnPrimary:"btnPrimary",btnSecondary:"btnSecondary"}})();function V(){return t.jsx("section",{className:m.heroSection,children:t.jsxs("div",{className:m.heroContent,children:[t.jsx("h1",{className:m.heroTitle,children:"Welcome to the Future"}),t.jsx("p",{className:m.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."}),t.jsxs("div",{className:m.buttonGroup,children:[t.jsx("button",{className:m.btnPrimary,children:"Get Started"}),t.jsx("button",{className:m.btnSecondary,children:"Learn More"})]})]})})}u.Card=J,u.HeroSection=V,u.Navbar=q,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED