Skip to content
BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
app
app
 
 
components
components
 
 
data
data
 
 
public
public
 
 
types
types
 
 
.env.example
.env.example
 
 
.gitignore
.gitignore
 
 
.stylelintrc.json
.stylelintrc.json
 
 
COMMANDES_UTILES.md
COMMANDES_UTILES.md
 
 
DATABASE_SETUP.md
DATABASE_SETUP.md
 
 
DEMARRAGE_RAPIDE.md
DEMARRAGE_RAPIDE.md
 
 
EMAILS_AUTOMATIQUES.md
EMAILS_AUTOMATIQUES.md
 
 
GUIDE_PERSONNALISATION.md
GUIDE_PERSONNALISATION.md
 
 
NEXT_JS_README.md
NEXT_JS_README.md
 
 
PWA_GUIDE.md
PWA_GUIDE.md
 
 
README.md
README.md
 
 
STRIPE_INTEGRATION.md
STRIPE_INTEGRATION.md
 
 
SYSTEME_AUTOMATISATION.md
SYSTEME_AUTOMATISATION.md
 
 
generate-icons.js
generate-icons.js
 
 
index.html
index.html
 
 
next-env.d.ts
next-env.d.ts
 
 
next.config.js
next.config.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
postcss.config.js
postcss.config.js
 
 
script.js
script.js
 
 
style.css
style.css
 
 
tailwind.config.ts
tailwind.config.ts
 
 
tsconfig.json
tsconfig.json
 
 

Repository files navigation

🚀 Up Next Growth - Landing Page

Site web professionnel pour agence de marketing digital et growth marketing, optimisé pour la conversion de prospects.

📋 Table des matières

🎯 Aperçu

Landing page conçue pour convertir les visiteurs en prospects qualifiés avec :

  • Design moderne et professionnel
  • Responsive sur tous les appareils
  • Animations fluides
  • Formulaire de contact
  • FAQ interactive
  • Call-to-actions optimisés

✨ Fonctionnalités

🎨 Design

  • Palette de couleurs professionnelle : Bleu foncé (#0A2540), Vert turquoise (#00C2A8), Orange (#FF7A18)
  • Typographie optimisée : Poppins pour les titres, Inter pour le corps
  • Animations au scroll : Éléments qui apparaissent progressivement
  • 100% Responsive : Adapté mobile, tablette et desktop

🔧 Fonctionnalités interactives

  • FAQ accordion : Questions/réponses interactives
  • Formulaire de contact : Validation en temps réel
  • Smooth scrolling : Navigation fluide entre sections
  • Bouton scroll to top : Retour en haut de page
  • Messages de confirmation : Feedback utilisateur

📊 Optimisations

  • Performance : Code optimisé, chargement rapide
  • SEO-ready : Structure HTML sémantique, meta tags
  • Accessibilité : Navigation au clavier, contraste optimal

🛠️ Installation

Option 1 : Utilisation locale simple

  1. Téléchargez tous les fichiers dans un dossier
  2. Ouvrez index.html dans votre navigateur

C'est tout ! Le site fonctionne sans serveur.

Option 2 : Avec un serveur local

# Avec Python
python -m http.server 8000

# Avec Node.js
npx serve

# Avec PHP
php -S localhost:8000

Puis ouvrez http://localhost:8000 dans votre navigateur.

⚙️ Personnalisation

1. Modifier les informations de contact

Dans index.html, recherchez et modifiez :

<!-- WhatsApp (ligne ~225) -->
<a href="https://wa.me/1234567890" class="contact-link" target="_blank">
    
<!-- Email (ligne ~229) -->
<a href="mailto:contact@upnextgrowth.com" class="contact-link">

<!-- Footer (lignes ~285-295) -->
<li>Email: contact@upnextgrowth.com</li>
<li>WhatsApp: +33 X XX XX XX XX</li>

Important : Remplacez 1234567890 dans le lien WhatsApp par votre véritable numéro au format international (sans espaces, sans +).

Exemple : Pour +33 6 12 34 56 78, utilisez : https://wa.me/33612345678

2. Modifier les couleurs

Dans style.css (lignes 6-11), modifiez les variables CSS :

:root {
    --primary-blue: #0A2540;      /* Couleur principale */
    --secondary-green: #00C2A8;   /* Couleur secondaire */
    --accent-orange: #FF7A18;     /* Couleur des boutons CTA */
    --bg-light: #F8F9FB;          /* Fond clair */
    --text-dark: #1F2933;         /* Texte principal */
}

3. Modifier le contenu

Tous les textes sont dans index.html. Sections principales :

  • Hero (lignes 18-27) : Titre principal et sous-titre
  • Problème (lignes 31-55) : Points de douleur du client
  • Services (lignes 60-90) : Description de vos services
  • Bénéfices (lignes 107-126) : Avantages pour les clients
  • Process (lignes 133-158) : Votre méthode en 4 étapes
  • FAQ (lignes 207-261) : Questions fréquentes

4. Ajouter votre logo

Ajoutez cette ligne dans index.html après <body> (ligne 14) :

<header class="header">
    <div class="container">
        <img src="logo.png" alt="Up Next Growth" class="logo">
    </div>
</header>

Puis ajoutez ce CSS dans style.css :

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(10, 37, 64, 0.95);
    padding: 1rem 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.logo {
    height: 50px;
    width: auto;
}

5. Ajouter des images

Pour ajouter une image dans la hero section :

<section class="hero">
    <div class="container">
        <div class="hero-content">
            <img src="hero-image.png" alt="Growth Marketing" class="hero-image">
            <!-- reste du contenu -->
        </div>
    </div>
</section>

📁 Structure du site

upnextgrowth/
│
├── index.html          # Structure HTML principale
├── style.css           # Tous les styles CSS
├── script.js           # Interactivité JavaScript
└── README.md           # Documentation

Sections de la landing page

  1. Hero Section : Accroche principale + CTA
  2. Problem Section : Points de douleur du client
  3. Solution Section : Vos services
  4. Website Highlight : Mise en avant création de sites
  5. Benefits Section : Bénéfices pour le client
  6. Process Section : Méthode en 4 étapes
  7. Trust Section : Pourquoi vous faire confiance
  8. CTA Section : Formulaire de contact
  9. FAQ Section : Questions fréquentes
  10. Footer : Informations de contact et liens

🔌 Intégration avec backend

Option 1 : Email simple avec FormSubmit

Modifiez la balise <form> dans index.html (ligne ~197) :

<form action="https://formsubmit.co/votre-email@example.com" method="POST">
    <!-- Ajoutez ces champs cachés -->
    <input type="hidden" name="_subject" value="Nouveau lead - Up Next Growth">
    <input type="hidden" name="_captcha" value="false">
    <input type="hidden" name="_next" value="https://votresite.com/merci.html">
    
    <!-- vos champs existants -->
    <input type="text" name="name" placeholder="Votre nom" required>
    <!-- etc. -->
</form>

Puis supprimez l'événement JavaScript dans script.js (ligne 60).

Option 2 : Avec votre propre API

Dans script.js, modifiez la fonction de soumission du formulaire (lignes 64-96) :

contactForm.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(contactForm);
    const data = {};
    formData.forEach((value, key) => {
        data[key] = value;
    });
    
    // Envoi à votre API
    fetch('https://votre-api.com/contact', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        showSuccessMessage();
        contactForm.reset();
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorMessage();
    });
});

