Composants

Mise en forme du texte

---

Texte en gras

Pour mettre du texte en gras, utilisez ** ou __ autour du mot ou de l’expression :
Exemple : Ce texte est en gras ou Ce texte est en gras

Texte en italique

Pour mettre du texte en italique, utilisez * ou _ autour du mot ou de l’expression :
Exemple : Ce texte est en italique ou Ce texte est en italique

Texte souligné

Pour souligner du texte, utilisez les balises HTML <u> :

Exemple :

<u>Ce texte est souligné</u>

Résultat :

Ce texte est souligné

Texte barré

Pour barrer du texte, utilisez ~~ autour du mot ou de l’expression :
Exemple : Ce texte est barré

Bouton

---

Ce bouton a une animation de survol à remplissage créatif

<CustomButton
  hoverEffect="creative-fill"
  class="effect-color-accent"
  label="Remplissage créatif"
  url="/"
/>

Ce bouton a une animation de survol magnétique

<CustomButton hoverEffect="magnetic" label="Magnétique" url="/" />

Ce bouton a une animation de survol avec inversion du texte

<CustomButton hoverEffect="text-flip" label="Inversion du texte" url="/" />

Ce bouton a une animation de survol combinant l'effet magnétique et l'inversion du texte

<CustomButton
  hoverEffect="magnetic-text-flip"
  label="Magnétique avec inversion du texte"
  url="/"
/>

Ce bouton a une animation de survol à remplissage créatif

Remplissage créatif

Ce bouton a une animation de survol magnétique

Magnétique

Ce bouton a une animation de survol avec inversion du texte

Inversion du texte

Ce bouton a une animation de survol combinant l’effet magnétique et l’inversion du texte

Magnétique avec inversion du texte

---

Variantes de boutons

La couleur de chaque bouton peut être personnalisée en ajoutant class=“btn-accent” ou class=“btn-light”

<CustomButton label="Bouton exemple" url="/" />
<CustomButton class="btn-accent" label="Bouton exemple" url="/" />
<CustomButton
  variant="outline"
  label="Avec lien externe"
  url="https://astro.build"
/>
<CustomButton variant="text" label="Bouton exemple" url="/" />

Bouton exemple Avec lien externe Bouton exemple

Accordéon

---

<Accordion label="Exemple d'accordéon 01" group="accordion-01" expanded="true">

Nous proposons une large gamme de services incluant le développement web, le branding et le marketing digital pour aider les entreprises à croître et réussir.

- **Essentials** : Atelier ciblé pour identifier les valeurs fondamentales et la proposition unique de vente.
- **Growth** : Atelier approfondi pour établir une identité de marque claire et différenciée.
- **Enterprise** : Stratégie complète de positionnement de marque couvrant tous les aspects de votre marque.

</Accordion>

<Accordion label="Exemple d'accordéon 02" group="accordion-01" expanded="false">

Nous proposons une large gamme de services incluant le développement web, le branding et le marketing digital pour aider les entreprises à croître et réussir.

- **Essentials** : Atelier ciblé pour identifier les valeurs fondamentales et la proposition unique de vente.
- **Growth** : Atelier approfondi pour établir une identité de marque claire et différenciée.
- **Enterprise** : Stratégie complète de positionnement de marque couvrant tous les aspects de votre marque.

</Accordion>

---

<Accordion label="Exemple d'accordéon 03" group="accordion-01" expanded="false">

Nous proposons une large gamme de services incluant le développement web, le branding et le marketing digital pour aider les entreprises à croître et réussir.

- **Essentials** : Atelier ciblé pour identifier les valeurs fondamentales et la proposition unique de vente.
- **Growth** : Atelier approfondi pour établir une identité de marque claire et différenciée.
- **Enterprise** : Stratégie complète de positionnement de marque couvrant tous les aspects de votre marque.

</Accordion>

---

Onglet

---

<Tabs>
  <Tab name="Aperçu">
    **Comment pouvons-nous vous aider ?** Nous proposons des consultations
    personnalisées pour vous aider à atteindre vos objectifs personnels et
    professionnels. Choisissez un onglet ci-dessous pour découvrir nos services.
    - Coaching personnel - Orientation professionnelle - Résolution de conflits -
    Conseils de vie
  </Tab>

  <Tab name="Coaching">
    **Coaching personnel : Libérez votre potentiel** Bénéficiez d'un coaching
    personnalisé pour surmonter les défis et définir des objectifs porteurs de
    sens. Nous nous concentrons sur : - Le renforcement de la confiance -
    L'intelligence émotionnelle - La lutte contre la procrastination
  </Tab>
</Tabs>

Vidéo YouTube

---

<VideoInline src="" provider="youtube" />

Vidéo personnalisée

---

<VideoInline
  src="/videos/test-video.mp4"
  provider="html5"
  poster="/images/video-thumbnail.jpg"
/>

Avis

---

<Notice type="info" title="Information">
  Ceci est un message d'information.
</Notice>

<Notice type="warning">Ceci est un message d'avertissement sans titre.</Notice>

<Notice type="success" title="Succès !">
  Vos modifications ont été enregistrées avec succès.
