Components

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 ou Ce texte est en gras

Texte en Italique

Pour mettre du texte en italique, utilisez * ou _ autour du mot ou de la phrase :
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 la phrase :
Exemple : Ce texte est barré

Button

<CustomButton
  hoverEffect="magnetic"
  showIcon="false"
  label="Magnetic Hover"
  url="/"
/>
<CustomButton
  showIcon="false"
  variant="outline"
  hoverEffect="magnetic-text-flip"
  label="Magnetic Hover With Text Flip"
  url="/"
/>
<CustomButton
  showIcon="false"
  variant="outline"
  hoverEffect="creative-fill"
  label="Creative Fill Effect"
  url="/"
/>
<CustomButton showIcon="true" label="Example Button" url="/" />
<CustomButton
  variant="outline"
  label="With External Link"
  showIcon="true"
  url="https://astro.build"
/>
<CustomButton variant="text" label="Example Button" url="/" />

The above code generates the following buttons

Magnetic Hover

Magnetic Hover With Text Flip

Creative Fill Effect

Example Button

With External Link

Example Button

Accordéon

<Accordion
  label="Étiquette Exemple 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. * **Essentiel** : Atelier ciblé pour identifier les valeurs
  fondamentales et l'USP. * **Croissance** : Atelier approfondi pour établir une
  identité de marque claire et différenciée. * **Entreprise** : Stratégie
  complète de positionnement de marque couvrant tous les aspects de votre
  marque.
</Accordion>

Le code ci-dessus génère les accordéons suivants

Onglets

<Tabs>
  <Tab name="Vue d'ensemble">
    **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 explorer nos services.
    - Coaching Personnel - Conseil en Carrière - Résolution de Conflits -
    Conseils de Vie
  </Tab>
</Tabs>

Le code ci-dessus génère les onglets suivants

Vidéo YouTube

Vidéo Personnalisée

Avertissement

Citation

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

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

Auteur

Code

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

Pour les blocs de code multi-lignes, utilisez trois accents graves (```):
Exemple :

---
import Base from "@/layouts/Base.astro";
import { getEntryCTM } from "@/lib/contentParser.astro";
import AboutUs from "@/components/sections/AboutUs.astro";
import Customers from "@/components/sections/Customers.astro";
import { generatePaths } from "@/lib/utils/i18nUtils.ts";
import HomeBanner from "@/components/sections/HomeBanner.astro";
import HowItWorks from "@/components/sections/HowItWorks.astro";
import BlogSection from "@/components/sections/BlogSection.astro";
import CallToAction from "@/components/sections/CallToAction.astro";
import Testimonial from "@/components/sections/TestimonialSection.astro";
import ServicesSection from "@/components/sections/ServicesSection.astro";
import PortfolioSection from "@/components/sections/PortfolioSection.astro";

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

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

<Base {...homepage?.data} homepage={true}>
  <HomeBanner />
  <Customers />
  <AboutUs />
  <ServicesSection content={homepage?.data.servicesSection} />
  <HowItWorks />
  <PortfolioSection />
  <Testimonial />
  <BlogSection />
  <CallToAction content={homepage?.data.callToActionSection} />
</Base>

Règle Horizontale

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

---

Titres

Créez des titres en ajoutant des # avant votre texte. Ajoutez une classe personnalisée entre crochets [.class-name].
Exemple :

# Titre 1 [.custom-class .another-class]
## Titre 2 [.custom-class .another-class4]
### Titre 3 [.custom-class .another-class]
#### Titre 4 [.custom-class .another-class]
##### Titre 5 [.custom-class .another-class] [.text-h4]
###### Titre 6 [.custom-class .another-class] [.text-h5]

Tableau

Créez des tableaux en utilisant des pipes (|) 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 :

Composants

Liste Stylée

<ListCheck>

- **Interactions Incohérentes avec les Clients** : Les clients ont rencontré des niveaux de qualité de service variables selon les canaux.
- **Manque de Personnalisation** : Une intégration limitée des données a conduit à une communication générique et uniforme.
- **Rétention des Clients** : Difficulté à retenir les clients en raison d'un suivi et d'une interaction insuffisants.

</ListCheck>

Le code ci-dessus génère la liste stylée suivante :

Carte d’Informations

<StatsWrapper>
  <StatsItem
    icon="UserRoundCheck"
    title="200+"
    description="Satisfaction Client Accrue"
  />
  <StatsItem
    icon="DollarSign"
    title="25+"
    description="Personnalisation Améliorée"
  />
  <StatsItem icon="Star" title="10:1" description="Rétention Améliorée" />
</StatsWrapper>

Le code ci-dessus génère le bloc stylé suivant :

Liste d’Images avec Vidéo

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

Le code ci-dessus génère les images suivantes :

Témoignage

<Testimonial
  customerImage="/images/customers/avatar/1.jpg"
  customerName="Sarah Jones"
  customerRole="PDG, Fondatrice"
  customerCompanyLogo="/images/customers/company-logo/acme.png"
  customerCompanyName="Acme Inc."
>
  Notre collaboration avec Looka 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 Looka,
  nous nous engageons à aider des entreprises comme Oloyon à révolutionner leur
  engagement client et à assurer leur succès à long terme.
</Testimonial>

Le code ci-dessus génère les images suivantes :