Composants

Utilisez cette page pour prévisualiser les composants de contenu réutilisables du thème de services informatiques Techbyte.

Mise en forme du texte

---

Texte en gras

Pour mettre du texte en gras, entourez le mot ou la phrase de ** ou __ :
Exemple : Ce texte est en gras ou Ce texte est en gras

Texte en italique

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

Bouton

---

// Ce bouton a une animation de survol creative-fill

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

// Ce bouton a une animation de survol magnétique

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

// Ce bouton a une animation de survol de retournement de texte

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

// Ce bouton combine les animations magnétique et de retournement de texte

<Button
  hoverEffect="magnetic-text-flip"
  label="Magnétique + retournement"
  url="/"
/>
<Button
  variant="circle"
  hoverEffect="magnetic-text-flip"
  label="Magnétique + retournement"
  url="/"
/>

Ce bouton a une animation de survol creative-fill

Remplissage créatif

Ce bouton a une animation de survol magnétique

Magnétique

Ce bouton a une animation de survol de retournement de texte

Retournement

Ce bouton combine les animations magnétique et de retournement de texte

Magnétique + retournement

---

Variantes de boutons

Tous les styles de boutons uniques utilisés dans le thème, avec leur animation au survol lorsqu’elle est prise en charge. La couleur de chaque bouton peut être personnalisée en ajoutant class=“btn-accent” ou class=“btn-light”

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

Boutons pleins — couleur unie, utilisés pour les appels à l’action principaux :

Variantes contour et texte :

Remplissage créatif — le cercle de fond grandit depuis le curseur. Définissez la couleur avec effect-color-primary, effect-color-accent, effect-color-dark ou effect-color-light :

Animations magnétique et de retournement de texte — le bouton suit le curseur et le libellé bascule :

Magnétique Retournement Magnétique + retournement

Bouton circulaire — appel à l’action rond, idéal avec les effets magnétiques :

Découvrir les services

Bouton plein avec icône animée — la flèche glisse vers l’extérieur puis revient au survol :

Boutons sur fond sombre — plein clair, contour transparent et variantes de texte clair :

Accordéon

---

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

Nous proposons une large gamme de services, notamment le développement web, l'image de marque et le marketing numérique, pour aider les entreprises à croître et à réussir.

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

</Accordion>

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

Nous proposons une large gamme de services, notamment le développement web, l'image de marque et le marketing numérique, pour aider les entreprises à croître et à réussir.

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

</Accordion>

---

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

Nous proposons une large gamme de services, notamment le développement web, l'image de marque et le marketing numérique, pour aider les entreprises à croître et à réussir.

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

</Accordion>

---

Onglets

---

<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 - Conseil en carrière - 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 difficultés et fixer des objectifs
    porteurs de sens. Nous nous concentrons sur : - La confiance en soi -
    L'intelligence émotionnelle - La lutte contre la procrastination
  </Tab>
</Tabs>

Vidéo YouTube

---

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

Vidéo personnalisée

---

<VideoInline
  src="/videos/test-video.mp4"
  provider="html5"
  poster="/images/projects/project-video-thumb.png"
/>

Encadré

---

<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 s'est produite. 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 multi-lignes, utilisez trois accents graves (```) :
Exemple :

---
import type { Section } from "@/types";
import Button from "../Button.astro";
import { markdownify } from "@/lib/utils/textConverter";
import { getEntryCTM } from "@/lib/contentParser.astro";
import StackedSplit from "../widgets/StackedSplit.astro";
import overrideObjects from "@/lib/utils/overrideObjects.ts";
import { getLocaleUrlCTM } from "@/lib/utils/i18nUtils.ts";

// Type for this section data
type AboutOne = Section & {
  imagePosition: "left" | "right";
};

type Props = {
  content?: AboutOne;
};

// Fetching the default content for the this section
let defaultContent = (
  await getEntryCTM("sections", "about-one", Astro.currentLocale)
)?.data as AboutOne;

// Merges custom content overrides (e.g., just a title) with defaultContent fallbacks. Enables easy section reuse across pages with partial data changes.
let actualContent = overrideObjects(
  { ...defaultContent },
  Astro.props.content,
) as AboutOne;

// Extracting required values from 'content' object
let {
  enable = true,
  title,
  image,
  description,
  imagePosition,
  button,
} = actualContent as AboutOne;

if (!enable) {
  return null;
}
---

<StackedSplit image={image} direction={imagePosition}>
  <div class="space-y-8">
    {
      title && (
        <h2 class="text-h1-sm md:text-h1" set:html={markdownify(title)} />
      )
    }
    {description && <p set:html={markdownify(description)} />}
  </div>
  {
    button?.enable && (
      <Button
        variant="text"
        label={button.label}
        class="text-base-sm uppercase md:text-base"
        url={getLocaleUrlCTM(button.url, Astro.currentLocale)}
      />
    )
  }
</StackedSplit>

Séparateur horizontal

---

Pour créer un séparateur horizontal, utilisez au moins trois tirets (---), astérisques (***) ou tirets bas (___) sur une nouvelle ligne :
Exemple :

---

Titres

---

Créez des titres en ajoutant des symboles # devant votre texte. Ajoutez une classe personnalisée entre 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 à l’aide de barres verticales (|) et de 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 stylisée

---

<ListCheck>

- **Interactions client incohérentes** : Les clients ont connu des niveaux de qualité de service variables selon les canaux.
- **Manque de personnalisation** : Une intégration de données limitée a conduit à une communication générique et uniforme.
- **Fidélisation des clients** : Difficulté à fidéliser les clients en raison d'un suivi et d'un engagement insuffisants.

</ListCheck>

Carte de bloc d’information

---

<CardWrapper>
  <Card
    title="Solution sur mesure"
    description="La réussite naît de relations solides, et nous aimons les construire"
    icon="/images/icons/svg/business-and-finance.svg"
    buttonLabel="Contactez-nous"
    buttonUrl="/contact/"
  />
  <Card
    title="Résultat dans les délais"
    description="La réussite naît de relations solides, et nous aimons les construire"
    icon="/images/icons/svg/business-and-finance.svg"
    buttonLabel="Contactez-nous"
    buttonUrl="/contact/"
  />
</CardWrapper>

Liste d’images avec vidéo

---

<ImageList>
  <ImageItem
    imageSrc="/images/gallery/1.jpg"
    imageAlt="Équipe examinant une feuille de route de produit numérique"
    videoSrc="rFVpSwgCkCo"
  />
  <ImageItem
    imageSrc="/images/gallery/2.jpg"
    imageAlt="Ingénieur travaillant sur une version d'application sécurisée"
    videoSrc="/videos/test-video.mp4"
    videoProvider="html5"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/3.jpg"
    imageAlt="Tableau de bord analytique affiché lors d'une revue stratégique"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/4.jpg"
    imageAlt="Espace de travail moderne pour la collaboration produit"
  />
</ImageList>

Témoignage

---

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

<Testimonial
  customerImage="/images/customers/1.png"
  customerName="Sarah Jones"
  customerRole="PDG, fondatrice"
  customerCompanyLogo="/images/customers/company-logo/acme.png"
  customerCompanyName="Acme Inc."
>
  Notre partenariat 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 fondées
  sur les données, nous les avons aidés à offrir une expérience client plus
  personnalisée, cohérente et gratifiante. Nous nous engageons à aider les
  entreprises comme Oloyon à révolutionner leur engagement client et à assurer
  leur réussite à long terme.
</Testimonial>