UPAC/index.html at main · DevNet8057/UPAC · 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
<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Questionnaire UPAC</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
          },
          colors: {
            primary: '#1e3a8a',
            secondary: '#e0f2fe',
            accent: '#facc15',
            darkblue: '#0f172a'
          },
          animation: {
            fade: 'fadeIn 1s ease-in-out',
          },
          keyframes: {
            fadeIn: {
              '0%': { opacity: '0', transform: 'translateY(20px)' },
              '100%': { opacity: '1', transform: 'translateY(0)' },
            },
          }
        }
      }
    }
  </script>
</head>

<body class="bg-secondary font-sans">
  <!-- Header avec image de fond et superposition -->
  <header class="relative text-white shadow-xl">
    <div class="absolute inset-0">
      <img src="https://images.unsplash.com/photo-1581090700227-1e8d89b5d3db?auto=format&fit=crop&w=1920&q=80"
        alt="fond religieux" class="w-full h-full object-cover">
      <div class="absolute inset-0 bg-gradient-to-r from-primary to-darkblue opacity-90"></div>
    </div>
    <div class="relative z-10 px-6 py-20 text-center animate-fade">
      <h1 class="text-5xl font-extrabold mb-4">🕊️ Questionnaire UPAC</h1>
      <p class="text-xl max-w-3xl mx-auto text-accent font-medium">Une enquête théologique sur la <strong>Sola
          Scriptura</strong> et la refondation de l'Église Évangélique du Cameroun</p>
    </div>
  </header>

  <!-- Contenu principal -->
  <main class="flex flex-col items-center justify-center p-6">
    <div
      class="bg-white shadow-2xl rounded-3xl max-w-5xl w-full overflow-hidden transform transition hover:scale-[1.01] duration-300 animate-fade">
      <div class="p-6 md:p-10">
        <iframe
          src="https://docs.google.com/forms/d/e/1FAIpQLSe1stcXV1HPj67-JcZPbyXH5qze0wTmCma1A4mJluffOeVQQg/viewform?embedded=true"
          width="100%" height="1200" frameborder="0" marginheight="0" marginwidth="0"
          class="w-full rounded-lg border border-gray-200">
          Chargement…
        </iframe>
      </div>
      <!-- Ajout section après le formulaire -->
      <div class="px-6 pb-10 text-center animate-fade">
        <h2 class="text-2xl font-semibold text-primary mb-4">✨ Merci pour votre participation !</h2>
        <p class="text-gray-700 max-w-2xl mx-auto mb-6">Votre voix compte dans cette recherche académique et
          spirituelle. Ensemble, bâtissons une Église plus forte, ancrée dans la Parole.</p>
        <a href="#"
          class="inline-block bg-primary text-white px-6 py-3 rounded-full shadow-lg hover:bg-darkblue transition duration-300">En
          savoir plus sur l'UPAC</a>
      </div>
    </div>
  </main>

  <!-- Section visuelle complémentaire -->
  <section class="mt-20 px-6 max-w-6xl mx-auto grid md:grid-cols-2 gap-10 items-center animate-fade">
    <img
      src="https://img.freepik.com/photos-gratuite/amis-masculins-afro-americains-debout-dans-parc-discuter-bible_181624-21220.jpg?t=st=1744319920~exp=1744323520~hmac=b2deed33f1500cfe8dc899a6cca97e9d17cf4279ccceaba51aacef24d333bf90&w=1380"
      alt="lecture bible" class="rounded-2xl shadow-xl">
    <div>
      <h2 class="text-3xl font-bold text-primary mb-4">📖 Pourquoi ce questionnaire ?</h2>
      <p class="text-gray-700 mb-4 leading-relaxed">Dans le cadre de notre mémoire de licence à l'Université Protestante
        d'Afrique Centrale (UPAC), nous menons une réflexion sur le rôle fondamental de la <em>Sola Scriptura</em> dans
        la refondation de l'Église Évangélique du Cameroun.</p>
      <p class="text-gray-700 leading-relaxed">Votre contribution est essentielle. Merci de nous aider à approfondir
        notre compréhension théologique et communautaire. 🙏</p>
    </div>
  </section>

  <!-- Pied de page -->
  <footer class="mt-20 text-center text-gray-600 py-6 border-t animate-fade">
    <p>&copy; 2025 Université Protestante d'Afrique Centrale — Tous droits réservés</p>
    <p class="text-sm mt-1">Site réalisé dans un cadre académique. Pour tout contact : theologie@upac.cm</p>
  </footer>
</body>

</html>