Add call to action

customtypes/home/index.json

@@ -11,6 +11,9 @@
         "fieldset": "Slice Zone",
         "config": {
           "choices": {
+            "call_to_action": {
+              "type": "SharedSlice"
+            },
             "testemonials": {
               "type": "SharedSlice"
             },

prismicio-types.d.ts

@@ -5,6 +5,7 @@ import type * as prismic from "@prismicio/client";
 type Simplify<T> = { [KeyType in keyof T]: T[KeyType] };
 
 type HomeDocumentDataSlicesSlice =
+  | CallToActionSlice
   | TestemonialsSlice
   | TeamMembersSlice
   | ShowcaseSlice
@@ -189,6 +190,81 @@ export type ArticleSlice = prismic.SharedSlice<
   ArticleSliceVariation
 >;
 
+/**
+ * Primary content in *CallToAction → Primary*
+ */
+export interface CallToActionSliceDefaultPrimary {
+  /**
+   * Title field in *CallToAction → Primary*
+   *
+   * - **Field Type**: Rich Text
+   * - **Placeholder**: *None*
+   * - **API ID Path**: call_to_action.primary.title
+   * - **Documentation**: https://prismic.io/docs/field#rich-text-title
+   */
+  title: prismic.RichTextField;
+
+  /**
+   * Body field in *CallToAction → Primary*
+   *
+   * - **Field Type**: Rich Text
+   * - **Placeholder**: *None*
+   * - **API ID Path**: call_to_action.primary.body
+   * - **Documentation**: https://prismic.io/docs/field#rich-text-title
+   */
+  body: prismic.RichTextField;
+
+  /**
+   * Call To Action Label field in *CallToAction → Primary*
+   *
+   * - **Field Type**: Text
+   * - **Placeholder**: *None*
+   * - **API ID Path**: call_to_action.primary.call_to_action_label
+   * - **Documentation**: https://prismic.io/docs/field#key-text
+   */
+  call_to_action_label: prismic.KeyTextField;
+
+  /**
+   * Call To Action Link field in *CallToAction → Primary*
+   *
+   * - **Field Type**: Link
+   * - **Placeholder**: *None*
+   * - **API ID Path**: call_to_action.primary.call_to_action_link
+   * - **Documentation**: https://prismic.io/docs/field#link-content-relationship
+   */
+  call_to_action_link: prismic.LinkField;
+}
+
+/**
+ * Default variation for CallToAction Slice
+ *
+ * - **API ID**: `default`
+ * - **Description**: Default
+ * - **Documentation**: https://prismic.io/docs/slice
+ */
+export type CallToActionSliceDefault = prismic.SharedSliceVariation<
+  "default",
+  Simplify<CallToActionSliceDefaultPrimary>,
+  never
+>;
+
+/**
+ * Slice variation for *CallToAction*
+ */
+type CallToActionSliceVariation = CallToActionSliceDefault;
+
+/**
+ * CallToAction Shared Slice
+ *
+ * - **API ID**: `call_to_action`
+ * - **Description**: CallToAction
+ * - **Documentation**: https://prismic.io/docs/slice
+ */
+export type CallToActionSlice = prismic.SharedSlice<
+  "call_to_action",
+  CallToActionSliceVariation
+>;
+
 /**
  * Primary content in *Hero → Primary*
  */
@@ -612,6 +688,10 @@ declare module "@prismicio/client" {
       ArticleSliceDefaultPrimary,
       ArticleSliceVariation,
       ArticleSliceDefault,
+      CallToActionSlice,
+      CallToActionSliceDefaultPrimary,
+      CallToActionSliceVariation,
+      CallToActionSliceDefault,
       HeroSlice,
       HeroSliceDefaultPrimary,
       HeroSliceVariation,

src/slices/CallToAction/index.tsx

@@ -0,0 +1,50 @@
+import Bounded from "@/components/bounded";
+import { buttonVariants } from "@/components/ui/button";
+import { Content } from "@prismicio/client";
+import { PrismicNextLink } from "@prismicio/next";
+import { PrismicRichText, SliceComponentProps } from "@prismicio/react";
+import Link from "next/link";
+
+/**
+ * Props for `CallToAction`.
+ */
+export type CallToActionProps = SliceComponentProps<Content.CallToActionSlice>;
+
+/**
+ * Component for "CallToAction" Slices.
+ */
+const CallToAction = ({ slice }: CallToActionProps): JSX.Element => {
+  return (
+    <Bounded data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
+      <div className="relative isolate backdrop-blur-sm backdrop-saturate-200 shadow-xl shadow-primary/10 ring-2 ring-accent/90 overflow-hidden px-6 pt-16 flex flex-col rounded-3xl sm:px-64 md:pt-64 lg:gap-x-60 lg:px-24 lg:pt-0 lg:flex-row">
+        <svg
+          viewBox="0 0 1024 1024"
+          className="bg-gradient-to-r from-accent to-transparent absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
+          aria-hidden="true"
+        >
+          <circle cx={512} cy={512} r={512} fill="url(#gradient)" fillOpacity="1" />
+        </svg>
+        <div className="max-w-md text-center my-32 lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            Put Your Skills to Use.
+            <br />
+            Join our Team today.
+          </h2>
+          <div className="mt-6 text-lg leading-8 text-muted">
+            <PrismicRichText field={slice.primary.body} />
+          </div>
+          <div className="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
+            <PrismicNextLink
+              field={slice.primary.call_to_action_link}
+              className={buttonVariants({ variant: "default" })}
+            >
+              {slice.primary.call_to_action_label}
+            </PrismicNextLink>
+          </div>
+        </div>
+      </div>
+    </Bounded>
+  );
+};
+
+export default CallToAction;

src/slices/CallToAction/mocks.json

@@ -0,0 +1,38 @@
+[
+	{
+		"__TYPE__": "SharedSliceContent",
+		"variation": "default",
+		"primary": {
+			"title": {
+				"__TYPE__": "StructuredTextContent",
+				"value": [
+					{
+						"type": "heading2",
+						"content": {
+							"text": "Sweet"
+						}
+					}
+				]
+			},
+			"body": {
+				"__TYPE__": "StructuredTextContent",
+				"value": [
+					{
+						"type": "paragraph",
+						"content": {
+							"text": "If you are not sure yet, you can always join our Discord server and get to know us.",
+							"spans": []
+						},
+						"direction": "ltr"
+					}
+				]
+			},
+			"call_to_action_label": {
+				"__TYPE__": "FieldContent",
+				"type": "Text",
+				"value": "Join Now"
+			}
+		},
+		"items": []
+	}
+]

src/slices/CallToAction/model.json

@@ -0,0 +1,52 @@
+{
+  "id": "call_to_action",
+  "type": "SharedSlice",
+  "name": "CallToAction",
+  "description": "CallToAction",
+  "variations": [
+    {
+      "id": "default",
+      "name": "Default",
+      "docURL": "...",
+      "version": "initial",
+      "description": "Default",
+      "imageUrl": "",
+      "primary": {
+        "title": {
+          "type": "StructuredText",
+          "config": {
+            "label": "Title",
+            "placeholder": "",
+            "allowTargetBlank": true,
+            "multi": "heading2"
+          }
+        },
+        "body": {
+          "type": "StructuredText",
+          "config": {
+            "label": "Body",
+            "placeholder": "",
+            "allowTargetBlank": true,
+            "multi": "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl"
+          }
+        },
+        "call_to_action_label": {
+          "type": "Text",
+          "config": {
+            "label": "Call To Action Label",
+            "placeholder": ""
+          }
+        },
+        "call_to_action_link": {
+          "type": "Link",
+          "config": {
+            "label": "Call To Action Link",
+            "placeholder": "",
+            "select": null
+          }
+        }
+      },
+      "items": {}
+    }
+  ]
+}

src/slices/index.ts

@@ -4,6 +4,7 @@ import dynamic from "next/dynamic";
 
 export const components = {
   article: dynamic(() => import("./Article")),
+  call_to_action: dynamic(() => import("./CallToAction")),
   hero: dynamic(() => import("./Hero")),
   showcase: dynamic(() => import("./Showcase")),
   sponsors: dynamic(() => import("./Sponsors")),