bonaventis/général.html at main · LeonardoRubatto/bonaventis · 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
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bonaventis</title>
  <link rel="stylesheet" href="general.css">
  <link rel="icon" href="img/logowhite.png" type="image/svg+xml">


<!-- AOS v2 – Styles et scripts -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css"
/>
<script defer src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

<!-- Config AOS INLINE -->
<script id="aos-config" type="application/json">
{
  "text": {
    "selectors": [
      "h1","h2","h3","h4",
      "p","small","a.btn",
      "li",
      ".contact-image-placeholder",
      ".contact-form-vertical",
      ".pricing-cards .card"
    ],
    "effect": "fade-up"
  },
  "image": {
    "selectors": ["img"],
    "directions": {
      "left": "fade-right",
      "right": "fade-left",
      "default": "fade-up"
    }
  },
  "positionClasses": {
    "left": ["setup-image"],
    "right": ["contact-image"]
  },
  "excludeSelectors": ["footer", ".no-aos"]
}
</script>

<!-- Votre script d'initialisation AOS -->
<script defer src="js/aos-init.js"></script>


</head>
<body>
  <!-- HEADER -->
  <header class="header">
    <div class="container nav-container">
      <div class="logo"></div>
      <nav class="nav">
        <a href="général.html" class="active">Accueil</a>
        <a href="services.html">Nos services</a>
        <a href="About.html">About Us</a>
        <a href="conseils.html">conseils</a>
        <a href="Tarifs.html">Tarifs</a>
        <a href="contact.html">Contact</a>
      </nav>
    </div>
  </header>

  <main class="container">
    <!-- INTRO SECTION -->
    <section class="intro">
      <div class="intro-text">
        <h1>UN PROJET INNOVANT</h1>
        <p>
          Notre ambition est d’aller au-delà des attentes de nos établissements et de nos participants, en offrant une expérience pédagogique sur-mesure, portée par l’expertise de notre équipe et renforcée par la coopération active de chacun.
        </p>
        <a href="services.html" class="btn">Découvrir</a>
      </div>
      <div class="intro-image">
       <img src="img/intro.png" alt="entrée du site">
      </div>
    </section>

    <!-- SLOGAN SECTION -->
    <section class="slogan-section" style="padding: var(--spacing-vertical) 0;">
      <p class="slogan">
        Bonaventis se positionne comme une alternative aux dispositifs traditionnels </br>de valorisation de l’engagement, offrant un niveau d’expertise et de </br>sécurité pédagogique équivalent, tout en maintenant </br>un service personnalisé et de haute qualité. </p>
    </section>

    <!-- FEATURES -->
    <section class="three-columns" style="padding: var(--spacing-vertical) 0;">
      <div class="column">
        <div class="icon"><img src="img/contribution.png" alt="icone"></div>
        <h3>CONTRIBUTION COLLECTIVE</h3>
        <p class="subtext">
          Grâce à des missions définies par votre structure (entretien, tutorat, animations), chaque participant devient un moteur de cohésion, en développant son sens des responsabilités.
        </p>
      </div>
      <div class="column">
        <div class="icon"><img src="img/récompense.png" alt="icone"></div>
        <h3>RÉCOMPENSE SUR-MESURE</h3>
        <p class="subtext">
          Les crédits Bonaventis s’échangent contre des biens et services (cantine, accès à des ateliers, événements) pour offrir une motivation concrète et durable.
        </p>
      </div>
      <div class="column">
        <div class="icon"><img src="img/analyse.png" alt="icone"></div>
        <h3>ANALYSES PÉDAGOGIQUES</h3>
        <p class="subtext">
          Un tableau de bord intégré permet de suivre les statistiques d’engagement (tâches réalisées, crédits distribués) et d’enrichir les enseignements en économie et management.
        </p>
      </div>
    </section>

    <!-- ACCESS -->
    <section class="access" style="padding: var(--spacing-vertical) 0;">
      <div class="illustration"><img src="img/tarif1.png" alt="illustration"></div>
      <div class="access-text">
        <h2>Accès payant</h2>
        <p>Bonaventis est disponible sous forme d’abonnement annuel ou mensuel, adapté à la taille et au budget de votre établissement. Choisissez la formule qui vous convient et bénéficiez d’un support dédié et de mises à jour régulières.<br>Nos tarifs évolutifs garantissent une montée en puissance maîtrisée, sans coûts cachés.</p>
        <a href="tarifs.html" class="btn">En savoir plus</a>
      </div>
    </section>

    <!-- CONTACT FORM -->
<section class="contact-form-section" style="padding: var(--spacing-vertical) 0;">
  <h4>Contactez-nous</h4>
  <div class="contact-grid">
    <!-- Colonne de gauche : FORMULAIRE -->
    <form action="traitement.php" method="POST" class="contact-form">
      <input type="text"   name="nom"     placeholder="Nom"      required>
      <div class="form-actions">
        <input type="email"  name="email"   placeholder="E-mail"   required>
      </div>
      <input type="text"   name="sujet"   placeholder="Sujet"    required>
      <textarea           name="message" placeholder="Votre message…" required></textarea>
      <div class="form-actions">
        <button type="submit" class="btn">Envoyer</button>
      </div>
    </form>

    <!-- Colonne de droite : ILLUSTRATION + TEXTE + BOUTON -->
    <div class="contact-info">
      <div class="contact-illustration"><img src="img/contact2.png" alt="contact illustration"></div>
      <h2>Votre accès sur-mesure</h2>
      <p>Quel que soit votre projet, notre équipe est à votre écoute. Envoyez-nous un e-mail, appelez-nous ou remplissez le formulaire pour obtenir une démonstration personnalisée et un devis sur-mesure !</p>
      <h3>BONAVENTIS.PRJCT@GMAIL.COM <br/> +33 06 95 57 38 63</h3>
      <a href="contact.html" class="btn">Contact</a>
    </div>
  </div>
</section>
</main>


  <!-- FOOTER -->
  <footer class="footer" role="contentinfo">
  <div class="container footer-container">
    <div class="footer-column">
      <div class="logo-footer"></div>
      <h5>Bonaventis</h5>
      <p>Pour un futur collaboratif et participatif, impliquant des participants dans la vie collective</p>
    </div>
    <div class="footer-column">
      <h5>Nos Services</h5>
      <a href="about.html">Origine et présentation</a>
      <a href="conseils.html">Conseils et FAQ</a>
      <a href="tarifs.html">Tarifs</a>
    </div>
    <div class="footer-column">
      <h5>À propos</h5>
      <a href="About.html">Notre équipe</a>
      <a href="services.html">Carrières</a>
    </div>
    <div class="footer-column">
      <h5>Contact</h5>
      <p>+33 06 95 57 38 63</p>
      <p><a href="mailto:bonaventis.prjct@gmail.com">bonaventis.prjct@gmail.com</a></p>
    </div>
  </div>

  <div class="footer-bottom">
    <small>
      <a href="legal.html#mentions">Mentions légales</a> |
      <a href="legal.html#confidentialite">Politique de confidentialité</a> |
      <a href="legal.html#cookies">Gestion des cookies</a>
    </small>
  </div>
</footer>