Composants

// This button has creative-fill hover animation

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

// This button has magnetic hover animation

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

// This button has text-flip hover animation

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

// This button combines the magnetic and text-flip hover animations

<Button
  hoverEffect="magnetic-text-flip"
  label="Magnetic With Text Flip"
  url="/"
/>
<Button
  variant="circle"
  hoverEffect="magnetic-text-flip"
  label="Magnetic With Text Flip"
  url="/"
/>

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

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

Chaque service dispose de son propre pipeline de build, de ses variables d'environnement et de ses règles de mise à l'échelle. Choisissez l'offre adaptée à votre trafic.

- **Starter** : déploiement depuis Git avec un environnement de prévisualisation pour chaque pull request.
- **Team** : un espace de travail partagé avec contrôle d'accès par rôle et journaux d'audit.
- **Entreprise** : régions dédiées, SSO et SLA de support.

</Accordion>

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

Chaque service dispose de son propre pipeline de build, de ses variables d'environnement et de ses règles de mise à l'échelle. Choisissez l'offre adaptée à votre trafic.

- **Starter** : déploiement depuis Git avec un environnement de prévisualisation pour chaque pull request.
- **Team** : un espace de travail partagé avec contrôle d'accès par rôle et journaux d'audit.
- **Entreprise** : régions dédiées, SSO et SLA de support.

</Accordion>

---

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

Chaque service dispose de son propre pipeline de build, de ses variables d'environnement et de ses règles de mise à l'échelle. Choisissez l'offre adaptée à votre trafic.

- **Starter** : déploiement depuis Git avec un environnement de prévisualisation pour chaque pull request.
- **Team** : un espace de travail partagé avec contrôle d'accès par rôle et journaux d'audit.
- **Entreprise** : régions dédiées, SSO et SLA de support.

</Accordion>

<Tabs>
  <Tab name="Aperçu">
    **Que pouvez-vous exécuter ?** Services web, workers, tâches cron et bases de
    données depuis un seul tableau de bord. Choisissez un onglet pour voir comment
    fonctionne chaque partie. - Déploiements - Autoscaling - Observabilité
  </Tab>

  <Tab name="Déployer">
    **Déploiements : livrez à chaque push** Connectez un dépôt : chaque push sur
    main lance un build. Vous obtenez : - Des builds automatiques - Des
    environnements de prévisualisation - Des déploiements sans interruption
  </Tab>
</Tabs>

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

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

<Callout type="note">
  Les environnements de prévisualisation utilisent les variables `preview`, pas celles de production.
</Callout>

<Callout type="tip" title="Figez la version de la CLI">
  Installez la CLI en dépendance de développement pour que la CI et toute l'équipe utilisent la même version.
</Callout>

<Callout type="warning">
  Supprimer un projet supprime aussi ses prévisualisations et ses branches de base de données.
</Callout>

<Callout type="danger" title="Rotation de la clé racine">
  Tous les jetons signés avec l'ancienne clé cessent de fonctionner immédiatement. Prévoyez une fenêtre de maintenance.
</Callout>

<Steps>

### Installer la CLI

```bash
npm install -g @cloud/cli
```

### Lier le projet

Lancez `cloud link` à la racine de votre dépôt.

### Déployer

Poussez sur `main`, ou lancez `cloud deploy` pour déployer depuis votre machine.

</Steps>

<FileTree>

- src/
  - pages/
    - **index.astro** la page d'accueil
  - content/
- cloud.config.ts
- package.json

</FileTree>

Appuyez sur <Kbd>⌘</Kbd> <Kbd>K</Kbd> pour ouvrir la recherche, ou sur <Kbd keys={["Ctrl", "Maj", "P"]} /> pour la palette de commandes.

