-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathNavbar.astro
More file actions
157 lines (149 loc) · 8.72 KB
/
Navbar.astro
File metadata and controls
157 lines (149 loc) · 8.72 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
---
import { useTranslations, getBaseUrl, getLocalizedPath } from '../i18n/utils';
import type { Lang } from '../i18n/ui';
interface Props { lang?: Lang; }
const lang = Astro.props.lang ?? 'en';
const t = useTranslations(lang);
const base = getBaseUrl(lang);
const currentPath = Astro.url.pathname;
const otherLang = lang === 'en' ? 'es' : 'en';
const switchUrl = getLocalizedPath(currentPath, otherLang);
const switchLabel = otherLang === 'es' ? 'ES' : 'EN';
---
<nav class="fixed top-0 left-0 right-0 z-50 border-b border-slate-800/60 backdrop-blur-md" style="background-color: rgba(10, 15, 30, 0.85);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<a href={`${base}/`} class="flex items-center gap-2" aria-label="AgentCrew home">
<svg class="h-10 w-auto" viewBox="0 0 280 56" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="nav-bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3b82f6"/>
<stop offset="100%" stop-color="#8b5cf6"/>
</linearGradient>
</defs>
<rect width="44" height="44" y="6" rx="9" fill="url(#nav-bg)"/>
<line x1="19" y1="27" x2="13" y2="19" stroke="white" stroke-width="1.1" opacity="0.5" stroke-linecap="round"/>
<line x1="19" y1="27" x2="33" y2="20" stroke="white" stroke-width="1.1" opacity="0.5" stroke-linecap="round"/>
<line x1="19" y1="27" x2="12" y2="39" stroke="white" stroke-width="1.1" opacity="0.5" stroke-linecap="round"/>
<line x1="19" y1="27" x2="34" y2="40" stroke="white" stroke-width="1.1" opacity="0.5" stroke-linecap="round"/>
<line x1="13" y1="19" x2="33" y2="20" stroke="white" stroke-width="0.5" opacity="0.15" stroke-linecap="round"/>
<line x1="12" y1="39" x2="34" y2="40" stroke="white" stroke-width="0.5" opacity="0.15" stroke-linecap="round"/>
<circle cx="19" cy="27" r="7" fill="white" opacity="0.12"/>
<circle cx="19" cy="27" r="5" fill="white" opacity="0.95"/>
<circle cx="13" cy="19" r="3" fill="white" opacity="0.85"/>
<circle cx="33" cy="20" r="3.3" fill="white" opacity="0.9"/>
<circle cx="12" cy="39" r="2.8" fill="white" opacity="0.8"/>
<circle cx="34" cy="40" r="3.1" fill="white" opacity="0.85"/>
<circle cx="7" cy="30" r="1" fill="white" opacity="0.2"/>
<circle cx="39" cy="31" r="1.1" fill="white" opacity="0.18"/>
<text x="56" y="34" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="22" font-weight="600" fill="white">AgentCrew</text>
</svg>
</a>
<!-- Desktop Nav Links -->
<div class="hidden md:flex items-center gap-8">
<a href={`${base}/#features`} class="text-slate-400 hover:text-white text-sm font-medium transition-colors duration-200">
{t('nav.features')}
</a>
<a href={`${base}/#use-cases`} class="text-slate-400 hover:text-white text-sm font-medium transition-colors duration-200">
{t('nav.useCases')}
</a>
<a href={`${base}/#how-it-works`} class="text-slate-400 hover:text-white text-sm font-medium transition-colors duration-200">
{t('nav.howItWorks')}
</a>
<a href={`${base}/docs`} class="text-slate-400 hover:text-white text-sm font-medium transition-colors duration-200">
{t('nav.docs')}
</a>
<a href={`${base}/#contact`} class="text-slate-400 hover:text-white text-sm font-medium transition-colors duration-200">
{t('nav.contact')}
</a>
<a
href="https://github.com/helmcode/agent_crew"
target="_blank"
rel="noopener noreferrer"
class="flex items-center gap-2 text-slate-400 hover:text-white text-sm font-medium transition-colors duration-200"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
</svg>
{t('nav.github')}
<span class="sr-only">(opens in new tab)</span>
</a>
</div>
<!-- CTA area with language toggle -->
<div class="hidden md:flex items-center gap-3">
<!-- Language Toggle -->
<a
href={switchUrl}
class="flex items-center gap-1.5 text-slate-400 hover:text-white text-sm font-medium transition-colors duration-200 px-2 py-1 rounded border border-slate-700/50 hover:border-slate-500"
id="lang-toggle"
data-current-lang={lang}
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<circle cx="12" cy="12" r="10"/>
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
</svg>
{switchLabel}
</a>
<a
href={`${base}/docs/quick-start`}
class="bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-all duration-200 glow-blue"
>
{t('nav.getStarted')}
</a>
</div>
<!-- Mobile menu button -->
<button
id="mobile-menu-button"
class="md:hidden text-slate-400 hover:text-white transition-colors"
aria-label="Toggle mobile menu"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="3" y1="6" x2="21" y2="6"/>
<line x1="3" y1="12" x2="21" y2="12"/>
<line x1="3" y1="18" x2="21" y2="18"/>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden border-t border-slate-800/60" style="background-color: rgba(10, 15, 30, 0.95);">
<div class="px-4 py-4 space-y-3">
<a href={`${base}/#features`} class="block text-slate-400 hover:text-white text-sm font-medium transition-colors">{t('nav.features')}</a>
<a href={`${base}/#use-cases`} class="block text-slate-400 hover:text-white text-sm font-medium transition-colors">{t('nav.useCases')}</a>
<a href={`${base}/#how-it-works`} class="block text-slate-400 hover:text-white text-sm font-medium transition-colors">{t('nav.howItWorks')}</a>
<a href={`${base}/docs`} class="block text-slate-400 hover:text-white text-sm font-medium transition-colors">{t('nav.docs')}</a>
<a href={`${base}/#contact`} class="block text-slate-400 hover:text-white text-sm font-medium transition-colors">{t('nav.contact')}</a>
<a href="https://github.com/helmcode/agent_crew" target="_blank" rel="noopener noreferrer" class="block text-slate-400 hover:text-white text-sm font-medium transition-colors">{t('nav.github')}<span class="sr-only">(opens in new tab)</span></a>
<a
href={switchUrl}
class="flex items-center gap-1.5 text-slate-400 hover:text-white text-sm font-medium transition-colors"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<circle cx="12" cy="12" r="10"/>
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
</svg>
{switchLabel}
</a>
<a href={`${base}/docs/quick-start`} class="block bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold px-4 py-2 rounded-lg text-center transition-all">{t('nav.getStarted')}</a>
</div>
</div>
</nav>
<script>
const btn = document.getElementById('mobile-menu-button');
const menu = document.getElementById('mobile-menu');
if (btn && menu) {
btn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
}
</script>
<script>
const langToggle = document.getElementById('lang-toggle');
if (langToggle) {
const currentLang = langToggle.getAttribute('data-current-lang');
if (currentLang) {
localStorage.setItem('agentcrew-lang', currentLang);
}
}
</script>