@vudovn/antigravity-kit 1.0.1 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +6 -47
  2. package/bin/index.js +45 -0
  3. package/package.json +39 -38
  4. package/templates/.agent/skills/vue-expert/SKILL.md +374 -0
  5. package/templates/web/README.md +36 -36
  6. package/templates/web/eslint.config.mjs +18 -18
  7. package/templates/web/next.config.ts +8 -8
  8. package/templates/web/package-lock.json +6549 -6549
  9. package/templates/web/package.json +26 -26
  10. package/templates/web/postcss.config.mjs +7 -7
  11. package/templates/web/public/images/ux-ui-pro-max.svg +1 -0
  12. package/templates/web/src/app/globals.css +390 -275
  13. package/templates/web/src/app/layout.tsx +55 -55
  14. package/templates/web/src/app/page.tsx +23 -23
  15. package/templates/web/src/components/Credits.tsx +29 -119
  16. package/templates/web/src/components/Features.tsx +112 -55
  17. package/templates/web/src/components/Footer.tsx +73 -45
  18. package/templates/web/src/components/Hero.tsx +246 -75
  19. package/templates/web/src/components/HowItWorks.tsx +99 -56
  20. package/templates/web/src/components/Navbar.tsx +48 -70
  21. package/templates/web/src/components/Skills.tsx +84 -115
  22. package/templates/web/tsconfig.json +34 -34
  23. package/templates/web/public/images/antigravity-kit-logo.png +0 -0