---
import type { z } from "astro/zod";
import config from ".astro/config.generated.json";
import SectionIntro from "@/components/widgets/SectionIntro.astro";
import SubscriptionForm from "@/components/widgets/SubscriptionForm.astro";
import { getEntryCTM } from "@/lib/contentParser.astro";
import overrideObjects from "@/lib/utils/overrideObjects.ts";
import type { newsletterSectionSchema } from "@/sections.schema";

export type NewsletterSection = z.infer<typeof newsletterSectionSchema>;

type Props = {
  content?: Partial<NewsletterSection>;
};

const defaultContent = (
  await getEntryCTM("sections", "newsletter-section", Astro.currentLocale)
)?.data as NewsletterSection;

const {
  enable = true,
  eyebrow,
  title,
  description,
  note,
} = overrideObjects(
  { ...defaultContent },
  Astro.props.content,
) as NewsletterSection;

// The form posts to `[settings.subscription]` in config.toml
const { subscription } = config.settings;

if (!enable || !subscription?.enable) return;
---

<section class="newsletter-section">
  <div class="container">
    <div
      class="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
      <SectionIntro eyebrow={eyebrow} title={title} description={description} />
      <div class="w-full lg:max-w-md" data-scroll-reveal="fade-up">
        <SubscriptionForm
          id="newsletter"
          enable={true}
          layout="inline"
          formAction={subscription.formAction}
          mailchimpTagValue={subscription.mailchimpTagValue}
          note={note}
        />
      </div>
    </div>
  </div>
</section>

import { defineConfig } from "@cloud/cli";

export default defineConfig({
  service: "web-frontend",
  region: "eu-west",
  instances: { min: 2, max: 10 },
});

<CodeTabs>

```bash title="npm"
npm install @cloud/sdk
```

```bash title="pnpm"
pnpm add @cloud/sdk
```

</CodeTabs>

# 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]

<ListCheck>

- **Mises en production lentes** : les étapes de déploiement manuelles faisaient de chaque mise en production une tâche d'une demi-journée.
- **Revues tardives** : les changements n'arrivaient en préproduction qu'après le merge, et les relecteurs passaient à côté de vrais problèmes.
- **Signaux dispersés** : logs et métriques vivaient dans des outils séparés, ce qui ralentissait l'analyse des incidents.

</ListCheck>

<CardWrapper>
  <Card
    title="Bases de données managées"
    description="Postgres et Redis avec sauvegardes automatiques et restauration à un instant donné."
    icon="/images/icons/services/web.svg"
    buttonLabel="Nous contacter"
    buttonUrl="/contact/"
  />
  <Card
    title="Réseau privé"
    description="Les services communiquent sur un réseau interne qui n'est jamais exposé à Internet."
    icon="/images/icons/services/web.svg"
    buttonLabel="Nous contacter"
    buttonUrl="/contact/"
  />
</CardWrapper>

<ImageList>
  <ImageItem
    imageSrc="/images/gallery/1.jpg"
    imageAlt="Une équipe examinant la feuille de route d'un produit numérique"
    videoSrc="rFVpSwgCkCo"
  />
  <ImageItem
    imageSrc="/images/gallery/2.jpg"
    imageAlt="Un ingénieur travaillant sur le déploiement sécurisé d'une application"
    videoSrc="/videos/test-video.mp4"
    videoProvider="html5"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/3.jpg"
    imageAlt="Un tableau de bord d'analyse affiché lors d'une revue stratégique"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/4.jpg"
    imageAlt="Un espace de travail moderne pour la collaboration produit"
  />
</ImageList>

<Testimonial
  customerImage="/images/customers/avatar/1.jpg"
  customerName="Sarah Jones"
  customerRole="PDG, Fondatrice"
  customerCompanyLogo="/images/customers/company-logo/acme.png"
  customerCompanyName="Acme Inc."
>
  Nous avons migré nos services en une semaine. Les déploiements qui
  demandaient un responsable des mises en production se lancent désormais à
  chaque merge, et un retour arrière se fait en un clic.
</Testimonial>