@vudovn/antigravity-kit 1.0.1 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -50
- package/bin/index.js +45 -0
- package/package.json +38 -38
- package/templates/.agent/skills/vue-expert/SKILL.md +374 -0
- package/templates/web/README.md +36 -36
- package/templates/web/eslint.config.mjs +18 -18
- package/templates/web/next.config.ts +8 -8
- package/templates/web/package-lock.json +6549 -6549
- package/templates/web/package.json +26 -26
- package/templates/web/postcss.config.mjs +7 -7
- package/templates/web/public/images/ux-ui-pro-max.svg +1 -0
- package/templates/web/src/app/globals.css +390 -275
- package/templates/web/src/app/layout.tsx +55 -55
- package/templates/web/src/app/page.tsx +23 -23
- package/templates/web/src/components/Credits.tsx +29 -119
- package/templates/web/src/components/Features.tsx +112 -55
- package/templates/web/src/components/Footer.tsx +73 -45
- package/templates/web/src/components/Hero.tsx +246 -75
- package/templates/web/src/components/HowItWorks.tsx +99 -56
- package/templates/web/src/components/Navbar.tsx +48 -70
- package/templates/web/src/components/Skills.tsx +84 -115
- package/templates/web/tsconfig.json +34 -34
- package/templates/web/public/images/antigravity-kit-logo.png +0 -0
|
@@ -1,95 +1,138 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
|
|
5
|
+
// Icons
|
|
6
|
+
const CopyIcon = () => (
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
|
|
8
|
+
<path d="M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z" />
|
|
9
|
+
<path d="M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z" />
|
|
5
10
|
</svg>
|
|
6
11
|
);
|
|
7
12
|
|
|
8
|
-
const
|
|
9
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
|
|
10
|
-
<path fillRule="evenodd" d="
|
|
13
|
+
const CheckIcon = () => (
|
|
14
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
|
|
15
|
+
<path fillRule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clipRule="evenodd" />
|
|
11
16
|
</svg>
|
|
12
17
|
);
|
|
13
18
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
+
// Terminal dots component
|
|
20
|
+
const TerminalDots = () => (
|
|
21
|
+
<div className="flex items-center gap-1.5">
|
|
22
|
+
<div className="w-3 h-3 rounded-full bg-[#ff5f56]" />
|
|
23
|
+
<div className="w-3 h-3 rounded-full bg-[#ffbd2e]" />
|
|
24
|
+
<div className="w-3 h-3 rounded-full bg-[#27c93f]" />
|
|
25
|
+
</div>
|
|
19
26
|
);
|
|
20
27
|
|
|
21
28
|
const steps = [
|
|
22
29
|
{
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
30
|
+
title: "Install globally",
|
|
31
|
+
command: "npm",
|
|
32
|
+
args: "install -g @vudovn/antigravity-kit",
|
|
33
|
+
copyable: true,
|
|
27
34
|
},
|
|
28
35
|
{
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
36
|
+
title: "Initialize in your project",
|
|
37
|
+
command: "ag-kit",
|
|
38
|
+
args: "init",
|
|
39
|
+
copyable: true,
|
|
33
40
|
},
|
|
34
41
|
{
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
42
|
+
title: "Start coding",
|
|
43
|
+
command: "# Ready!",
|
|
44
|
+
args: "Skills auto-apply",
|
|
45
|
+
copyable: false,
|
|
46
|
+
isComment: true,
|
|
39
47
|
},
|
|
40
48
|
];
|
|
41
49
|
|
|
42
50
|
export default function HowItWorks() {
|
|
51
|
+
const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
|
|
52
|
+
|
|
53
|
+
const handleCopy = async (command: string, args: string, index: number) => {
|
|
54
|
+
await navigator.clipboard.writeText(`${command} ${args}`);
|
|
55
|
+
setCopiedIndex(index);
|
|
56
|
+
setTimeout(() => setCopiedIndex(null), 2000);
|
|
57
|
+
};
|
|
58
|
+
|
|
43
59
|
return (
|
|
44
60
|
<section id="how-it-works" className="section relative overflow-hidden">
|
|
45
|
-
{/* Background Glow */}
|
|
46
|
-
<div className="bg-glow bg-glow-accent right-0 top-0 translate-x-1/2" />
|
|
47
|
-
|
|
48
61
|
<div className="container-content relative z-10">
|
|
49
62
|
{/* Section Header */}
|
|
50
|
-
<div className="text-center mb-
|
|
63
|
+
<div className="text-center mb-12">
|
|
64
|
+
<p className="text-[#c084fc] font-mono text-sm mb-3 tracking-wider">// QUICK START</p>
|
|
51
65
|
<h2 className="heading-lg mb-4">
|
|
52
|
-
Get Started in <span className="
|
|
66
|
+
Get Started in <span className="text-[#22c55e]">3 Steps</span>
|
|
53
67
|
</h2>
|
|
54
|
-
<p className="text-body max-w-
|
|
55
|
-
|
|
56
|
-
capabilities in your project.
|
|
68
|
+
<p className="text-body max-w-xl mx-auto">
|
|
69
|
+
One command to unlock 35+ expert skills for your AI coding assistant.
|
|
57
70
|
</p>
|
|
58
71
|
</div>
|
|
59
72
|
|
|
60
|
-
{/*
|
|
61
|
-
<div className="
|
|
62
|
-
{
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
73
|
+
{/* Terminal Window */}
|
|
74
|
+
<div className="max-w-2xl mx-auto">
|
|
75
|
+
{/* Terminal Header */}
|
|
76
|
+
<div className="bg-[#1e1e1e] rounded-t-xl px-4 py-3 flex items-center justify-between border-b border-[#333]">
|
|
77
|
+
<TerminalDots />
|
|
78
|
+
<span className="text-[#6b7280] text-sm font-mono">Terminal</span>
|
|
79
|
+
<div className="w-12" /> {/* Spacer for balance */}
|
|
80
|
+
</div>
|
|
68
81
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
82
|
+
{/* Terminal Body */}
|
|
83
|
+
<div className="bg-[#0d0d0d] rounded-b-xl p-6 font-mono text-sm border border-t-0 border-[#333]">
|
|
84
|
+
{steps.map((step, index) => (
|
|
85
|
+
<div
|
|
86
|
+
key={index}
|
|
87
|
+
className={`group flex items-start gap-3 ${index !== steps.length - 1 ? 'mb-4' : ''
|
|
88
|
+
}`}
|
|
89
|
+
>
|
|
90
|
+
{/* Line number */}
|
|
91
|
+
<span className="text-[#4a5568] select-none w-6 text-right shrink-0">
|
|
92
|
+
{index + 1}
|
|
93
|
+
</span>
|
|
72
94
|
|
|
73
|
-
{/*
|
|
74
|
-
<
|
|
95
|
+
{/* Command line */}
|
|
96
|
+
<div className="flex-1 flex items-center gap-2">
|
|
97
|
+
{/* Prompt symbol */}
|
|
98
|
+
<span className="text-[#22c55e]">$</span>
|
|
75
99
|
|
|
76
|
-
|
|
77
|
-
|
|
100
|
+
{/* Command */}
|
|
101
|
+
<span className={step.isComment ? "text-[#6b7280]" : "text-[#c084fc]"}>
|
|
102
|
+
{step.command}
|
|
103
|
+
</span>
|
|
78
104
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
105
|
+
{/* Arguments */}
|
|
106
|
+
<span className={step.isComment ? "text-[#6b7280]" : "text-[#f8fafc]"}>
|
|
107
|
+
{step.args}
|
|
108
|
+
</span>
|
|
109
|
+
|
|
110
|
+
{/* Copy button */}
|
|
111
|
+
{step.copyable && (
|
|
112
|
+
<button
|
|
113
|
+
onClick={() => handleCopy(step.command, step.args, index)}
|
|
114
|
+
className="ml-auto opacity-0 group-hover:opacity-100 p-1.5 rounded hover:bg-white/10 transition-all text-[#6b7280] hover:text-[#c084fc] cursor-pointer"
|
|
115
|
+
aria-label="Copy to clipboard"
|
|
116
|
+
>
|
|
117
|
+
{copiedIndex === index ? (
|
|
118
|
+
<span className="text-[#22c55e]"><CheckIcon /></span>
|
|
119
|
+
) : (
|
|
120
|
+
<CopyIcon />
|
|
121
|
+
)}
|
|
122
|
+
</button>
|
|
123
|
+
)}
|
|
82
124
|
</div>
|
|
83
125
|
</div>
|
|
126
|
+
))}
|
|
84
127
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
128
|
+
{/* Cursor blink */}
|
|
129
|
+
<div className="flex items-center gap-3 mt-4">
|
|
130
|
+
<span className="text-[#4a5568] select-none w-6 text-right shrink-0">4</span>
|
|
131
|
+
<span className="text-[#22c55e]">$</span>
|
|
132
|
+
<span className="w-2 h-5 bg-[#22c55e] animate-pulse" />
|
|
89
133
|
</div>
|
|
90
|
-
|
|
134
|
+
</div>
|
|
91
135
|
</div>
|
|
92
|
-
|
|
93
136
|
</div>
|
|
94
137
|
</section>
|
|
95
138
|
);
|
|
@@ -1,87 +1,65 @@
|
|
|
1
1
|
import Link from "next/link";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
-
viewBox="0 0 24 24"
|
|
8
|
-
fill="currentColor"
|
|
9
|
-
className="w-6 h-6"
|
|
10
|
-
>
|
|
11
|
-
<path
|
|
12
|
-
fillRule="evenodd"
|
|
13
|
-
d="M9.315 7.584C12.195 3.883 16.695 1.5 21.75 1.5a.75.75 0 0 1 .75.75c0 5.056-2.383 9.555-6.084 12.436A6.75 6.75 0 0 1 9.75 22.5a.75.75 0 0 1-.75-.75v-4.131A15.838 15.838 0 0 1 6.382 15H2.25a.75.75 0 0 1-.75-.75 6.75 6.75 0 0 1 7.815-6.666ZM15 6.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z"
|
|
14
|
-
clipRule="evenodd"
|
|
15
|
-
/>
|
|
16
|
-
<path d="M5.26 17.242a.75.75 0 1 0-.897-1.203 5.243 5.243 0 0 0-2.05 5.022.75.75 0 0 0 .625.627 5.243 5.243 0 0 0 5.022-2.051.75.75 0 1 0-1.202-.897 3.744 3.744 0 0 1-3.008 1.51c0-1.23.592-2.323 1.51-3.008Z" />
|
|
3
|
+
const GitHubIcon = () => (
|
|
4
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
|
|
5
|
+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
|
17
6
|
</svg>
|
|
18
7
|
);
|
|
19
8
|
|
|
20
|
-
const
|
|
21
|
-
<svg
|
|
22
|
-
|
|
23
|
-
viewBox="0 0 24 24"
|
|
24
|
-
fill="currentColor"
|
|
25
|
-
className="w-5 h-5"
|
|
26
|
-
>
|
|
27
|
-
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
|
9
|
+
const HeartIcon = () => (
|
|
10
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
|
|
11
|
+
<path d="m9.653 16.915-.005-.003-.019-.01a20.759 20.759 0 0 1-1.162-.682 22.045 22.045 0 0 1-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 0 1 8-2.828A4.5 4.5 0 0 1 18 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 0 1-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 0 1-.69.001l-.002-.001Z" />
|
|
28
12
|
</svg>
|
|
29
13
|
);
|
|
30
14
|
|
|
15
|
+
const navLinks = [
|
|
16
|
+
{ href: "#features", label: "Features" },
|
|
17
|
+
{ href: "#skills", label: "Skills" },
|
|
18
|
+
{ href: "#how-it-works", label: "Install" },
|
|
19
|
+
];
|
|
20
|
+
|
|
31
21
|
export default function Navbar() {
|
|
32
22
|
return (
|
|
33
|
-
<nav className="fixed top-
|
|
34
|
-
<div className="
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
<
|
|
23
|
+
<nav className="fixed top-0 left-0 right-0 z-50 border-b border-[var(--color-border)]">
|
|
24
|
+
<div className="bg-[var(--color-bg-navbar)] backdrop-blur-xl">
|
|
25
|
+
<div className="max-w-6xl mx-auto px-4 h-14 flex items-center justify-between">
|
|
26
|
+
{/* Logo */}
|
|
27
|
+
<Link href="/#hero" className="flex items-center gap-2 cursor-pointer group">
|
|
28
|
+
<span className="text-[#64748b] font-mono text-sm">~/</span>
|
|
29
|
+
<span className="font-mono font-semibold text-white group-hover:text-[var(--color-accent)] transition-colors">
|
|
30
|
+
antigravity-kit
|
|
31
|
+
</span>
|
|
32
|
+
</Link>
|
|
33
|
+
|
|
34
|
+
{/* Navigation Links */}
|
|
35
|
+
<div className="hidden md:flex items-center gap-1">
|
|
36
|
+
{navLinks.map((link) => (
|
|
37
|
+
<a
|
|
38
|
+
key={link.href}
|
|
39
|
+
href={link.href}
|
|
40
|
+
className="px-3 py-1.5 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-accent)] transition-colors cursor-pointer font-mono"
|
|
41
|
+
>
|
|
42
|
+
{link.label}
|
|
43
|
+
</a>
|
|
44
|
+
))}
|
|
40
45
|
</div>
|
|
41
|
-
<span className="font-semibold text-lg hidden sm:inline">
|
|
42
|
-
Antigravity Kit
|
|
43
|
-
</span>
|
|
44
|
-
</Link>
|
|
45
46
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
</a>
|
|
60
|
-
<a
|
|
61
|
-
href="#how-it-works"
|
|
62
|
-
className="text-[var(--color-text-secondary)] hover:text-white transition-colors cursor-pointer"
|
|
63
|
-
>
|
|
64
|
-
How It Works
|
|
65
|
-
</a>
|
|
66
|
-
<a
|
|
67
|
-
href="#credits"
|
|
68
|
-
className="text-[var(--color-text-secondary)] hover:text-white transition-colors cursor-pointer"
|
|
69
|
-
>
|
|
70
|
-
Credits
|
|
71
|
-
</a>
|
|
47
|
+
{/* Right side actions */}
|
|
48
|
+
<div className="flex items-center gap-2">
|
|
49
|
+
{/* Donate link */}
|
|
50
|
+
<a
|
|
51
|
+
href="https://img.vietqr.io/image/mbbank-0779440918-compact2.jpg"
|
|
52
|
+
target="_blank"
|
|
53
|
+
rel="noopener noreferrer"
|
|
54
|
+
className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md bg-gradient-to-r from-pink-500 to-red-500 text-white hover:from-pink-600 hover:to-red-600 transition-all cursor-pointer shadow-lg shadow-pink-500/20"
|
|
55
|
+
>
|
|
56
|
+
<HeartIcon />
|
|
57
|
+
<span>Donate</span>
|
|
58
|
+
</a>
|
|
59
|
+
</div>
|
|
72
60
|
</div>
|
|
73
|
-
|
|
74
|
-
{/* GitHub Link */}
|
|
75
|
-
<a
|
|
76
|
-
href="https://github.com/vudovn/antigravity-kit"
|
|
77
|
-
target="_blank"
|
|
78
|
-
rel="noopener noreferrer"
|
|
79
|
-
className="flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-bg-card)] border border-[var(--color-border)] hover:border-[var(--color-border-hover)] transition-colors cursor-pointer"
|
|
80
|
-
>
|
|
81
|
-
<GitHubIcon />
|
|
82
|
-
<span className="hidden sm:inline text-sm">GitHub</span>
|
|
83
|
-
</a>
|
|
84
61
|
</div>
|
|
85
62
|
</nav>
|
|
86
63
|
);
|
|
87
64
|
}
|
|
65
|
+
|
|
@@ -2,180 +2,149 @@
|
|
|
2
2
|
|
|
3
3
|
import { useState } from "react";
|
|
4
4
|
|
|
5
|
-
//
|
|
6
|
-
const CodeIcon = () => (
|
|
7
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
|
|
8
|
-
<path fillRule="evenodd" d="M14.447 3.026a.75.75 0 0 1 .527.921l-4.5 16.5a.75.75 0 0 1-1.448-.394l4.5-16.5a.75.75 0 0 1 .921-.527ZM16.72 6.22a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 1 1-1.06-1.06L21.44 12l-4.72-4.72a.75.75 0 0 1 0-1.06Zm-9.44 0a.75.75 0 0 1 0 1.06L2.56 12l4.72 4.72a.75.75 0 0 1-1.06 1.06L.97 12.53a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Z" clipRule="evenodd" />
|
|
9
|
-
</svg>
|
|
10
|
-
);
|
|
11
|
-
|
|
12
|
-
const ServerIcon = () => (
|
|
13
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
|
|
14
|
-
<path d="M4.08 5.227A3 3 0 0 1 6.979 3H17.02a3 3 0 0 1 2.9 2.227l2.113 7.926A5.228 5.228 0 0 0 18.75 12H5.25a5.228 5.228 0 0 0-3.284 1.153L4.08 5.227Z" />
|
|
15
|
-
<path fillRule="evenodd" d="M5.25 13.5a3.75 3.75 0 1 0 0 7.5h13.5a3.75 3.75 0 1 0 0-7.5H5.25Zm10.5 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm3.75-.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" clipRule="evenodd" />
|
|
16
|
-
</svg>
|
|
17
|
-
);
|
|
18
|
-
|
|
19
|
-
const CircleStackIcon = () => (
|
|
20
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
|
|
21
|
-
<path d="M21 6.375c0 2.692-4.03 4.875-9 4.875S3 9.067 3 6.375 7.03 1.5 12 1.5s9 2.183 9 4.875Z" />
|
|
22
|
-
<path d="M12 12.75c2.685 0 5.19-.586 7.078-1.609a8.283 8.283 0 0 0 1.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.285 8.285 0 0 0 1.897 1.384C6.809 12.164 9.315 12.75 12 12.75Z" />
|
|
23
|
-
<path d="M12 18.75c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 0 0 1.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 0 0 1.897 1.384C6.809 18.164 9.315 18.75 12 18.75Z" />
|
|
24
|
-
</svg>
|
|
25
|
-
);
|
|
26
|
-
|
|
27
|
-
const BeakerIcon = () => (
|
|
28
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
|
|
29
|
-
<path fillRule="evenodd" d="M10.5 3.798v5.02a3 3 0 0 1-.879 2.121l-2.377 2.377a9.845 9.845 0 0 1 5.091 1.013 8.315 8.315 0 0 0 5.713.636l.285-.071-3.954-3.955a3 3 0 0 1-.879-2.121v-5.02a23.614 23.614 0 0 0-3 0Zm4.5.138a.75.75 0 0 0 .093-1.495A24.837 24.837 0 0 0 12 2.25a25.048 25.048 0 0 0-3.093.191A.75.75 0 0 0 9 3.936v4.882a1.5 1.5 0 0 1-.44 1.06l-6.293 6.294c-1.62 1.621-.903 4.475 1.471 4.88 2.686.46 5.447.698 8.262.698 2.816 0 5.576-.239 8.262-.697 2.373-.406 3.092-3.26 1.47-4.881L15.44 9.879A1.5 1.5 0 0 1 15 8.818V3.936Z" clipRule="evenodd" />
|
|
30
|
-
</svg>
|
|
31
|
-
);
|
|
32
|
-
|
|
33
|
-
const CloudIcon = () => (
|
|
34
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
|
|
35
|
-
<path fillRule="evenodd" d="M4.5 9.75a6 6 0 0 1 11.573-2.226 3.75 3.75 0 0 1 4.133 4.303A4.5 4.5 0 0 1 18 20.25H6.75a5.25 5.25 0 0 1-2.23-10.004 6.072 6.072 0 0 1-.02-.496Z" clipRule="evenodd" />
|
|
36
|
-
</svg>
|
|
37
|
-
);
|
|
38
|
-
|
|
39
|
-
const SparklesIcon = () => (
|
|
40
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
|
|
41
|
-
<path fillRule="evenodd" d="M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5Z" clipRule="evenodd" />
|
|
42
|
-
</svg>
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
// Skills data by category
|
|
5
|
+
// Skill categories with syntax highlighting colors
|
|
46
6
|
const skillCategories = [
|
|
47
7
|
{
|
|
48
8
|
id: "frontend",
|
|
49
9
|
name: "Frontend",
|
|
50
|
-
|
|
10
|
+
color: "#c084fc",
|
|
51
11
|
skills: [
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
12
|
+
"react-expert",
|
|
13
|
+
"nextjs-expert",
|
|
14
|
+
"vue-expert",
|
|
15
|
+
"css-styling-expert",
|
|
16
|
+
"state-management-expert",
|
|
17
|
+
"ui-ux-pro-max",
|
|
57
18
|
],
|
|
58
19
|
},
|
|
59
20
|
{
|
|
60
21
|
id: "backend",
|
|
61
22
|
name: "Backend",
|
|
62
|
-
|
|
23
|
+
color: "#22c55e",
|
|
63
24
|
skills: [
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
25
|
+
"nodejs-expert",
|
|
26
|
+
"nestjs-expert",
|
|
27
|
+
"rest-api-expert",
|
|
28
|
+
"auth-expert",
|
|
68
29
|
],
|
|
69
30
|
},
|
|
70
31
|
{
|
|
71
32
|
id: "database",
|
|
72
33
|
name: "Database",
|
|
73
|
-
|
|
34
|
+
color: "#3b82f6",
|
|
74
35
|
skills: [
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
36
|
+
"prisma-expert",
|
|
37
|
+
"postgres-expert",
|
|
38
|
+
"mongodb-expert",
|
|
39
|
+
"database-expert",
|
|
79
40
|
],
|
|
80
41
|
},
|
|
81
42
|
{
|
|
82
43
|
id: "testing",
|
|
83
44
|
name: "Testing",
|
|
84
|
-
|
|
45
|
+
color: "#f97316",
|
|
85
46
|
skills: [
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
47
|
+
"testing-expert",
|
|
48
|
+
"jest-testing-expert",
|
|
49
|
+
"vitest-testing-expert",
|
|
50
|
+
"playwright-expert",
|
|
90
51
|
],
|
|
91
52
|
},
|
|
92
53
|
{
|
|
93
54
|
id: "devops",
|
|
94
55
|
name: "DevOps",
|
|
95
|
-
|
|
56
|
+
color: "#22d3ee",
|
|
96
57
|
skills: [
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
58
|
+
"devops-expert",
|
|
59
|
+
"docker-expert",
|
|
60
|
+
"github-actions-expert",
|
|
61
|
+
"git-expert",
|
|
101
62
|
],
|
|
102
63
|
},
|
|
103
64
|
{
|
|
104
65
|
id: "quality",
|
|
105
|
-
name: "
|
|
106
|
-
|
|
66
|
+
name: "Quality",
|
|
67
|
+
color: "#eab308",
|
|
107
68
|
skills: [
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
69
|
+
"code-review",
|
|
70
|
+
"refactoring-expert",
|
|
71
|
+
"typescript-expert",
|
|
72
|
+
"accessibility-expert",
|
|
112
73
|
],
|
|
113
74
|
},
|
|
114
75
|
];
|
|
115
76
|
|
|
116
77
|
export default function Skills() {
|
|
117
78
|
const [activeCategory, setActiveCategory] = useState("frontend");
|
|
118
|
-
|
|
119
79
|
const currentCategory = skillCategories.find((c) => c.id === activeCategory);
|
|
120
80
|
|
|
121
81
|
return (
|
|
122
|
-
<section id="skills" className="
|
|
123
|
-
|
|
124
|
-
<div className="bg-glow bg-glow-purple left-0 top-1/2 -translate-y-1/2 -translate-x-1/2" />
|
|
125
|
-
|
|
126
|
-
<div className="container-content relative z-10">
|
|
82
|
+
<section id="skills" className="py-20 px-4 border-t border-[var(--color-border)]">
|
|
83
|
+
<div className="max-w-5xl mx-auto">
|
|
127
84
|
{/* Section Header */}
|
|
128
85
|
<div className="text-center mb-12">
|
|
129
|
-
<
|
|
130
|
-
|
|
86
|
+
<p className="text-[#c084fc] font-mono text-sm mb-3">// SKILLS</p>
|
|
87
|
+
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
|
88
|
+
<span className="text-[#22c55e]">35+</span> Domain Expert Skills
|
|
131
89
|
</h2>
|
|
132
|
-
<p className="text-
|
|
133
|
-
The agent automatically identifies and
|
|
134
|
-
for each task, bringing domain expertise to every interaction.
|
|
90
|
+
<p className="text-[var(--color-text-secondary)] max-w-xl mx-auto">
|
|
91
|
+
The agent automatically identifies and applies the right skill for each task.
|
|
135
92
|
</p>
|
|
136
93
|
</div>
|
|
137
94
|
|
|
138
95
|
{/* Category Tabs */}
|
|
139
96
|
<div className="flex flex-wrap justify-center gap-2 mb-8">
|
|
140
|
-
{skillCategories.map((
|
|
97
|
+
{skillCategories.map((cat) => (
|
|
141
98
|
<button
|
|
142
|
-
key={
|
|
143
|
-
onClick={() => setActiveCategory(
|
|
144
|
-
className={`
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
99
|
+
key={cat.id}
|
|
100
|
+
onClick={() => setActiveCategory(cat.id)}
|
|
101
|
+
className={`px-4 py-2 rounded-lg text-sm font-mono transition-all cursor-pointer ${activeCategory === cat.id
|
|
102
|
+
? "bg-[var(--color-bg-elevated)] border-2"
|
|
103
|
+
: "bg-transparent border border-[var(--color-border)] text-[var(--color-text-secondary)] hover:border-[var(--color-border-hover)]"
|
|
104
|
+
}`}
|
|
105
|
+
style={{
|
|
106
|
+
borderColor: activeCategory === cat.id ? cat.color : undefined,
|
|
107
|
+
color: activeCategory === cat.id ? cat.color : undefined,
|
|
108
|
+
}}
|
|
152
109
|
>
|
|
153
|
-
{
|
|
154
|
-
{category.name}
|
|
110
|
+
{cat.name}
|
|
155
111
|
</button>
|
|
156
112
|
))}
|
|
157
113
|
</div>
|
|
158
114
|
|
|
159
|
-
{/* Skills
|
|
160
|
-
<div className="
|
|
161
|
-
{
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
className="
|
|
165
|
-
|
|
166
|
-
<
|
|
167
|
-
{skill.name}
|
|
168
|
-
</code>
|
|
169
|
-
<p className="text-body text-sm mt-2">{skill.description}</p>
|
|
115
|
+
{/* Skills Display - Code Block Style */}
|
|
116
|
+
<div className="bg-[#0d0d0d] rounded-xl border border-[var(--color-border)] overflow-hidden">
|
|
117
|
+
{/* Header */}
|
|
118
|
+
<div className="px-4 py-3 border-b border-[var(--color-border)] flex items-center justify-between">
|
|
119
|
+
<div className="flex items-center gap-1.5">
|
|
120
|
+
<div className="w-3 h-3 rounded-full bg-[#ff5f56]" />
|
|
121
|
+
<div className="w-3 h-3 rounded-full bg-[#ffbd2e]" />
|
|
122
|
+
<div className="w-3 h-3 rounded-full bg-[#27c93f]" />
|
|
170
123
|
</div>
|
|
171
|
-
|
|
172
|
-
|
|
124
|
+
<span className="text-xs text-[#64748b] font-mono">
|
|
125
|
+
.agent/skills/{activeCategory}/
|
|
126
|
+
</span>
|
|
127
|
+
<div className="w-12" />
|
|
128
|
+
</div>
|
|
173
129
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
130
|
+
{/* Skills List */}
|
|
131
|
+
<div className="p-6 font-mono text-sm">
|
|
132
|
+
{currentCategory?.skills.map((skill, index) => (
|
|
133
|
+
<div key={index} className="flex items-center gap-3 py-1.5">
|
|
134
|
+
<span className="text-[#64748b] w-4 text-right">{index + 1}</span>
|
|
135
|
+
<span className="text-[#64748b]">├──</span>
|
|
136
|
+
<span style={{ color: currentCategory.color }}>{skill}</span>
|
|
137
|
+
<span className="text-[#64748b]">/SKILL.md</span>
|
|
138
|
+
</div>
|
|
139
|
+
))}
|
|
140
|
+
<div className="flex items-center gap-3 py-1.5 mt-2">
|
|
141
|
+
<span className="text-[#64748b] w-4" />
|
|
142
|
+
<span className="text-[#64748b] text-xs">
|
|
143
|
+
+ {35 - (currentCategory?.skills.length || 0)} more skills...
|
|
144
|
+
</span>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
179
148
|
</div>
|
|
180
149
|
</section>
|
|
181
150
|
);
|