telecop 0.1.9 → 0.1.11
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/components/TelecopButton/index.d.ts +2 -0
- package/dist/components/TelecopButton/types.d.ts +9 -0
- package/dist/components/TelecopButton/variants.d.ts +121 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +177 -3
- package/dist/index.mjs +576 -77
- package/dist/style.css +1 -1
- package/dist/styles/data/gradients.d.ts +8 -0
- package/package.json +1 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export { SolidBlue, SolidRed, SolidGreen, SolidPurple, SolidPill, GradientPurplePink, GradientBlueGreen, GradientOrangeRed, GradientCyan, GradientSunset, GlassBlue, GlassPurple, GlassWhite, GlassPink, AnimatedShimmer, AnimatedPulse, AnimatedBounce, AnimatedGlow, OutlinedBlue, OutlinedPurple, OutlinedGradient, GhostBlue, GhostRed, GhostPurple, Button3DBlue, Button3DPink, Button3DGreen, NeonBlue, NeonPink, NeonGreen, } from './variants';
|
|
2
|
+
export type { TelecopButtonProps, ButtonCategory, ButtonVariantType } from './types';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export type ButtonCategory = 'solid' | 'gradient' | 'glass' | 'animated' | 'outlined' | 'ghost';
|
|
2
|
+
export type ButtonVariantType = 'solid-blue' | 'solid-red' | 'solid-green' | 'solid-purple' | 'solid-pill' | '3d-blue' | '3d-pink' | '3d-green' | 'gradient-purple-pink' | 'gradient-blue-green' | 'gradient-orange-red' | 'gradient-cyan' | 'gradient-sunset' | 'glass-blue' | 'glass-purple' | 'glass-white' | 'glass-pink' | 'animated-shimmer' | 'animated-pulse' | 'animated-bounce' | 'animated-glow' | 'neon-blue' | 'neon-pink' | 'neon-green' | 'outlined-blue' | 'outlined-purple' | 'outlined-gradient' | 'ghost-blue' | 'ghost-red' | 'ghost-purple';
|
|
3
|
+
export interface TelecopButtonProps {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
variant?: ButtonVariantType;
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export declare const SolidBlue: React.FC<{
|
|
3
|
+
children?: React.ReactNode;
|
|
4
|
+
onClick?: () => void;
|
|
5
|
+
}>;
|
|
6
|
+
export declare const SolidRed: React.FC<{
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
onClick?: () => void;
|
|
9
|
+
}>;
|
|
10
|
+
export declare const SolidGreen: React.FC<{
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
onClick?: () => void;
|
|
13
|
+
}>;
|
|
14
|
+
export declare const SolidPurple: React.FC<{
|
|
15
|
+
children?: React.ReactNode;
|
|
16
|
+
onClick?: () => void;
|
|
17
|
+
}>;
|
|
18
|
+
export declare const SolidPill: React.FC<{
|
|
19
|
+
children?: React.ReactNode;
|
|
20
|
+
onClick?: () => void;
|
|
21
|
+
}>;
|
|
22
|
+
export declare const GradientPurplePink: React.FC<{
|
|
23
|
+
children?: React.ReactNode;
|
|
24
|
+
onClick?: () => void;
|
|
25
|
+
}>;
|
|
26
|
+
export declare const GradientBlueGreen: React.FC<{
|
|
27
|
+
children?: React.ReactNode;
|
|
28
|
+
onClick?: () => void;
|
|
29
|
+
}>;
|
|
30
|
+
export declare const GradientOrangeRed: React.FC<{
|
|
31
|
+
children?: React.ReactNode;
|
|
32
|
+
onClick?: () => void;
|
|
33
|
+
}>;
|
|
34
|
+
export declare const GradientCyan: React.FC<{
|
|
35
|
+
children?: React.ReactNode;
|
|
36
|
+
onClick?: () => void;
|
|
37
|
+
}>;
|
|
38
|
+
export declare const GradientSunset: React.FC<{
|
|
39
|
+
children?: React.ReactNode;
|
|
40
|
+
onClick?: () => void;
|
|
41
|
+
}>;
|
|
42
|
+
export declare const GlassBlue: React.FC<{
|
|
43
|
+
children?: React.ReactNode;
|
|
44
|
+
onClick?: () => void;
|
|
45
|
+
}>;
|
|
46
|
+
export declare const GlassPurple: React.FC<{
|
|
47
|
+
children?: React.ReactNode;
|
|
48
|
+
onClick?: () => void;
|
|
49
|
+
}>;
|
|
50
|
+
export declare const GlassWhite: React.FC<{
|
|
51
|
+
children?: React.ReactNode;
|
|
52
|
+
onClick?: () => void;
|
|
53
|
+
}>;
|
|
54
|
+
export declare const GlassPink: React.FC<{
|
|
55
|
+
children?: React.ReactNode;
|
|
56
|
+
onClick?: () => void;
|
|
57
|
+
}>;
|
|
58
|
+
export declare const AnimatedShimmer: React.FC<{
|
|
59
|
+
children?: React.ReactNode;
|
|
60
|
+
onClick?: () => void;
|
|
61
|
+
}>;
|
|
62
|
+
export declare const AnimatedPulse: React.FC<{
|
|
63
|
+
children?: React.ReactNode;
|
|
64
|
+
onClick?: () => void;
|
|
65
|
+
}>;
|
|
66
|
+
export declare const AnimatedBounce: React.FC<{
|
|
67
|
+
children?: React.ReactNode;
|
|
68
|
+
onClick?: () => void;
|
|
69
|
+
}>;
|
|
70
|
+
export declare const AnimatedGlow: React.FC<{
|
|
71
|
+
children?: React.ReactNode;
|
|
72
|
+
onClick?: () => void;
|
|
73
|
+
}>;
|
|
74
|
+
export declare const OutlinedBlue: React.FC<{
|
|
75
|
+
children?: React.ReactNode;
|
|
76
|
+
onClick?: () => void;
|
|
77
|
+
}>;
|
|
78
|
+
export declare const OutlinedPurple: React.FC<{
|
|
79
|
+
children?: React.ReactNode;
|
|
80
|
+
onClick?: () => void;
|
|
81
|
+
}>;
|
|
82
|
+
export declare const OutlinedGradient: React.FC<{
|
|
83
|
+
children?: React.ReactNode;
|
|
84
|
+
onClick?: () => void;
|
|
85
|
+
}>;
|
|
86
|
+
export declare const GhostBlue: React.FC<{
|
|
87
|
+
children?: React.ReactNode;
|
|
88
|
+
onClick?: () => void;
|
|
89
|
+
}>;
|
|
90
|
+
export declare const GhostRed: React.FC<{
|
|
91
|
+
children?: React.ReactNode;
|
|
92
|
+
onClick?: () => void;
|
|
93
|
+
}>;
|
|
94
|
+
export declare const GhostPurple: React.FC<{
|
|
95
|
+
children?: React.ReactNode;
|
|
96
|
+
onClick?: () => void;
|
|
97
|
+
}>;
|
|
98
|
+
export declare const Button3DBlue: React.FC<{
|
|
99
|
+
children?: React.ReactNode;
|
|
100
|
+
onClick?: () => void;
|
|
101
|
+
}>;
|
|
102
|
+
export declare const Button3DPink: React.FC<{
|
|
103
|
+
children?: React.ReactNode;
|
|
104
|
+
onClick?: () => void;
|
|
105
|
+
}>;
|
|
106
|
+
export declare const Button3DGreen: React.FC<{
|
|
107
|
+
children?: React.ReactNode;
|
|
108
|
+
onClick?: () => void;
|
|
109
|
+
}>;
|
|
110
|
+
export declare const NeonBlue: React.FC<{
|
|
111
|
+
children?: React.ReactNode;
|
|
112
|
+
onClick?: () => void;
|
|
113
|
+
}>;
|
|
114
|
+
export declare const NeonPink: React.FC<{
|
|
115
|
+
children?: React.ReactNode;
|
|
116
|
+
onClick?: () => void;
|
|
117
|
+
}>;
|
|
118
|
+
export declare const NeonGreen: React.FC<{
|
|
119
|
+
children?: React.ReactNode;
|
|
120
|
+
onClick?: () => void;
|
|
121
|
+
}>;
|
package/dist/index.d.ts
CHANGED
|
@@ -4,3 +4,7 @@ export { GlassButton } from './components/GlassButton';
|
|
|
4
4
|
export type { GlassButtonProps } from './components/GlassButton';
|
|
5
5
|
export { Home } from './templates/Home';
|
|
6
6
|
export type { HomeProps } from './templates/Home';
|
|
7
|
+
export { gradients } from '../src/styles/data/gradients';
|
|
8
|
+
export type { Gradient } from '../src/styles/data/gradients';
|
|
9
|
+
export { SolidBlue, SolidRed, SolidGreen, SolidPurple, SolidPill, GradientPurplePink, GradientBlueGreen, GradientOrangeRed, GradientCyan, GradientSunset, GlassBlue, GlassPurple, GlassWhite, GlassPink, AnimatedShimmer, AnimatedPulse, AnimatedBounce, AnimatedGlow, OutlinedBlue, OutlinedPurple, OutlinedGradient, GhostBlue, GhostRed, GhostPurple, Button3DBlue, Button3DPink, Button3DGreen, NeonBlue, NeonPink, NeonGreen, } from './components/TelecopButton';
|
|
10
|
+
export type { TelecopButtonProps, ButtonCategory, ButtonVariantType } from './components/TelecopButton';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),k=require("react"),N=({children:e,variant:a="primary",size:g="md",onClick:d,disabled:t=!1,className:l=""})=>{const o="font-semibold rounded-lg transition-all duration-200 cursor-pointer",n={primary:"bg-blue-600 hover:bg-blue-700 text-white shadow-md hover:shadow-lg",secondary:"bg-gray-600 hover:bg-gray-700 text-white shadow-md hover:shadow-lg",danger:"bg-red-600 hover:bg-red-700 text-white shadow-md hover:shadow-lg"},s={sm:"px-3 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-6 py-3 text-lg"},p=t?"opacity-50 cursor-not-allowed":"";return r.jsx("button",{className:`${o} ${n[a]} ${s[g]} ${p} ${l}`,onClick:d,disabled:t,children:e})},b=({children:e,variant:a="blur",size:g="md",onClick:d,disabled:t=!1,className:l=""})=>{const[o,n]=k.useState([]),s=i=>{if(!t&&d){const m=i.currentTarget.getBoundingClientRect(),x=i.clientX-m.left,f=i.clientY-m.top,v=Date.now();n([...o,{x,y:f,id:v}]),setTimeout(()=>{n(w=>w.filter(y=>y.id!==v))},800),d()}},p=`
|
|
2
2
|
relative overflow-hidden
|
|
3
3
|
backdrop-blur-xl
|
|
4
4
|
border border-white/30
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
cursor-pointer
|
|
9
9
|
shadow-xl
|
|
10
10
|
group
|
|
11
|
-
`,
|
|
11
|
+
`,c={sm:"px-5 py-2.5 text-sm",md:"px-7 py-3.5 text-base",lg:"px-9 py-4.5 text-lg"},u={blur:`
|
|
12
12
|
bg-white/5
|
|
13
13
|
hover:bg-white/15
|
|
14
14
|
hover:border-white/50
|
|
@@ -31,4 +31,178 @@
|
|
|
31
31
|
before:translate-x-[-200%]
|
|
32
32
|
hover:before:translate-x-[200%]
|
|
33
33
|
before:transition-transform before:duration-1000
|
|
34
|
-
`},
|
|
34
|
+
`},h=t?"opacity-40 cursor-not-allowed hover:scale-100 hover:shadow-xl":"";return r.jsxs("button",{className:`${p} ${c[g]} ${u[a]} ${h} ${l}`,onClick:s,disabled:t,children:[a==="waves"&&!t&&r.jsxs(r.Fragment,{children:[r.jsx("span",{className:"absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-700"}),r.jsx("span",{className:"absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent animate-pulse"})]}),a==="blur"&&!t&&r.jsx("span",{className:"absolute inset-0 bg-white/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"}),r.jsx("span",{className:"absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none",children:r.jsx("span",{className:"absolute inset-[-2px] rounded-2xl bg-gradient-to-r from-transparent via-white/40 to-transparent blur-sm animate-shimmer"})}),o.map(i=>r.jsx("span",{className:"absolute rounded-full bg-white/30 pointer-events-none animate-ripple",style:{left:i.x,top:i.y,width:"20px",height:"20px",transform:"translate(-50%, -50%)"}},i.id)),r.jsx("span",{className:"relative z-10 drop-shadow-lg",children:e})]})},j=({name:e,title:a,description:g="Welcome to my portfolio",primaryButtonText:d="Get Started",primaryButtonLink:t,primaryButtonOnClick:l,secondaryButtonText:o="Learn More",secondaryButtonLink:n,secondaryButtonOnClick:s,backgroundGradient:p="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",animationType:c,className:u=""})=>{const h=()=>{t?window.location.href=t:l&&l()},i=()=>{n?window.location.href=n:s&&s()},m=t?r.jsx("a",{href:t,style:{textDecoration:"none"},children:r.jsx(b,{variant:"waves",size:"lg",children:d})}):r.jsx(b,{variant:"waves",size:"lg",onClick:l||h,children:d}),x=n?r.jsx("a",{href:n,style:{textDecoration:"none"},children:r.jsx(b,{variant:"blur",size:"lg",children:o})}):r.jsx(b,{variant:"blur",size:"lg",onClick:s||i,children:o});return r.jsx("div",{className:c?`animate-gradient-${c}`:"",style:{background:p,minHeight:"100vh"},children:r.jsx("div",{className:`min-h-screen flex items-center justify-center p-8 ${u}`,children:r.jsxs("div",{className:"max-w-4xl w-full text-center space-y-8",children:[r.jsx("h1",{className:"text-6xl md:text-8xl font-bold text-white mb-4",style:{textShadow:"0 0 40px rgba(0,0,0,0.3)",animation:"fadeInUp 0.8s ease-out"},children:e}),r.jsx("h2",{className:"text-3xl md:text-5xl font-semibold text-white/90",style:{textShadow:"0 0 30px rgba(0,0,0,0.2)",animation:"fadeInUp 1s ease-out 0.2s backwards"},children:a}),r.jsx("p",{className:"text-xl md:text-2xl text-white/80 max-w-2xl mx-auto",style:{textShadow:"0 0 20px rgba(0,0,0,0.2)",animation:"fadeInUp 1.2s ease-out 0.4s backwards"},children:g}),r.jsxs("div",{className:"flex flex-wrap gap-6 justify-center mt-12",style:{animation:"fadeInUp 1.4s ease-out 0.6s backwards"},children:[m,x]}),r.jsx("div",{className:"mt-16 mx-auto w-32 h-1 rounded-full",style:{background:"linear-gradient(90deg, transparent, white, transparent)",animation:"fadeIn 2s ease-out 1s backwards"}})]})})})},G=[{id:"glass-morphism",name:"Glass Morphism",gradient:`
|
|
35
|
+
radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
|
|
36
|
+
radial-gradient(circle at 80% 80%, rgba(255, 128, 171, 0.3), transparent 50%),
|
|
37
|
+
radial-gradient(circle at 40% 90%, rgba(88, 166, 255, 0.3), transparent 50%),
|
|
38
|
+
linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%)
|
|
39
|
+
`,category:"premium"},{id:"aurora-dream",name:"Aurora Dream",gradient:`
|
|
40
|
+
radial-gradient(ellipse at top left, rgba(139, 92, 246, 0.5), transparent 50%),
|
|
41
|
+
radial-gradient(ellipse at top right, rgba(236, 72, 153, 0.5), transparent 50%),
|
|
42
|
+
radial-gradient(ellipse at bottom, rgba(59, 130, 246, 0.5), transparent 50%),
|
|
43
|
+
linear-gradient(180deg, #0f0f1e 0%, #1a1a2e 100%)
|
|
44
|
+
`,category:"premium",animation:"flow"},{id:"neon-cyber",name:"Neon Cyber",gradient:`
|
|
45
|
+
linear-gradient(45deg, #ff0080 0%, #7928ca 25%, #0070f3 50%, #00dfd8 75%, #ff0080 100%),
|
|
46
|
+
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.8), #000000)
|
|
47
|
+
`,category:"premium",animation:"shift"},{id:"liquid-sunset",name:"Liquid Sunset",gradient:`
|
|
48
|
+
radial-gradient(circle at 30% 20%, rgba(255, 107, 107, 0.6), transparent 40%),
|
|
49
|
+
radial-gradient(circle at 70% 60%, rgba(255, 193, 69, 0.6), transparent 40%),
|
|
50
|
+
radial-gradient(circle at 50% 80%, rgba(254, 121, 104, 0.6), transparent 40%),
|
|
51
|
+
linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)
|
|
52
|
+
`,category:"premium",animation:"wave"},{id:"cosmic-particles",name:"Cosmic Particles",gradient:`
|
|
53
|
+
radial-gradient(circle at 15% 15%, rgba(138, 43, 226, 0.4), transparent 25%),
|
|
54
|
+
radial-gradient(circle at 85% 20%, rgba(65, 105, 225, 0.4), transparent 25%),
|
|
55
|
+
radial-gradient(circle at 50% 50%, rgba(255, 20, 147, 0.3), transparent 30%),
|
|
56
|
+
radial-gradient(circle at 20% 80%, rgba(0, 191, 255, 0.4), transparent 25%),
|
|
57
|
+
radial-gradient(circle at 80% 85%, rgba(138, 43, 226, 0.3), transparent 25%),
|
|
58
|
+
linear-gradient(180deg, #000000 0%, #0a0a1a 50%, #000000 100%)
|
|
59
|
+
`,category:"premium",animation:"pulse"},{id:"diamond-shine",name:"Diamond Shine",gradient:`
|
|
60
|
+
conic-gradient(from 45deg at 50% 50%,
|
|
61
|
+
rgba(255, 255, 255, 0.1) 0deg,
|
|
62
|
+
rgba(99, 102, 241, 0.3) 90deg,
|
|
63
|
+
rgba(168, 85, 247, 0.3) 180deg,
|
|
64
|
+
rgba(236, 72, 153, 0.3) 270deg,
|
|
65
|
+
rgba(255, 255, 255, 0.1) 360deg
|
|
66
|
+
),
|
|
67
|
+
radial-gradient(ellipse at center, rgba(139, 92, 246, 0.2), transparent 70%),
|
|
68
|
+
linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%)
|
|
69
|
+
`,category:"premium",animation:"rotate"},{id:"ocean-depths",name:"Ocean Depths",gradient:`
|
|
70
|
+
radial-gradient(ellipse at top, rgba(6, 182, 212, 0.5), transparent 50%),
|
|
71
|
+
radial-gradient(ellipse at bottom left, rgba(59, 130, 246, 0.4), transparent 50%),
|
|
72
|
+
radial-gradient(ellipse at bottom right, rgba(16, 185, 129, 0.4), transparent 50%),
|
|
73
|
+
radial-gradient(circle at 60% 40%, rgba(96, 165, 250, 0.3), transparent 30%),
|
|
74
|
+
linear-gradient(180deg, #001a33 0%, #002147 50%, #000d1a 100%)
|
|
75
|
+
`,category:"premium",animation:"wave"},{id:"magic-portal",name:"Magic Portal",gradient:`
|
|
76
|
+
radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.6) 0%, transparent 30%),
|
|
77
|
+
radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.5) 10%, transparent 40%),
|
|
78
|
+
radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.4) 20%, transparent 50%),
|
|
79
|
+
conic-gradient(from 180deg at 50% 50%,
|
|
80
|
+
rgba(168, 85, 247, 0.2) 0deg,
|
|
81
|
+
rgba(236, 72, 153, 0.2) 120deg,
|
|
82
|
+
rgba(59, 130, 246, 0.2) 240deg,
|
|
83
|
+
rgba(168, 85, 247, 0.2) 360deg
|
|
84
|
+
),
|
|
85
|
+
linear-gradient(135deg, #0a0a14 0%, #14141f 100%)
|
|
86
|
+
`,category:"premium",animation:"rotate"},{id:"mesh-gradient-pro",name:"Mesh Gradient Pro",gradient:`
|
|
87
|
+
radial-gradient(at 0% 0%, rgba(253, 230, 138, 0.5) 0px, transparent 50%),
|
|
88
|
+
radial-gradient(at 20% 30%, rgba(192, 132, 252, 0.5) 0px, transparent 50%),
|
|
89
|
+
radial-gradient(at 40% 70%, rgba(96, 165, 250, 0.5) 0px, transparent 50%),
|
|
90
|
+
radial-gradient(at 60% 30%, rgba(244, 114, 182, 0.5) 0px, transparent 50%),
|
|
91
|
+
radial-gradient(at 80% 80%, rgba(167, 139, 250, 0.5) 0px, transparent 50%),
|
|
92
|
+
radial-gradient(at 100% 10%, rgba(251, 191, 36, 0.5) 0px, transparent 50%),
|
|
93
|
+
radial-gradient(at 50% 50%, rgba(139, 92, 246, 0.3) 0px, transparent 60%),
|
|
94
|
+
linear-gradient(135deg, #0f0a1e 0%, #1a0a2e 100%)
|
|
95
|
+
`,category:"premium",animation:"flow"},{id:"grid-matrix",name:"Grid Matrix",gradient:`
|
|
96
|
+
repeating-linear-gradient(0deg, rgba(0, 255, 136, 0.05) 0px, rgba(0, 255, 136, 0.05) 1px, transparent 1px, transparent 40px),
|
|
97
|
+
repeating-linear-gradient(90deg, rgba(0, 255, 136, 0.05) 0px, rgba(0, 255, 136, 0.05) 1px, transparent 1px, transparent 40px),
|
|
98
|
+
radial-gradient(circle at 20% 30%, rgba(0, 255, 136, 0.3), transparent 40%),
|
|
99
|
+
radial-gradient(circle at 80% 70%, rgba(0, 200, 255, 0.3), transparent 40%),
|
|
100
|
+
radial-gradient(circle at 50% 50%, rgba(0, 255, 200, 0.2), transparent 50%),
|
|
101
|
+
linear-gradient(135deg, #000000 0%, #001a0d 50%, #000000 100%)
|
|
102
|
+
`,category:"premium",animation:"shift"},{id:"holographic",name:"Holographic",gradient:`
|
|
103
|
+
linear-gradient(125deg, rgba(255, 0, 128, 0.4) 0%, transparent 40%),
|
|
104
|
+
linear-gradient(225deg, rgba(0, 255, 255, 0.4) 0%, transparent 40%),
|
|
105
|
+
linear-gradient(315deg, rgba(255, 255, 0, 0.4) 0%, transparent 40%),
|
|
106
|
+
linear-gradient(45deg, rgba(128, 0, 255, 0.4) 0%, transparent 40%),
|
|
107
|
+
radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1), transparent 60%),
|
|
108
|
+
conic-gradient(from 0deg at 50% 50%,
|
|
109
|
+
rgba(255, 0, 128, 0.2),
|
|
110
|
+
rgba(255, 255, 0, 0.2),
|
|
111
|
+
rgba(0, 255, 255, 0.2),
|
|
112
|
+
rgba(128, 0, 255, 0.2),
|
|
113
|
+
rgba(255, 0, 128, 0.2)
|
|
114
|
+
),
|
|
115
|
+
linear-gradient(135deg, #0a0a0f 0%, #1a1a2f 100%)
|
|
116
|
+
`,category:"premium",animation:"rotate"},{id:"energy-field",name:"Energy Field",gradient:`
|
|
117
|
+
radial-gradient(circle at 30% 40%, rgba(59, 130, 246, 0.6) 0%, transparent 25%),
|
|
118
|
+
radial-gradient(circle at 70% 60%, rgba(168, 85, 247, 0.6) 0%, transparent 25%),
|
|
119
|
+
radial-gradient(circle at 50% 80%, rgba(236, 72, 153, 0.5) 0%, transparent 30%),
|
|
120
|
+
radial-gradient(circle at 20% 20%, rgba(14, 165, 233, 0.5) 0%, transparent 20%),
|
|
121
|
+
radial-gradient(circle at 80% 30%, rgba(192, 132, 252, 0.5) 0%, transparent 20%),
|
|
122
|
+
radial-gradient(circle at 40% 60%, rgba(59, 130, 246, 0.4) 0%, transparent 15%),
|
|
123
|
+
radial-gradient(circle at 60% 40%, rgba(236, 72, 153, 0.4) 0%, transparent 15%),
|
|
124
|
+
repeating-radial-gradient(circle at 50% 50%, transparent 0px, transparent 10px, rgba(59, 130, 246, 0.03) 10px, rgba(59, 130, 246, 0.03) 20px),
|
|
125
|
+
linear-gradient(135deg, #000000 0%, #0a0520 50%, #000000 100%)
|
|
126
|
+
`,category:"premium",animation:"pulse"},{id:"nebula-cloud",name:"Nebula Cloud",gradient:`
|
|
127
|
+
radial-gradient(ellipse at 25% 25%, rgba(139, 92, 246, 0.6) 0%, transparent 35%),
|
|
128
|
+
radial-gradient(ellipse at 75% 25%, rgba(236, 72, 153, 0.5) 0%, transparent 40%),
|
|
129
|
+
radial-gradient(ellipse at 50% 60%, rgba(59, 130, 246, 0.5) 0%, transparent 45%),
|
|
130
|
+
radial-gradient(ellipse at 20% 70%, rgba(168, 85, 247, 0.4) 0%, transparent 35%),
|
|
131
|
+
radial-gradient(ellipse at 80% 75%, rgba(244, 114, 182, 0.4) 0%, transparent 40%),
|
|
132
|
+
radial-gradient(circle at 40% 40%, rgba(147, 51, 234, 0.3) 0%, transparent 25%),
|
|
133
|
+
radial-gradient(circle at 60% 70%, rgba(219, 39, 119, 0.3) 0%, transparent 30%),
|
|
134
|
+
radial-gradient(at 50% 50%, rgba(88, 28, 135, 0.2) 0%, transparent 70%),
|
|
135
|
+
linear-gradient(180deg, #000000 0%, #0d001a 30%, #1a0033 60%, #000000 100%)
|
|
136
|
+
`,category:"premium",animation:"wave"},{id:"cyber-grid-blue",name:"Cyber Grid Blue",gradient:`
|
|
137
|
+
repeating-linear-gradient(0deg, rgba(59, 130, 246, 0.08) 0px, rgba(59, 130, 246, 0.08) 2px, transparent 2px, transparent 60px),
|
|
138
|
+
repeating-linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0px, rgba(59, 130, 246, 0.08) 2px, transparent 2px, transparent 60px),
|
|
139
|
+
radial-gradient(circle at 30% 40%, rgba(59, 130, 246, 0.4), transparent 35%),
|
|
140
|
+
radial-gradient(circle at 70% 60%, rgba(147, 197, 253, 0.3), transparent 40%),
|
|
141
|
+
linear-gradient(135deg, #000000 0%, #001333 50%, #000000 100%)
|
|
142
|
+
`,category:"premium",animation:"flow"},{id:"neon-dots-pink",name:"Neon Dots Pink",gradient:`
|
|
143
|
+
repeating-radial-gradient(circle at 0 0, transparent 0, #1a1a2e 40px),
|
|
144
|
+
repeating-linear-gradient(rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.15) 1px, transparent 1px, transparent 20px),
|
|
145
|
+
repeating-linear-gradient(90deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.15) 1px, transparent 1px, transparent 20px),
|
|
146
|
+
radial-gradient(circle at 20% 30%, rgba(236, 72, 153, 0.5), transparent 30%),
|
|
147
|
+
radial-gradient(circle at 80% 70%, rgba(219, 39, 119, 0.4), transparent 35%),
|
|
148
|
+
linear-gradient(135deg, #0f0a14 0%, #1a0a1e 100%)
|
|
149
|
+
`,category:"premium",animation:"shift"},{id:"diagonal-waves-purple",name:"Diagonal Waves",gradient:`
|
|
150
|
+
repeating-linear-gradient(45deg, rgba(168, 85, 247, 0.05) 0px, rgba(168, 85, 247, 0.05) 2px, transparent 2px, transparent 40px),
|
|
151
|
+
repeating-linear-gradient(-45deg, rgba(192, 132, 252, 0.05) 0px, rgba(192, 132, 252, 0.05) 2px, transparent 2px, transparent 40px),
|
|
152
|
+
radial-gradient(circle at 40% 40%, rgba(168, 85, 247, 0.4), transparent 40%),
|
|
153
|
+
radial-gradient(circle at 60% 60%, rgba(147, 51, 234, 0.3), transparent 45%),
|
|
154
|
+
linear-gradient(135deg, #0a0014 0%, #14001f 100%)
|
|
155
|
+
`,category:"premium",animation:"wave"},{id:"hexagon-pattern",name:"Hexagon Pattern",gradient:`
|
|
156
|
+
repeating-linear-gradient(60deg, rgba(34, 211, 238, 0.08) 0px, rgba(34, 211, 238, 0.08) 1px, transparent 1px, transparent 50px),
|
|
157
|
+
repeating-linear-gradient(120deg, rgba(34, 211, 238, 0.08) 0px, rgba(34, 211, 238, 0.08) 1px, transparent 1px, transparent 50px),
|
|
158
|
+
repeating-linear-gradient(180deg, rgba(34, 211, 238, 0.08) 0px, rgba(34, 211, 238, 0.08) 1px, transparent 1px, transparent 50px),
|
|
159
|
+
radial-gradient(circle at 50% 30%, rgba(34, 211, 238, 0.4), transparent 40%),
|
|
160
|
+
radial-gradient(circle at 30% 70%, rgba(14, 165, 233, 0.3), transparent 35%),
|
|
161
|
+
linear-gradient(135deg, #000a0f 0%, #001419 100%)
|
|
162
|
+
`,category:"premium",animation:"rotate"},{id:"scanlines-red",name:"Scanlines Red",gradient:`
|
|
163
|
+
repeating-linear-gradient(0deg, rgba(239, 68, 68, 0.03) 0px, rgba(239, 68, 68, 0.03) 1px, transparent 1px, transparent 4px),
|
|
164
|
+
repeating-linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0px, rgba(239, 68, 68, 0.05) 1px, transparent 1px, transparent 80px),
|
|
165
|
+
radial-gradient(circle at 25% 35%, rgba(239, 68, 68, 0.5), transparent 30%),
|
|
166
|
+
radial-gradient(circle at 75% 65%, rgba(220, 38, 38, 0.4), transparent 35%),
|
|
167
|
+
radial-gradient(circle at 50% 50%, rgba(185, 28, 28, 0.3), transparent 50%),
|
|
168
|
+
linear-gradient(135deg, #0f0000 0%, #1a0000 100%)
|
|
169
|
+
`,category:"premium",animation:"pulse"},{id:"liquid-rainbow",name:"Liquid Rainbow",gradient:`
|
|
170
|
+
radial-gradient(ellipse at 15% 20%, rgba(255, 0, 128, 0.6), transparent 40%),
|
|
171
|
+
radial-gradient(ellipse at 85% 30%, rgba(128, 0, 255, 0.6), transparent 40%),
|
|
172
|
+
radial-gradient(ellipse at 50% 70%, rgba(0, 128, 255, 0.6), transparent 45%),
|
|
173
|
+
radial-gradient(ellipse at 20% 80%, rgba(255, 128, 0, 0.5), transparent 35%),
|
|
174
|
+
radial-gradient(ellipse at 80% 85%, rgba(255, 0, 255, 0.5), transparent 40%),
|
|
175
|
+
linear-gradient(135deg, #0a0a14 0%, #14141f 100%)
|
|
176
|
+
`,category:"premium",animation:"flow"},{id:"sunset-vibes",name:"Sunset Vibes",gradient:`
|
|
177
|
+
radial-gradient(circle at 20% 30%, rgba(255, 94, 77, 0.7), transparent 40%),
|
|
178
|
+
radial-gradient(circle at 80% 40%, rgba(255, 159, 64, 0.6), transparent 45%),
|
|
179
|
+
radial-gradient(circle at 50% 80%, rgba(255, 107, 107, 0.6), transparent 50%),
|
|
180
|
+
radial-gradient(circle at 30% 60%, rgba(254, 121, 104, 0.5), transparent 35%),
|
|
181
|
+
linear-gradient(180deg, #1a0a0a 0%, #2d1414 50%, #1a0a0a 100%)
|
|
182
|
+
`,category:"premium",animation:"wave"},{id:"ocean-breeze",name:"Ocean Breeze",gradient:`
|
|
183
|
+
radial-gradient(ellipse at 30% 20%, rgba(34, 211, 238, 0.7), transparent 45%),
|
|
184
|
+
radial-gradient(ellipse at 70% 50%, rgba(59, 130, 246, 0.6), transparent 50%),
|
|
185
|
+
radial-gradient(ellipse at 40% 80%, rgba(14, 165, 233, 0.6), transparent 45%),
|
|
186
|
+
radial-gradient(ellipse at 80% 30%, rgba(96, 165, 250, 0.5), transparent 40%),
|
|
187
|
+
linear-gradient(180deg, #000a14 0%, #001a2e 50%, #000a14 100%)
|
|
188
|
+
`,category:"premium",animation:"shift"},{id:"purple-haze",name:"Purple Haze",gradient:`
|
|
189
|
+
radial-gradient(circle at 25% 25%, rgba(168, 85, 247, 0.8), transparent 35%),
|
|
190
|
+
radial-gradient(circle at 75% 35%, rgba(192, 132, 252, 0.7), transparent 40%),
|
|
191
|
+
radial-gradient(circle at 50% 70%, rgba(147, 51, 234, 0.7), transparent 45%),
|
|
192
|
+
radial-gradient(circle at 30% 80%, rgba(126, 34, 206, 0.6), transparent 40%),
|
|
193
|
+
radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.5), transparent 35%),
|
|
194
|
+
linear-gradient(135deg, #0a0014 0%, #1a0a2e 50%, #0a0014 100%)
|
|
195
|
+
`,category:"premium",animation:"pulse"},{id:"emerald-dream",name:"Emerald Dream",gradient:`
|
|
196
|
+
radial-gradient(ellipse at 20% 30%, rgba(16, 185, 129, 0.7), transparent 40%),
|
|
197
|
+
radial-gradient(ellipse at 80% 40%, rgba(52, 211, 153, 0.6), transparent 45%),
|
|
198
|
+
radial-gradient(ellipse at 50% 75%, rgba(5, 150, 105, 0.6), transparent 50%),
|
|
199
|
+
radial-gradient(ellipse at 35% 65%, rgba(34, 197, 94, 0.5), transparent 40%),
|
|
200
|
+
linear-gradient(180deg, #000a08 0%, #001a14 50%, #000a08 100%)
|
|
201
|
+
`,category:"premium",animation:"wave"},{id:"fire-storm",name:"Fire Storm",gradient:`
|
|
202
|
+
radial-gradient(circle at 30% 30%, rgba(239, 68, 68, 0.8), transparent 35%),
|
|
203
|
+
radial-gradient(circle at 70% 40%, rgba(220, 38, 38, 0.7), transparent 40%),
|
|
204
|
+
radial-gradient(circle at 50% 70%, rgba(248, 113, 113, 0.7), transparent 45%),
|
|
205
|
+
radial-gradient(circle at 25% 75%, rgba(185, 28, 28, 0.6), transparent 35%),
|
|
206
|
+
radial-gradient(circle at 75% 80%, rgba(239, 68, 68, 0.5), transparent 40%),
|
|
207
|
+
linear-gradient(135deg, #0f0000 0%, #1a0505 50%, #0f0000 100%)
|
|
208
|
+
`,category:"premium",animation:"flow"},{id:"purple-dark",name:"Purple Dark",gradient:"linear-gradient(147deg, #000000 0%, #8d45d5 187%)",category:"dark"},{id:"red-fire",name:"Red Fire",gradient:"linear-gradient(308deg, #a70b0b 0%, #000000 75%)",category:"dark"},{id:"green-emerald",name:"Green Emerald",gradient:"linear-gradient(308deg, #0ba769 0%, #000000 75%)",category:"dark"},{id:"blue-ocean",name:"Blue Ocean",gradient:"linear-gradient(308deg, #0b32a7 0%, #000000 67%)",category:"dark"},{id:"purple-magic",name:"Purple Magic",gradient:"linear-gradient(308deg, #960ba7 0%, #000000 67%)",category:"dark"},{id:"green-forest",name:"Green Forest",gradient:"linear-gradient(308deg, #3da70b 0%, #000000 67%)",category:"dark"},{id:"pink-rose",name:"Pink Rose",gradient:"linear-gradient(308deg, #a70b7e 0%, #000000 67%)",category:"dark"},{id:"red-crimson",name:"Red Crimson",gradient:"linear-gradient(308deg, #a70b0b 0%, #000000 67%)",category:"dark"},{id:"yellow-gold",name:"Yellow Gold",gradient:"linear-gradient(308deg, #a5a70b 0%, #000000 67%)",category:"dark"},{id:"red-center",name:"Red Center",gradient:"linear-gradient(322deg, #000000 23%, #a70b0b 54%, #000000 73%)",category:"mixed"},{id:"blue-center",name:"Blue Center",gradient:"linear-gradient(322deg, #000000 23%, #120ba7 54%, #000000 73%)",category:"mixed"},{id:"gray-steel",name:"Gray Steel",gradient:"linear-gradient(322deg, #000000 23%, #34334d 54%, #000000 73%)",category:"mixed"},{id:"blue-bright",name:"Blue Bright",gradient:"linear-gradient(322deg, #000000 23%, #52a9ff 54%, #000000 73%)",category:"colorful"},{id:"red-fire-flow",name:"Red Fire Flow",gradient:"linear-gradient(308deg, #a70b0b 0%, #ff6b6b 50%, #000000 75%)",category:"animated",animation:"flow"},{id:"blue-wave",name:"Blue Wave",gradient:"linear-gradient(308deg, #0b32a7 0%, #52a9ff 50%, #000000 67%)",category:"animated",animation:"wave"},{id:"purple-shift",name:"Purple Shift",gradient:"linear-gradient(308deg, #960ba7 0%, #e100ff 50%, #000000 67%)",category:"animated",animation:"shift"},{id:"green-pulse",name:"Green Pulse",gradient:"linear-gradient(308deg, #3da70b 0%, #a8e063 50%, #000000 67%)",category:"animated",animation:"pulse"},{id:"pink-rotate",name:"Pink Rotate",gradient:"linear-gradient(308deg, #a70b7e 0%, #ff6ec7 50%, #000000 67%)",category:"animated",animation:"rotate"},{id:"gold-zoom",name:"Gold Zoom",gradient:"linear-gradient(308deg, #a5a70b 0%, #f6d365 50%, #000000 67%)",category:"animated",animation:"zoom"}],P=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:e}),C=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:e}),B=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:e}),S=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:e}),_=({children:e="Pill Button",onClick:a})=>r.jsx("button",{onClick:a,className:"px-8 py-3 rounded-full font-semibold text-white bg-indigo-600 hover:bg-indigo-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:e}),M=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/50",children:e}),D=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-green-600 hover:from-blue-700 hover:to-green-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/50",children:e}),R=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50",children:e}),z=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-br from-cyan-400 to-blue-600 hover:from-cyan-500 hover:to-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-cyan-500/50",children:e}),$=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-yellow-500 via-orange-500 to-red-600 hover:from-yellow-600 hover:via-orange-600 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50",children:e}),A=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-blue-500/20 backdrop-blur-xl border border-blue-400/30 hover:bg-blue-500/30 hover:border-blue-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/20",children:e}),O=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-purple-500/20 backdrop-blur-xl border border-purple-400/30 hover:bg-purple-500/30 hover:border-purple-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/20",children:e}),F=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-white/10 backdrop-blur-xl border border-white/30 hover:bg-white/20 hover:border-white/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-white/20",children:e}),q=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-pink-500/20 backdrop-blur-xl border border-pink-400/30 hover:bg-pink-500/30 hover:border-pink-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-pink-500/20",children:e}),H=({children:e="Shimmer Effect",onClick:a})=>r.jsxs("button",{onClick:a,className:"relative px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-blue-600 overflow-hidden group transition-all duration-300 hover:scale-105",children:[r.jsx("span",{className:"relative z-10",children:e}),r.jsx("span",{className:"absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"})]}),I=({children:e="Pulse Button",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 animate-pulse hover:animate-none hover:scale-105",children:e}),E=({children:e="Bounce Button",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:animate-bounce",children:e}),W=({children:e="Glow Effect",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:shadow-[0_0_30px_rgba(168,85,247,0.8)] hover:scale-105",children:e}),U=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-blue-500 border-2 border-blue-500 hover:bg-blue-500 hover:text-white transition-all duration-300 hover:scale-105",children:e}),Y=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-purple-500 border-2 border-purple-500 hover:bg-purple-500 hover:text-white transition-all duration-300 hover:scale-105",children:e}),V=({children:e="Gradient Border",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 border-2 border-transparent hover:text-white transition-all duration-300 hover:scale-105",style:{borderImage:"linear-gradient(to right, rgb(168, 85, 247), rgb(236, 72, 153)) 1"},children:e}),X=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-blue-500 hover:bg-blue-500/10 transition-all duration-300 hover:scale-105",children:e}),Z=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-red-500 hover:bg-red-500/10 transition-all duration-300 hover:scale-105",children:e}),J=({children:e="Click Me",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-purple-500 hover:bg-purple-500/10 transition-all duration-300 hover:scale-105",children:e}),K=({children:e="3D Button",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 shadow-[0_6px_0_rgb(37,99,235)] hover:shadow-[0_4px_0_rgb(37,99,235)] hover:translate-y-[2px] transition-all duration-150",children:e}),Q=({children:e="3D Button",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-pink-600 shadow-[0_6px_0_rgb(219,39,119)] hover:shadow-[0_4px_0_rgb(219,39,119)] hover:translate-y-[2px] transition-all duration-150",children:e}),T=({children:e="3D Button",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-white bg-green-600 shadow-[0_6px_0_rgb(22,163,74)] hover:shadow-[0_4px_0_rgb(22,163,74)] hover:translate-y-[2px] transition-all duration-150",children:e}),L=({children:e="Neon Blue",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-blue-400 border-2 border-blue-400 hover:bg-blue-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(59,130,246,0.8)] hover:scale-105",children:e}),aa=({children:e="Neon Pink",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-pink-400 border-2 border-pink-400 hover:bg-pink-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(236,72,153,0.8)] hover:scale-105",children:e}),ea=({children:e="Neon Green",onClick:a})=>r.jsx("button",{onClick:a,className:"px-6 py-3 rounded-lg font-semibold text-green-400 border-2 border-green-400 hover:bg-green-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(34,197,94,0.8)] hover:scale-105",children:e});exports.AnimatedBounce=E;exports.AnimatedGlow=W;exports.AnimatedPulse=I;exports.AnimatedShimmer=H;exports.Button=N;exports.Button3DBlue=K;exports.Button3DGreen=T;exports.Button3DPink=Q;exports.GhostBlue=X;exports.GhostPurple=J;exports.GhostRed=Z;exports.GlassBlue=A;exports.GlassButton=b;exports.GlassPink=q;exports.GlassPurple=O;exports.GlassWhite=F;exports.GradientBlueGreen=D;exports.GradientCyan=z;exports.GradientOrangeRed=R;exports.GradientPurplePink=M;exports.GradientSunset=$;exports.Home=j;exports.NeonBlue=L;exports.NeonGreen=ea;exports.NeonPink=aa;exports.OutlinedBlue=U;exports.OutlinedGradient=V;exports.OutlinedPurple=Y;exports.SolidBlue=P;exports.SolidGreen=B;exports.SolidPill=_;exports.SolidPurple=S;exports.SolidRed=C;exports.gradients=G;
|