diff --git a/app/static/assets/images/Geekbrain-io.png b/app/static/assets/images/Geekbrain-io.png
new file mode 100644
index 0000000..6058fac
--- /dev/null
+++ b/app/static/assets/images/Geekbrain-io.png
Binary files differ
diff --git a/app/static/assets/images/README.md b/app/static/assets/images/README.md
new file mode 100644
index 0000000..6fb5231
--- /dev/null
+++ b/app/static/assets/images/README.md
@@ -0,0 +1,5 @@
+# Logo
+
+Place the GeekBrain.io logo file here as `Geekbrain-io.png`.
+
+Recommended: Transparent PNG, ~200-300px width.
diff --git a/app/static/css/style.css b/app/static/css/style.css
new file mode 100644
index 0000000..791db80
--- /dev/null
+++ b/app/static/css/style.css
@@ -0,0 +1,182 @@
+:root {
+ --primary: #D4AF37;
+ --secondary: #4a4a4a;
+ --bg-light: #F5F5DC;
+ --bg-dark: #1a1a1a;
+ --accent: #B87333;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+ font-family: Georgia, 'Times New Roman', serif;
+ background: var(--bg-dark);
+ color: #e0d0b0;
+ line-height: 1.6;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+/* Header */
+.header {
+ background: var(--bg-dark);
+ border-bottom: 2px solid var(--primary);
+ padding: 15px 0;
+}
+
+.header-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ height: 50px;
+ width: auto;
+}
+
+.nav {
+ display: flex;
+ gap: 25px;
+}
+
+.nav a {
+ color: var(--primary);
+ text-decoration: none;
+ font-weight: bold;
+ transition: color 0.3s;
+}
+
+.nav a:hover {
+ color: #fff;
+}
+
+/* Main */
+.main {
+ padding: 40px 0;
+ min-height: calc(100vh - 200px);
+}
+
+/* Footer */
+.footer {
+ background: #0d0d0d;
+ border-top: 2px solid var(--primary);
+ padding: 20px 0;
+ text-align: center;
+ color: var(--secondary);
+}
+
+.footer a {
+ color: var(--primary);
+}
+
+/* Hero */
+.hero {
+ background: linear-gradient(135deg, var(--primary), var(--accent));
+ color: var(--bg-dark);
+ padding: 60px;
+ border-radius: 8px;
+ margin-bottom: 40px;
+ text-align: center;
+}
+
+.hero h1 {
+ font-size: 2.5em;
+ margin-bottom: 10px;
+}
+
+/* Grid */
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 25px;
+ margin: 30px 0;
+}
+
+/* Card */
+.card {
+ background: var(--bg-light);
+ color: #333;
+ border: 2px solid var(--primary);
+ border-radius: 8px;
+ padding: 20px;
+}
+
+.card h3, .card h4 {
+ color: var(--accent);
+ margin-bottom: 10px;
+}
+
+.card h4 {
+ background: var(--primary);
+ color: var(--bg-dark);
+ padding: 5px 10px;
+ margin: -20px -20px 10px -20px;
+ border-radius: 6px 6px 0 0;
+ font-size: 0.9em;
+}
+
+/* Buttons */
+.btn {
+ background: var(--primary);
+ color: var(--bg-dark);
+ border: none;
+ padding: 12px 24px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 1em;
+ text-decoration: none;
+ display: inline-block;
+}
+
+.btn:hover {
+ background: var(--accent);
+}
+
+/* Forms */
+.form-group {
+ margin-bottom: 20px;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 5px;
+ color: var(--primary);
+}
+
+.form-group input,
+.form-group textarea {
+ width: 100%;
+ padding: 10px;
+ border: 1px solid var(--secondary);
+ border-radius: 4px;
+ background: #fff;
+ color: #333;
+ font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+ outline: none;
+ border-color: var(--primary);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .nav {
+ gap: 10px;
+ font-size: 0.9em;
+ }
+ .hero {
+ padding: 30px;
+ }
+ .header-content {
+ flex-direction: column;
+ gap: 10px;
+ }
+}
diff --git a/app/static/js/main.js b/app/static/js/main.js
new file mode 100644
index 0000000..112d286
--- /dev/null
+++ b/app/static/js/main.js
@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const form = document.getElementById('contact-form');
+ if (!form) return;
+
+ form.addEventListener('submit', async (e) => {
+ e.preventDefault();
+
+ // Basic frontend validation
+ const name = form.name.value.trim();
+ const email = form.email.value.trim();
+ const subject = form.subject.value.trim();
+ const message = form.message.value.trim();
+ const recaptchaResponse = form['g-recaptcha-response'].value;
+
+ if (!name || !email || !subject || !message) {
+ alert('Tous les champs sont obligatoires.');
+ return;
+ }
+
+ if (!recaptchaResponse) {
+ alert('Veuillez valider le reCAPTCHA.');
+ return;
+ }
+
+ // Submit via fetch
+ try {
+ const response = await fetch('/contact', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ name, email, subject, message,
+ recaptcha_token: recaptchaResponse
+ })
+ });
+
+ const data = await response.json();
+ if (data.success) {
+ alert('Message envoyé avec succès!');
+ form.reset();
+ if (typeof grecaptcha !== 'undefined') {
+ grecaptcha.reset();
+ }
+ } else {
+ alert('Erreur: ' + (data.message || 'Envoi échoué'));
+ }
+ } catch (err) {
+ alert('Erreur réseau: ' + err.message);
+ }
+ });
+});
diff --git a/app/templates/base.html b/app/templates/base.html
new file mode 100644
index 0000000..7cc53ac
--- /dev/null
+++ b/app/templates/base.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+ {% block title %}Geekbrain.io{% endblock %}
+
+
+
+
+
+
+
+ {% block content %}{% endblock %}
+
+
+
+
+
+ {% block scripts %}{% endblock %}
+
+
 }})
+
+