Composants

Mise en forme du texte

---

Texte en gras

Pour mettre du texte en gras, utilisez ** ou __ autour du mot ou de la phrase. Exemple : Ce texte est en gras

Texte en italique

Pour afficher du texte en italique, utilisez * ou _ autour du mot ou de la phrase. Exemple : Ce texte est en italique

Texte souligne

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

Exemple :

<u>Ce texte est souligne</u>

Resultat :

Ce texte est souligne

Texte barre

Pour barrer du texte, utilisez ~~ autour du mot ou de la phrase. Exemple : Ce texte est barre

Bouton

---

Ce bouton utilise l'animation creative-fill

<Button
  hoverEffect="creative-fill"
  class="effect-color-accent"
  label="Creative Fill"
  url="/"
/>

Ce bouton utilise l'animation magnetic

<Button hoverEffect="magnetic" label="Magnetic" url="/" />

Ce bouton utilise l'animation text-flip

<Button hoverEffect="text-flip" label="Text Flip" url="/" />

Ce bouton utilise l’animation creative-fill

Creative Fill

Ce bouton utilise l’animation magnetic

Magnetic

Ce bouton utilise l’animation text-flip

Text Flip

---

Variantes de boutons

Chaque couleur de bouton peut etre personnalisee avec class="btn-accent" ou class="btn-light".

<Button label="Bouton exemple" url="/" />
<Button class="btn-accent" label="Bouton accent" url="/" />
<Button variant="outline" label="Lien externe" url="https://astro.build" />
<Button variant="text" label="Bouton texte" url="/" />

Bouton exemple Bouton accent Lien externe Bouton texte

Accordeon

---

<Accordion label="Question exemple 01" group="accordion-01" expanded="true">
  Nous proposons des services de developpement web, de branding et de marketing
  digital pour aider les entreprises a grandir. - **Essentiel** : atelier cible
  pour identifier les valeurs cles et la proposition unique. - **Croissance** :
  atelier approfondi pour definir une identite de marque claire. -
  **Entreprise** : strategie complete pour structurer l'ensemble de votre
  positionnement.
</Accordion>

Onglets

---

Le composant Tabs affiche une barre d’onglets. Passez-lui un tableau tabs compose d’objets { label, slug } ainsi qu’un allLabel optionnel.

<Tabs>
  <Tab name="Overview">
    **How Can We Assist You?** We offer personalized consultations to help you
    achieve your personal and professional goals. Choose a tab below to explore
    our services. - Personal Coaching - Career Counseling - Conflict Resolution
    - Life Advice
  </Tab>

  <Tab name="Coaching">
    **Personal Coaching: Unlock Your Potential** Get personalized coaching to
    overcome challenges and set meaningful goals. We focus on: - Confidence
    Building - Emotional Intelligence - Overcoming Procrastination
  </Tab>

  <Tab name="Counseling">
    **Career Counseling: Find Your Path** Need help with your career? We
    provide: - Career Path Guidance - Resume & Interview Prep - Job Market
    Insights
  </Tab>

  <Tab name="Resolution">
    **Conflict Resolution: Build Stronger Relationships** Resolve disputes
    effectively with: - Mediation Services - Communication Strategies - Anger
    Management Techniques
  </Tab>
</Tabs>

Video YouTube

---

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

Video personnalisee

---

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

Notice

---

<Notice type="info" title="Information">
  Ceci est un message informatif.
</Notice>

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

<Notice type="success" title="Succes !">
  Vos modifications ont bien ete enregistrees.
</Notice>

<Notice type="error" title="Erreur !">
  Une erreur s'est produite. Veuillez reessayer.
</Notice>

Citation

---

Pour creer une citation, commencez la ligne par > : Exemple :

Ceci est une citation. Elle peut s’etendre sur plusieurs lignes.

Auteur

Code

---

Pour formatter du code inline, utilisez les backticks (`). Exemple : Ceci est du code inline

Pour des blocs de code multilignes, utilisez les triples backticks (```).

---
import Base from "@/layouts/Base.astro";
import { generatePaths } from "@/lib/utils/i18nUtils";
---

<Base>
  <h1>Exemple</h1>
</Base>

Separateur horizontal

---

Pour creer un separateur horizontal, utilisez ---, *** ou ___ sur une ligne dediee.

---

Titres

---

Creez des titres en ajoutant des symboles # devant votre texte. Vous pouvez aussi ajouter une classe personnalisee avec [.class-name].

# Titre 1 [.custom-class]
## Titre 2 [.custom-class]
### Titre 3 [.custom-class]
#### Titre 4 [.custom-class]
##### Titre 5 [.custom-class]
###### Titre 6 [.custom-class]

Tableau

---

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

Exemple :

Colonne 1	Colonne 2	Colonne 3
Donnee 1	Donnee 2	Donnee 3
Donnee 4	Donnee 5	Donnee 6

Images

---

Image locale Image distante

Composants

Carte d’information

---

<CardGrid>
  <Card
    title="Solutions sur mesure"
    description="Des strategies adaptees a vos besoins pour generer un impact concret."
    icon="Plus"
    buttonLabel="Nous contacter"
    buttonUrl="/contact/"
  />
  <Card
    title="Livraison dans les delais"
    description="Nous respectons votre temps sans sacrifier la qualite."
    icon="Clock"
    buttonLabel="Commencer"
    buttonUrl="/contact/"
  />
  <Card
    title="Croissance evolutive"
    description="Des solutions qui grandissent avec votre entreprise."
    icon="Rocket"
    buttonLabel="En savoir plus"
    buttonUrl="/contact/"
  />
</CardGrid>

Liste d’images avec video

---

<ImageList>
  <ImageItem
    imageSrc="/images/gallery/1.jpg"
    imageAlt="exemple de texte alternatif"
    videoSrc="rFVpSwgCkCo"
  />
</ImageList>

Liste de blocs d’information

---

<InfoBlockList
  imageSrc="/images/service/security-pic.png"
  imageAlt="Services de securite"
>
  <InfoBlockItem title="Technologie de l'information">
    Une base technique claire pour soutenir vos usages et vos evolutions.
  </InfoBlockItem>
  <InfoBlockItem title="Services cloud">
    Des outils plus flexibles pour gagner en fiabilite et en performance.
  </InfoBlockItem>
  <InfoBlockItem title="Cybersecurite">
    Une approche concrete pour mieux proteger vos donnees et vos acces.
  </InfoBlockItem>
</InfoBlockList>

Temoignage

---

Le code suivant genere le temoignage affiche ci-dessous.

<Testimonial
  customerImage="/images/customers/avatar/1.jpg"
  customerName="Sarah Jones"
  customerRole="CEO, Founder"
  customerCompanyLogo="/images/customers/company-logo/acme.png"
  customerCompanyName="Acme Inc."
>
  Notre partenariat avec Folex montre l'importance d'une strategie d'engagement
  client bien executee et alignee sur les besoins reels.
</Testimonial>