feat: call to action paragraph-a sortzen du

front/src/content.config.ts

@@ -118,6 +118,12 @@ const orriBasikoak = defineCollection({
                     formats
                   }
                 }
+                ... on ComponentParagraphCallToAction {
+                  type: __typename
+                  id
+                  url
+                  label
+                }
               }
             }
           }

front/src/models/OrriBasikoa.ts

@@ -13,7 +13,17 @@ interface ParagraphTestua {
   testua: Markdown;
 }
 
-export type Paragraph = ParagraphTestua | ParagraphIrudia;
+interface ParagraphCallToAction {
+  type: "ComponentParagraphCallToAction";
+  id: string;
+  url: string;
+  label: string;
+}
+
+export type Paragraph =
+  | ParagraphTestua
+  | ParagraphIrudia
+  | ParagraphCallToAction;
 
 export interface OrriBasikoa {
   id: string;

front/src/views/orriBasikoa/_components/EdukiLibrea.astro

@@ -2,6 +2,7 @@
 import type { Paragraph } from "models/OrriBasikoa";
 import ParagraphIrudia from "./ParagraphIrudia.astro";
 import ParagraphTestua from "./ParagraphTestua.astro";
+import ParagraphCallToAction from "./ParagraphCallToAction.astro";
 
 interface Props {
   paragraph: Paragraph;
@@ -17,6 +18,12 @@ const { paragraph } = Astro.props;
     )
   }
 
+  {
+    paragraph.type === "ComponentParagraphCallToAction" && (
+      <ParagraphCallToAction url={paragraph.url} label={paragraph.label} />
+    )
+  }
+
   {
     paragraph.type === "ComponentParagraphTestua" && (
       <ParagraphTestua testua={paragraph.testua} />

front/src/views/orriBasikoa/_components/ParagraphCallToAction.astro

@@ -0,0 +1,47 @@
+---
+interface Props {
+  url: string;
+  label: string;
+}
+
+const { url, label } = Astro.props;
+---
+
+<div>
+  <a href={url}>{label}</a>
+</div>
+
+<style lang="scss">
+  @use "../../../style/tools/mediaQueries.scss";
+  @use "../../../style/tools/toDVW.scss";
+  @use "../../../style/mixins/displayFonts.scss";
+
+  div {
+    text-align: center;
+  }
+
+  a {
+    display: inline-block;
+    padding: var(--space-04-mobile) var(--space-06-mobile);
+
+    border-radius: var(--space-06-mobile);
+    background-color: var(--gorria);
+    text-decoration: none;
+    color: var(--zuria);
+
+    transition:
+      background-color 0.3s ease,
+      color 0.3s ease;
+
+    &:hover {
+      color: var(--gorria);
+      background-color: var(--zuria);
+    }
+
+    @include displayFonts.display6;
+    @include mediaQueries.aboveTablet {
+      border-radius: var(--space-06-desktop);
+      padding: var(--space-04-desktop) var(--space-06-desktop);
+    }
+  }
+</style>