Des avec

Text Formattant

---

Bold Text

À faire text bold, utiliser ** ou __ autour le word ou phrase:
Exemple: Ce text est bold ou Ce text est bold

Italic Text

À italicize text, utiliser * ou _ autour le word ou phrase:
Exemple: This text est italic ou This text est italic

Underline Text

À underline text, utiliser HTML <u> mots-clés:

Exemple:

<u>This text is underlined</u>

Result:

This text est underlined

Strikethrough

À strike grâce à text, utiliser ~~ autour le word ou phrase:
Exemple: Ce text est struck grâce à

Button

---

Ce button un bg-flip hover animation

<Button
  hoverEffect="bg-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-primary w-fit"
  label="Background Flip Primary"
  url="/"
/>
<Button
  hoverEffect="bg-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-dark w-fit"
  label="Background Flip Dark"
  url="/"
/>
<Button
  hoverEffect="bg-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-outline w-fit"
  label="Background Flip Outline"
  url="/"
/>

Background Flip PrimaryBackground Flip Primary Background Flip DarkBackground Flip Dark Background Flip OutlineBackground Flip Outline

Ce button un icon-flip hover animation

<Button
  hoverEffect="icon-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-primary w-fit"
  label="Icon Flip Primary"
  url="/"
/>
<Button
  hoverEffect="icon-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-outline w-fit"
  label="Icon Flip Outline"
  url="/"
/>
<Button
  hoverEffect="icon-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-primary btn-sm w-fit"
  label="Icon Flip Primary - sm"
  url="/"
/>
<Button
  hoverEffect="icon-flip"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-outline btn-sm w-fit"
  label="Outline Icon Flip - sm"
  url="/"
/>

Icon Flip Primary Icon Flip Outline Icon Flip Primary - sm Outline Icon Flip - sm

Ce button un créatif-fill hover animation

<Button
  hoverEffect="creative-fill"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-primary w-fit"
  label="Creative Fill Primary"
  url="/"
/>
<Button
  hoverEffect="creative-fill"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-dark w-fit"
  label="Creative Fill Dark"
  url="/"
/>

Créatif Fill Primary Créatif Fill Dark

Ce button un créatif-fill circle hover animation

<Button
  hoverEffect="creative-fill"
  variant="circle"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-primary w-fit"
  label="Creative Fill Circle"
  url="/"
/>
<Button
  hoverEffect="creative-fill"
  variant="circle"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-dark w-fit"
  label="Creative Fill Circle"
  url="/"
/>
<Button
  hoverEffect="creative-fill"
  variant="circle"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="btn-outline w-fit"
  label="Creative Fill Circle"
  url="/"
/>

Créatif Fill Circle Créatif Fill Circle Créatif Fill Circle

Text Buttons Variants

<Button
  variant="text"
  icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
  class="w-fit"
  label="Text Button"
  url="/"
/>
<span class="bg-dark py-4">
  <Button
    variant="text"
    icon={{ enable: true, name: "ArrowUpRight", position: "right", }}
    class="btn-text-light w-fit"
    label="Text Button"
    url="/"
  />
</span>

Text Button Text Button

Accordion

---

<Accordion label="Example Accordion Label 01" group="accordion-01" expanded="true">

We offer a wide range of services including web development, branding, and digital marketing to help businesses grow and succeed.

- **Essentials**: Focused workshop to identify core values and USP.
- **Growth**: In-depth workshop to establish a clear and differentiated brand identity.
- **Enterprise**: Comprehensive brand positioning strategy encompassing all aspects of your brand.

</Accordion>

<Accordion label="Example Accordion Label 02" group="accordion-01" expanded="false">

We offer a wide range of services including web development, branding, and digital marketing to help businesses grow and succeed.

- **Essentials**: Focused workshop to identify core values and USP.
- **Growth**: In-depth workshop to establish a clear and differentiated brand identity.
- **Enterprise**: Comprehensive brand positioning strategy encompassing all aspects of your brand.

