feat: added pages, forms, and functionality.
All checks were successful
Smart Deploy / build-deploy (push) Successful in 2m38s
All checks were successful
Smart Deploy / build-deploy (push) Successful in 2m38s
This commit is contained in:
186
src/components/Footer.astro
Normal file
186
src/components/Footer.astro
Normal file
@@ -0,0 +1,186 @@
|
||||
---
|
||||
import { Code2, Github, Twitter, Linkedin } from "lucide-react";
|
||||
---
|
||||
|
||||
<footer class="py-20 border-t border-white/5 bg-slate-950">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="grid md:grid-cols-4 gap-12 mb-16">
|
||||
<div class="col-span-1 md:col-span-2">
|
||||
<div class="flex items-center gap-2 mb-6">
|
||||
<div
|
||||
class="w-8 h-8 bg-amber-500 rounded-lg flex items-center justify-center transform rotate-12"
|
||||
>
|
||||
<Code2 size={18} className="text-slate-900" />
|
||||
</div>
|
||||
<span
|
||||
class="text-xl font-bold font-heading tracking-tight text-white"
|
||||
>
|
||||
Move. <span class="text-indigo-400">Compete.</span> Play.
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-slate-500 max-w-sm mb-6 leading-relaxed">
|
||||
The premier hub for tech professionals to transition from
|
||||
AI-anxiety to AI-mastery through building and community.
|
||||
</p>
|
||||
<div class="flex gap-4">
|
||||
<a
|
||||
href="#"
|
||||
class="w-10 h-10 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400 hover:text-amber-500 hover:border-amber-500/50 transition-all"
|
||||
>
|
||||
<span class="sr-only">Discord</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M9.5 7.5c-.828 0-1.5.671-1.5 1.5 0 .828.672 1.5 1.5 1.5s1.5-.672 1.5-1.5c0-.829-.672-1.5-1.5-1.5zm5 0c-.828 0-1.5.671-1.5 1.5 0 .828.672 1.5 1.5 1.5s1.5-.672 1.5-1.5c0-.829-.672-1.5-1.5-1.5z"
|
||||
></path>
|
||||
<path
|
||||
d="M18.7 4.1c-1.26-.42-2.61-.73-4-.91-.18.31-.35.63-.49.97-1.5-.23-3-.23-4.5 0-.14-.34-.31-.66-.49-.97-1.39.18-2.74.49-4 .91-2.59 3.89-3.29 7.69-2.94 11.44 1.69 1.25 3.33 2.01 4.95 2.51.4-.54.75-1.12 1.05-1.72-.58-.22-1.13-.48-1.66-.78.14-.1.27-.21.4-.32 3.21 1.49 6.76 1.49 9.96 0 .13.11.26.22.4.32-.53.3-1.08.56-1.66.78.3.6.65 1.18 1.05 1.72 1.62-.5 3.26-1.26 4.95-2.51.39-4.2-.65-7.84-2.94-11.44z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
id="footer-gitea-trigger"
|
||||
href="#"
|
||||
class="w-10 h-10 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400 hover:text-amber-500 hover:border-amber-500/50 transition-all"
|
||||
>
|
||||
<span class="sr-only">Gitea</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 640 640"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8 c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4 c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"
|
||||
></path>
|
||||
<path
|
||||
d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2 c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5 c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5 c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3 c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1 C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4 c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7 S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55 c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8 l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"
|
||||
></path>
|
||||
<path
|
||||
d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4 c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1 c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9 c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3 c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3 c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29 c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8 C343.2,346.5,335,363.3,326.8,380.1z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="w-10 h-10 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400 hover:text-amber-500 hover:border-amber-500/50 transition-all"
|
||||
>
|
||||
<span class="sr-only">Twitter</span>
|
||||
<Twitter size={18} />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="w-10 h-10 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400 hover:text-amber-500 hover:border-amber-500/50 transition-all"
|
||||
>
|
||||
<span class="sr-only">LinkedIn</span>
|
||||
<Linkedin size={18} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 class="text-white font-bold mb-6 font-heading">Resource</h5>
|
||||
<ul class="space-y-4 text-sm text-slate-500">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="hover:text-amber-400 transition-colors"
|
||||
>The Manifesto</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="hover:text-amber-400 transition-colors"
|
||||
>Build Kits</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="hover:text-amber-400 transition-colors"
|
||||
>Squad Directory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="hover:text-amber-400 transition-colors"
|
||||
>Alumni Network</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 class="text-white font-bold mb-6 font-heading">
|
||||
Protocols
|
||||
</h5>
|
||||
<ul class="space-y-4 text-sm text-slate-500 font-mono">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="hover:text-indigo-400 transition-colors"
|
||||
>MCP Spec</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="hover:text-indigo-400 transition-colors"
|
||||
>UCP Handshake</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="hover:text-indigo-400 transition-colors"
|
||||
>Agent SDK</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="hover:text-indigo-400 transition-colors"
|
||||
>A2A Messaging</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-col md:flex-row justify-between items-center gap-6 pt-10 border-t border-white/5"
|
||||
>
|
||||
<p class="text-sm text-slate-600 font-heading font-bold">
|
||||
© {new Date().getFullYear()} Move. Compete. Play. — The future belongs
|
||||
to the builders. ⚡ Built with AI
|
||||
</p>
|
||||
<div class="flex gap-8 text-xs text-slate-600">
|
||||
<a href="#" class="hover:text-slate-400">Privacy Policy</a>
|
||||
<a href="#" class="hover:text-slate-400">Terms of Service</a>
|
||||
<a href="#" class="hover:text-slate-400">Code of Conduct</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const footerTrigger = document.getElementById("footer-gitea-trigger");
|
||||
if (footerTrigger) {
|
||||
footerTrigger.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
window.dispatchEvent(new CustomEvent("open-join-modal"));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
97
src/components/Navbar.astro
Normal file
97
src/components/Navbar.astro
Normal file
@@ -0,0 +1,97 @@
|
||||
---
|
||||
import { Code2 } from "lucide-react";
|
||||
---
|
||||
|
||||
<nav
|
||||
id="navbar"
|
||||
class="fixed top-0 w-full z-50 transition-all duration-300 py-6 bg-transparent"
|
||||
>
|
||||
<div class="container mx-auto px-6 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div
|
||||
class="w-8 h-8 bg-amber-500 rounded-lg flex items-center justify-center transform rotate-12"
|
||||
>
|
||||
<Code2 size={18} className="text-slate-900" />
|
||||
</div>
|
||||
<span
|
||||
class="text-xl font-bold font-heading tracking-tight text-white"
|
||||
>
|
||||
Move. <span class="text-indigo-400">Compete.</span> Play.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex items-center gap-10">
|
||||
{
|
||||
[
|
||||
{ name: "The Mission", href: "#the-mission" },
|
||||
{ name: "Build Projects", href: "/#build-season" },
|
||||
{ name: "Squads", href: "#squads" },
|
||||
{ name: "Manifesto", href: "#manifesto" },
|
||||
].map((link) => (
|
||||
<a
|
||||
href={link.href}
|
||||
class="text-sm font-medium text-slate-300 hover:text-amber-400 transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="join-trigger"
|
||||
class="bg-amber-500 hover:bg-amber-400 text-slate-900 font-bold px-4 py-2 text-sm md:px-6 md:py-2.5 md:text-base rounded-full transition-all hover:scale-105 active:scale-95 shadow-lg shadow-amber-500/20 cursor-pointer flex items-center gap-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 640 640"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8 c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4 c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"
|
||||
></path>
|
||||
<path
|
||||
d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2 c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5 c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5 c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3 c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1 C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4 c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7 S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55 c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8 l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"
|
||||
></path>
|
||||
<path
|
||||
d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4 c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1 c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9 c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3 c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3 c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29 c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8 C343.2,346.5,335,363.3,326.8,380.1z"
|
||||
></path>
|
||||
</svg>
|
||||
Contribute
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById("navbar");
|
||||
if (nav) {
|
||||
const joinTrigger = document.getElementById("join-trigger");
|
||||
if (joinTrigger) {
|
||||
joinTrigger.addEventListener("click", () => {
|
||||
window.dispatchEvent(new CustomEvent("open-join-modal"));
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
if (window.scrollY > 50) {
|
||||
nav.classList.add(
|
||||
"bg-slate-900/80",
|
||||
"backdrop-blur-md",
|
||||
"py-4",
|
||||
"shadow-xl",
|
||||
);
|
||||
nav.classList.remove("bg-transparent", "py-6");
|
||||
} else {
|
||||
nav.classList.add("bg-transparent", "py-6");
|
||||
nav.classList.remove(
|
||||
"bg-slate-900/80",
|
||||
"backdrop-blur-md",
|
||||
"py-4",
|
||||
"shadow-xl",
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
46
src/components/TechMarquee.astro
Normal file
46
src/components/TechMarquee.astro
Normal file
@@ -0,0 +1,46 @@
|
||||
---
|
||||
const TECH_STACK = [
|
||||
"MCP",
|
||||
"Supabase",
|
||||
"Gemini",
|
||||
"Claude",
|
||||
"UCP",
|
||||
"Agent-to-Agent",
|
||||
"OpenAI",
|
||||
"LangChain",
|
||||
"VectorDB",
|
||||
"LlamaIndex",
|
||||
"Pinecone",
|
||||
];
|
||||
---
|
||||
|
||||
<section class="py-12 border-y border-white/5 bg-slate-800">
|
||||
<div class="flex overflow-hidden group">
|
||||
<div
|
||||
class="flex animate-scroll hover:[animation-play-state:paused] whitespace-nowrap"
|
||||
>
|
||||
{
|
||||
[...TECH_STACK, ...TECH_STACK].map((tech) => (
|
||||
<div class="mx-8 px-6 py-2 rounded-full border border-slate-800 bg-slate-800/30 text-slate-400 font-mono text-sm flex items-center gap-2 hover:border-indigo-500/50 hover:text-indigo-400 transition-all cursor-default">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-indigo-500/50" />
|
||||
{tech}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.animate-scroll {
|
||||
animation: scroll 30s linear infinite;
|
||||
}
|
||||
</style>
|
||||
70
src/components/react/CodeWindow.tsx
Normal file
70
src/components/react/CodeWindow.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export const CodeWindow = () => {
|
||||
const [lines] = useState([
|
||||
{ text: "const agent = new BuilderAgent({", color: "text-indigo-400" },
|
||||
{ text: " protocol: 'MCP',", color: "text-amber-400" },
|
||||
{ text: " squad: 'Alpha-Team',", color: "text-amber-400" },
|
||||
{ text: " mission: 'Future-Proof',", color: "text-amber-400" },
|
||||
{ text: "});", color: "text-indigo-400" },
|
||||
{ text: "", color: "" },
|
||||
{ text: "await agent.startBuilding();", color: "text-emerald-400" }
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="bg-[#0f172a] rounded-xl border border-slate-700 overflow-hidden shadow-2xl h-full flex flex-col font-mono text-sm">
|
||||
<div className="flex items-center gap-2 px-4 py-3 bg-slate-800/50 border-b border-slate-700">
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/50" />
|
||||
<div className="w-3 h-3 rounded-full bg-amber-500/50" />
|
||||
<div className="w-3 h-3 rounded-full bg-emerald-500/50" />
|
||||
</div>
|
||||
<div className="ml-4 text-slate-500 text-xs tracking-wider">BUILDER_SQUAD_01.ts</div>
|
||||
</div>
|
||||
<div className="p-6 flex-1 relative">
|
||||
<div className="space-y-2">
|
||||
{lines.map((line, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
className="flex gap-4"
|
||||
>
|
||||
<span className="text-slate-600 w-4 text-right select-none">{i + 1}</span>
|
||||
<span className={line.color}>{line.text}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Animated Cursors */}
|
||||
<motion.div
|
||||
animate={{ x: [0, 40, -20, 0], y: [0, 60, 20, 0] }}
|
||||
transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="absolute top-20 left-40"
|
||||
>
|
||||
<div className="relative group">
|
||||
<div className="w-1 h-5 bg-amber-400" />
|
||||
<div className="absolute left-1 top-0 bg-amber-400 text-[#1E293B] text-[10px] px-1.5 py-0.5 rounded-sm whitespace-nowrap font-bold">
|
||||
Priya_Dev
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
animate={{ x: [0, -30, 40, 0], y: [0, -20, 80, 0] }}
|
||||
transition={{ duration: 12, repeat: Infinity, ease: "easeInOut", delay: 1 }}
|
||||
className="absolute top-10 left-60"
|
||||
>
|
||||
<div className="relative group">
|
||||
<div className="w-1 h-5 bg-indigo-400" />
|
||||
<div className="absolute left-1 top-0 bg-indigo-400 text-white text-[10px] px-1.5 py-0.5 rounded-sm whitespace-nowrap font-bold">
|
||||
Arjun_AI
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
117
src/components/react/Community.tsx
Normal file
117
src/components/react/Community.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { ProfileCard, type Profile } from './ProfileCard';
|
||||
|
||||
const PROFILES: Profile[] = [
|
||||
{
|
||||
name: "The Student",
|
||||
role: "Future-Proofing the Degree",
|
||||
story: "Universities teach theory; the market demands shipping. Stop worrying about your GPA and start building an Agent portfolio that makes recruiters ignore your grades.",
|
||||
badge: "Portfolio Builder",
|
||||
image: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=400&h=400&fit=crop",
|
||||
},
|
||||
{
|
||||
name: "The IT Professional",
|
||||
role: "Surviving the Shift",
|
||||
story: "Afraid of AI automating your services job? Don't compete with it—manage it. Pivot from 'Legacy Maintenance' to 'AI Infrastructure Lead' by mastering MCP.",
|
||||
badge: "AI Architect",
|
||||
image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop",
|
||||
},
|
||||
{
|
||||
name: "The Founder",
|
||||
role: "Building an AI Workforce",
|
||||
story: "Overwhelmed by the speed of tech? Stop hiring expensive agencies. Use our Squads to build your own custom AI tools and ship your MVP in weeks, not months.",
|
||||
badge: "Solo Shipper",
|
||||
image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop",
|
||||
},
|
||||
];
|
||||
|
||||
export const Community = () => {
|
||||
return (
|
||||
<section className="py-24">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
|
||||
<div className="max-w-xl">
|
||||
<h2 className="text-4xl font-bold font-heading mb-4 text-white">
|
||||
From Anxiety to Action
|
||||
</h2>
|
||||
<p className="text-slate-400 font-sans">
|
||||
The Gym is open for everyone. Whether you are starting out or leveling up, you have a
|
||||
squad waiting for you.
|
||||
</p>
|
||||
</div>
|
||||
<button className="text-amber-500 font-bold flex items-center gap-2 hover:text-amber-400 transition-colors cursor-pointer">
|
||||
See all alumni <ArrowRight size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{PROFILES.map((profile, i) => (
|
||||
<ProfileCard key={i} profile={profile} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="build-season"
|
||||
className="mt-20 p-12 rounded-[2rem] bg-gradient-to-br from-indigo-600/20 to-amber-600/10 border border-white/10 relative overflow-hidden scroll-mt-32"
|
||||
>
|
||||
<div className="relative z-10 flex flex-col md:flex-row items-center gap-10">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-3xl font-bold font-heading mb-4 text-white">
|
||||
Build Season #01 is approaching. 📣
|
||||
</h3>
|
||||
<p className="text-slate-300 text-lg mb-8 max-w-lg font-sans">
|
||||
Don't build alone. Join a Squad of 4-5 builders to ship your first MCP Agent in 6
|
||||
weeks. Whether you are a student looking for a portfolio piece or a pro updating
|
||||
your skills—your Squad keeps you shipping.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<a
|
||||
href="/apply-season"
|
||||
className="bg-white text-slate-900 font-bold px-8 py-4 rounded-xl hover:bg-slate-200 transition-all cursor-pointer inline-block"
|
||||
>
|
||||
Apply for Season #01
|
||||
</a>
|
||||
<div className="flex items-center gap-4 px-6 text-sm text-slate-400 border-l border-white/10">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-white uppercase tracking-widest text-[10px]">
|
||||
START DATE
|
||||
</span>
|
||||
<span>TBD</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden lg:grid grid-cols-2 gap-4 flex-shrink-0">
|
||||
<div className="p-4 bg-slate-900/60 rounded-xl border border-white/5 text-center">
|
||||
<div className="text-2xl font-bold text-amber-500">Build an MCP Server</div>
|
||||
<div className="text-[10px] text-slate-500 uppercase font-bold tracking-widest">
|
||||
CURRENT MISSION
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-slate-900/60 rounded-xl border border-white/5 text-center">
|
||||
<div className="text-2xl font-bold text-indigo-400">4-6 Builders</div>
|
||||
<div className="text-[10px] text-slate-500 uppercase font-bold tracking-widest">
|
||||
SQUAD SIZE
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-slate-900/60 rounded-xl border border-white/5 text-center">
|
||||
<div className="text-2xl font-bold text-emerald-400">6 Weeks</div>
|
||||
<div className="text-[10px] text-slate-500 uppercase font-bold tracking-widest">
|
||||
DURATION
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-slate-900/60 rounded-xl border border-white/5 text-center">
|
||||
<div className="text-2xl font-bold text-purple-400">Free</div>
|
||||
<div className="text-[10px] text-slate-500 uppercase font-bold tracking-widest">
|
||||
COST
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Background elements for this section */}
|
||||
<div className="absolute top-0 right-0 w-full h-full bg-[radial-gradient(circle_at_top_right,rgba(99,102,241,0.1),transparent)] pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
40
src/components/react/Features.tsx
Normal file
40
src/components/react/Features.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { Tv, Network, Handshake } from 'lucide-react';
|
||||
import { GlassCard } from './GlassCard';
|
||||
|
||||
export const Features = () => {
|
||||
return (
|
||||
<section className="py-24 bg-slate-900/50">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold font-heading mb-4 text-white">
|
||||
A Gym for Builders, Not a Classroom
|
||||
</h2>
|
||||
<p className="text-slate-400 max-w-2xl mx-auto font-sans">
|
||||
Skip the generic videos. Join a community where the curriculum is "Building things that
|
||||
matter."
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<GlassCard
|
||||
icon={Tv}
|
||||
title="No More Tutorials"
|
||||
text="Stop gathering 'knowledge' and start building skill. Tutorials make you feel smart while your skills stagnate. We ship from Day 1."
|
||||
delay={0.1}
|
||||
/>
|
||||
<GlassCard
|
||||
icon={Network}
|
||||
title="Protocol First"
|
||||
text="Master the plumbing of the future. Deep dive into Model Context Protocol (MCP), Universal Commerce Protocol (UCP), and Agentic frameworks."
|
||||
delay={0.2}
|
||||
/>
|
||||
<GlassCard
|
||||
icon={Handshake}
|
||||
title="Squad Mode"
|
||||
text="Never build alone. Match with creators who share your stack. Weekly sprints, peer reviews, and collaborative repos."
|
||||
delay={0.3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
26
src/components/react/GlassCard.tsx
Normal file
26
src/components/react/GlassCard.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
|
||||
interface GlassCardProps {
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
text: string;
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
export const GlassCard = ({ icon: Icon, title, text, delay = 0 }: GlassCardProps) => (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay }}
|
||||
className="relative group p-8 rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl hover:bg-white/10 transition-all duration-300"
|
||||
>
|
||||
<div className="mb-6 w-12 h-12 flex items-center justify-center rounded-lg bg-indigo-500/20 text-indigo-400 group-hover:scale-110 transition-transform duration-300">
|
||||
<Icon size={24} />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-white font-heading">{title}</h3>
|
||||
<p className="text-slate-400 leading-relaxed font-sans">{text}</p>
|
||||
<div className="absolute inset-0 border-2 border-transparent group-hover:border-indigo-500/30 rounded-2xl transition-all duration-300 pointer-events-none" />
|
||||
</motion.div>
|
||||
);
|
||||
137
src/components/react/Hero.tsx
Normal file
137
src/components/react/Hero.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { Zap, ChevronRight, Terminal } from 'lucide-react';
|
||||
import { CodeWindow } from './CodeWindow';
|
||||
|
||||
export const Hero = () => {
|
||||
return (
|
||||
<section className="relative pt-32 pb-20 overflow-hidden">
|
||||
{/* Background Grid Pattern */}
|
||||
<div
|
||||
className="absolute inset-0 z-0 opacity-10 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: 'radial-gradient(#6366F1 0.5px, transparent 0.5px)',
|
||||
backgroundSize: '24px 24px',
|
||||
}}
|
||||
/>
|
||||
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-indigo-500/10 blur-[120px] rounded-full -z-10" />
|
||||
<div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-amber-500/5 blur-[120px] rounded-full -z-10" />
|
||||
|
||||
<div className="container mx-auto px-6 relative z-10">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 bg-indigo-500/10 border border-indigo-500/20 px-3 py-1 rounded-full text-indigo-400 text-xs font-bold mb-6 tracking-wide uppercase">
|
||||
<Zap size={14} /> Future-Proof Your Career
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold font-heading leading-[1.1] mb-8 text-white">
|
||||
Don't Fear the AI. <br />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-amber-600">
|
||||
Build with AI.
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-400 mb-10 leading-relaxed max-w-xl font-sans">
|
||||
The safe harbor for developers, students, and founders to stop watching tutorials and
|
||||
start shipping. Master MCP, UCP, and Agents by building real products together.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('open-join-modal', {
|
||||
detail: { mode: 'opensource' },
|
||||
})
|
||||
);
|
||||
}}
|
||||
className="w-full sm:w-auto bg-amber-500 hover:bg-amber-400 text-slate-900 font-bold px-8 py-4 rounded-xl transition-all flex items-center justify-center gap-2 group cursor-pointer"
|
||||
>
|
||||
Join the Community
|
||||
</button>
|
||||
<button className="w-full sm:w-auto border border-slate-700 hover:border-slate-500 bg-white/5 px-8 py-4 rounded-xl font-bold transition-all text-white flex items-center justify-center gap-2 cursor-pointer">
|
||||
Read Manifesto
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 flex flex-col sm:flex-row items-start sm:items-center gap-6">
|
||||
<div className="flex -space-x-3">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-10 h-10 rounded-full border-2 border-slate-900 bg-slate-700 flex items-center justify-center overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${i + 123}`}
|
||||
alt="avatar"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<div className="w-10 h-10 rounded-full border-2 border-slate-900 bg-indigo-600 flex items-center justify-center text-[10px] font-bold text-white">
|
||||
+
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-0">
|
||||
<p
|
||||
className="text-sm text-slate-500 flex items-center gap-2"
|
||||
style={{
|
||||
fontWeight: '400',
|
||||
fontStyle: 'normal',
|
||||
color: '#90a1b9',
|
||||
}}
|
||||
>
|
||||
Join the Founding Class of 2026
|
||||
</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
const buildSection = document.getElementById('build-season');
|
||||
buildSection?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center',
|
||||
});
|
||||
}}
|
||||
className="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-500 text-xs font-bold hover:bg-amber-500/20 transition-all cursor-pointer sm:ml-2"
|
||||
>
|
||||
Learn More <ChevronRight size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="relative mt-12 lg:mt-0"
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<CodeWindow />
|
||||
</div>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute -top-12 -right-8 w-64 h-64 bg-indigo-500/20 rounded-full blur-[80px] -z-10" />
|
||||
<div className="absolute -bottom-8 -left-12 w-48 h-48 bg-amber-500/10 rounded-full blur-[60px] -z-10" />
|
||||
|
||||
{/* Floating Badge */}
|
||||
<motion.div
|
||||
animate={{ y: [0, -10, 0] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut' }}
|
||||
className="absolute -bottom-6 right-10 z-20 bg-slate-800 border border-slate-700 p-4 rounded-xl shadow-2xl flex items-center gap-3"
|
||||
>
|
||||
<div className="p-2 bg-amber-500/10 text-amber-500 rounded-lg">
|
||||
<Terminal size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] text-slate-500 uppercase font-bold tracking-widest">
|
||||
Active Stack
|
||||
</div>
|
||||
<div className="text-sm font-bold text-white">Gemini 3 Pro + MCP</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
179
src/components/react/JoinModal.tsx
Normal file
179
src/components/react/JoinModal.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { X, Check } from "lucide-react";
|
||||
|
||||
export const JoinModal = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
const [contentMode, setContentMode] = useState<'default' | 'opensource'>('default');
|
||||
const [source, setSource] = useState('gitea_contribute');
|
||||
|
||||
useEffect(() => {
|
||||
const handleOpen = (event: CustomEvent) => {
|
||||
const mode = event.detail?.mode || 'default';
|
||||
setContentMode(mode);
|
||||
setSource(mode === 'opensource' ? 'community_join' : 'gitea_contribute');
|
||||
setIsOpen(true);
|
||||
};
|
||||
window.addEventListener("open-join-modal", handleOpen as EventListener);
|
||||
return () => window.removeEventListener("open-join-modal", handleOpen as EventListener);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
// Allow default form submission for Netlify to handle redirect
|
||||
setIsSubmitted(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="absolute inset-0 bg-slate-950/80 backdrop-blur-sm"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
className="relative z-10 w-full max-w-2xl bg-slate-900 border border-white/10 rounded-2xl shadow-2xl overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-4 right-4 z-20">
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="p-2 text-slate-400 hover:text-white hover:bg-white/10 rounded-full transition-colors cursor-pointer"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row h-full">
|
||||
{/* Content Side */}
|
||||
<div className="p-8 md:p-10 flex-1">
|
||||
<h2 className="text-3xl font-bold font-heading text-white mb-6">
|
||||
{contentMode === 'opensource' ? "Build on Open Ground." : "Claim Your Locker."}
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4 text-slate-300 text-sm leading-relaxed mb-8">
|
||||
<p>
|
||||
{contentMode === 'opensource'
|
||||
? "We believe in tools that grant freedom, not locked gardens. Join a network of builders who value ownership over convenience."
|
||||
: "We don't build on rented land. While the rest of the world relies on centralized platforms, we host our own infrastructure."}
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold text-white mb-1">
|
||||
{contentMode === 'opensource' ? "Why Open Source?" : "Why Gitea?"}
|
||||
</h4>
|
||||
<ul className="space-y-2 list-disc pl-4 marker:text-amber-500">
|
||||
{contentMode === 'opensource' ? (
|
||||
<>
|
||||
<li>
|
||||
<b className="text-slate-200">Transparency:</b> Code that can be audited, trusted, and improved by everyone. No black boxes.
|
||||
</li>
|
||||
<li>
|
||||
<b className="text-slate-200">Collaboration:</b> A global community of builders pushing the boundaries together.
|
||||
</li>
|
||||
<li>
|
||||
<b className="text-slate-200">Longevity:</b> Software that survives its creators. We build for the long game.
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li>
|
||||
<b className="text-slate-200">Sovereignty:</b> We own our data, our code, and our community. No corporate shutdowns or VC pivots.
|
||||
</li>
|
||||
<li>
|
||||
<b className="text-slate-200">Focus:</b> A noise-free environment designed purely for shipping products. No vanity metrics, just commits.
|
||||
</li>
|
||||
<li>
|
||||
<b className="text-slate-200">The Badge:</b> Access is earned. having an <code className="bg-slate-800 px-1 py-0.5 rounded text-indigo-400">movecompeteplay gitea access</code> is a mark of a serious builder.
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<blockquote className="hidden md:block border-l-2 border-amber-500 pl-4 italic text-slate-400 my-4">
|
||||
{contentMode === 'opensource'
|
||||
? "\"Open source is not just a license; it's a statement of independence.\""
|
||||
: "\"The code won't write itself. The servers won't maintain themselves. We do it the hard way because it's the right way.\""}
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<form
|
||||
name="join-community"
|
||||
method="POST"
|
||||
action="/success"
|
||||
data-netlify="true"
|
||||
netlify-honeypot="bot-field"
|
||||
className="space-y-4"
|
||||
>
|
||||
<input type="hidden" name="form-name" value="join-community" />
|
||||
<input type="hidden" name="source" value={source} />
|
||||
<p className="hidden">
|
||||
<label>
|
||||
Don’t fill this out if you’re human: <input name="bot-field" />
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="flex-1">
|
||||
<label htmlFor="email" className="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
id="email"
|
||||
required
|
||||
placeholder="builder@example.com"
|
||||
className="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-3 text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label htmlFor="social" className="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2">
|
||||
LinkedIn / Twitter URL
|
||||
</label>
|
||||
<input
|
||||
name="social"
|
||||
type="url"
|
||||
id="social"
|
||||
placeholder="twitter.com/builder"
|
||||
className="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-3 text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="project" className="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2">
|
||||
What will you build?
|
||||
</label>
|
||||
<input
|
||||
name="project"
|
||||
type="text"
|
||||
id="project"
|
||||
required
|
||||
placeholder="A new agent framework..."
|
||||
className="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-3 text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-amber-500 hover:bg-amber-400 text-slate-900 font-bold py-4 rounded-xl transition-all hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-amber-500/20 cursor-pointer"
|
||||
>
|
||||
Request Access
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
31
src/components/react/ProfileCard.tsx
Normal file
31
src/components/react/ProfileCard.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export interface Profile {
|
||||
name: string;
|
||||
role: string;
|
||||
story: string;
|
||||
badge: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
export const ProfileCard = ({ profile }: { profile: Profile }) => (
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="bg-slate-800/40 border border-slate-700/50 p-6 rounded-2xl flex flex-col items-center text-center group"
|
||||
>
|
||||
<div className="relative mb-6">
|
||||
<div className="w-24 h-24 rounded-full overflow-hidden border-2 border-indigo-500/30 group-hover:border-indigo-400 transition-colors">
|
||||
<img src={profile.image} alt={profile.name} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div
|
||||
className="absolute -bottom-2 -right-2 bg-amber-500 text-[#1E293B] text-[10px] font-bold px-2 py-1 rounded-full uppercase tracking-tighter shadow-lg"
|
||||
style={{ fontSize: "9px" }}
|
||||
>
|
||||
{profile.badge}
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-lg mb-1">{profile.name}</h4>
|
||||
<p className="text-indigo-400 text-sm font-mono mb-4">{profile.role}</p>
|
||||
<p className="text-slate-400 text-sm italic">"{profile.story}"</p>
|
||||
</motion.div>
|
||||
);
|
||||
29
src/layouts/Layout.astro
Normal file
29
src/layouts/Layout.astro
Normal file
@@ -0,0 +1,29 @@
|
||||
---
|
||||
import "../styles/global.css";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Move. Compete. Play. — The future belongs to the builders."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body
|
||||
class="bg-background text-foreground font-sans min-h-screen selection:bg-amber-500/30 selection:text-amber-200"
|
||||
>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { type ClassValue, clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
233
src/pages/apply-season.astro
Normal file
233
src/pages/apply-season.astro
Normal file
@@ -0,0 +1,233 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout title="Draft Day: Season #01 - Move. Compete. Play.">
|
||||
<div class="min-h-screen bg-slate-950 py-20 px-4 md:px-0">
|
||||
<div class="container mx-auto max-w-2xl">
|
||||
{/* Header */}
|
||||
<div class="mb-12">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-amber-500/10 border border-amber-500/20 px-3 py-1 rounded-full text-amber-500 text-xs font-bold mb-6 tracking-wide uppercase"
|
||||
>
|
||||
Cohort #01 Applications Open
|
||||
</div>
|
||||
<h1
|
||||
class="text-4xl md:text-5xl font-bold font-heading text-white mb-6"
|
||||
>
|
||||
Draft Day: Season #01
|
||||
</h1>
|
||||
<p class="text-xl text-slate-400 font-sans mb-8">
|
||||
6 Weeks. 1 Squad. 1 Shipped Product.
|
||||
</p>
|
||||
<blockquote
|
||||
class="border-l-4 border-indigo-500 pl-6 py-2 italic text-slate-300 bg-indigo-500/5 rounded-r-xl"
|
||||
>
|
||||
"We curate teams based on skill, timezone, and ambition. You
|
||||
are not just joining a server; you are joining a roster."
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form
|
||||
name="draft-application"
|
||||
method="POST"
|
||||
action="/success"
|
||||
data-netlify="true"
|
||||
netlify-honeypot="bot-field"
|
||||
class="space-y-12 bg-slate-900/50 p-8 md:p-12 rounded-3xl border border-white/5"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="form-name"
|
||||
value="draft-application"
|
||||
/>
|
||||
<p class="hidden">
|
||||
<label>
|
||||
Don’t fill this out if you’re human: <input
|
||||
name="bot-field"
|
||||
/>
|
||||
</label>
|
||||
</p>
|
||||
|
||||
{/* 1. Identity */}
|
||||
<div class="space-y-6">
|
||||
<h2
|
||||
class="text-2xl font-bold text-white border-b border-white/10 pb-4"
|
||||
>
|
||||
1. Identity
|
||||
</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
for="pilot-name"
|
||||
class="block text-xs font-bold text-slate-400 uppercase tracking-widest"
|
||||
>
|
||||
Pilot Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="pilot-name"
|
||||
name="pilot-name"
|
||||
required
|
||||
class="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-3 text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500 transition-colors"
|
||||
placeholder="Callsign"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
for="email"
|
||||
class="block text-xs font-bold text-slate-400 uppercase tracking-widest"
|
||||
>
|
||||
Comms (Email)
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
class="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-3 text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500 transition-colors"
|
||||
placeholder="hacker@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. Squad Fit */}
|
||||
<div class="space-y-6">
|
||||
<h2
|
||||
class="text-2xl font-bold text-white border-b border-white/10 pb-4"
|
||||
>
|
||||
2. Squad Fit
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<label
|
||||
class="block text-xs font-bold text-slate-400 uppercase tracking-widest"
|
||||
>
|
||||
What is your Primary Role?
|
||||
</label>
|
||||
<div class="space-y-3">
|
||||
<label
|
||||
class="flex items-start gap-3 p-4 bg-slate-950 rounded-xl border border-slate-800 cursor-pointer hover:border-amber-500/50 transition-colors group"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="role"
|
||||
value="engineer"
|
||||
required
|
||||
class="mt-1 text-amber-500 focus:ring-amber-500 bg-slate-900 border-slate-700"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="font-bold text-white group-hover:text-amber-500 transition-colors"
|
||||
>
|
||||
Engineer
|
||||
</div>
|
||||
<div class="text-sm text-slate-400">
|
||||
Full Stack, Backend, AI
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
class="flex items-start gap-3 p-4 bg-slate-950 rounded-xl border border-slate-800 cursor-pointer hover:border-amber-500/50 transition-colors group"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="role"
|
||||
value="designer"
|
||||
required
|
||||
class="mt-1 text-amber-500 focus:ring-amber-500 bg-slate-900 border-slate-700"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="font-bold text-white group-hover:text-amber-500 transition-colors"
|
||||
>
|
||||
Designer
|
||||
</div>
|
||||
<div class="text-sm text-slate-400">
|
||||
UI/UX, Frontend Polish
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
class="flex items-start gap-3 p-4 bg-slate-950 rounded-xl border border-slate-800 cursor-pointer hover:border-amber-500/50 transition-colors group"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="role"
|
||||
value="operator"
|
||||
required
|
||||
class="mt-1 text-amber-500 focus:ring-amber-500 bg-slate-900 border-slate-700"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="font-bold text-white group-hover:text-amber-500 transition-colors"
|
||||
>
|
||||
Operator
|
||||
</div>
|
||||
<div class="text-sm text-slate-400">
|
||||
PM, Growth, Documentation
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
for="tech-stack"
|
||||
class="block text-xs font-bold text-slate-400 uppercase tracking-widest"
|
||||
>
|
||||
Your Tech Stack
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="tech-stack"
|
||||
name="tech-stack"
|
||||
required
|
||||
class="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-3 text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500 transition-colors"
|
||||
placeholder="e.g., Next.js, Python/FastAPI, Flutter"
|
||||
/>
|
||||
<p class="text-xs text-slate-500">
|
||||
Be specific so we can match you with compatible
|
||||
builders.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. The Pledge */}
|
||||
<div class="space-y-6">
|
||||
<h2
|
||||
class="text-2xl font-bold text-white border-b border-white/10 pb-4"
|
||||
>
|
||||
3. The Pledge
|
||||
</h2>
|
||||
<label
|
||||
class="flex items-start gap-4 p-4 bg-amber-500/5 border border-amber-500/20 rounded-xl cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="pledge"
|
||||
required
|
||||
class="mt-1 w-5 h-5 text-amber-500 rounded focus:ring-amber-500 bg-slate-900 border-slate-700"
|
||||
/>
|
||||
<span class="text-slate-300 text-sm leading-relaxed">
|
||||
I commit to the 6-week sprint. I understand that if
|
||||
I ghost my squad, I will be banned from future
|
||||
seasons. This is a team sport.
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* 4. CTA */}
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-amber-500 hover:bg-amber-400 text-slate-900 font-bold py-5 text-lg rounded-xl transition-all hover:scale-[1.01] active:scale-[0.99] shadow-lg shadow-amber-500/20 cursor-pointer flex items-center justify-center gap-2"
|
||||
>
|
||||
Submit Application <span class="text-xl">-></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
@@ -1,17 +1,22 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Navbar from "../components/Navbar.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import TechMarquee from "../components/TechMarquee.astro";
|
||||
import { Hero } from "../components/react/Hero";
|
||||
import { Features } from "../components/react/Features";
|
||||
import { Community } from "../components/react/Community";
|
||||
import { JoinModal } from "../components/react/JoinModal";
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Astro</h1>
|
||||
</body>
|
||||
</html>
|
||||
<Layout title="Move. Compete. Play. — The future belongs to the builders.">
|
||||
<Navbar />
|
||||
<JoinModal client:load />
|
||||
<main>
|
||||
<Hero client:load />
|
||||
<Features client:visible />
|
||||
<TechMarquee />
|
||||
<Community client:visible />
|
||||
</main>
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
51
src/pages/success.astro
Normal file
51
src/pages/success.astro
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import { Check } from "lucide-react";
|
||||
---
|
||||
|
||||
<Layout title="Request Received - Move. Compete. Play.">
|
||||
<div class="min-h-screen bg-slate-950 flex items-center justify-center p-4">
|
||||
<div
|
||||
class="max-w-md w-full bg-slate-900 border border-white/10 rounded-2xl p-8 md:p-12 text-center shadow-2xl relative overflow-hidden"
|
||||
>
|
||||
{/* Background decoration */}
|
||||
<div
|
||||
class="absolute top-0 right-0 w-64 h-64 bg-indigo-500/10 rounded-full blur-[80px] -z-10"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="absolute bottom-0 left-0 w-48 h-48 bg-amber-500/5 rounded-full blur-[60px] -z-10"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center mx-auto mb-6 border border-emerald-500/20"
|
||||
>
|
||||
<Check class="text-emerald-500" size={32} />
|
||||
</div>
|
||||
|
||||
<h1 class="text-3xl font-bold font-heading text-white mb-4">
|
||||
You're in the Queue.
|
||||
</h1>
|
||||
|
||||
<div class="space-y-4 text-slate-400 text-sm leading-relaxed mb-8">
|
||||
<p>
|
||||
We've received your request for a locker. Our team reviews
|
||||
every application manually to ensure the quality of the
|
||||
community.
|
||||
</p>
|
||||
<p>
|
||||
Keep an eye on your inbox. If you have the code, you'll get
|
||||
the keys.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="/"
|
||||
class="inline-block w-full bg-amber-500 hover:bg-amber-400 text-slate-900 font-bold py-4 rounded-xl transition-all hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-amber-500/20 cursor-pointer"
|
||||
>
|
||||
Return to Base
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
@@ -1 +1,142 @@
|
||||
@import "tailwindcss";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
||||
@import "tailwindcss";
|
||||
|
||||
@plugin "tailwindcss-animate";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: "Inter", sans-serif;
|
||||
--font-heading: "Space Grotesk", sans-serif;
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: var(--radius-sm);
|
||||
--radius-md: var(--radius-md);
|
||||
--radius-lg: var(--radius-lg);
|
||||
--radius-xl: var(--radius-xl);
|
||||
}
|
||||
|
||||
:root {
|
||||
--card: #F8FAFC;
|
||||
--ring: #FE9A00;
|
||||
--input: #E2E8F0;
|
||||
--muted: #CBD5E1;
|
||||
--accent: #FE9A00;
|
||||
--border: #E2E8F0;
|
||||
--chart-1: #293445;
|
||||
--chart-2: #FE9A00;
|
||||
--chart-3: #10B981;
|
||||
--chart-4: #F59E0B;
|
||||
--chart-5: #3B82F6;
|
||||
--popover: #FFFFFF;
|
||||
--primary: #293445;
|
||||
--sidebar: #F8FAFC;
|
||||
--secondary: #E2E8F0;
|
||||
--background: #FFFFFF;
|
||||
--foreground: #1E293B;
|
||||
--destructive: #EF4444;
|
||||
--sidebar-ring: #FE9A00;
|
||||
--sidebar-accent: #FE9A00;
|
||||
--sidebar-border: #E2E8F0;
|
||||
--card-foreground: #1E293B;
|
||||
--sidebar-primary: #293445;
|
||||
--muted-foreground: #64748B;
|
||||
--accent-foreground: #1E293B;
|
||||
--popover-foreground: #1E293B;
|
||||
--primary-foreground: #FFFFFF;
|
||||
--sidebar-foreground: #1E293B;
|
||||
--secondary-foreground: #1E293B;
|
||||
--destructive-foreground: #FFFFFF;
|
||||
--sidebar-accent-foreground: #1E293B;
|
||||
--sidebar-primary-foreground: #FFFFFF;
|
||||
--radius: 0rem;
|
||||
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--font-body: Inter;
|
||||
--radius-lg: 0.875rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-xl: 1rem;
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
--font-heading: Space Grotesk;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--card: #293445;
|
||||
--ring: #FE9A00;
|
||||
--input: #334155;
|
||||
--muted: #475569;
|
||||
--accent: #FE9A00;
|
||||
--border: #334155;
|
||||
--chart-1: #293445;
|
||||
--chart-2: #FE9A00;
|
||||
--chart-3: #34D399;
|
||||
--chart-4: #FBBF24;
|
||||
--chart-5: #60A5FA;
|
||||
--popover: #293445;
|
||||
--primary: #293445;
|
||||
--sidebar: #1E293B;
|
||||
--secondary: #334155;
|
||||
--background: #1E293B;
|
||||
--foreground: #F1F5F9;
|
||||
--destructive: #DC2626;
|
||||
--sidebar-ring: #FE9A00;
|
||||
--sidebar-accent: #FE9A00;
|
||||
--sidebar-border: #334155;
|
||||
--card-foreground: #F1F5F9;
|
||||
--sidebar-primary: #293445;
|
||||
--muted-foreground: #CBD5E1;
|
||||
--accent-foreground: #1E293B;
|
||||
--popover-foreground: #F1F5F9;
|
||||
--primary-foreground: #FFFFFF;
|
||||
--sidebar-foreground: #F1F5F9;
|
||||
--secondary-foreground: #F1F5F9;
|
||||
--destructive-foreground: #FFFFFF;
|
||||
--sidebar-accent-foreground: #1E293B;
|
||||
--sidebar-primary-foreground: #FFFFFF;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-heading);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user