@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.
- package/README.md +6 -47
- package/bin/index.js +45 -0
- package/package.json +39 -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,72 +1,100 @@
|
|
|
1
|
-
// Social Icons
|
|
2
1
|
const GitHubIcon = () => (
|
|
3
2
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
|
|
4
3
|
<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" />
|
|
5
4
|
</svg>
|
|
6
5
|
);
|
|
7
6
|
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
const links = [
|
|
8
|
+
{ label: "Features", href: "#features" },
|
|
9
|
+
{ label: "Skills", href: "#skills" },
|
|
10
|
+
{ label: "Install", href: "#how-it-works" },
|
|
11
|
+
{ label: "Credits", href: "#credits" },
|
|
12
|
+
];
|
|
13
13
|
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
);
|
|
14
|
+
const resources = [
|
|
15
|
+
{ label: "Documentation", href: "https://github.com/vudovn/antigravity-kit#readme" },
|
|
16
|
+
{ label: "GitHub", href: "https://github.com/vudovn/antigravity-kit" },
|
|
17
|
+
{ label: "Issues", href: "https://github.com/vudovn/antigravity-kit/issues" },
|
|
18
|
+
];
|
|
20
19
|
|
|
21
20
|
export default function Footer() {
|
|
22
21
|
return (
|
|
23
|
-
<footer className="border-t border-[var(--color-border)]
|
|
24
|
-
<div className="
|
|
25
|
-
<div className="
|
|
26
|
-
{/*
|
|
27
|
-
<div className="
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
22
|
+
<footer className="py-12 px-4 border-t border-[var(--color-border)]">
|
|
23
|
+
<div className="max-w-5xl mx-auto">
|
|
24
|
+
<div className="grid md:grid-cols-4 gap-8 mb-12">
|
|
25
|
+
{/* Brand */}
|
|
26
|
+
<div className="md:col-span-2">
|
|
27
|
+
<div className="flex items-center gap-2 mb-3">
|
|
28
|
+
<span className="text-[#64748b] font-mono text-sm">~/</span>
|
|
29
|
+
<span className="font-mono font-semibold text-white">antigravity-kit</span>
|
|
30
|
+
</div>
|
|
31
|
+
<p className="text-sm text-[var(--color-text-secondary)] mb-4 max-w-sm">
|
|
32
|
+
A comprehensive collection of skills, rules, and workflows to supercharge your AI coding assistant.
|
|
33
|
+
</p>
|
|
31
34
|
<a
|
|
32
|
-
href="https://github.com/vudovn"
|
|
35
|
+
href="https://github.com/vudovn/antigravity-kit"
|
|
33
36
|
target="_blank"
|
|
34
37
|
rel="noopener noreferrer"
|
|
35
|
-
className="
|
|
38
|
+
className="inline-flex items-center gap-2 text-[var(--color-text-secondary)] hover:text-white transition-colors"
|
|
36
39
|
>
|
|
37
|
-
|
|
40
|
+
<GitHubIcon />
|
|
41
|
+
<span className="text-sm">Star on GitHub</span>
|
|
38
42
|
</a>
|
|
39
43
|
</div>
|
|
40
44
|
|
|
41
45
|
{/* Links */}
|
|
42
|
-
<div
|
|
43
|
-
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
46
|
+
<div>
|
|
47
|
+
<h4 className="font-mono text-sm text-[#64748b] mb-4">Links</h4>
|
|
48
|
+
<ul className="space-y-2">
|
|
49
|
+
{links.map((link) => (
|
|
50
|
+
<li key={link.href}>
|
|
51
|
+
<a
|
|
52
|
+
href={link.href}
|
|
53
|
+
className="text-sm text-[var(--color-text-secondary)] hover:text-white transition-colors"
|
|
54
|
+
>
|
|
55
|
+
{link.label}
|
|
56
|
+
</a>
|
|
57
|
+
</li>
|
|
58
|
+
))}
|
|
59
|
+
</ul>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
{/* Resources */}
|
|
63
|
+
<div>
|
|
64
|
+
<h4 className="font-mono text-sm text-[#64748b] mb-4">Resources</h4>
|
|
65
|
+
<ul className="space-y-2">
|
|
66
|
+
{resources.map((link) => (
|
|
67
|
+
<li key={link.href}>
|
|
68
|
+
<a
|
|
69
|
+
href={link.href}
|
|
70
|
+
target="_blank"
|
|
71
|
+
rel="noopener noreferrer"
|
|
72
|
+
className="text-sm text-[var(--color-text-secondary)] hover:text-white transition-colors"
|
|
73
|
+
>
|
|
74
|
+
{link.label}
|
|
75
|
+
</a>
|
|
76
|
+
</li>
|
|
77
|
+
))}
|
|
78
|
+
</ul>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
53
81
|
|
|
54
|
-
|
|
82
|
+
{/* Bottom */}
|
|
83
|
+
<div className="flex flex-col md:flex-row items-center justify-between gap-4 pt-8 border-t border-[var(--color-border)]">
|
|
84
|
+
<p className="text-sm text-[#64748b]">
|
|
85
|
+
© {new Date().getFullYear()} Antigravity Kit. MIT License.
|
|
86
|
+
</p>
|
|
87
|
+
<p className="text-sm text-[#64748b]">
|
|
88
|
+
Made with <span className="text-red-500">♥</span> by{" "}
|
|
55
89
|
<a
|
|
56
|
-
href="https://
|
|
90
|
+
href="https://github.com/vudovn"
|
|
57
91
|
target="_blank"
|
|
58
92
|
rel="noopener noreferrer"
|
|
59
|
-
className="
|
|
93
|
+
className="text-white hover:text-[var(--color-accent)] transition-colors"
|
|
60
94
|
>
|
|
61
|
-
|
|
62
|
-
<span className="text-sm">Buy me a coffee</span>
|
|
95
|
+
VudoVN
|
|
63
96
|
</a>
|
|
64
|
-
</
|
|
65
|
-
</div>
|
|
66
|
-
|
|
67
|
-
{/* Copyright */}
|
|
68
|
-
<div className="mt-8 text-center text-[var(--color-text-muted)] text-sm">
|
|
69
|
-
© {new Date().getFullYear()} Antigravity Kit. MIT License.
|
|
97
|
+
</p>
|
|
70
98
|
</div>
|
|
71
99
|
</div>
|
|
72
100
|
</footer>
|
|
@@ -1,86 +1,266 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { useState, useEffect } 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" />
|
|
10
|
+
</svg>
|
|
11
|
+
);
|
|
12
|
+
|
|
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" />
|
|
16
|
+
</svg>
|
|
17
|
+
);
|
|
18
|
+
|
|
2
19
|
const ArrowRightIcon = () => (
|
|
3
|
-
<svg
|
|
4
|
-
|
|
5
|
-
viewBox="0 0 20 20"
|
|
6
|
-
fill="currentColor"
|
|
7
|
-
className="w-5 h-5"
|
|
8
|
-
>
|
|
9
|
-
<path
|
|
10
|
-
fillRule="evenodd"
|
|
11
|
-
d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z"
|
|
12
|
-
clipRule="evenodd"
|
|
13
|
-
/>
|
|
20
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
|
|
21
|
+
<path fillRule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clipRule="evenodd" />
|
|
14
22
|
</svg>
|
|
15
23
|
);
|
|
16
24
|
|
|
17
25
|
const GitHubIcon = () => (
|
|
18
|
-
<svg
|
|
19
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
20
|
-
viewBox="0 0 24 24"
|
|
21
|
-
fill="currentColor"
|
|
22
|
-
className="w-5 h-5"
|
|
23
|
-
>
|
|
26
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
|
|
24
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" />
|
|
25
28
|
</svg>
|
|
26
29
|
);
|
|
27
30
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
className="w-
|
|
34
|
-
>
|
|
35
|
-
<path
|
|
36
|
-
fillRule="evenodd"
|
|
37
|
-
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.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z"
|
|
38
|
-
clipRule="evenodd"
|
|
39
|
-
/>
|
|
40
|
-
</svg>
|
|
31
|
+
// Terminal dots
|
|
32
|
+
const TerminalDots = () => (
|
|
33
|
+
<div className="flex items-center gap-1.5">
|
|
34
|
+
<div className="w-3 h-3 rounded-full bg-[#ff5f56]" />
|
|
35
|
+
<div className="w-3 h-3 rounded-full bg-[#ffbd2e]" />
|
|
36
|
+
<div className="w-3 h-3 rounded-full bg-[#27c93f]" />
|
|
37
|
+
</div>
|
|
41
38
|
);
|
|
42
39
|
|
|
43
|
-
// Stats data
|
|
44
|
-
const stats = [
|
|
45
|
-
{ value: "35+", label: "Skills" },
|
|
46
|
-
{ value: "10", label: "Rules" },
|
|
47
|
-
{ value: "57", label: "UI Styles" },
|
|
48
|
-
];
|
|
49
|
-
|
|
50
40
|
export default function Hero() {
|
|
41
|
+
const [copied, setCopied] = useState(false);
|
|
42
|
+
const [scrollY, setScrollY] = useState(0);
|
|
43
|
+
const [typedText, setTypedText] = useState("");
|
|
44
|
+
const [showCursor, setShowCursor] = useState(true);
|
|
45
|
+
const installCommand = "npx @vudovn/antigravity-kit init";
|
|
46
|
+
const fullCommand = "@vudovn/antigravity-kit init";
|
|
47
|
+
|
|
48
|
+
// Parallax scroll effect
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
const handleScroll = () => setScrollY(window.scrollY);
|
|
51
|
+
window.addEventListener("scroll", handleScroll, { passive: true });
|
|
52
|
+
return () => window.removeEventListener("scroll", handleScroll);
|
|
53
|
+
}, []);
|
|
54
|
+
|
|
55
|
+
// Typing effect
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
let index = 0;
|
|
58
|
+
const timer = setInterval(() => {
|
|
59
|
+
if (index <= fullCommand.length) {
|
|
60
|
+
setTypedText(fullCommand.slice(0, index));
|
|
61
|
+
index++;
|
|
62
|
+
} else {
|
|
63
|
+
setShowCursor(false);
|
|
64
|
+
clearInterval(timer);
|
|
65
|
+
}
|
|
66
|
+
}, 80);
|
|
67
|
+
return () => clearInterval(timer);
|
|
68
|
+
}, []);
|
|
69
|
+
|
|
70
|
+
const handleCopy = async () => {
|
|
71
|
+
await navigator.clipboard.writeText(installCommand);
|
|
72
|
+
setCopied(true);
|
|
73
|
+
setTimeout(() => setCopied(false), 2000);
|
|
74
|
+
};
|
|
75
|
+
|
|
51
76
|
return (
|
|
52
|
-
<section className="
|
|
53
|
-
{/* Background
|
|
54
|
-
<div className="
|
|
55
|
-
<div className="
|
|
77
|
+
<section id="hero" className="min-h-screen flex items-center justify-center pt-14 pb-16 px-4 relative overflow-hidden">
|
|
78
|
+
{/* Aurora Background Effect */}
|
|
79
|
+
<div className="aurora-blob aurora-blob-1" />
|
|
80
|
+
<div className="aurora-blob aurora-blob-2" />
|
|
81
|
+
<div className="aurora-blob aurora-blob-3" />
|
|
82
|
+
|
|
83
|
+
{/* Floating Tags - Scattered randomly with parallax */}
|
|
84
|
+
{/* Top area */}
|
|
85
|
+
<div className="hidden lg:block absolute top-[15%] left-[5%] animate-float" style={{ transform: `translateY(${scrollY * 0.1}px)` }}>
|
|
86
|
+
<div className="px-3 py-1.5 rounded-full bg-[#c084fc]/10 border border-[#c084fc]/30 backdrop-blur-sm">
|
|
87
|
+
<span className="text-xs font-medium text-[#c084fc]">Clean Code</span>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div className="hidden xl:block absolute top-[12%] left-[18%] animate-float" style={{ animationDelay: '2.2s' }}>
|
|
92
|
+
<div className="px-3 py-1.5 rounded-full bg-[#a855f7]/10 border border-[#a855f7]/30 backdrop-blur-sm">
|
|
93
|
+
<span className="text-xs font-medium text-[#a855f7]">TypeScript</span>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<div className="hidden lg:block absolute top-[18%] right-[8%] animate-float" style={{ animationDelay: '0.5s', transform: `translateY(${scrollY * -0.15}px)` }}>
|
|
98
|
+
<div className="px-3 py-1.5 rounded-full bg-[#22d3ee]/10 border border-[#22d3ee]/30 backdrop-blur-sm">
|
|
99
|
+
<span className="text-xs font-medium text-[#22d3ee]">React</span>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<div className="hidden xl:block absolute top-[10%] right-[22%] animate-float" style={{ animationDelay: '3.8s' }}>
|
|
104
|
+
<div className="px-3 py-1.5 rounded-full bg-[#84cc16]/10 border border-[#84cc16]/30 backdrop-blur-sm">
|
|
105
|
+
<span className="text-xs font-medium text-[#84cc16]">Prisma</span>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
{/* Upper middle */}
|
|
110
|
+
<div className="hidden lg:block absolute top-[30%] left-[3%] animate-float" style={{ animationDelay: '1.5s' }}>
|
|
111
|
+
<div className="px-3 py-1.5 rounded-full bg-[#22c55e]/10 border border-[#22c55e]/30 backdrop-blur-sm">
|
|
112
|
+
<span className="text-xs font-medium text-[#22c55e]">SOLID</span>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div className="hidden 2xl:block absolute top-[25%] left-[12%] animate-float" style={{ animationDelay: '4.5s' }}>
|
|
117
|
+
<div className="px-3 py-1.5 rounded-full bg-[#06b6d4]/10 border border-[#06b6d4]/30 backdrop-blur-sm">
|
|
118
|
+
<span className="text-xs font-medium text-[#06b6d4]">Debug</span>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div className="hidden lg:block absolute top-[28%] right-[5%] animate-float" style={{ animationDelay: '2s' }}>
|
|
123
|
+
<div className="px-3 py-1.5 rounded-full bg-[#f8fafc]/10 border border-[#f8fafc]/30 backdrop-blur-sm">
|
|
124
|
+
<span className="text-xs font-medium text-[#f8fafc]">Next.js</span>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div className="hidden xl:block absolute top-[35%] right-[15%] animate-float" style={{ animationDelay: '0.8s' }}>
|
|
129
|
+
<div className="px-3 py-1.5 rounded-full bg-[#f43f5e]/10 border border-[#f43f5e]/30 backdrop-blur-sm">
|
|
130
|
+
<span className="text-xs font-medium text-[#f43f5e]">API Docs</span>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
{/* Middle area */}
|
|
135
|
+
<div className="hidden lg:block absolute top-[45%] left-[2%] animate-float" style={{ animationDelay: '3s' }}>
|
|
136
|
+
<div className="px-3 py-1.5 rounded-full bg-[#3b82f6]/10 border border-[#3b82f6]/30 backdrop-blur-sm">
|
|
137
|
+
<span className="text-xs font-medium text-[#3b82f6]">DRY</span>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<div className="hidden 2xl:block absolute top-[50%] left-[10%] animate-float" style={{ animationDelay: '1.2s' }}>
|
|
142
|
+
<div className="px-3 py-1.5 rounded-full bg-[#8b5cf6]/10 border border-[#8b5cf6]/30 backdrop-blur-sm">
|
|
143
|
+
<span className="text-xs font-medium text-[#8b5cf6]">50+ Styles</span>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
<div className="hidden lg:block absolute top-[48%] right-[3%] animate-float" style={{ animationDelay: '1s' }}>
|
|
148
|
+
<div className="px-3 py-1.5 rounded-full bg-[#ec4899]/10 border border-[#ec4899]/30 backdrop-blur-sm">
|
|
149
|
+
<span className="text-xs font-medium text-[#ec4899]">UI/UX</span>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
{/* Lower middle */}
|
|
154
|
+
<div className="hidden lg:block absolute bottom-[35%] left-[6%] animate-float" style={{ animationDelay: '2.5s' }}>
|
|
155
|
+
<div className="px-3 py-1.5 rounded-full bg-[#f97316]/10 border border-[#f97316]/30 backdrop-blur-sm">
|
|
156
|
+
<span className="text-xs font-medium text-[#f97316]">Unit Test</span>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<div className="hidden xl:block absolute bottom-[40%] left-[15%] animate-float" style={{ animationDelay: '4s' }}>
|
|
161
|
+
<div className="px-3 py-1.5 rounded-full bg-[#14b8a6]/10 border border-[#14b8a6]/30 backdrop-blur-sm">
|
|
162
|
+
<span className="text-xs font-medium text-[#14b8a6]">Auto Docs</span>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<div className="hidden lg:block absolute bottom-[38%] right-[6%] animate-float" style={{ animationDelay: '3.5s' }}>
|
|
167
|
+
<div className="px-3 py-1.5 rounded-full bg-[#eab308]/10 border border-[#eab308]/30 backdrop-blur-sm">
|
|
168
|
+
<span className="text-xs font-medium text-[#eab308]">NestJS</span>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
<div className="hidden 2xl:block absolute bottom-[32%] right-[18%] animate-float" style={{ animationDelay: '0.3s' }}>
|
|
173
|
+
<div className="px-3 py-1.5 rounded-full bg-[#0ea5e9]/10 border border-[#0ea5e9]/30 backdrop-blur-sm">
|
|
174
|
+
<span className="text-xs font-medium text-[#0ea5e9]">Docker</span>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
|
|
178
|
+
{/* Bottom area */}
|
|
179
|
+
<div className="hidden lg:block absolute bottom-[22%] left-[4%] animate-float" style={{ animationDelay: '1.8s' }}>
|
|
180
|
+
<div className="px-3 py-1.5 rounded-full bg-[#10b981]/10 border border-[#10b981]/30 backdrop-blur-sm">
|
|
181
|
+
<span className="text-xs font-medium text-[#10b981]">QA</span>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<div className="hidden xl:block absolute bottom-[18%] left-[12%] animate-float" style={{ animationDelay: '2.8s' }}>
|
|
186
|
+
<div className="px-3 py-1.5 rounded-full bg-[#d946ef]/10 border border-[#d946ef]/30 backdrop-blur-sm">
|
|
187
|
+
<span className="text-xs font-medium text-[#d946ef]">21 Palettes</span>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<div className="hidden lg:block absolute bottom-[20%] right-[4%] animate-float" style={{ animationDelay: '4.2s' }}>
|
|
192
|
+
<div className="px-3 py-1.5 rounded-full bg-[#6366f1]/10 border border-[#6366f1]/30 backdrop-blur-sm">
|
|
193
|
+
<span className="text-xs font-medium text-[#6366f1]">README</span>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
<div className="hidden 2xl:block absolute bottom-[12%] right-[20%] animate-float" style={{ animationDelay: '1.5s' }}>
|
|
198
|
+
<div className="px-3 py-1.5 rounded-full bg-[#fb923c]/10 border border-[#fb923c]/30 backdrop-blur-sm">
|
|
199
|
+
<span className="text-xs font-medium text-[#fb923c]">Tailwind</span>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
56
202
|
|
|
57
|
-
<div className="
|
|
203
|
+
<div className="max-w-4xl mx-auto text-center relative z-10">
|
|
58
204
|
{/* Badge */}
|
|
59
|
-
<div className="inline-flex items-center gap-2 mb-8">
|
|
60
|
-
<span className="
|
|
61
|
-
|
|
62
|
-
AI Agent Toolkit
|
|
63
|
-
</span>
|
|
205
|
+
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--color-bg-card)] border border-[var(--color-border)] mb-8">
|
|
206
|
+
<span className="w-2 h-2 rounded-full bg-[#22c55e] animate-pulse" />
|
|
207
|
+
<span className="text-sm text-[var(--color-text-secondary)] font-mono">AI Agent Toolkit for Antigravity IDE</span>
|
|
64
208
|
</div>
|
|
65
209
|
|
|
66
210
|
{/* Headline */}
|
|
67
|
-
<h1 className="
|
|
68
|
-
<span className="gradient-text">Supercharge</span>
|
|
69
|
-
|
|
211
|
+
<h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
|
|
212
|
+
<span className="animate-gradient-text">Supercharge</span> your AI
|
|
213
|
+
<br />
|
|
214
|
+
coding assistant
|
|
70
215
|
</h1>
|
|
71
216
|
|
|
72
217
|
{/* Subheadline */}
|
|
73
|
-
<p className="text-
|
|
74
|
-
A
|
|
75
|
-
<span className="text-
|
|
76
|
-
<span className="text-
|
|
77
|
-
|
|
78
|
-
the capabilities of AI coding agents.
|
|
218
|
+
<p className="text-lg md:text-xl text-[var(--color-text-secondary)] max-w-2xl mx-auto mb-10">
|
|
219
|
+
A collection of <span className="text-[#22c55e]">35+ Skills</span>,{" "}
|
|
220
|
+
<span className="text-[#3b82f6]">Rules</span>, and{" "}
|
|
221
|
+
<span className="text-[#f97316]">UI Style</span> to transform
|
|
222
|
+
your AI agent into a domain expert.
|
|
79
223
|
</p>
|
|
80
224
|
|
|
225
|
+
{/* Install Command */}
|
|
226
|
+
<div className="max-w-lg mx-auto mb-8">
|
|
227
|
+
<div className="bg-[#0d0d0d] rounded-lg border border-[var(--color-border)] overflow-hidden">
|
|
228
|
+
{/* Terminal Header */}
|
|
229
|
+
<div className="px-4 py-2.5 border-b border-[var(--color-border)] flex items-center justify-between">
|
|
230
|
+
<TerminalDots />
|
|
231
|
+
<span className="text-xs text-[#64748b] font-mono">Terminal</span>
|
|
232
|
+
<div className="w-10" />
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
{/* Command with typing effect */}
|
|
236
|
+
<div className="p-4 flex items-center justify-between gap-4">
|
|
237
|
+
<code className="font-mono text-sm md:text-base">
|
|
238
|
+
<span className="text-[#22c55e]">$</span>{" "}
|
|
239
|
+
<span className="text-[#c084fc]">npx</span>{" "}
|
|
240
|
+
<span className="text-white">{typedText}</span>
|
|
241
|
+
{showCursor && <span className="typing-cursor" />}
|
|
242
|
+
</code>
|
|
243
|
+
<button
|
|
244
|
+
onClick={handleCopy}
|
|
245
|
+
className="p-2 rounded-md hover:bg-white/10 transition-colors text-[#64748b] hover:text-[#c084fc] cursor-pointer"
|
|
246
|
+
aria-label="Copy to clipboard"
|
|
247
|
+
>
|
|
248
|
+
{copied ? (
|
|
249
|
+
<span className="text-[#22c55e]"><CheckIcon /></span>
|
|
250
|
+
) : (
|
|
251
|
+
<CopyIcon />
|
|
252
|
+
)}
|
|
253
|
+
</button>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
|
|
81
258
|
{/* CTA Buttons */}
|
|
82
|
-
<div className="flex flex-col sm:flex-row items-center justify-center gap-
|
|
83
|
-
<a
|
|
259
|
+
<div className="flex flex-col sm:flex-row items-center justify-center gap-3 mb-8">
|
|
260
|
+
<a
|
|
261
|
+
href="#how-it-works"
|
|
262
|
+
className="inline-flex items-center gap-2 px-5 py-2.5 bg-[#c084fc] hover:bg-[#d8b4fe] text-black font-medium rounded-lg transition-colors cursor-pointer"
|
|
263
|
+
>
|
|
84
264
|
Get Started
|
|
85
265
|
<ArrowRightIcon />
|
|
86
266
|
</a>
|
|
@@ -88,30 +268,21 @@ export default function Hero() {
|
|
|
88
268
|
href="https://github.com/vudovn/antigravity-kit"
|
|
89
269
|
target="_blank"
|
|
90
270
|
rel="noopener noreferrer"
|
|
91
|
-
className="
|
|
271
|
+
className="inline-flex items-center gap-2 px-5 py-2.5 bg-transparent border border-[var(--color-border)] hover:border-[var(--color-accent)] text-white font-medium rounded-lg transition-colors cursor-pointer"
|
|
92
272
|
>
|
|
93
273
|
<GitHubIcon />
|
|
94
274
|
View on GitHub
|
|
95
275
|
</a>
|
|
96
276
|
</div>
|
|
97
277
|
|
|
98
|
-
{/*
|
|
99
|
-
<div className="flex flex-wrap
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
</div>
|
|
105
|
-
<div className="text-sm text-[var(--color-text-secondary)]">
|
|
106
|
-
{stat.label}
|
|
107
|
-
</div>
|
|
108
|
-
</div>
|
|
109
|
-
))}
|
|
278
|
+
{/* Mobile Tags - only visible on smaller screens */}
|
|
279
|
+
<div className="flex flex-wrap justify-center gap-2 max-w-sm mx-auto lg:hidden">
|
|
280
|
+
<span className="px-3 py-1.5 rounded-full bg-[#c084fc]/10 border border-[#c084fc]/30 text-xs font-medium text-[#c084fc]">Clean Code</span>
|
|
281
|
+
<span className="px-3 py-1.5 rounded-full bg-[#22c55e]/10 border border-[#22c55e]/30 text-xs font-medium text-[#22c55e]">SOLID</span>
|
|
282
|
+
<span className="px-3 py-1.5 rounded-full bg-[#22d3ee]/10 border border-[#22d3ee]/30 text-xs font-medium text-[#22d3ee]">React</span>
|
|
283
|
+
<span className="px-3 py-1.5 rounded-full bg-[#ec4899]/10 border border-[#ec4899]/30 text-xs font-medium text-[#ec4899]">UI/UX</span>
|
|
110
284
|
</div>
|
|
111
285
|
</div>
|
|
112
|
-
|
|
113
|
-
{/* Bottom Gradient Fade */}
|
|
114
|
-
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[var(--color-bg-base)] to-transparent pointer-events-none" />
|
|
115
286
|
</section>
|
|
116
287
|
);
|
|
117
288
|
}
|