</Accordion>

---

<Accordion label="Example Accordion Label 03" group="accordion-01" expanded="false">

We offer a wide range of services including web development, branding, and digital marketing to help businesses grow and succeed.

- **Essentials**: Focused workshop to identify core values and USP.
- **Growth**: In-depth workshop to establish a clear and differentiated brand identity.
- **Enterprise**: Comprehensive brand positioning strategy encompassing all aspects of your brand.

</Accordion>

---

Tab

---

<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>
</Tabs>

Youtube Video

---

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

Personnalisé Video

---

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

Notice

---

<Notice type="info" title="Votre utile">
  This is an informational message.
</Notice>

<Notice type="warning">This is a warning message without a title.</Notice>

<Notice type="success" title="Une avec">
  Your changes have been saved successfully.
</Notice>

<Notice type="error" title="Des et">
  Something went wrong. Please try again.
</Notice>

Blockquote

---

À créer un blockquote, démarrer le line avec un >:
Exemple:

Ce est un blockquote.
Cela spans multiple lines.

Author

Code

---

À format inline code, utiliser backticks (`):
Exemple: This is inline code

Pour multi-line code blocks, utiliser triple backticks (```):
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>

Horizontal Rule

---

À créer un horizontal rule, utiliser trois ou plus dashes (---), asterisks (***), ou underscores (___) sur un nouveau line:
Exemple:

---

Headings

---

Créer headings par addant # symbols avant votre text. Ajouter personnalisé class par bracket [.class-name].
Exemple:

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

Table

---

Créer tables utilisant pipes (|) et dashes (-):

Exemple:

Column 1	Column 2	Column 3
Données 1	Données 2	Données 3
Données 4	Données 5	Données 6

Images

---

Local Image

Components

Stylé List

---

<ListCheck>

- **Inconsistent Customer Interactions**: Customers experienced varying levels of service quality across different channels.
- **Lack of Personalization**: Limited data integration led to generic, one-size-fits-all communication.
- **Customer Retention**: Difficulty in retaining customers due to inadequate follow-up and engagement.

</ListCheck>

Informations Block Card

---

<CardWrapper>
  <Card
    title="La technologie."
    description="Nous réunissons la réflexion, le design et la technologie"
    icon="/images/icons/services/product.svg"
    buttonLabel="Contact Us"
    buttonUrl="/contact/"
  />
  <Card
    title="Des choix avec"
    description="Nous concevons des solutions numériques claires, fiables et"
    icon="/images/icons/services/product.svg"
    buttonLabel="Contact Us"
    buttonUrl="/contact/"
  />
</CardWrapper>

Image List Avec Video

---

<ImageList>
  <ImageItem
    imageSrc="/images/gallery/1.jpg"
    imageAlt="Team members collaborating in a bright office"
    videoSrc="rFVpSwgCkCo"
  />
  <ImageItem
    imageSrc="/images/gallery/2.jpg"
    imageAlt="Team members collaborating in a bright office"
    videoSrc="/videos/test-video.mp4"
    videoProvider="html5"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/3.jpg"
    imageAlt="Team members collaborating in a bright office"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/4.jpg"
    imageAlt="Team members collaborating in a bright office"
  />
</ImageList>

Testimonial

---

Le followant code generates le testimonial shown below.

<Testimonial
  customerImage="/images/customers/avatar/1.jpg"
  customerName="Sarah Jones"
  customerRole="CEO, Founder"
  customerCompanyLogo="/images/customers/company-logo/acme.png"
  customerCompanyName="Acme Inc."
>
  Our partnership with Veltro demonstrates the power of a well-executed customer
  engagement strategy. By integrating advanced technologies and data-driven
  insights, we helped them achieve a more personalized, consistent, and
  rewarding customer experience. At Veltro, we are committed to helping
  businesses like Oloyon revolutionize their customer engagement and drive
  long-term success.
</Testimonial>