</Notice>

<Notice type="error" title="Erreur !">
  Une erreur est survenue. Veuillez réessayer.
</Notice>

Citation

---

Pour créer une citation, commencez la ligne par > :
Exemple :

Ceci est une citation.
Elle s’étend sur plusieurs lignes.

Auteur

Code

---

Pour formater du code en ligne, utilisez des accents graves (`) :
Exemple : Ceci est du code en ligne

Pour les blocs de code multilignes, utilisez des triples accents graves (```) :
Exemple :

---
import Base from "@/layouts/Base.astro";
import BenefitsSection from "@/components/sections/BenefitsSection.astro";
import { getEntryCTM } from "@/lib/contentParser.astro";
import { generatePaths } from "@/lib/utils/i18nUtils";
import Team from "@/components/sections/Team.astro";
import Location from "@/components/sections/Location.astro";
import HomeBanner from "@/components/sections/HomeHero.astro";
import Features from "@/components/sections/FeaturesSection.astro";
import HowItWorks from "@/components/sections/HowItWorks.astro";
import CallToAction from "@/components/sections/CallToAction.astro";
import PricingSection from "@/components/sections/PricingSection.astro";
import IntegrationSection from "@/components/sections/IntegrationSection.astro";
import TestimonialSection from "@/components/sections/TestimonialSection.astro";
import BlogSection from "@/components/sections/BlogSection.astro";

export function getStaticPaths() {
  return generatePaths();
}

const homepage = await getEntryCTM("homepage", "-index", Astro.currentLocale);
---

<Base {...homepage.data}>
  <HomeBanner />
  <Features />
  <HowItWorks />
  <Team />
  <BenefitsSection />
  <Location />
  <PricingSection />
  <TestimonialSection />
  <BlogSection />
  <IntegrationSection />
  <CallToAction />
</Base>

Ligne horizontale

---

Pour créer une ligne horizontale, utilisez trois tirets ou plus (---), astérisques (***) ou underscores (___) sur une nouvelle ligne :
Exemple :

---

Titres

---

Créez des titres en ajoutant des symboles # avant votre texte. Ajoutez une classe personnalisée avec des crochets [.nom-de-classe].
Exemple :

# Titre 1 [.custom-class .mt-0! .another-class]
## Titre 2 [.custom-class .mt-0! .another-class4]
### Titre 3 [.custom-class .mt-0! .another-class]
#### Titre 4 [.custom-class .mt-0! .another-class]
##### Titre 5 [.custom-class .mt-0! .another-class]
###### Titre 6 [.custom-class .mt-0! .another-class]

Tableau

---

Créez des tableaux en utilisant des barres verticales (|) et des tirets (-) :

Exemple :

Colonne 1	Colonne 2	Colonne 3
Donnée 1	Donnée 2	Donnée 3
Donnée 4	Donnée 5	Donnée 6

Images

---

Image locale Image distante

Composants

Carte bloc d’information

---

<CardGrid>
  <Card
    title="Solutions sur mesure"
    description="Des stratégies adaptées à vos besoins spécifiques pour générer des résultats mesurables."
    icon="Plus"
    buttonLabel="Contactez-nous"
    buttonUrl="/contact/"
  />
  <Card
    title="Livraison dans les délais"
    description="Nous respectons votre temps. C'est pourquoi chaque projet est livré dans les délais, sans compromis sur la qualité."
    icon="Clock"
    buttonLabel="Commencer"
    buttonUrl="/contact/"
  />
  <Card
    title="Croissance évolutive"
    description="Des startups aux grandes entreprises, nos solutions évoluent avec vous pour un succès durable."
    icon="Rocket"
    buttonLabel="En savoir plus"
    buttonUrl="/contact/"
  />
</CardGrid>

Liste d’images avec vidéo

---

<ImageList>
  <ImageItem
    imageSrc="/images/gallery/1.jpg"
    imageAlt="exemple de texte alternatif"
    videoSrc="rFVpSwgCkCo"
  />
  <ImageItem
    imageSrc="/images/gallery/2.jpg"
    imageAlt="exemple de texte alternatif"
    videoSrc="/videos/test-video.mp4"
    videoProvider="html5"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/3.jpg"
    imageAlt="exemple de texte alternatif"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/4.jpg"
    imageAlt="exemple de texte alternatif"
  />
</ImageList>

Témoignage

---

Le code suivant génère le témoignage affiché ci-dessous.

<Testimonial
  customerImage="/images/customers/avatar/1.jpg"
  customerName="Sarah Jones"
  customerRole="PDG, Fondatrice"
  customerCompanyLogo="/images/customers/company-logo/acme.png"
  customerCompanyName="Acme Inc."
>
  Notre partenariat avec Folex démontre la puissance d'une stratégie
  d'engagement client bien exécutée. En intégrant des technologies avancées et
  des analyses basées sur les données, nous les avons aidés à offrir une
  expérience client plus personnalisée, cohérente et enrichissante. Chez Folex,
  nous nous engageons à aider des entreprises comme Oloyon à révolutionner leur
  engagement client et à assurer un succès durable.
</Testimonial>