2026.es.pycon.org/src/components/home/SectionCTAs.astro at bb778daf9237eccb6d3e71e53c2d01e51f66ee6f · python-spain/2026.es.pycon.org · 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
115
116
117
---
import { texts } from '@/i18n/home'
import { menuTexts } from '@/i18n/menu'
import Button from '../Button.astro'

interface Props {
  lang: string
}

const { lang } = Astro.props
const t = texts[lang as keyof typeof texts]
const menuT = menuTexts[lang as keyof typeof menuTexts]

const ctas = [
  {
    emoji: '🔍',
    title: t['cta.reviewers.title'],
    description: t['cta.reviewers.description'],
    buttonText: t['cta.reviewers.button'],
    href: 'https://docs.google.com/forms/d/e/1FAIpQLScuG-J1A4xNmC249RkK2VCZDCjxw0uDE7hpL3A5Vj8yu3Ls5g/viewform',
    variant: 'outline' as const,
    accent: 'red',
    external: true,
  },
  {
    emoji: '🤝',
    title: t['cta.sponsors.title'],
    description: t['cta.sponsors.description'],
    buttonText: t['cta.sponsors.button'],
    href: `/${lang}/sponsors`,
    variant: 'secondary' as const,
    accent: 'amber',
    external: false,
  },
]
---

<section aria-labelledby="ctas-heading" class="flex flex-col gap-8">
  <h2 id="ctas-heading" class="sr-only">Llamadas a la participación</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 max-w-5xl mx-auto gap-6">
    {
      ctas.map((cta) => (
        <article
          class:list={[
            'group relative flex flex-col gap-6 p-8 rounded-2xl border transition-all duration-300 shadow-xl',
            'bg-white/5 backdrop-blur-md hover:bg-white/10',
            cta.accent === 'orange' && 'border-white/10 hover:border-pycon-orange/60',
            cta.accent === 'amber' && 'border-white/10 hover:border-amber-400/60',
            cta.accent === 'red' && 'border-white/10 hover:border-pycon-red-50/60',
          ]}
        >
          {/* Subtle glow on hover */}
          <div
            class:list={[
              'absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none',
              cta.accent === 'orange' && 'shadow-[inset_0_0_60px_rgba(234,88,12,0.06)]',
              cta.accent === 'amber' && 'shadow-[inset_0_0_60px_rgba(251,191,36,0.06)]',
              cta.accent === 'red' && 'shadow-[inset_0_0_60px_rgba(239,68,68,0.06)]',
            ]}
            aria-hidden="true"
          />

          <div class="flex flex-col gap-3 flex-1">
            <div class="flex items-center gap-3">
              <span class="text-3xl" aria-hidden="true">
                {cta.emoji}
              </span>
              <h3
                class:list={[
                  'text-xl font-bold leading-snug',
                  cta.accent === 'orange' && 'text-pycon-orange',
                  cta.accent === 'amber' && 'text-amber-400',
                  cta.accent === 'red' && 'text-pycon-red-50',
                ]}
              >
                {cta.title}
              </h3>
            </div>

            <p class="text-pycon-gray-25 leading-relaxed text-sm flex-1">{cta.description}</p>
          </div>

          <div class="mt-auto">
            <Button
              variant={cta.variant}
              size="md"
              href={cta.href}
              target={cta.external ? '_blank' : undefined}
              rel={cta.external ? 'noopener noreferrer' : undefined}
              aria-label={cta.external ? `${cta.buttonText} ${menuT.new_tab}` : undefined}
              class="w-full"
            >
              {cta.buttonText}
              {cta.external && (
                <svg
                  class="ml-2 w-4 h-4 shrink-0"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  aria-hidden="true"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                  />
                </svg>
              )}
            </Button>
          </div>
        </article>
      ))
    }
  </div>
</section>