package/templates/web/src/app/globals.css CHANGED
@@ -1,276 +1,391 @@
1
- @import "tailwindcss";
2
-
3
- /* ========================================
4
- ANTIGRAVITY KIT - DESIGN SYSTEM
5
- Dark Theme with Glassmorphism
6
- ======================================== */
7
-
8
- @theme {
9
- /* Colors */
10
- --color-bg-base: #050505;
11
- --color-bg-card: rgba(255, 255, 255, 0.05);
12
- --color-bg-navbar: rgba(0, 0, 0, 0.6);
13
- --color-accent: #3B82F6;
14
- --color-accent-hover: #60A5FA;
15
- --color-accent-glow: rgba(59, 130, 246, 0.2);
16
- --color-text-primary: #FFFFFF;
17
- --color-text-secondary: #A1A1AA;
18
- --color-text-muted: #71717A;
19
- --color-border: rgba(255, 255, 255, 0.1);
20
- --color-border-hover: rgba(255, 255, 255, 0.2);
21
-
22
- /* Gradients */
23
- --gradient-accent: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
24
- --gradient-glow: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
25
-
26
- /* Shadows */
27
- --shadow-glow: 0 0 60px rgba(59, 130, 246, 0.3);
28
- --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
29
- }
30
-
31
- /* Base styles */
32
- html {
33
- scroll-behavior: smooth;
34
- }
35
-
36
- body {
37
- background-color: var(--color-bg-base);
38
- color: var(--color-text-primary);
39
- min-height: 100vh;
40
- }
41
-
42
- /* Selection */
43
- ::selection {
44
- background-color: var(--color-accent);
45
- color: white;
46
- }
47
-
48
- /* Gradient Text */
49
- .gradient-text {
50
- background: var(--gradient-accent);
51
- -webkit-background-clip: text;
52
- -webkit-text-fill-color: transparent;
53
- background-clip: text;
54
- }
55
-
56
- /* Glass Card */
57
- .glass-card {
58
- background: var(--color-bg-card);
59
- backdrop-filter: blur(12px);
60
- -webkit-backdrop-filter: blur(12px);
61
- border: 1px solid var(--color-border);
62
- border-radius: 1rem;
63
- transition: all 0.2s ease;
64
- }
65
-
66
- .glass-card:hover {
67
- border-color: var(--color-border-hover);
68
- background: rgba(255, 255, 255, 0.08);
69
- }
70
-
71
- /* Glass Navbar */
72
- .glass-navbar {
73
- background: var(--color-bg-navbar);
74
- backdrop-filter: blur(16px);
75
- -webkit-backdrop-filter: blur(16px);
76
- border: 1px solid var(--color-border);
77
- }
78
-
79
- /* Background Glow */
80
- .bg-glow {
81
- position: absolute;
82
- width: 600px;
83
- height: 600px;
84
- background: var(--gradient-glow);
85
- filter: blur(80px);
86
- pointer-events: none;
87
- z-index: 0;
88
- }
89
-
90
- .bg-glow-accent {
91
- background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
92
- }
93
-
94
- .bg-glow-purple {
95
- background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
96
- }
97
-
98
- /* Button Primary */
99
- .btn-primary {
100
- display: inline-flex;
101
- align-items: center;
102
- gap: 0.5rem;
103
- padding: 0.75rem 1.5rem;
104
- background: var(--color-accent);
105
- color: white;
106
- font-weight: 500;
107
- border-radius: 0.5rem;
108
- transition: all 0.2s ease;
109
- cursor: pointer;
110
- }
111
-
112
- .btn-primary:hover {
113
- background: var(--color-accent-hover);
114
- transform: translateY(-1px);
115
- }
116
-
117
- /* Button Secondary */
118
- .btn-secondary {
119
- display: inline-flex;
120
- align-items: center;
121
- gap: 0.5rem;
122
- padding: 0.75rem 1.5rem;
123
- background: transparent;
124
- color: var(--color-text-primary);
125
- font-weight: 500;
126
- border: 1px solid var(--color-border);
127
- border-radius: 0.5rem;
128
- transition: all 0.2s ease;
129
- cursor: pointer;
130
- }
131
-
132
- .btn-secondary:hover {
133
- background: var(--color-bg-card);
134
- border-color: var(--color-border-hover);
135
- }
136
-
137
- /* Badge */
138
- .badge {
139
- display: inline-flex;
140
- align-items: center;
141
- gap: 0.375rem;
142
- padding: 0.375rem 0.75rem;
143
- background: var(--color-bg-card);
144
- border: 1px solid var(--color-border);
145
- border-radius: 9999px;
146
- font-size: 0.875rem;
147
- color: var(--color-text-secondary);
148
- }
149
-
150
- .badge-accent {
151
- background: var(--color-accent-glow);
152
- border-color: rgba(59, 130, 246, 0.3);
153
- color: var(--color-accent-hover);
154
- }
155
-
156
- /* Section */
157
- .section {
158
- position: relative;
159
- padding: 5rem 1.5rem;
160
- }
161
-
162
- @media (min-width: 768px) {
163
- .section {
164
- padding: 6rem 2rem;
165
- }
166
- }
167
-
168
- /* Container */
169
- .container-content {
170
- max-width: 1200px;
171
- margin: 0 auto;
172
- }
173
-
174
- /* Heading Styles */
175
- .heading-xl {
176
- font-size: clamp(2.5rem, 6vw, 4rem);
177
- font-weight: 700;
178
- line-height: 1.1;
179
- letter-spacing: -0.02em;
180
- }
181
-
182
- .heading-lg {
183
- font-size: clamp(1.75rem, 4vw, 2.5rem);
184
- font-weight: 700;
185
- line-height: 1.2;
186
- letter-spacing: -0.01em;
187
- }
188
-
189
- .heading-md {
190
- font-size: 1.25rem;
191
- font-weight: 600;
192
- line-height: 1.3;
193
- }
194
-
195
- /* Body Text */
196
- .text-body {
197
- color: var(--color-text-secondary);
198
- line-height: 1.7;
199
- }
200
-
201
- /* Icon wrapper */
202
- .icon-wrapper {
203
- display: flex;
204
- align-items: center;
205
- justify-content: center;
206
- width: 3rem;
207
- height: 3rem;
208
- background: var(--color-accent-glow);
209
- border: 1px solid rgba(59, 130, 246, 0.3);
210
- border-radius: 0.75rem;
211
- color: var(--color-accent);
212
- }
213
-
214
- /* Code Block */
215
- .code-block {
216
- background: rgba(0, 0, 0, 0.4);
217
- border: 1px solid var(--color-border);
218
- border-radius: 0.5rem;
219
- padding: 1rem;
220
- font-family: var(--font-geist-mono);
221
- font-size: 0.875rem;
222
- color: var(--color-text-secondary);
223
- overflow-x: auto;
224
- }
225
-
226
- /* Animations */
227
- @keyframes float {
228
-
229
- 0%,
230
- 100% {
231
- transform: translateY(0);
232
- }
233
-
234
- 50% {
235
- transform: translateY(-10px);
236
- }
237
- }
238
-
239
- @keyframes pulse-glow {
240
-
241
- 0%,
242
- 100% {
243
- opacity: 0.5;
244
- }
245
-
246
- 50% {
247
- opacity: 1;
248
- }
249
- }
250
-
251
- .animate-float {
252
- animation: float 6s ease-in-out infinite;
253
- }
254
-
255
- .animate-pulse-glow {
256
- animation: pulse-glow 4s ease-in-out infinite;
257
- }
258
-
259
- /* Scrollbar */
260
- ::-webkit-scrollbar {
261
- width: 8px;
262
- height: 8px;
263
- }
264
-
265
- ::-webkit-scrollbar-track {
266
- background: var(--color-bg-base);
267
- }
268
-
269
- ::-webkit-scrollbar-thumb {
270
- background: var(--color-border);
271
- border-radius: 4px;
272
- }
273
-
274
- ::-webkit-scrollbar-thumb:hover {
275
- background: var(--color-border-hover);
1
+ @import "tailwindcss";
2
+
3
+ /* ========================================
4
+ ANTIGRAVITY KIT - DESIGN SYSTEM
5
+ Dark Theme with Glassmorphism
6
+ ======================================== */
7
+
8
+ @theme {
9
+ /* Base Colors */
10
+ --color-bg-base: #0a0a0a;
11
+ --color-bg-elevated: #111111;
12
+ --color-bg-card: #161616;
13
+ --color-bg-terminal: #0d0d0d;
14
+ --color-bg-navbar: rgba(10, 10, 10, 0.8);
15
+
16
+ /* Syntax Highlighting Colors */
17
+ --color-syntax-purple: #c084fc;
18
+ --color-syntax-green: #22c55e;
19
+ --color-syntax-blue: #3b82f6;
20
+ --color-syntax-orange: #f97316;
21
+ --color-syntax-cyan: #22d3ee;
22
+ --color-syntax-yellow: #eab308;
23
+
24
+ /* Accent */
25
+ --color-accent: #c084fc;
26
+ --color-accent-hover: #d8b4fe;
27
+ --color-accent-glow: rgba(192, 132, 252, 0.15);
28
+
29
+ /* Text */
30
+ --color-text-primary: #f8fafc;
31
+ --color-text-secondary: #94a3b8;
32
+ --color-text-muted: #64748b;
33
+
34
+ /* Borders */
35
+ --color-border: #1e1e1e;
36
+ --color-border-hover: #333333;
37
+
38
+ /* Gradients */
39
+ --gradient-accent: linear-gradient(135deg, #c084fc 0%, #22c55e 100%);
40
+ --gradient-glow: radial-gradient(ellipse at center, rgba(192, 132, 252, 0.1) 0%, transparent 70%);
41
+
42
+ /* Shadows */
43
+ --shadow-glow: 0 0 60px rgba(192, 132, 252, 0.2);
44
+ --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
45
+ }
46
+
47
+ /* Base styles */
48
+ html {
49
+ scroll-behavior: smooth;
50
+ }
51
+
52
+ body {
53
+ background-color: var(--color-bg-base);
54
+ color: var(--color-text-primary);
55
+ min-height: 100vh;
56
+ }
57
+
58
+ /* Selection */
59
+ ::selection {
60
+ background-color: var(--color-accent);
61
+ color: white;
62
+ }
63
+
64
+ /* Gradient Text */
65
+ .gradient-text {
66
+ background: var(--gradient-accent);
67
+ -webkit-background-clip: text;
68
+ -webkit-text-fill-color: transparent;
69
+ background-clip: text;
70
+ }
71
+
72
+ /* Glass Card */
73
+ .glass-card {
74
+ background: var(--color-bg-card);
75
+ backdrop-filter: blur(12px);
76
+ -webkit-backdrop-filter: blur(12px);
77
+ border: 1px solid var(--color-border);
78
+ border-radius: 1rem;
79
+ transition: all 0.2s ease;
80
+ }
81
+
82
+ .glass-card:hover {
83
+ border-color: var(--color-border-hover);
84
+ background: rgba(255, 255, 255, 0.08);
85
+ }
86
+
87
+ /* Glass Navbar */
88
+ .glass-navbar {
89
+ background: var(--color-bg-navbar);
90
+ backdrop-filter: blur(16px);
91
+ -webkit-backdrop-filter: blur(16px);
92
+ border: 1px solid var(--color-border);
93
+ }
94
+
95
+ /* Background Glow */
96
+ .bg-glow {
97
+ position: absolute;
98
+ width: 600px;
99
+ height: 600px;
100
+ background: var(--gradient-glow);
101
+ filter: blur(80px);
102
+ pointer-events: none;
103
+ z-index: 0;
104
+ }
105
+
106
+ .bg-glow-accent {
107
+ background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
108
+ }
109
+
110
+ .bg-glow-purple {
111
+ background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
112
+ }
113
+
114
+ /* Button Primary */
115
+ .btn-primary {
116
+ display: inline-flex;
117
+ align-items: center;
118
+ gap: 0.5rem;
119
+ padding: 0.75rem 1.5rem;
120
+ background: var(--color-accent);
121
+ color: white;
122
+ font-weight: 500;
123
+ border-radius: 0.5rem;
124
+ transition: all 0.2s ease;
125
+ cursor: pointer;
126
+ }
127
+
128
+ .btn-primary:hover {
129
+ background: var(--color-accent-hover);
130
+ transform: translateY(-1px);
131
+ }
132
+
133
+ /* Button Secondary */
134
+ .btn-secondary {
135
+ display: inline-flex;
136
+ align-items: center;
137
+ gap: 0.5rem;
138
+ padding: 0.75rem 1.5rem;
139
+ background: transparent;
140
+ color: var(--color-text-primary);
141
+ font-weight: 500;
142
+ border: 1px solid var(--color-border);
143
+ border-radius: 0.5rem;
144
+ transition: all 0.2s ease;
145
+ cursor: pointer;
146
+ }
147
+
148
+ .btn-secondary:hover {
149
+ background: var(--color-bg-card);
150
+ border-color: var(--color-border-hover);
151
+ }
152
+
153
+ /* Badge */
154
+ .badge {
155
+ display: inline-flex;
156
+ align-items: center;
157
+ gap: 0.375rem;
158
+ padding: 0.375rem 0.75rem;
159
+ background: var(--color-bg-card);
160
+ border: 1px solid var(--color-border);
161
+ border-radius: 9999px;
162
+ font-size: 0.875rem;
163
+ color: var(--color-text-secondary);
164
+ }
165
+
166
+ .badge-accent {
167
+ background: var(--color-accent-glow);
168
+ border-color: rgba(59, 130, 246, 0.3);
169
+ color: var(--color-accent-hover);
170
+ }
171
+
172
+ /* Section */
173
+ .section {
174
+ position: relative;
175
+ padding: 5rem 1.5rem;
176
+ }
177
+
178
+ @media (min-width: 768px) {
179
+ .section {
180
+ padding: 6rem 2rem;
181
+ }
182
+ }
183
+
184
+ /* Container */
185
+ .container-content {
186
+ max-width: 1200px;
187
+ margin: 0 auto;
188
+ }
189
+
190
+ /* Heading Styles */
191
+ .heading-xl {
192
+ font-size: clamp(2.5rem, 6vw, 4rem);
193
+ font-weight: 700;
194
+ line-height: 1.1;
195
+ letter-spacing: -0.02em;
196
+ }
197
+
198
+ .heading-lg {
199
+ font-size: clamp(1.75rem, 4vw, 2.5rem);
200
+ font-weight: 700;
201
+ line-height: 1.2;
202
+ letter-spacing: -0.01em;
203
+ }
204
+
205
+ .heading-md {
206
+ font-size: 1.25rem;
207
+ font-weight: 600;
208
+ line-height: 1.3;
209
+ }
210
+
211
+ /* Body Text */
212
+ .text-body {
213
+ color: var(--color-text-secondary);
214
+ line-height: 1.7;
215
+ }
216
+
217
+ /* Icon wrapper */
218
+ .icon-wrapper {
219
+ display: flex;
220
+ align-items: center;
221
+ justify-content: center;
222
+ width: 3rem;
223
+ height: 3rem;
224
+ background: var(--color-accent-glow);
225
+ border: 1px solid rgba(59, 130, 246, 0.3);
226
+ border-radius: 0.75rem;
227
+ color: var(--color-accent);
228
+ }
229
+
230
+ /* Code Block */
231
+ .code-block {
232
+ background: rgba(0, 0, 0, 0.4);
233
+ border: 1px solid var(--color-border);
234
+ border-radius: 0.5rem;
235
+ padding: 1rem;
236
+ font-family: var(--font-geist-mono);
237
+ font-size: 0.875rem;
238
+ color: var(--color-text-secondary);
239
+ overflow-x: auto;
240
+ }
241
+
242
+ /* Animations */
243
+ @keyframes float {
244
+
245
+ 0%,
246
+ 100% {
247
+ transform: translateY(0);
248
+ }
249
+
250
+ 50% {
251
+ transform: translateY(-10px);
252
+ }
253
+ }
254
+
255
+ @keyframes pulse-glow {
256
+
257
+ 0%,
258
+ 100% {
259
+ opacity: 0.5;
260
+ }
261
+
262
+ 50% {
263
+ opacity: 1;
264
+ }
265
+ }
266
+
267
+ @keyframes gradient-shift {
268
+ 0% {
269
+ background-position: 0% 50%;
270
+ }
271
+
272
+ 50% {
273
+ background-position: 100% 50%;
274
+ }
275
+
276
+ 100% {
277
+ background-position: 0% 50%;
278
+ }
279
+ }
280
+
281
+ @keyframes aurora {
282
+ 0% {
283
+ transform: translate(0, 0) rotate(0deg) scale(1);
284
+ }
285
+
286
+ 33% {
287
+ transform: translate(30px, -30px) rotate(120deg) scale(1.1);
288
+ }
289
+
290
+ 66% {
291
+ transform: translate(-20px, 20px) rotate(240deg) scale(0.9);
292
+ }
293
+
294
+ 100% {
295
+ transform: translate(0, 0) rotate(360deg) scale(1);
296
+ }
297
+ }
298
+
299
+ @keyframes typing-cursor {
300
+
301
+ 0%,
302
+ 100% {
303
+ opacity: 1;
304
+ }
305
+
306
+ 50% {
307
+ opacity: 0;
308
+ }
309
+ }
310
+
311
+ .animate-float {
312
+ animation: float 6s ease-in-out infinite;
313
+ }
314
+
315
+ .animate-pulse-glow {
316
+ animation: pulse-glow 4s ease-in-out infinite;
317
+ }
318
+
319
+ /* Animated Gradient Text */
320
+ .animate-gradient-text {
321
+ background: linear-gradient(90deg, #c084fc, #22c55e, #3b82f6, #f97316, #c084fc);
322
+ background-size: 300% 100%;
323
+ -webkit-background-clip: text;
324
+ background-clip: text;
325
+ -webkit-text-fill-color: transparent;
326
+ animation: gradient-shift 4s ease infinite;
327
+ }
328
+
329
+ /* Aurora Background */
330
+ .aurora-blob {
331
+ position: absolute;
332
+ border-radius: 50%;
333
+ filter: blur(80px);
334
+ opacity: 0.4;
335
+ pointer-events: none;
336
+ animation: aurora 20s ease-in-out infinite;
337
+ }
338
+
339
+ .aurora-blob-1 {
340
+ width: 500px;
341
+ height: 500px;
342
+ background: radial-gradient(circle, rgba(192, 132, 252, 0.5) 0%, transparent 70%);
343
+ top: 10%;
344
+ left: 20%;
345
+ animation-delay: 0s;
346
+ }
347
+
348
+ .aurora-blob-2 {
349
+ width: 400px;
350
+ height: 400px;
351
+ background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, transparent 70%);
352
+ top: 40%;
353
+ right: 15%;
354
+ animation-delay: -7s;
355
+ }
356
+
357
+ .aurora-blob-3 {
358
+ width: 350px;
359
+ height: 350px;
360
+ background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
361
+ bottom: 20%;
362
+ left: 30%;
363
+ animation-delay: -14s;
364
+ }
365
+
366
+ /* Typing Cursor */
367
+ .typing-cursor::after {
368
+ content: '|';
369
+ animation: typing-cursor 1s step-end infinite;
370
+ color: #22c55e;
371
+ margin-left: 2px;
372
+ }
373
+
374
+ /* Scrollbar */
375
+ ::-webkit-scrollbar {
376
+ width: 8px;
377
+ height: 8px;
378
+ }
379
+
380
+ ::-webkit-scrollbar-track {
381
+ background: var(--color-bg-base);
382
+ }
383
+
384
+ ::-webkit-scrollbar-thumb {
385
+ background: var(--color-border);
386
+ border-radius: 4px;
387
+ }
388
+
389
+ ::-webkit-scrollbar-thumb:hover {
390
+ background: var(--color-border-hover);
276
391
  }