telecop 0.1.9 → 0.1.10

package/dist/index.d.ts

@@ -4,3 +4,5 @@ export { GlassButton } from './components/GlassButton';
 export type { GlassButtonProps } from './components/GlassButton';
 export { Home } from './templates/Home';
 export type { HomeProps } from './templates/Home';
+export { gradients } from '../src/styles/data/gradients';
+export type { Gradient } from '../src/styles/data/gradients';

package/dist/index.js

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),N=({children:d,variant:r="primary",size:c="md",onClick:o,disabled:t=!1,className:n=""})=>{const i="font-semibold rounded-lg transition-all duration-200 cursor-pointer",s={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"},l={sm:"px-3 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-6 py-3 text-lg"},h=t?"opacity-50 cursor-not-allowed":"";return e.jsx("button",{className:`${i} ${s[r]} ${l[c]} ${h} ${n}`,onClick:o,disabled:t,children:d})},x=({children:d,variant:r="blur",size:c="md",onClick:o,disabled:t=!1,className:n=""})=>{const[i,s]=j.useState([]),l=a=>{if(!t&&o){const m=a.currentTarget.getBoundingClientRect(),w=a.clientX-m.left,f=a.clientY-m.top,g=Date.now();s([...i,{x:w,y:f,id:g}]),setTimeout(()=>{s(v=>v.filter(y=>y.id!==g))},800),o()}},h=`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("react"),k=({children:s,variant:n="primary",size:o="md",onClick:i,disabled:e=!1,className:d=""})=>{const g="font-semibold rounded-lg transition-all duration-200 cursor-pointer",r={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"},l={sm:"px-3 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-6 py-3 text-lg"},p=e?"opacity-50 cursor-not-allowed":"";return a.jsx("button",{className:`${g} ${r[n]} ${l[o]} ${p} ${d}`,onClick:i,disabled:e,children:s})},c=({children:s,variant:n="blur",size:o="md",onClick:i,disabled:e=!1,className:d=""})=>{const[g,r]=j.useState([]),l=t=>{if(!e&&i){const m=t.currentTarget.getBoundingClientRect(),h=t.clientX-m.left,w=t.clientY-m.top,f=Date.now();r([...g,{x:h,y:w,id:f}]),setTimeout(()=>{r(y=>y.filter(v=>v.id!==f))},800),i()}},p=`
     relative overflow-hidden
     backdrop-blur-xl
     border border-white/30
@@ -8,7 +8,7 @@
     cursor-pointer
     shadow-xl
     group
-  `,b={sm:"px-5 py-2.5 text-sm",md:"px-7 py-3.5 text-base",lg:"px-9 py-4.5 text-lg"},p={blur:`
+  `,b={sm:"px-5 py-2.5 text-sm",md:"px-7 py-3.5 text-base",lg:"px-9 py-4.5 text-lg"},x={blur:`
       bg-white/5
       hover:bg-white/15
       hover:border-white/50
@@ -31,4 +31,178 @@
       before:translate-x-[-200%] 
       hover:before:translate-x-[200%]
       before:transition-transform before:duration-1000
-    `},u=t?"opacity-40 cursor-not-allowed hover:scale-100 hover:shadow-xl":"";return e.jsxs("button",{className:`${h} ${b[c]} ${p[r]} ${u} ${n}`,onClick:l,disabled:t,children:[r==="waves"&&!t&&e.jsxs(e.Fragment,{children:[e.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"}),e.jsx("span",{className:"absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent animate-pulse"})]}),r==="blur"&&!t&&e.jsx("span",{className:"absolute inset-0 bg-white/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"}),e.jsx("span",{className:"absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none",children:e.jsx("span",{className:"absolute inset-[-2px] rounded-2xl bg-gradient-to-r from-transparent via-white/40 to-transparent blur-sm animate-shimmer"})}),i.map(a=>e.jsx("span",{className:"absolute rounded-full bg-white/30 pointer-events-none animate-ripple",style:{left:a.x,top:a.y,width:"20px",height:"20px",transform:"translate(-50%, -50%)"}},a.id)),e.jsx("span",{className:"relative z-10 drop-shadow-lg",children:d})]})},$=({name:d,title:r,description:c="Welcome to my portfolio",primaryButtonText:o="Get Started",primaryButtonLink:t,primaryButtonOnClick:n,secondaryButtonText:i="Learn More",secondaryButtonLink:s,secondaryButtonOnClick:l,backgroundGradient:h="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",animationType:b,className:p=""})=>{const u=()=>{t?window.location.href=t:n&&n()},a=()=>{s?window.location.href=s:l&&l()},m=t?e.jsx("a",{href:t,style:{textDecoration:"none"},children:e.jsx(x,{variant:"waves",size:"lg",children:o})}):e.jsx(x,{variant:"waves",size:"lg",onClick:n||u,children:o}),w=s?e.jsx("a",{href:s,style:{textDecoration:"none"},children:e.jsx(x,{variant:"blur",size:"lg",children:i})}):e.jsx(x,{variant:"blur",size:"lg",onClick:l||a,children:i});return e.jsx("div",{className:b?`animate-gradient-${b}`:"",style:{background:h,minHeight:"100vh"},children:e.jsx("div",{className:`min-h-screen flex items-center justify-center p-8 ${p}`,children:e.jsxs("div",{className:"max-w-4xl w-full text-center space-y-8",children:[e.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:d}),e.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:r}),e.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:c}),e.jsxs("div",{className:"flex flex-wrap gap-6 justify-center mt-12",style:{animation:"fadeInUp 1.4s ease-out 0.6s backwards"},children:[m,w]}),e.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"}})]})})})};exports.Button=N;exports.GlassButton=x;exports.Home=$;
+    `},u=e?"opacity-40 cursor-not-allowed hover:scale-100 hover:shadow-xl":"";return a.jsxs("button",{className:`${p} ${b[o]} ${x[n]} ${u} ${d}`,onClick:l,disabled:e,children:[n==="waves"&&!e&&a.jsxs(a.Fragment,{children:[a.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"}),a.jsx("span",{className:"absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent animate-pulse"})]}),n==="blur"&&!e&&a.jsx("span",{className:"absolute inset-0 bg-white/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"}),a.jsx("span",{className:"absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none",children:a.jsx("span",{className:"absolute inset-[-2px] rounded-2xl bg-gradient-to-r from-transparent via-white/40 to-transparent blur-sm animate-shimmer"})}),g.map(t=>a.jsx("span",{className:"absolute rounded-full bg-white/30 pointer-events-none animate-ripple",style:{left:t.x,top:t.y,width:"20px",height:"20px",transform:"translate(-50%, -50%)"}},t.id)),a.jsx("span",{className:"relative z-10 drop-shadow-lg",children:s})]})},N=({name:s,title:n,description:o="Welcome to my portfolio",primaryButtonText:i="Get Started",primaryButtonLink:e,primaryButtonOnClick:d,secondaryButtonText:g="Learn More",secondaryButtonLink:r,secondaryButtonOnClick:l,backgroundGradient:p="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",animationType:b,className:x=""})=>{const u=()=>{e?window.location.href=e:d&&d()},t=()=>{r?window.location.href=r:l&&l()},m=e?a.jsx("a",{href:e,style:{textDecoration:"none"},children:a.jsx(c,{variant:"waves",size:"lg",children:i})}):a.jsx(c,{variant:"waves",size:"lg",onClick:d||u,children:i}),h=r?a.jsx("a",{href:r,style:{textDecoration:"none"},children:a.jsx(c,{variant:"blur",size:"lg",children:g})}):a.jsx(c,{variant:"blur",size:"lg",onClick:l||t,children:g});return a.jsx("div",{className:b?`animate-gradient-${b}`:"",style:{background:p,minHeight:"100vh"},children:a.jsx("div",{className:`min-h-screen flex items-center justify-center p-8 ${x}`,children:a.jsxs("div",{className:"max-w-4xl w-full text-center space-y-8",children:[a.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:s}),a.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:n}),a.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:o}),a.jsxs("div",{className:"flex flex-wrap gap-6 justify-center mt-12",style:{animation:"fadeInUp 1.4s ease-out 0.6s backwards"},children:[m,h]}),a.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"}})]})})})},C=[{id:"glass-morphism",name:"Glass Morphism",gradient:`
+      radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
+      radial-gradient(circle at 80% 80%, rgba(255, 128, 171, 0.3), transparent 50%),
+      radial-gradient(circle at 40% 90%, rgba(88, 166, 255, 0.3), transparent 50%),
+      linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%)
+    `,category:"premium"},{id:"aurora-dream",name:"Aurora Dream",gradient:`
+      radial-gradient(ellipse at top left, rgba(139, 92, 246, 0.5), transparent 50%),
+      radial-gradient(ellipse at top right, rgba(236, 72, 153, 0.5), transparent 50%),
+      radial-gradient(ellipse at bottom, rgba(59, 130, 246, 0.5), transparent 50%),
+      linear-gradient(180deg, #0f0f1e 0%, #1a1a2e 100%)
+    `,category:"premium",animation:"flow"},{id:"neon-cyber",name:"Neon Cyber",gradient:`
+      linear-gradient(45deg, #ff0080 0%, #7928ca 25%, #0070f3 50%, #00dfd8 75%, #ff0080 100%),
+      radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.8), #000000)
+    `,category:"premium",animation:"shift"},{id:"liquid-sunset",name:"Liquid Sunset",gradient:`
+      radial-gradient(circle at 30% 20%, rgba(255, 107, 107, 0.6), transparent 40%),
+      radial-gradient(circle at 70% 60%, rgba(255, 193, 69, 0.6), transparent 40%),
+      radial-gradient(circle at 50% 80%, rgba(254, 121, 104, 0.6), transparent 40%),
+      linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)
+    `,category:"premium",animation:"wave"},{id:"cosmic-particles",name:"Cosmic Particles",gradient:`
+      radial-gradient(circle at 15% 15%, rgba(138, 43, 226, 0.4), transparent 25%),
+      radial-gradient(circle at 85% 20%, rgba(65, 105, 225, 0.4), transparent 25%),
+      radial-gradient(circle at 50% 50%, rgba(255, 20, 147, 0.3), transparent 30%),
+      radial-gradient(circle at 20% 80%, rgba(0, 191, 255, 0.4), transparent 25%),
+      radial-gradient(circle at 80% 85%, rgba(138, 43, 226, 0.3), transparent 25%),
+      linear-gradient(180deg, #000000 0%, #0a0a1a 50%, #000000 100%)
+    `,category:"premium",animation:"pulse"},{id:"diamond-shine",name:"Diamond Shine",gradient:`
+      conic-gradient(from 45deg at 50% 50%, 
+        rgba(255, 255, 255, 0.1) 0deg,
+        rgba(99, 102, 241, 0.3) 90deg,
+        rgba(168, 85, 247, 0.3) 180deg,
+        rgba(236, 72, 153, 0.3) 270deg,
+        rgba(255, 255, 255, 0.1) 360deg
+      ),
+      radial-gradient(ellipse at center, rgba(139, 92, 246, 0.2), transparent 70%),
+      linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%)
+    `,category:"premium",animation:"rotate"},{id:"ocean-depths",name:"Ocean Depths",gradient:`
+      radial-gradient(ellipse at top, rgba(6, 182, 212, 0.5), transparent 50%),
+      radial-gradient(ellipse at bottom left, rgba(59, 130, 246, 0.4), transparent 50%),
+      radial-gradient(ellipse at bottom right, rgba(16, 185, 129, 0.4), transparent 50%),
+      radial-gradient(circle at 60% 40%, rgba(96, 165, 250, 0.3), transparent 30%),
+      linear-gradient(180deg, #001a33 0%, #002147 50%, #000d1a 100%)
+    `,category:"premium",animation:"wave"},{id:"magic-portal",name:"Magic Portal",gradient:`
+      radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.6) 0%, transparent 30%),
+      radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.5) 10%, transparent 40%),
+      radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.4) 20%, transparent 50%),
+      conic-gradient(from 180deg at 50% 50%,
+        rgba(168, 85, 247, 0.2) 0deg,
+        rgba(236, 72, 153, 0.2) 120deg,
+        rgba(59, 130, 246, 0.2) 240deg,
+        rgba(168, 85, 247, 0.2) 360deg
+      ),
+      linear-gradient(135deg, #0a0a14 0%, #14141f 100%)
+    `,category:"premium",animation:"rotate"},{id:"mesh-gradient-pro",name:"Mesh Gradient Pro",gradient:`
+      radial-gradient(at 0% 0%, rgba(253, 230, 138, 0.5) 0px, transparent 50%),
+      radial-gradient(at 20% 30%, rgba(192, 132, 252, 0.5) 0px, transparent 50%),
+      radial-gradient(at 40% 70%, rgba(96, 165, 250, 0.5) 0px, transparent 50%),
+      radial-gradient(at 60% 30%, rgba(244, 114, 182, 0.5) 0px, transparent 50%),
+      radial-gradient(at 80% 80%, rgba(167, 139, 250, 0.5) 0px, transparent 50%),
+      radial-gradient(at 100% 10%, rgba(251, 191, 36, 0.5) 0px, transparent 50%),
+      radial-gradient(at 50% 50%, rgba(139, 92, 246, 0.3) 0px, transparent 60%),
+      linear-gradient(135deg, #0f0a1e 0%, #1a0a2e 100%)
+    `,category:"premium",animation:"flow"},{id:"grid-matrix",name:"Grid Matrix",gradient:`
+      repeating-linear-gradient(0deg, rgba(0, 255, 136, 0.05) 0px, rgba(0, 255, 136, 0.05) 1px, transparent 1px, transparent 40px),
+      repeating-linear-gradient(90deg, rgba(0, 255, 136, 0.05) 0px, rgba(0, 255, 136, 0.05) 1px, transparent 1px, transparent 40px),
+      radial-gradient(circle at 20% 30%, rgba(0, 255, 136, 0.3), transparent 40%),
+      radial-gradient(circle at 80% 70%, rgba(0, 200, 255, 0.3), transparent 40%),
+      radial-gradient(circle at 50% 50%, rgba(0, 255, 200, 0.2), transparent 50%),
+      linear-gradient(135deg, #000000 0%, #001a0d 50%, #000000 100%)
+    `,category:"premium",animation:"shift"},{id:"holographic",name:"Holographic",gradient:`
+      linear-gradient(125deg, rgba(255, 0, 128, 0.4) 0%, transparent 40%),
+      linear-gradient(225deg, rgba(0, 255, 255, 0.4) 0%, transparent 40%),
+      linear-gradient(315deg, rgba(255, 255, 0, 0.4) 0%, transparent 40%),
+      linear-gradient(45deg, rgba(128, 0, 255, 0.4) 0%, transparent 40%),
+      radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1), transparent 60%),
+      conic-gradient(from 0deg at 50% 50%, 
+        rgba(255, 0, 128, 0.2),
+        rgba(255, 255, 0, 0.2),
+        rgba(0, 255, 255, 0.2),
+        rgba(128, 0, 255, 0.2),
+        rgba(255, 0, 128, 0.2)
+      ),
+      linear-gradient(135deg, #0a0a0f 0%, #1a1a2f 100%)
+    `,category:"premium",animation:"rotate"},{id:"energy-field",name:"Energy Field",gradient:`
+      radial-gradient(circle at 30% 40%, rgba(59, 130, 246, 0.6) 0%, transparent 25%),
+      radial-gradient(circle at 70% 60%, rgba(168, 85, 247, 0.6) 0%, transparent 25%),
+      radial-gradient(circle at 50% 80%, rgba(236, 72, 153, 0.5) 0%, transparent 30%),
+      radial-gradient(circle at 20% 20%, rgba(14, 165, 233, 0.5) 0%, transparent 20%),
+      radial-gradient(circle at 80% 30%, rgba(192, 132, 252, 0.5) 0%, transparent 20%),
+      radial-gradient(circle at 40% 60%, rgba(59, 130, 246, 0.4) 0%, transparent 15%),
+      radial-gradient(circle at 60% 40%, rgba(236, 72, 153, 0.4) 0%, transparent 15%),
+      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),
+      linear-gradient(135deg, #000000 0%, #0a0520 50%, #000000 100%)
+    `,category:"premium",animation:"pulse"},{id:"nebula-cloud",name:"Nebula Cloud",gradient:`
+      radial-gradient(ellipse at 25% 25%, rgba(139, 92, 246, 0.6) 0%, transparent 35%),
+      radial-gradient(ellipse at 75% 25%, rgba(236, 72, 153, 0.5) 0%, transparent 40%),
+      radial-gradient(ellipse at 50% 60%, rgba(59, 130, 246, 0.5) 0%, transparent 45%),
+      radial-gradient(ellipse at 20% 70%, rgba(168, 85, 247, 0.4) 0%, transparent 35%),
+      radial-gradient(ellipse at 80% 75%, rgba(244, 114, 182, 0.4) 0%, transparent 40%),
+      radial-gradient(circle at 40% 40%, rgba(147, 51, 234, 0.3) 0%, transparent 25%),
+      radial-gradient(circle at 60% 70%, rgba(219, 39, 119, 0.3) 0%, transparent 30%),
+      radial-gradient(at 50% 50%, rgba(88, 28, 135, 0.2) 0%, transparent 70%),
+      linear-gradient(180deg, #000000 0%, #0d001a 30%, #1a0033 60%, #000000 100%)
+    `,category:"premium",animation:"wave"},{id:"cyber-grid-blue",name:"Cyber Grid Blue",gradient:`
+      repeating-linear-gradient(0deg, rgba(59, 130, 246, 0.08) 0px, rgba(59, 130, 246, 0.08) 2px, transparent 2px, transparent 60px),
+      repeating-linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0px, rgba(59, 130, 246, 0.08) 2px, transparent 2px, transparent 60px),
+      radial-gradient(circle at 30% 40%, rgba(59, 130, 246, 0.4), transparent 35%),
+      radial-gradient(circle at 70% 60%, rgba(147, 197, 253, 0.3), transparent 40%),
+      linear-gradient(135deg, #000000 0%, #001333 50%, #000000 100%)
+    `,category:"premium",animation:"flow"},{id:"neon-dots-pink",name:"Neon Dots Pink",gradient:`
+      repeating-radial-gradient(circle at 0 0, transparent 0, #1a1a2e 40px),
+      repeating-linear-gradient(rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.15) 1px, transparent 1px, transparent 20px),
+      repeating-linear-gradient(90deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.15) 1px, transparent 1px, transparent 20px),
+      radial-gradient(circle at 20% 30%, rgba(236, 72, 153, 0.5), transparent 30%),
+      radial-gradient(circle at 80% 70%, rgba(219, 39, 119, 0.4), transparent 35%),
+      linear-gradient(135deg, #0f0a14 0%, #1a0a1e 100%)
+    `,category:"premium",animation:"shift"},{id:"diagonal-waves-purple",name:"Diagonal Waves",gradient:`
+      repeating-linear-gradient(45deg, rgba(168, 85, 247, 0.05) 0px, rgba(168, 85, 247, 0.05) 2px, transparent 2px, transparent 40px),
+      repeating-linear-gradient(-45deg, rgba(192, 132, 252, 0.05) 0px, rgba(192, 132, 252, 0.05) 2px, transparent 2px, transparent 40px),
+      radial-gradient(circle at 40% 40%, rgba(168, 85, 247, 0.4), transparent 40%),
+      radial-gradient(circle at 60% 60%, rgba(147, 51, 234, 0.3), transparent 45%),
+      linear-gradient(135deg, #0a0014 0%, #14001f 100%)
+    `,category:"premium",animation:"wave"},{id:"hexagon-pattern",name:"Hexagon Pattern",gradient:`
+      repeating-linear-gradient(60deg, rgba(34, 211, 238, 0.08) 0px, rgba(34, 211, 238, 0.08) 1px, transparent 1px, transparent 50px),
+      repeating-linear-gradient(120deg, rgba(34, 211, 238, 0.08) 0px, rgba(34, 211, 238, 0.08) 1px, transparent 1px, transparent 50px),
+      repeating-linear-gradient(180deg, rgba(34, 211, 238, 0.08) 0px, rgba(34, 211, 238, 0.08) 1px, transparent 1px, transparent 50px),
+      radial-gradient(circle at 50% 30%, rgba(34, 211, 238, 0.4), transparent 40%),
+      radial-gradient(circle at 30% 70%, rgba(14, 165, 233, 0.3), transparent 35%),
+      linear-gradient(135deg, #000a0f 0%, #001419 100%)
+    `,category:"premium",animation:"rotate"},{id:"scanlines-red",name:"Scanlines Red",gradient:`
+      repeating-linear-gradient(0deg, rgba(239, 68, 68, 0.03) 0px, rgba(239, 68, 68, 0.03) 1px, transparent 1px, transparent 4px),
+      repeating-linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0px, rgba(239, 68, 68, 0.05) 1px, transparent 1px, transparent 80px),
+      radial-gradient(circle at 25% 35%, rgba(239, 68, 68, 0.5), transparent 30%),
+      radial-gradient(circle at 75% 65%, rgba(220, 38, 38, 0.4), transparent 35%),
+      radial-gradient(circle at 50% 50%, rgba(185, 28, 28, 0.3), transparent 50%),
+      linear-gradient(135deg, #0f0000 0%, #1a0000 100%)
+    `,category:"premium",animation:"pulse"},{id:"liquid-rainbow",name:"Liquid Rainbow",gradient:`
+      radial-gradient(ellipse at 15% 20%, rgba(255, 0, 128, 0.6), transparent 40%),
+      radial-gradient(ellipse at 85% 30%, rgba(128, 0, 255, 0.6), transparent 40%),
+      radial-gradient(ellipse at 50% 70%, rgba(0, 128, 255, 0.6), transparent 45%),
+      radial-gradient(ellipse at 20% 80%, rgba(255, 128, 0, 0.5), transparent 35%),
+      radial-gradient(ellipse at 80% 85%, rgba(255, 0, 255, 0.5), transparent 40%),
+      linear-gradient(135deg, #0a0a14 0%, #14141f 100%)
+    `,category:"premium",animation:"flow"},{id:"sunset-vibes",name:"Sunset Vibes",gradient:`
+      radial-gradient(circle at 20% 30%, rgba(255, 94, 77, 0.7), transparent 40%),
+      radial-gradient(circle at 80% 40%, rgba(255, 159, 64, 0.6), transparent 45%),
+      radial-gradient(circle at 50% 80%, rgba(255, 107, 107, 0.6), transparent 50%),
+      radial-gradient(circle at 30% 60%, rgba(254, 121, 104, 0.5), transparent 35%),
+      linear-gradient(180deg, #1a0a0a 0%, #2d1414 50%, #1a0a0a 100%)
+    `,category:"premium",animation:"wave"},{id:"ocean-breeze",name:"Ocean Breeze",gradient:`
+      radial-gradient(ellipse at 30% 20%, rgba(34, 211, 238, 0.7), transparent 45%),
+      radial-gradient(ellipse at 70% 50%, rgba(59, 130, 246, 0.6), transparent 50%),
+      radial-gradient(ellipse at 40% 80%, rgba(14, 165, 233, 0.6), transparent 45%),
+      radial-gradient(ellipse at 80% 30%, rgba(96, 165, 250, 0.5), transparent 40%),
+      linear-gradient(180deg, #000a14 0%, #001a2e 50%, #000a14 100%)
+    `,category:"premium",animation:"shift"},{id:"purple-haze",name:"Purple Haze",gradient:`
+      radial-gradient(circle at 25% 25%, rgba(168, 85, 247, 0.8), transparent 35%),
+      radial-gradient(circle at 75% 35%, rgba(192, 132, 252, 0.7), transparent 40%),
+      radial-gradient(circle at 50% 70%, rgba(147, 51, 234, 0.7), transparent 45%),
+      radial-gradient(circle at 30% 80%, rgba(126, 34, 206, 0.6), transparent 40%),
+      radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.5), transparent 35%),
+      linear-gradient(135deg, #0a0014 0%, #1a0a2e 50%, #0a0014 100%)
+    `,category:"premium",animation:"pulse"},{id:"emerald-dream",name:"Emerald Dream",gradient:`
+      radial-gradient(ellipse at 20% 30%, rgba(16, 185, 129, 0.7), transparent 40%),
+      radial-gradient(ellipse at 80% 40%, rgba(52, 211, 153, 0.6), transparent 45%),
+      radial-gradient(ellipse at 50% 75%, rgba(5, 150, 105, 0.6), transparent 50%),
+      radial-gradient(ellipse at 35% 65%, rgba(34, 197, 94, 0.5), transparent 40%),
+      linear-gradient(180deg, #000a08 0%, #001a14 50%, #000a08 100%)
+    `,category:"premium",animation:"wave"},{id:"fire-storm",name:"Fire Storm",gradient:`
+      radial-gradient(circle at 30% 30%, rgba(239, 68, 68, 0.8), transparent 35%),
+      radial-gradient(circle at 70% 40%, rgba(220, 38, 38, 0.7), transparent 40%),
+      radial-gradient(circle at 50% 70%, rgba(248, 113, 113, 0.7), transparent 45%),
+      radial-gradient(circle at 25% 75%, rgba(185, 28, 28, 0.6), transparent 35%),
+      radial-gradient(circle at 75% 80%, rgba(239, 68, 68, 0.5), transparent 40%),
+      linear-gradient(135deg, #0f0000 0%, #1a0505 50%, #0f0000 100%)
+    `,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"}];exports.Button=k;exports.GlassButton=c;exports.Home=N;exports.gradients=C;

package/dist/index.mjs

@@ -1,15 +1,15 @@
 "use client";
-import { jsx as e, jsxs as x, Fragment as $ } from "react/jsx-runtime";
+import { jsx as a, jsxs as x, Fragment as N } from "react/jsx-runtime";
 import { useState as C } from "react";
-const I = ({
-  children: d,
-  variant: r = "primary",
-  size: h = "md",
-  onClick: o,
-  disabled: t = !1,
-  className: n = ""
+const z = ({
+  children: s,
+  variant: n = "primary",
+  size: p = "md",
+  onClick: i,
+  disabled: e = !1,
+  className: d = ""
 }) => {
-  const i = "font-semibold rounded-lg transition-all duration-200 cursor-pointer", a = {
+  const g = "font-semibold rounded-lg transition-all duration-200 cursor-pointer", r = {
     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"
@@ -17,32 +17,32 @@ const I = ({
     sm: "px-3 py-1.5 text-sm",
     md: "px-4 py-2 text-base",
     lg: "px-6 py-3 text-lg"
-  }, c = t ? "opacity-50 cursor-not-allowed" : "";
-  return /* @__PURE__ */ e(
+  }, o = e ? "opacity-50 cursor-not-allowed" : "";
+  return /* @__PURE__ */ a(
     "button",
     {
-      className: `${i} ${a[r]} ${l[h]} ${c} ${n}`,
-      onClick: o,
-      disabled: t,
-      children: d
+      className: `${g} ${r[n]} ${l[p]} ${o} ${d}`,
+      onClick: i,
+      disabled: e,
+      children: s
     }
   );
-}, b = ({
-  children: d,
-  variant: r = "blur",
-  size: h = "md",
-  onClick: o,
-  disabled: t = !1,
-  className: n = ""
+}, m = ({
+  children: s,
+  variant: n = "blur",
+  size: p = "md",
+  onClick: i,
+  disabled: e = !1,
+  className: d = ""
 }) => {
-  const [i, a] = C([]), l = (s) => {
-    if (!t && o) {
-      const m = s.currentTarget.getBoundingClientRect(), u = s.clientX - m.left, v = s.clientY - m.top, f = Date.now();
-      a([...i, { x: u, y: v, id: f }]), setTimeout(() => {
-        a((y) => y.filter((N) => N.id !== f));
-      }, 800), o();
+  const [g, r] = C([]), l = (t) => {
+    if (!e && i) {
+      const b = t.currentTarget.getBoundingClientRect(), f = t.clientX - b.left, y = t.clientY - b.top, w = Date.now();
+      r([...g, { x: f, y, id: w }]), setTimeout(() => {
+        r((v) => v.filter((k) => k.id !== w));
+      }, 800), i();
     }
-  }, c = `
+  }, o = `
     relative overflow-hidden
     backdrop-blur-xl
     border border-white/30
@@ -52,11 +52,11 @@ const I = ({
     cursor-pointer
     shadow-xl
     group
-  `, p = {
+  `, 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"
-  }, w = {
+  }, h = {
     blur: `
       bg-white/5
       hover:bg-white/15
@@ -82,83 +82,83 @@ const I = ({
       hover:before:translate-x-[200%]
       before:transition-transform before:duration-1000
     `
-  }, g = t ? "opacity-40 cursor-not-allowed hover:scale-100 hover:shadow-xl" : "";
+  }, u = e ? "opacity-40 cursor-not-allowed hover:scale-100 hover:shadow-xl" : "";
   return /* @__PURE__ */ x(
     "button",
     {
-      className: `${c} ${p[h]} ${w[r]} ${g} ${n}`,
+      className: `${o} ${c[p]} ${h[n]} ${u} ${d}`,
       onClick: l,
-      disabled: t,
+      disabled: e,
       children: [
-        r === "waves" && !t && /* @__PURE__ */ x($, { children: [
-          /* @__PURE__ */ e("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" }),
-          /* @__PURE__ */ e("span", { className: "absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent animate-pulse" })
+        n === "waves" && !e && /* @__PURE__ */ x(N, { children: [
+          /* @__PURE__ */ a("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" }),
+          /* @__PURE__ */ a("span", { className: "absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent animate-pulse" })
         ] }),
-        r === "blur" && !t && /* @__PURE__ */ e("span", { className: "absolute inset-0 bg-white/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" }),
-        /* @__PURE__ */ e("span", { className: "absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none", children: /* @__PURE__ */ e("span", { className: "absolute inset-[-2px] rounded-2xl bg-gradient-to-r from-transparent via-white/40 to-transparent blur-sm animate-shimmer" }) }),
-        i.map((s) => /* @__PURE__ */ e(
+        n === "blur" && !e && /* @__PURE__ */ a("span", { className: "absolute inset-0 bg-white/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" }),
+        /* @__PURE__ */ a("span", { className: "absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none", children: /* @__PURE__ */ a("span", { className: "absolute inset-[-2px] rounded-2xl bg-gradient-to-r from-transparent via-white/40 to-transparent blur-sm animate-shimmer" }) }),
+        g.map((t) => /* @__PURE__ */ a(
           "span",
           {
             className: "absolute rounded-full bg-white/30 pointer-events-none animate-ripple",
             style: {
-              left: s.x,
-              top: s.y,
+              left: t.x,
+              top: t.y,
               width: "20px",
               height: "20px",
               transform: "translate(-50%, -50%)"
             }
           },
-          s.id
+          t.id
         )),
-        /* @__PURE__ */ e("span", { className: "relative z-10 drop-shadow-lg", children: d })
+        /* @__PURE__ */ a("span", { className: "relative z-10 drop-shadow-lg", children: s })
       ]
     }
   );
-}, j = ({
-  name: d,
-  title: r,
-  description: h = "Welcome to my portfolio",
-  primaryButtonText: o = "Get Started",
-  primaryButtonLink: t,
-  primaryButtonOnClick: n,
-  secondaryButtonText: i = "Learn More",
-  secondaryButtonLink: a,
+}, G = ({
+  name: s,
+  title: n,
+  description: p = "Welcome to my portfolio",
+  primaryButtonText: i = "Get Started",
+  primaryButtonLink: e,
+  primaryButtonOnClick: d,
+  secondaryButtonText: g = "Learn More",
+  secondaryButtonLink: r,
   secondaryButtonOnClick: l,
-  backgroundGradient: c = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-  animationType: p,
-  className: w = ""
+  backgroundGradient: o = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+  animationType: c,
+  className: h = ""
 }) => {
-  const g = () => {
-    t ? window.location.href = t : n && n();
-  }, s = () => {
-    a ? window.location.href = a : l && l();
-  }, m = t ? /* @__PURE__ */ e("a", { href: t, style: { textDecoration: "none" }, children: /* @__PURE__ */ e(b, { variant: "waves", size: "lg", children: o }) }) : /* @__PURE__ */ e(
-    b,
+  const u = () => {
+    e ? window.location.href = e : d && d();
+  }, t = () => {
+    r ? window.location.href = r : l && l();
+  }, b = e ? /* @__PURE__ */ a("a", { href: e, style: { textDecoration: "none" }, children: /* @__PURE__ */ a(m, { variant: "waves", size: "lg", children: i }) }) : /* @__PURE__ */ a(
+    m,
     {
       variant: "waves",
       size: "lg",
-      onClick: n || g,
-      children: o
+      onClick: d || u,
+      children: i
     }
-  ), u = a ? /* @__PURE__ */ e("a", { href: a, style: { textDecoration: "none" }, children: /* @__PURE__ */ e(b, { variant: "blur", size: "lg", children: i }) }) : /* @__PURE__ */ e(
-    b,
+  ), f = r ? /* @__PURE__ */ a("a", { href: r, style: { textDecoration: "none" }, children: /* @__PURE__ */ a(m, { variant: "blur", size: "lg", children: g }) }) : /* @__PURE__ */ a(
+    m,
     {
       variant: "blur",
       size: "lg",
-      onClick: l || s,
-      children: i
+      onClick: l || t,
+      children: g
     }
   );
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: p ? `animate-gradient-${p}` : "",
+      className: c ? `animate-gradient-${c}` : "",
       style: {
-        background: c,
+        background: o,
         minHeight: "100vh"
       },
-      children: /* @__PURE__ */ e("div", { className: `min-h-screen flex items-center justify-center p-8 ${w}`, children: /* @__PURE__ */ x("div", { className: "max-w-4xl w-full text-center space-y-8", children: [
-        /* @__PURE__ */ e(
+      children: /* @__PURE__ */ a("div", { className: `min-h-screen flex items-center justify-center p-8 ${h}`, children: /* @__PURE__ */ x("div", { className: "max-w-4xl w-full text-center space-y-8", children: [
+        /* @__PURE__ */ a(
           "h1",
           {
             className: "text-6xl md:text-8xl font-bold text-white mb-4",
@@ -166,10 +166,10 @@ const I = ({
               textShadow: "0 0 40px rgba(0,0,0,0.3)",
               animation: "fadeInUp 0.8s ease-out"
             },
-            children: d
+            children: s
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ a(
           "h2",
           {
             className: "text-3xl md:text-5xl font-semibold text-white/90",
@@ -177,10 +177,10 @@ const I = ({
               textShadow: "0 0 30px rgba(0,0,0,0.2)",
               animation: "fadeInUp 1s ease-out 0.2s backwards"
             },
-            children: r
+            children: n
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ a(
           "p",
           {
             className: "text-xl md:text-2xl text-white/80 max-w-2xl mx-auto",
@@ -188,7 +188,7 @@ const I = ({
               textShadow: "0 0 20px rgba(0,0,0,0.2)",
               animation: "fadeInUp 1.2s ease-out 0.4s backwards"
             },
-            children: h
+            children: p
           }
         ),
         /* @__PURE__ */ x(
@@ -199,12 +199,12 @@ const I = ({
               animation: "fadeInUp 1.4s ease-out 0.6s backwards"
             },
             children: [
-              m,
-              u
+              b,
+              f
             ]
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ a(
           "div",
           {
             className: "mt-16 mx-auto w-32 h-1 rounded-full",
@@ -217,9 +217,475 @@ const I = ({
       ] }) })
     }
   );
-};
+}, $ = [
+  // ========== PREMIUM THEMES (NEW) ==========
+  {
+    id: "glass-morphism",
+    name: "Glass Morphism",
+    gradient: `
+      radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
+      radial-gradient(circle at 80% 80%, rgba(255, 128, 171, 0.3), transparent 50%),
+      radial-gradient(circle at 40% 90%, rgba(88, 166, 255, 0.3), transparent 50%),
+      linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%)
+    `,
+    category: "premium"
+  },
+  {
+    id: "aurora-dream",
+    name: "Aurora Dream",
+    gradient: `
+      radial-gradient(ellipse at top left, rgba(139, 92, 246, 0.5), transparent 50%),
+      radial-gradient(ellipse at top right, rgba(236, 72, 153, 0.5), transparent 50%),
+      radial-gradient(ellipse at bottom, rgba(59, 130, 246, 0.5), transparent 50%),
+      linear-gradient(180deg, #0f0f1e 0%, #1a1a2e 100%)
+    `,
+    category: "premium",
+    animation: "flow"
+  },
+  {
+    id: "neon-cyber",
+    name: "Neon Cyber",
+    gradient: `
+      linear-gradient(45deg, #ff0080 0%, #7928ca 25%, #0070f3 50%, #00dfd8 75%, #ff0080 100%),
+      radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.8), #000000)
+    `,
+    category: "premium",
+    animation: "shift"
+  },
+  {
+    id: "liquid-sunset",
+    name: "Liquid Sunset",
+    gradient: `
+      radial-gradient(circle at 30% 20%, rgba(255, 107, 107, 0.6), transparent 40%),
+      radial-gradient(circle at 70% 60%, rgba(255, 193, 69, 0.6), transparent 40%),
+      radial-gradient(circle at 50% 80%, rgba(254, 121, 104, 0.6), transparent 40%),
+      linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)
+    `,
+    category: "premium",
+    animation: "wave"
+  },
+  {
+    id: "cosmic-particles",
+    name: "Cosmic Particles",
+    gradient: `
+      radial-gradient(circle at 15% 15%, rgba(138, 43, 226, 0.4), transparent 25%),
+      radial-gradient(circle at 85% 20%, rgba(65, 105, 225, 0.4), transparent 25%),
+      radial-gradient(circle at 50% 50%, rgba(255, 20, 147, 0.3), transparent 30%),
+      radial-gradient(circle at 20% 80%, rgba(0, 191, 255, 0.4), transparent 25%),
+      radial-gradient(circle at 80% 85%, rgba(138, 43, 226, 0.3), transparent 25%),
+      linear-gradient(180deg, #000000 0%, #0a0a1a 50%, #000000 100%)
+    `,
+    category: "premium",
+    animation: "pulse"
+  },
+  {
+    id: "diamond-shine",
+    name: "Diamond Shine",
+    gradient: `
+      conic-gradient(from 45deg at 50% 50%, 
+        rgba(255, 255, 255, 0.1) 0deg,
+        rgba(99, 102, 241, 0.3) 90deg,
+        rgba(168, 85, 247, 0.3) 180deg,
+        rgba(236, 72, 153, 0.3) 270deg,
+        rgba(255, 255, 255, 0.1) 360deg
+      ),
+      radial-gradient(ellipse at center, rgba(139, 92, 246, 0.2), transparent 70%),
+      linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%)
+    `,
+    category: "premium",
+    animation: "rotate"
+  },
+  {
+    id: "ocean-depths",
+    name: "Ocean Depths",
+    gradient: `
+      radial-gradient(ellipse at top, rgba(6, 182, 212, 0.5), transparent 50%),
+      radial-gradient(ellipse at bottom left, rgba(59, 130, 246, 0.4), transparent 50%),
+      radial-gradient(ellipse at bottom right, rgba(16, 185, 129, 0.4), transparent 50%),
+      radial-gradient(circle at 60% 40%, rgba(96, 165, 250, 0.3), transparent 30%),
+      linear-gradient(180deg, #001a33 0%, #002147 50%, #000d1a 100%)
+    `,
+    category: "premium",
+    animation: "wave"
+  },
+  {
+    id: "magic-portal",
+    name: "Magic Portal",
+    gradient: `
+      radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.6) 0%, transparent 30%),
+      radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.5) 10%, transparent 40%),
+      radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.4) 20%, transparent 50%),
+      conic-gradient(from 180deg at 50% 50%,
+        rgba(168, 85, 247, 0.2) 0deg,
+        rgba(236, 72, 153, 0.2) 120deg,
+        rgba(59, 130, 246, 0.2) 240deg,
+        rgba(168, 85, 247, 0.2) 360deg
+      ),
+      linear-gradient(135deg, #0a0a14 0%, #14141f 100%)
+    `,
+    category: "premium",
+    animation: "rotate"
+  },
+  {
+    id: "mesh-gradient-pro",
+    name: "Mesh Gradient Pro",
+    gradient: `
+      radial-gradient(at 0% 0%, rgba(253, 230, 138, 0.5) 0px, transparent 50%),
+      radial-gradient(at 20% 30%, rgba(192, 132, 252, 0.5) 0px, transparent 50%),
+      radial-gradient(at 40% 70%, rgba(96, 165, 250, 0.5) 0px, transparent 50%),
+      radial-gradient(at 60% 30%, rgba(244, 114, 182, 0.5) 0px, transparent 50%),
+      radial-gradient(at 80% 80%, rgba(167, 139, 250, 0.5) 0px, transparent 50%),
+      radial-gradient(at 100% 10%, rgba(251, 191, 36, 0.5) 0px, transparent 50%),
+      radial-gradient(at 50% 50%, rgba(139, 92, 246, 0.3) 0px, transparent 60%),
+      linear-gradient(135deg, #0f0a1e 0%, #1a0a2e 100%)
+    `,
+    category: "premium",
+    animation: "flow"
+  },
+  {
+    id: "grid-matrix",
+    name: "Grid Matrix",
+    gradient: `
+      repeating-linear-gradient(0deg, rgba(0, 255, 136, 0.05) 0px, rgba(0, 255, 136, 0.05) 1px, transparent 1px, transparent 40px),
+      repeating-linear-gradient(90deg, rgba(0, 255, 136, 0.05) 0px, rgba(0, 255, 136, 0.05) 1px, transparent 1px, transparent 40px),
+      radial-gradient(circle at 20% 30%, rgba(0, 255, 136, 0.3), transparent 40%),
+      radial-gradient(circle at 80% 70%, rgba(0, 200, 255, 0.3), transparent 40%),
+      radial-gradient(circle at 50% 50%, rgba(0, 255, 200, 0.2), transparent 50%),
+      linear-gradient(135deg, #000000 0%, #001a0d 50%, #000000 100%)
+    `,
+    category: "premium",
+    animation: "shift"
+  },
+  {
+    id: "holographic",
+    name: "Holographic",
+    gradient: `
+      linear-gradient(125deg, rgba(255, 0, 128, 0.4) 0%, transparent 40%),
+      linear-gradient(225deg, rgba(0, 255, 255, 0.4) 0%, transparent 40%),
+      linear-gradient(315deg, rgba(255, 255, 0, 0.4) 0%, transparent 40%),
+      linear-gradient(45deg, rgba(128, 0, 255, 0.4) 0%, transparent 40%),
+      radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1), transparent 60%),
+      conic-gradient(from 0deg at 50% 50%, 
+        rgba(255, 0, 128, 0.2),
+        rgba(255, 255, 0, 0.2),
+        rgba(0, 255, 255, 0.2),
+        rgba(128, 0, 255, 0.2),
+        rgba(255, 0, 128, 0.2)
+      ),
+      linear-gradient(135deg, #0a0a0f 0%, #1a1a2f 100%)
+    `,
+    category: "premium",
+    animation: "rotate"
+  },
+  {
+    id: "energy-field",
+    name: "Energy Field",
+    gradient: `
+      radial-gradient(circle at 30% 40%, rgba(59, 130, 246, 0.6) 0%, transparent 25%),
+      radial-gradient(circle at 70% 60%, rgba(168, 85, 247, 0.6) 0%, transparent 25%),
+      radial-gradient(circle at 50% 80%, rgba(236, 72, 153, 0.5) 0%, transparent 30%),
+      radial-gradient(circle at 20% 20%, rgba(14, 165, 233, 0.5) 0%, transparent 20%),
+      radial-gradient(circle at 80% 30%, rgba(192, 132, 252, 0.5) 0%, transparent 20%),
+      radial-gradient(circle at 40% 60%, rgba(59, 130, 246, 0.4) 0%, transparent 15%),
+      radial-gradient(circle at 60% 40%, rgba(236, 72, 153, 0.4) 0%, transparent 15%),
+      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),
+      linear-gradient(135deg, #000000 0%, #0a0520 50%, #000000 100%)
+    `,
+    category: "premium",
+    animation: "pulse"
+  },
+  {
+    id: "nebula-cloud",
+    name: "Nebula Cloud",
+    gradient: `
+      radial-gradient(ellipse at 25% 25%, rgba(139, 92, 246, 0.6) 0%, transparent 35%),
+      radial-gradient(ellipse at 75% 25%, rgba(236, 72, 153, 0.5) 0%, transparent 40%),
+      radial-gradient(ellipse at 50% 60%, rgba(59, 130, 246, 0.5) 0%, transparent 45%),
+      radial-gradient(ellipse at 20% 70%, rgba(168, 85, 247, 0.4) 0%, transparent 35%),
+      radial-gradient(ellipse at 80% 75%, rgba(244, 114, 182, 0.4) 0%, transparent 40%),
+      radial-gradient(circle at 40% 40%, rgba(147, 51, 234, 0.3) 0%, transparent 25%),
+      radial-gradient(circle at 60% 70%, rgba(219, 39, 119, 0.3) 0%, transparent 30%),
+      radial-gradient(at 50% 50%, rgba(88, 28, 135, 0.2) 0%, transparent 70%),
+      linear-gradient(180deg, #000000 0%, #0d001a 30%, #1a0033 60%, #000000 100%)
+    `,
+    category: "premium",
+    animation: "wave"
+  },
+  {
+    id: "cyber-grid-blue",
+    name: "Cyber Grid Blue",
+    gradient: `
+      repeating-linear-gradient(0deg, rgba(59, 130, 246, 0.08) 0px, rgba(59, 130, 246, 0.08) 2px, transparent 2px, transparent 60px),
+      repeating-linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0px, rgba(59, 130, 246, 0.08) 2px, transparent 2px, transparent 60px),
+      radial-gradient(circle at 30% 40%, rgba(59, 130, 246, 0.4), transparent 35%),
+      radial-gradient(circle at 70% 60%, rgba(147, 197, 253, 0.3), transparent 40%),
+      linear-gradient(135deg, #000000 0%, #001333 50%, #000000 100%)
+    `,
+    category: "premium",
+    animation: "flow"
+  },
+  {
+    id: "neon-dots-pink",
+    name: "Neon Dots Pink",
+    gradient: `
+      repeating-radial-gradient(circle at 0 0, transparent 0, #1a1a2e 40px),
+      repeating-linear-gradient(rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.15) 1px, transparent 1px, transparent 20px),
+      repeating-linear-gradient(90deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.15) 1px, transparent 1px, transparent 20px),
+      radial-gradient(circle at 20% 30%, rgba(236, 72, 153, 0.5), transparent 30%),
+      radial-gradient(circle at 80% 70%, rgba(219, 39, 119, 0.4), transparent 35%),
+      linear-gradient(135deg, #0f0a14 0%, #1a0a1e 100%)
+    `,
+    category: "premium",
+    animation: "shift"
+  },
+  {
+    id: "diagonal-waves-purple",
+    name: "Diagonal Waves",
+    gradient: `
+      repeating-linear-gradient(45deg, rgba(168, 85, 247, 0.05) 0px, rgba(168, 85, 247, 0.05) 2px, transparent 2px, transparent 40px),
+      repeating-linear-gradient(-45deg, rgba(192, 132, 252, 0.05) 0px, rgba(192, 132, 252, 0.05) 2px, transparent 2px, transparent 40px),
+      radial-gradient(circle at 40% 40%, rgba(168, 85, 247, 0.4), transparent 40%),
+      radial-gradient(circle at 60% 60%, rgba(147, 51, 234, 0.3), transparent 45%),
+      linear-gradient(135deg, #0a0014 0%, #14001f 100%)
+    `,
+    category: "premium",
+    animation: "wave"
+  },
+  {
+    id: "hexagon-pattern",
+    name: "Hexagon Pattern",
+    gradient: `
+      repeating-linear-gradient(60deg, rgba(34, 211, 238, 0.08) 0px, rgba(34, 211, 238, 0.08) 1px, transparent 1px, transparent 50px),
+      repeating-linear-gradient(120deg, rgba(34, 211, 238, 0.08) 0px, rgba(34, 211, 238, 0.08) 1px, transparent 1px, transparent 50px),
+      repeating-linear-gradient(180deg, rgba(34, 211, 238, 0.08) 0px, rgba(34, 211, 238, 0.08) 1px, transparent 1px, transparent 50px),
+      radial-gradient(circle at 50% 30%, rgba(34, 211, 238, 0.4), transparent 40%),
+      radial-gradient(circle at 30% 70%, rgba(14, 165, 233, 0.3), transparent 35%),
+      linear-gradient(135deg, #000a0f 0%, #001419 100%)
+    `,
+    category: "premium",
+    animation: "rotate"
+  },
+  {
+    id: "scanlines-red",
+    name: "Scanlines Red",
+    gradient: `
+      repeating-linear-gradient(0deg, rgba(239, 68, 68, 0.03) 0px, rgba(239, 68, 68, 0.03) 1px, transparent 1px, transparent 4px),
+      repeating-linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0px, rgba(239, 68, 68, 0.05) 1px, transparent 1px, transparent 80px),
+      radial-gradient(circle at 25% 35%, rgba(239, 68, 68, 0.5), transparent 30%),
+      radial-gradient(circle at 75% 65%, rgba(220, 38, 38, 0.4), transparent 35%),
+      radial-gradient(circle at 50% 50%, rgba(185, 28, 28, 0.3), transparent 50%),
+      linear-gradient(135deg, #0f0000 0%, #1a0000 100%)
+    `,
+    category: "premium",
+    animation: "pulse"
+  },
+  {
+    id: "liquid-rainbow",
+    name: "Liquid Rainbow",
+    gradient: `
+      radial-gradient(ellipse at 15% 20%, rgba(255, 0, 128, 0.6), transparent 40%),
+      radial-gradient(ellipse at 85% 30%, rgba(128, 0, 255, 0.6), transparent 40%),
+      radial-gradient(ellipse at 50% 70%, rgba(0, 128, 255, 0.6), transparent 45%),
+      radial-gradient(ellipse at 20% 80%, rgba(255, 128, 0, 0.5), transparent 35%),
+      radial-gradient(ellipse at 80% 85%, rgba(255, 0, 255, 0.5), transparent 40%),
+      linear-gradient(135deg, #0a0a14 0%, #14141f 100%)
+    `,
+    category: "premium",
+    animation: "flow"
+  },
+  {
+    id: "sunset-vibes",
+    name: "Sunset Vibes",
+    gradient: `
+      radial-gradient(circle at 20% 30%, rgba(255, 94, 77, 0.7), transparent 40%),
+      radial-gradient(circle at 80% 40%, rgba(255, 159, 64, 0.6), transparent 45%),
+      radial-gradient(circle at 50% 80%, rgba(255, 107, 107, 0.6), transparent 50%),
+      radial-gradient(circle at 30% 60%, rgba(254, 121, 104, 0.5), transparent 35%),
+      linear-gradient(180deg, #1a0a0a 0%, #2d1414 50%, #1a0a0a 100%)
+    `,
+    category: "premium",
+    animation: "wave"
+  },
+  {
+    id: "ocean-breeze",
+    name: "Ocean Breeze",
+    gradient: `
+      radial-gradient(ellipse at 30% 20%, rgba(34, 211, 238, 0.7), transparent 45%),
+      radial-gradient(ellipse at 70% 50%, rgba(59, 130, 246, 0.6), transparent 50%),
+      radial-gradient(ellipse at 40% 80%, rgba(14, 165, 233, 0.6), transparent 45%),
+      radial-gradient(ellipse at 80% 30%, rgba(96, 165, 250, 0.5), transparent 40%),
+      linear-gradient(180deg, #000a14 0%, #001a2e 50%, #000a14 100%)
+    `,
+    category: "premium",
+    animation: "shift"
+  },
+  {
+    id: "purple-haze",
+    name: "Purple Haze",
+    gradient: `
+      radial-gradient(circle at 25% 25%, rgba(168, 85, 247, 0.8), transparent 35%),
+      radial-gradient(circle at 75% 35%, rgba(192, 132, 252, 0.7), transparent 40%),
+      radial-gradient(circle at 50% 70%, rgba(147, 51, 234, 0.7), transparent 45%),
+      radial-gradient(circle at 30% 80%, rgba(126, 34, 206, 0.6), transparent 40%),
+      radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.5), transparent 35%),
+      linear-gradient(135deg, #0a0014 0%, #1a0a2e 50%, #0a0014 100%)
+    `,
+    category: "premium",
+    animation: "pulse"
+  },
+  {
+    id: "emerald-dream",
+    name: "Emerald Dream",
+    gradient: `
+      radial-gradient(ellipse at 20% 30%, rgba(16, 185, 129, 0.7), transparent 40%),
+      radial-gradient(ellipse at 80% 40%, rgba(52, 211, 153, 0.6), transparent 45%),
+      radial-gradient(ellipse at 50% 75%, rgba(5, 150, 105, 0.6), transparent 50%),
+      radial-gradient(ellipse at 35% 65%, rgba(34, 197, 94, 0.5), transparent 40%),
+      linear-gradient(180deg, #000a08 0%, #001a14 50%, #000a08 100%)
+    `,
+    category: "premium",
+    animation: "wave"
+  },
+  {
+    id: "fire-storm",
+    name: "Fire Storm",
+    gradient: `
+      radial-gradient(circle at 30% 30%, rgba(239, 68, 68, 0.8), transparent 35%),
+      radial-gradient(circle at 70% 40%, rgba(220, 38, 38, 0.7), transparent 40%),
+      radial-gradient(circle at 50% 70%, rgba(248, 113, 113, 0.7), transparent 45%),
+      radial-gradient(circle at 25% 75%, rgba(185, 28, 28, 0.6), transparent 35%),
+      radial-gradient(circle at 75% 80%, rgba(239, 68, 68, 0.5), transparent 40%),
+      linear-gradient(135deg, #0f0000 0%, #1a0505 50%, #0f0000 100%)
+    `,
+    category: "premium",
+    animation: "flow"
+  },
+  // ========== STATIC GRADIENTS ==========
+  {
+    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"
+  },
+  // ========== ANIMATED GRADIENTS ==========
+  {
+    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"
+  }
+];
 export {
-  I as Button,
-  b as GlassButton,
-  j as Home
+  z as Button,
+  m as GlassButton,
+  G as Home,
+  $ as gradients
 };

package/dist/styles/data/gradients.d.ts

@@ -0,0 +1,8 @@
+export interface Gradient {
+    id: string;
+    name: string;
+    gradient: string;
+    category: 'dark' | 'colorful' | 'mixed' | 'animated' | 'premium';
+    animation?: 'shift' | 'wave' | 'pulse' | 'rotate' | 'flow' | 'zoom';
+}
+export declare const gradients: Gradient[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "telecop",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Modern React UI Components Library",
   "type": "module",
   "main": "./dist/index.js",