agent_crew_landing/web/src/components/CTAFinal.astro at f4e7f0c12176b6d5cde97ea6563e8d40cfe1b9d7 · helmcode/agent_crew_landing · GitHub

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
---
import { useTranslations, getBaseUrl } 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);
---

<section class="py-16 sm:py-20 relative overflow-hidden" aria-label="Call to action" style="background: linear-gradient(180deg, #0a0f1e 0%, #0d1424 50%, #0a0f1e 100%);">
  <!-- Background glow -->
  <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
    <div class="w-[600px] h-[400px] rounded-full opacity-15 blur-3xl" style="background: radial-gradient(ellipse, #3b82f6 0%, transparent 70%);"></div>
  </div>

  <!-- Decorative top border -->
  <div class="absolute top-0 left-0 right-0 h-px" style="background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.5) 30%, rgba(139, 92, 246, 0.5) 70%, transparent 100%);"></div>

  <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
    <!-- Badge -->
    <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium mb-8 border" style="background-color: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); color: #60a5fa;">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
      </svg>
      {t('cta.badge')}
    </div>

    <!-- Heading -->
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white mb-5 leading-tight">
      {t('cta.heading')}<br/>
      <span class="gradient-text">{t('cta.headingGradient')}</span>
    </h2>

    <!-- Subtitle -->
    <p class="text-lg text-slate-400 mb-10 max-w-xl mx-auto">
      {t('cta.subtitle')}
    </p>

    <!-- Install command -->
    <div class="max-w-2xl mx-auto mb-10 rounded-xl border border-slate-700/60 overflow-hidden" style="background-color: #0d1117;">
      <div class="px-5 py-4 font-mono text-sm flex items-center justify-between gap-4">
        <code class="text-slate-300 overflow-x-auto"><span class="text-green-400">$</span> curl -fsSL https://agentcrew.sh/install.sh | bash</code>
      </div>
    </div>

    <!-- CTA Buttons -->
    <div class="flex flex-col sm:flex-row sm:flex-wrap items-center justify-center gap-4">
      <a
        href={`${base}/docs/quick-start`}
        class="w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-500 text-white font-bold px-10 py-4 rounded-xl transition-all duration-200 glow-blue text-base focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:outline-none"
      >
        {t('cta.getStarted')}
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M5 12h14M12 5l7 7-7 7"/>
        </svg>
      </a>
      <a
        href="https://github.com/helmcode/agent_crew"
        target="_blank"
        rel="noopener noreferrer"
        class="w-full sm:w-auto inline-flex items-center justify-center gap-2 border border-slate-600 hover:border-slate-400 text-slate-300 hover:text-white font-bold px-10 py-4 rounded-xl transition-all duration-200 text-base focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:outline-none"
      >
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" 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('cta.viewGithub')}
        <span class="sr-only">(opens in new tab)</span>
      </a>
      <a
        href="https://calendly.com/helmcode/work"
        target="_blank"
        rel="noopener noreferrer"
        class="w-full sm:w-auto inline-flex items-center justify-center gap-2 border border-violet-500/50 hover:border-violet-400 text-violet-300 hover:text-white font-bold px-10 py-4 rounded-xl transition-all duration-200 text-base focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:outline-none"
        style="background: rgba(139, 92, 246, 0.08);"
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
          <line x1="16" y1="2" x2="16" y2="6"/>
          <line x1="8" y1="2" x2="8" y2="6"/>
          <line x1="3" y1="10" x2="21" y2="10"/>
        </svg>
        {t('cta.bookCall')}
        <span class="sr-only">(opens in new tab)</span>
      </a>
    </div>

    <!-- Trust indicators -->
    <div class="flex flex-wrap items-center justify-center gap-6 mt-12">
      <div class="flex items-center gap-2 text-slate-500 text-sm">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
        </svg>
        {t('cta.selfHosted')}
      </div>
      <div class="flex items-center gap-2 text-slate-500 text-sm">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        </svg>
        {t('cta.noData')}
      </div>
      <div class="flex items-center gap-2 text-slate-500 text-sm">
        <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="M8 12l2 2 4-4"/>
        </svg>
        {t('cta.license')}
      </div>
    </div>
  </div>

  <!-- Decorative bottom border -->
  <div class="absolute bottom-0 left-0 right-0 h-px" style="background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.3) 30%, rgba(59, 130, 246, 0.3) 70%, transparent 100%);"></div>
</section>