@sachin-tosa/tosa 1.0.4 → 1.0.6
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 +721 -206
- package/dist/tosa.umd.js +425 -30
- package/package.json +1 -1
package/dist/tosa.umd.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(m,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],g):(m=typeof globalThis<"u"?globalThis:m||self,g(m.Tosa={},m.React))})(this,(function(m,g){"use strict";var E={exports:{}},k={};var O;function J(){if(O)return k;O=1;var a=Symbol.for("react.transitional.element"),h=Symbol.for("react.fragment");function u(f,s,c){var v=null;if(c!==void 0&&(v=""+c),s.key!==void 0&&(v=""+s.key),"key"in s){c={};for(var w in s)w!=="key"&&(c[w]=s[w])}else c=s;return s=c.ref,{$$typeof:a,type:f,key:v,ref:s!==void 0?s:null,props:c}}return k.Fragment=h,k.jsx=u,k.jsxs=u,k}var S={};var z;function V(){return z||(z=1,process.env.NODE_ENV!=="production"&&(function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ce?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case te:return"Profiler";case ee:return"StrictMode";case oe:return"Suspense";case ie:return"SuspenseList";case le: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 K:return"Portal";case ae:return e.displayName||"Context";case re:return(e._context.displayName||"Context")+".Consumer";case ne:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case se:return t=e.displayName||null,t!==null?t:a(e.type)||"Memo";case R:t=e._payload,e=e._init;try{return a(e(t))}catch{}}return null}function h(e){return""+e}function u(e){try{h(e);var t=!1}catch{t=!0}if(t){t=console;var n=t.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),h(e)}}function f(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===R)return"<...>";try{var t=a(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function s(){var e=N.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function v(e){if(D.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function w(e,t){function n(){F||(F=!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)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function d(){var e=a(this.type);return W[e]||(W[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,t,n,o,_,P){var i=n.ref;return e={$$typeof:$,type:e,key:t,props:n,_owner:o},(i!==void 0?i:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:d}):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:_}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function L(e,t,n,o,_,P){var i=t.children;if(i!==void 0)if(o)if(de(i)){for(o=0;o<i.length;o++)I(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 I(i);if(D.call(t,"key")){i=a(e);var y=Object.keys(t).filter(function(ue){return ue!=="key"});o=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",X[i+o]||(y=0<y.length?"{"+y.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} />`,o,i,y,i),X[i+o]=!0)}if(i=null,n!==void 0&&(u(n),i=""+n),v(t)&&(u(t.key),i=""+t.key),"key"in t){n={};for(var A in t)A!=="key"&&(n[A]=t[A])}else n=t;return i&&w(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),b(e,i,n,s(),_,P)}function I(e){M(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===R&&(e._payload.status==="fulfilled"?M(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function M(e){return typeof e=="object"&&e!==null&&e.$$typeof===$}var T=g,$=Symbol.for("react.transitional.element"),K=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),ee=Symbol.for("react.strict_mode"),te=Symbol.for("react.profiler"),re=Symbol.for("react.consumer"),ae=Symbol.for("react.context"),ne=Symbol.for("react.forward_ref"),oe=Symbol.for("react.suspense"),ie=Symbol.for("react.suspense_list"),se=Symbol.for("react.memo"),R=Symbol.for("react.lazy"),le=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),N=T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=Object.prototype.hasOwnProperty,de=Array.isArray,C=console.createTask?console.createTask:function(){return null};T={react_stack_bottom_frame:function(e){return e()}};var F,W={},U=T.react_stack_bottom_frame.bind(T,c)(),G=C(f(c)),X={};S.Fragment=j,S.jsx=function(e,t,n){var o=1e4>N.recentlyCreatedOwnerStacks++;return L(e,t,n,!1,o?Error("react-stack-top-frame"):U,o?C(f(e)):G)},S.jsxs=function(e,t,n){var o=1e4>N.recentlyCreatedOwnerStacks++;return L(e,t,n,!0,o?Error("react-stack-top-frame"):U,o?C(f(e)):G)}})()),S}var Y;function q(){return Y||(Y=1,process.env.NODE_ENV==="production"?E.exports=J():E.exports=V()),E.exports}var r=q();const p=(()=>{const a=document.createElement("style");return a.textContent=`
|
|
7
7
|
* {
|
|
8
8
|
margin: 0;
|
|
9
9
|
padding: 0;
|
|
@@ -114,33 +114,8 @@ React keys must be passed directly to JSX without using spread:
|
|
|
114
114
|
transform: translateY(-9.5px) rotate(-45deg);
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
max-width: 1200px;
|
|
120
|
-
margin: 0 auto;
|
|
121
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.demoSection {
|
|
125
|
-
margin-bottom: 3rem;
|
|
126
|
-
padding: 3rem 2rem;
|
|
127
|
-
background: #f8f9fa;
|
|
128
|
-
border-radius: 12px;
|
|
129
|
-
scroll-margin-top: 80px;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.demoSection h2 {
|
|
133
|
-
color: #1a1a2e;
|
|
134
|
-
margin-bottom: 1rem;
|
|
135
|
-
font-size: 2rem;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.demoSection p {
|
|
139
|
-
color: #666;
|
|
140
|
-
line-height: 1.8;
|
|
141
|
-
font-size: 1.1rem;
|
|
142
|
-
}
|
|
143
|
-
|
|
117
|
+
|
|
118
|
+
|
|
144
119
|
@media (max-width: 768px) {
|
|
145
120
|
.hamburger {
|
|
146
121
|
display: flex;
|
|
@@ -217,4 +192,424 @@ React keys must be passed directly to JSX without using spread:
|
|
|
217
192
|
width: 100%;
|
|
218
193
|
}
|
|
219
194
|
}
|
|
220
|
-
`,document.head.querySelector("[data-navbar-styles]")||(
|
|
195
|
+
`,document.head.querySelector("[data-navbar-styles]")||(a.setAttribute("data-navbar-styles",""),document.head.appendChild(a)),{navbar:"navbar",navContainer:"navContainer",logo:"logo",navMenu:"navMenu",navLink:"navLink",hamburger:"hamburger",bar:"bar",active:"active",open:"open"}})();function H({brand:a="TOSA",links:h=["Home","About","Services","Contact"]}){const[u,f]=g.useState(!1);return r.jsx(r.Fragment,{children:r.jsx("nav",{className:p.navbar,children:r.jsxs("div",{className:p.navContainer,children:[r.jsx("div",{className:p.logo,children:a}),r.jsxs("button",{className:`${p.hamburger} ${u?p.active:""}`,onClick:()=>f(!u),"aria-label":"Toggle menu","aria-expanded":u,children:[r.jsx("span",{className:p.bar}),r.jsx("span",{className:p.bar}),r.jsx("span",{className:p.bar})]}),r.jsx("ul",{className:`${p.navMenu} ${u?p.open:""}`,children:h.map((s,c)=>r.jsx("li",{children:r.jsx("a",{href:`#${s.toLowerCase()}`,className:p.navLink,onClick:()=>f(!1),children:s})},c))})]})})})}function B(){return r.jsx("nav",{children:r.jsx("h1",{children:"Hello cards"})})}const x=(()=>{const a=document.createElement("style");return a.textContent=`
|
|
196
|
+
* {
|
|
197
|
+
margin: 0;
|
|
198
|
+
padding: 0;
|
|
199
|
+
box-sizing: border-box;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.heroSection {
|
|
203
|
+
min-height: 100vh;
|
|
204
|
+
display: flex;
|
|
205
|
+
flex-direction: column;
|
|
206
|
+
justify-content: center;
|
|
207
|
+
align-items: center;
|
|
208
|
+
padding: 2rem;
|
|
209
|
+
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
|
210
|
+
position: relative;
|
|
211
|
+
overflow: hidden;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.heroSection::before {
|
|
215
|
+
content: '';
|
|
216
|
+
position: absolute;
|
|
217
|
+
top: 0;
|
|
218
|
+
left: 0;
|
|
219
|
+
right: 0;
|
|
220
|
+
bottom: 0;
|
|
221
|
+
background:
|
|
222
|
+
radial-gradient(circle at 20% 50%, rgba(0, 216, 255, 0.1) 0%, transparent 50%),
|
|
223
|
+
radial-gradient(circle at 80% 80%, rgba(0, 153, 204, 0.1) 0%, transparent 50%);
|
|
224
|
+
pointer-events: none;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.heroContent {
|
|
228
|
+
max-width: 1200px;
|
|
229
|
+
text-align: center;
|
|
230
|
+
z-index: 1;
|
|
231
|
+
animation: fadeInUp 1s ease-out;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
@keyframes fadeInUp {
|
|
235
|
+
from {
|
|
236
|
+
opacity: 0;
|
|
237
|
+
transform: translateY(30px);
|
|
238
|
+
}
|
|
239
|
+
to {
|
|
240
|
+
opacity: 1;
|
|
241
|
+
transform: translateY(0);
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.heroTitle {
|
|
246
|
+
font-size: 4.5rem;
|
|
247
|
+
font-weight: 800;
|
|
248
|
+
color: #fff;
|
|
249
|
+
margin-bottom: 1.5rem;
|
|
250
|
+
line-height: 1.2;
|
|
251
|
+
background: linear-gradient(135deg, #fff 0%, #00d8ff 100%);
|
|
252
|
+
-webkit-background-clip: text;
|
|
253
|
+
-webkit-text-fill-color: transparent;
|
|
254
|
+
background-clip: text;
|
|
255
|
+
animation: fadeInUp 1s ease-out 0.2s backwards;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.heroSubtitle {
|
|
259
|
+
font-size: 1.3rem;
|
|
260
|
+
color: #b8b8b8;
|
|
261
|
+
margin-bottom: 3rem;
|
|
262
|
+
line-height: 1.8;
|
|
263
|
+
max-width: 700px;
|
|
264
|
+
margin-left: auto;
|
|
265
|
+
margin-right: auto;
|
|
266
|
+
animation: fadeInUp 1s ease-out 0.4s backwards;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.buttonGroup {
|
|
270
|
+
display: flex;
|
|
271
|
+
gap: 1.5rem;
|
|
272
|
+
justify-content: center;
|
|
273
|
+
flex-wrap: wrap;
|
|
274
|
+
animation: fadeInUp 1s ease-out 0.6s backwards;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.btnPrimary {
|
|
278
|
+
padding: 1rem 2.5rem;
|
|
279
|
+
font-size: 1.1rem;
|
|
280
|
+
font-weight: 600;
|
|
281
|
+
border: none;
|
|
282
|
+
border-radius: 50px;
|
|
283
|
+
cursor: pointer;
|
|
284
|
+
transition: all 0.3s ease;
|
|
285
|
+
background: linear-gradient(135deg, #00d8ff 0%, #0099cc 100%);
|
|
286
|
+
color: #fff;
|
|
287
|
+
box-shadow: 0 4px 15px rgba(0, 216, 255, 0.3);
|
|
288
|
+
position: relative;
|
|
289
|
+
overflow: hidden;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.btnPrimary::before {
|
|
293
|
+
content: '';
|
|
294
|
+
position: absolute;
|
|
295
|
+
top: 0;
|
|
296
|
+
left: -100%;
|
|
297
|
+
width: 100%;
|
|
298
|
+
height: 100%;
|
|
299
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
300
|
+
transition: left 0.5s ease;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.btnPrimary:hover::before {
|
|
304
|
+
left: 100%;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.btnPrimary:hover {
|
|
308
|
+
transform: translateY(-3px);
|
|
309
|
+
box-shadow: 0 6px 25px rgba(0, 216, 255, 0.5);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.btnPrimary:active {
|
|
313
|
+
transform: translateY(-1px);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.btnSecondary {
|
|
317
|
+
padding: 1rem 2.5rem;
|
|
318
|
+
font-size: 1.1rem;
|
|
319
|
+
font-weight: 600;
|
|
320
|
+
border: 2px solid #00d8ff;
|
|
321
|
+
border-radius: 50px;
|
|
322
|
+
cursor: pointer;
|
|
323
|
+
transition: all 0.3s ease;
|
|
324
|
+
background: transparent;
|
|
325
|
+
color: #00d8ff;
|
|
326
|
+
position: relative;
|
|
327
|
+
overflow: hidden;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.btnSecondary::before {
|
|
331
|
+
content: '';
|
|
332
|
+
position: absolute;
|
|
333
|
+
top: 50%;
|
|
334
|
+
left: 50%;
|
|
335
|
+
width: 0;
|
|
336
|
+
height: 0;
|
|
337
|
+
border-radius: 50%;
|
|
338
|
+
background: #00d8ff;
|
|
339
|
+
transform: translate(-50%, -50%);
|
|
340
|
+
transition: width 0.5s ease, height 0.5s ease;
|
|
341
|
+
z-index: -1;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.btnSecondary:hover::before {
|
|
345
|
+
width: 300px;
|
|
346
|
+
height: 300px;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.btnSecondary:hover {
|
|
350
|
+
color: #fff;
|
|
351
|
+
border-color: #00d8ff;
|
|
352
|
+
transform: translateY(-3px);
|
|
353
|
+
box-shadow: 0 6px 25px rgba(0, 216, 255, 0.3);
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.btnSecondary:active {
|
|
357
|
+
transform: translateY(-1px);
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
@media (max-width: 768px) {
|
|
361
|
+
.heroTitle {
|
|
362
|
+
font-size: 3rem;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.heroSubtitle {
|
|
366
|
+
font-size: 1.1rem;
|
|
367
|
+
margin-bottom: 2rem;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.buttonGroup {
|
|
371
|
+
flex-direction: column;
|
|
372
|
+
gap: 1rem;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.btnPrimary,
|
|
376
|
+
.btnSecondary {
|
|
377
|
+
width: 100%;
|
|
378
|
+
max-width: 300px;
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
@media (max-width: 480px) {
|
|
383
|
+
.heroSection {
|
|
384
|
+
padding: 1.5rem;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.heroTitle {
|
|
388
|
+
font-size: 2.2rem;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
.heroSubtitle {
|
|
392
|
+
font-size: 1rem;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.btnPrimary,
|
|
396
|
+
.btnSecondary {
|
|
397
|
+
padding: 0.9rem 2rem;
|
|
398
|
+
font-size: 1rem;
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
`,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 Z(){return r.jsx("section",{className:x.heroSection,children:r.jsxs("div",{className:x.heroContent,children:[r.jsx("h1",{className:x.heroTitle,children:"Welcome to the Future"}),r.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."}),r.jsxs("div",{className:x.buttonGroup,children:[r.jsx("button",{className:x.btnPrimary,children:"Get Started"}),r.jsx("button",{className:x.btnSecondary,children:"Learn More"})]})]})})}const l=(()=>{const a=document.createElement("style");return a.textContent=`
|
|
402
|
+
* {
|
|
403
|
+
margin: 0;
|
|
404
|
+
padding: 0;
|
|
405
|
+
box-sizing: border-box;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.carouselContainer {
|
|
409
|
+
position: relative;
|
|
410
|
+
width: 100%;
|
|
411
|
+
max-width: 1200px;
|
|
412
|
+
margin: 0 auto;
|
|
413
|
+
padding: 2rem;
|
|
414
|
+
overflow: hidden;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.carousel {
|
|
418
|
+
position: relative;
|
|
419
|
+
width: 100%;
|
|
420
|
+
height: 500px;
|
|
421
|
+
border-radius: 20px;
|
|
422
|
+
overflow: hidden;
|
|
423
|
+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.slideWrapper {
|
|
427
|
+
position: relative;
|
|
428
|
+
width: 100%;
|
|
429
|
+
height: 100%;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.slide {
|
|
433
|
+
position: absolute;
|
|
434
|
+
top: 0;
|
|
435
|
+
left: 0;
|
|
436
|
+
width: 100%;
|
|
437
|
+
height: 100%;
|
|
438
|
+
opacity: 0;
|
|
439
|
+
transition: opacity 1s ease-in-out;
|
|
440
|
+
display: flex;
|
|
441
|
+
align-items: center;
|
|
442
|
+
justify-content: center;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.slide.active {
|
|
446
|
+
opacity: 1;
|
|
447
|
+
z-index: 1;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.slideImage {
|
|
451
|
+
width: 100%;
|
|
452
|
+
height: 100%;
|
|
453
|
+
object-fit: cover;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.slideContent {
|
|
457
|
+
position: absolute;
|
|
458
|
+
bottom: 0;
|
|
459
|
+
left: 0;
|
|
460
|
+
right: 0;
|
|
461
|
+
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
|
|
462
|
+
padding: 3rem 2rem 2rem;
|
|
463
|
+
color: #fff;
|
|
464
|
+
z-index: 2;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.slideTitle {
|
|
468
|
+
font-size: 2.5rem;
|
|
469
|
+
font-weight: 700;
|
|
470
|
+
margin-bottom: 0.5rem;
|
|
471
|
+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
.slideDescription {
|
|
475
|
+
font-size: 1.1rem;
|
|
476
|
+
color: #e0e0e0;
|
|
477
|
+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.arrow {
|
|
481
|
+
position: absolute;
|
|
482
|
+
top: 50%;
|
|
483
|
+
transform: translateY(-50%);
|
|
484
|
+
background: rgba(0, 216, 255, 0.8);
|
|
485
|
+
border: none;
|
|
486
|
+
color: #fff;
|
|
487
|
+
width: 50px;
|
|
488
|
+
height: 50px;
|
|
489
|
+
border-radius: 50%;
|
|
490
|
+
cursor: pointer;
|
|
491
|
+
z-index: 10;
|
|
492
|
+
transition: all 0.3s ease;
|
|
493
|
+
display: flex;
|
|
494
|
+
align-items: center;
|
|
495
|
+
justify-content: center;
|
|
496
|
+
font-size: 1.5rem;
|
|
497
|
+
backdrop-filter: blur(10px);
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
.arrow:hover {
|
|
501
|
+
background: rgba(0, 216, 255, 1);
|
|
502
|
+
transform: translateY(-50%) scale(1.1);
|
|
503
|
+
box-shadow: 0 5px 20px rgba(0, 216, 255, 0.5);
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
.arrow:active {
|
|
507
|
+
transform: translateY(-50%) scale(0.95);
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
.arrowLeft {
|
|
511
|
+
left: 20px;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
.arrowRight {
|
|
515
|
+
right: 20px;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
.dots {
|
|
519
|
+
position: absolute;
|
|
520
|
+
bottom: 20px;
|
|
521
|
+
left: 50%;
|
|
522
|
+
transform: translateX(-50%);
|
|
523
|
+
display: flex;
|
|
524
|
+
gap: 10px;
|
|
525
|
+
z-index: 10;
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
.dot {
|
|
529
|
+
width: 12px;
|
|
530
|
+
height: 12px;
|
|
531
|
+
border-radius: 50%;
|
|
532
|
+
background: rgba(255, 255, 255, 0.5);
|
|
533
|
+
border: 2px solid rgba(255, 255, 255, 0.8);
|
|
534
|
+
cursor: pointer;
|
|
535
|
+
transition: all 0.3s ease;
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
.dot:hover {
|
|
539
|
+
background: rgba(255, 255, 255, 0.8);
|
|
540
|
+
transform: scale(1.2);
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.dot.active {
|
|
544
|
+
background: #00d8ff;
|
|
545
|
+
border-color: #00d8ff;
|
|
546
|
+
transform: scale(1.3);
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
@media (max-width: 768px) {
|
|
550
|
+
.carousel {
|
|
551
|
+
height: 400px;
|
|
552
|
+
border-radius: 15px;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
.slideTitle {
|
|
556
|
+
font-size: 1.8rem;
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
.slideDescription {
|
|
560
|
+
font-size: 1rem;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
.arrow {
|
|
564
|
+
width: 40px;
|
|
565
|
+
height: 40px;
|
|
566
|
+
font-size: 1.2rem;
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
.arrowLeft {
|
|
570
|
+
left: 10px;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.arrowRight {
|
|
574
|
+
right: 10px;
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
.slideContent {
|
|
578
|
+
padding: 2rem 1.5rem 1.5rem;
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
@media (max-width: 480px) {
|
|
583
|
+
.carouselContainer {
|
|
584
|
+
padding: 1rem;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.carousel {
|
|
588
|
+
height: 300px;
|
|
589
|
+
border-radius: 10px;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
.slideTitle {
|
|
593
|
+
font-size: 1.4rem;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.slideDescription {
|
|
597
|
+
font-size: 0.9rem;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
.arrow {
|
|
601
|
+
width: 35px;
|
|
602
|
+
height: 35px;
|
|
603
|
+
font-size: 1rem;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
.dots {
|
|
607
|
+
bottom: 15px;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.dot {
|
|
611
|
+
width: 10px;
|
|
612
|
+
height: 10px;
|
|
613
|
+
}
|
|
614
|
+
}
|
|
615
|
+
`,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 Q({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:h=!0,autoPlayInterval:u=5e3}){const[f,s]=g.useState(0),c=()=>{s(d=>(d+1)%a.length)},v=()=>{s(d=>(d-1+a.length)%a.length)},w=d=>{s(d)};return g.useEffect(()=>{if(h){const d=setInterval(c,u);return()=>clearInterval(d)}},[f,h,u]),r.jsx("div",{className:l.carouselContainer,children:r.jsxs("div",{className:l.carousel,children:[r.jsx("div",{className:l.slideWrapper,children:a.map((d,b)=>r.jsxs("div",{className:`${l.slide} ${b===f?l.active:""}`,children:[r.jsx("img",{src:d.image,alt:d.title,className:l.slideImage}),r.jsxs("div",{className:l.slideContent,children:[r.jsx("h2",{className:l.slideTitle,children:d.title}),r.jsx("p",{className:l.slideDescription,children:d.description})]})]},b))}),r.jsx("button",{className:`${l.arrow} ${l.arrowLeft}`,onClick:v,"aria-label":"Previous slide",children:"‹"}),r.jsx("button",{className:`${l.arrow} ${l.arrowRight}`,onClick:c,"aria-label":"Next slide",children:"›"}),r.jsx("div",{className:l.dots,children:a.map((d,b)=>r.jsx("button",{className:`${l.dot} ${b===f?l.active:""}`,onClick:()=>w(b),"aria-label":`Go to slide ${b+1}`},b))})]})})}m.Card=B,m.Carousal=Q,m.HeroSection=Z,m.Navbar=H,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED