Composants

// This button has creative-fill hover animation

<Button
  hoverEffect="creative-fill"
  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 variant="outline" 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 projet commence par un court échange et un brief écrit. Choisissez le périmètre qui correspond au travail.

- **Identité** : logo, typographie et couleurs, avec un petit guide pour celles et ceux qui les utilisent.
- **Packaging** : étiquettes, boîtes et adhésifs pour de petites séries, avec des fichiers vérifiés selon les exigences de votre imprimeur.
- **Direction artistique** : une liste de plans, le stylisme du décor et une journée de prise de vue avec le photographe.

</Accordion>

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

Chaque projet commence par un court échange et un brief écrit. Choisissez le périmètre qui correspond au travail.

- **Identité** : logo, typographie et couleurs, avec un petit guide pour celles et ceux qui les utilisent.
- **Packaging** : étiquettes, boîtes et adhésifs pour de petites séries, avec des fichiers vérifiés selon les exigences de votre imprimeur.
- **Direction artistique** : une liste de plans, le stylisme du décor et une journée de prise de vue avec le photographe.

</Accordion>

---

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

Chaque projet commence par un court échange et un brief écrit. Choisissez le périmètre qui correspond au travail.

- **Identité** : logo, typographie et couleurs, avec un petit guide pour celles et ceux qui les utilisent.
- **Packaging** : étiquettes, boîtes et adhésifs pour de petites séries, avec des fichiers vérifiés selon les exigences de votre imprimeur.
- **Direction artistique** : une liste de plans, le stylisme du décor et une journée de prise de vue avec le photographe.

</Accordion>

<Tabs>
  <Tab name="Aperçu">
    **Sur quoi je travaille ?** Identités, packaging, imprimés et direction
    artistique pour de petits fabricants. Choisissez un onglet pour voir le
    déroulé d'un projet. - Découverte - Création - Livraison
  </Tab>

  <Tab name="Découverte">
    **Découverte : partir de l'atelier** Je passe du temps avec le produit avant
    de dessiner quoi que ce soit. Vous recevez : - Un brief écrit - Une planche
    de références - La liste de tous les supports où la marque apparaît
  </Tab>
</Tabs>

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

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

<Callout type="note">
  La carte d'un projet prend sa couverture dans le champ `image` du frontmatter du projet.
</Callout>

<Callout type="tip" title="Vérifiez les épreuves en taille réelle">
  Imprimez une page en taille réelle avant de valider. Un texte lisible à l'écran peut être trop petit sur une étiquette.
</Callout>

<Callout type="warning">
  Sur papier non couché, les couleurs sortent plus ternes qu'à l'écran. Demandez une épreuve imprimée avant le tirage complet.
</Callout>

<Callout type="danger" title="Avant la gravure des plaques">
  Passé ce stade, chaque modification coûte un nouveau jeu de plaques. Vérifiez les noms, les prix et les codes-barres sur l'épreuve finale.
</Callout>

<Steps>

### Installer les dépendances

```bash
npm install
```

### Lancer le site en local

Lancez `npm run dev` et ouvrez l'adresse locale affichée. Les pages se rechargent dès que vous modifiez un fichier de `src/content/`.

### Construire le site

Lancez `npm run build`. Le site final est écrit dans `dist/`, prêt à être envoyé sur n'importe quel hébergement statique.

</Steps>

<FileTree>

- src/
  - config/
    - config.toml les réglages du site
  - content/
    - projects/
      - english/
      - french/
        - **ceramic-forms.md** une étude de cas
- package.json

</FileTree>

Appuyez sur <Kbd>⌘</Kbd> <Kbd>K</Kbd> pour ouvrir la recherche, ou sur <Kbd keys={["Ctrl", "K"]} /> sous Windows et Linux.

---
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="frame">
    <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-reveal="up">
        <SubscriptionForm
          id="newsletter"
          enable={true}
          layout="inline"
          formAction={subscription.formAction}
          mailchimpTagValue={subscription.mailchimpTagValue}
          note={note}
        />
      </div>
    </div>
  </div>
</section>

---
title: "Marrow Kiln"
description: "Un système d'étiquettes pour un petit atelier de céramique dont les émaux changent à chaque cuisson."
client: "Marrow Kiln"
year: "2025"
services: ["Identité de marque", "Packaging"]
image: "/images/projects/ceramic-forms/cover.jpg"
---

<CodeTabs>

```bash title="npm"
npm install
```

```bash title="pnpm"
pnpm install
```

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

- **Une étiquette par couleur** : chaque nouveau produit demandait sa propre étiquette, et il fallait une semaine pour qu'il arrive en rayon.
- **Un logo qui s'empâtait** : l'ancien logo perdait ses détails sur les tampons, les adhésifs et les étiquettes volantes.
- **Des fichiers dans une seule boîte mail** : les fichiers d'impression restaient chez une seule personne, et chaque réassort devait l'attendre.

</ListCheck>

<CardWrapper>
  <Card
    title="Identité de marque"
    description="Logo, typographie et couleurs, avec un petit guide pour celles et ceux qui les utilisent au quotidien."
    icon="PenTool"
    buttonLabel="Lancer un projet"
    buttonUrl="/contact/"
  />
  <Card
    title="Packaging"
    description="Étiquettes, boîtes et adhésifs pour de petites séries, avec des fichiers vérifiés avant l'impression."
    icon="Package"
    buttonLabel="Lancer un projet"
    buttonUrl="/contact/"
  />
</CardWrapper>

<ImageList>
  <ImageItem
    imageSrc="/images/projects/ceramic-forms/gallery-1.jpg"
    imageAlt="Dix pots en anneaux empilés, émaillés moutarde, bleu, rose, sauge et blanc, alignés sur du lin."
    videoSrc="rFVpSwgCkCo"
  />
  <ImageItem
    imageSrc="/images/projects/envelope-system/gallery-1.jpg"
    imageAlt="Des enveloppes kraft et vermillon disposées en diagonale, en grille serrée sur fond noir."
    videoSrc="/videos/test-video.mp4"
    videoProvider="html5"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/projects/colour-fan/gallery-1.jpg"
    imageAlt="Des cartes de nuancier pastel déployées en anneau sur une surface blanche, du jaune au rose en passant par le bleu."
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/projects/screen-print/gallery-1.jpg"
    imageAlt="Une raclette jaune poussant de l'encre vert vif sur un écran, en gros plan."
  />
</ImageList>

<Testimonial
  customerImage="/images/people/client-1.jpg"
  customerName="Joel Ashcombe"
  customerRole="Fondateur"
  customerCompanyLogo="/images/logos/marrow-kiln.svg"
  customerCompanyName="Marrow Kiln"
>
  Hugo a passé une matinée dans l'atelier des fours avant de dessiner quoi que
  ce soit. Les étiquettes se lisent comme notre carnet d'émaux, et nos
  revendeurs l'ont remarqué tout de suite.
</Testimonial>