Option 3 : Webhook Zapier/Make

  1. Créez un webhook dans Zapier ou Make
  2. Utilisez l'URL du webhook dans le fetch :
fetch('https://hooks.zapier.com/hooks/catch/XXXXXX/XXXXXX/', {
    method: 'POST',
    body: JSON.stringify(data)
})

🔍 SEO et Performance

Meta tags à ajouter dans <head>

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://votresite.com/">
<meta property="og:title" content="Up Next Growth - Agence Marketing Digital">
<meta property="og:description" content="Attirez plus de clients grâce à des publicités rentables">
<meta property="og:image" content="https://votresite.com/og-image.jpg">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://votresite.com/">
<meta property="twitter:title" content="Up Next Growth - Agence Marketing Digital">
<meta property="twitter:description" content="Attirez plus de clients grâce à des publicités rentables">
<meta property="twitter:image" content="https://votresite.com/og-image.jpg">

<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">

Google Analytics

Ajoutez avant </head> :

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Facebook Pixel

Ajoutez avant </head> :

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'VOTRE_PIXEL_ID');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none"
       src="https://www.facebook.com/tr?id=VOTRE_PIXEL_ID&ev=PageView&noscript=1"/>
</noscript>

🚀 Déploiement

Option 1 : Netlify (Gratuit, recommandé)

  1. Créez un compte sur Netlify
  2. Glissez-déposez votre dossier dans Netlify Drop
  3. Votre site est en ligne !

Avec domaine personnalisé :

  • Settings → Domain management → Add custom domain

Option 2 : Vercel (Gratuit)

  1. Installez Vercel CLI : npm i -g vercel
  2. Dans le dossier du projet : vercel
  3. Suivez les instructions

Option 3 : GitHub Pages (Gratuit)

  1. Créez un repository GitHub
  2. Uploadez vos fichiers
  3. Settings → Pages → Deploy from branch (main)

Option 4 : Hébergement classique (OVH, o2switch, etc.)

  1. Uploadez les fichiers via FTP
  2. Placez index.html à la racine
  3. Configurez votre domaine

📱 Test responsive

Testez votre site sur :

  • Mobile : 375px, 414px
  • Tablette : 768px, 1024px
  • Desktop : 1280px, 1920px

Outils de test :

⚡ Optimisations supplémentaires

1. Compression des images

Utilisez TinyPNG ou Squoosh pour compresser vos images.

2. Lazy loading des images

Ajoutez loading="lazy" à vos balises img :

<img src="image.jpg" alt="Description" loading="lazy">

3. Minification

Avant le déploiement en production, minifiez vos fichiers :

📞 Support

Pour toute question ou personnalisation avancée :

📝 Checklist avant mise en ligne

  • Modifier tous les numéros de téléphone et emails
  • Tester le formulaire de contact
  • Vérifier le lien WhatsApp
  • Ajouter votre logo
  • Configurer Google Analytics
  • Configurer Facebook Pixel
  • Tester sur mobile et tablette
  • Optimiser les images
  • Ajouter les meta tags Open Graph
  • Configurer votre domaine personnalisé
  • Tester tous les liens
  • Vérifier l'orthographe

🎉 Félicitations !

Votre landing page est prête à convertir des visiteurs en clients ! 🚀

Made with ❤️ for Up Next Growth

About

upnextgrowth.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages