@levo-so/blocks 0.1.2 → 0.1.52

package/src/blocks/content/content-7.tsx

@@ -0,0 +1,53 @@
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Image,
+  Section,
+  Typography,
+  type ILevoBlockBaseProps,
+} from "@levo-so/studio";
+import React from "react";
+
+import { type IContent7Content } from "./content-7.schema";
+
+const Content7: React.FC<ILevoBlockBaseProps<IContent7Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_wrapper">
+        <Heading elementKey="title" />
+        <Button elementKey="view_all_cta" />
+      </Box>
+      <Box elementKey="services_levoGroup" data-levo_group>
+        {(content.services ?? []).map((_: any, index: number) => (
+          <Box
+            key={index}
+            data-levo_group_item
+            elementKey={`services.${index}.service_item`}
+          >
+            <Box elementKey={`services.${index}.left_container`}>
+              <Heading elementKey={`services.${index}.service_title`} />
+            </Box>
+            <Box elementKey={`services.${index}.right_container`}>
+              <Image
+                elementKey={`services.${index}.service_image`}
+                alt="Service image"
+              />
+              <Box elementKey={`services.${index}.content_wrapper`}>
+                <Typography
+                  elementKey={`services.${index}.service_description`}
+                />
+                <Button elementKey={`services.${index}.cta`} />
+              </Box>
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Content7;

package/src/blocks/cta/cta-1.schema.ts

@@ -25,23 +25,23 @@ const DEFAULT_CONTENT = {
       id: "lDiFGcHOy3Il",
       filename: "image.png",
       kind: "image",
-      location: "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO.png",
+      location: "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO.png",
       srcset: {
         "1080w":
-          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-1080w.webp",
+          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1080w.webp",
         "1200w":
-          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-1200w.webp",
+          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1200w.webp",
         "1920w":
-          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-1920w.webp",
+          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1920w.webp",
         "320w":
-          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-320w.webp",
+          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-320w.webp",
         "640w":
-          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-640w.webp",
+          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-640w.webp",
         "750w":
-          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-750w.webp",
+          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-750w.webp",
         "828w":
-          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-828w.webp",
-        path: "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-320w.webp 320w, https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-1080w.webp 1080w, https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-828w.webp 828w, https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-640w.webp 640w, https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-1200w.webp 1200w, https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-750w.webp 750w, https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-1920w.webp 1920w",
+          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-828w.webp",
+        path: "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1920w.webp 1920w",
       },
       mimetype: "image/png",
     },
@@ -143,7 +143,6 @@ export const Cta1: IBlock = {
           "padding-bottom": "6xl",
           "padding-left": "xl",
           "padding-right": "xl",
-          "background-color": "background-1",
           tablet: {
             "padding-top": "4xl",
             "padding-bottom": "4xl",
@@ -182,20 +181,15 @@ export const Cta1: IBlock = {
           "justify-content": "space-between",
         },
         title: {
-          "font-size": "5xl",
-          "font-weight": "700",
           color: "text-1",
-          "line-height": "1.2",
           "margin-bottom": "2xl",
           tablet: {
-            "font-size": "4xl",
             filter: "none",
             "text-align": "center",
             "margin-bottom": "xl",
             "max-width": "100%",
           },
           mobile: {
-            "font-size": "2xl",
             filter: "none",
             "text-align": "center",
             "margin-bottom": "lg",
@@ -237,9 +231,6 @@ export const Cta1: IBlock = {
               "padding-bottom": "xs",
               "padding-left": "2xl",
               "padding-right": "2xl",
-              "border-radius": "lg",
-              "font-size": "base",
-              "font-weight": 600,
               display: "flex",
               "align-items": "center",
               "column-gap": "xs",
@@ -252,7 +243,6 @@ export const Cta1: IBlock = {
                 "padding-left": "xl",
                 "padding-right": "xl",
                 filter: "none",
-                "border-radius": "base",
                 "min-width": "100%",
                 width: "auto",
                 "border-style": "none",
@@ -263,7 +253,6 @@ export const Cta1: IBlock = {
                 "padding-bottom": "xs",
                 "padding-left": "xl",
                 "padding-right": "xl",
-                "font-size": "sm",
                 filter: "none",
                 width: "100%",
                 "min-width": "100%",
@@ -286,9 +275,6 @@ export const Cta1: IBlock = {
               "padding-bottom": "xs",
               "padding-left": "2xl",
               "padding-right": "2xl",
-              "border-radius": "lg",
-              "font-size": "base",
-              "font-weight": 600,
               "min-width": "100%",
               tablet: {
                 filter: "none",
@@ -307,7 +293,6 @@ export const Cta1: IBlock = {
                 "padding-bottom": "xs",
                 "padding-left": "xl",
                 "padding-right": "xl",
-                "font-size": "sm",
                 "min-width": "100%",
               },
               width: "100%",
@@ -332,14 +317,21 @@ export const Cta1: IBlock = {
         },
         description: {
           filter: "none",
-          "font-weight": 500,
-          "font-size": "xl",
+          color: "text-2",
           "text-align": "left",
           "max-width": "500px",
         },
       },
       content: DEFAULT_CONTENT,
       config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
         "ctas.0.button": {
           selectedVariants: {
             Button_Variants: "Primary",

package/src/blocks/cta/cta-3.schema.ts

@@ -62,6 +62,15 @@ const DEFAULT_CONTENT = {
   ],
 };
 
+const DEFAULT_CONTENT_2 = {
+  layout: null,
+  container: null,
+  left_content: null,
+  title: "Ready to Give Them Care They Deserve?",
+  description: "Join us in making a difference in the lives of those in need.",
+  cta_wrapper: null,
+  ctas: [{ button: "Contact Us" }],
+};
 export type ICta3Content = typeof DEFAULT_CONTENT;
 
 export const Cta3: IBlock = {
@@ -152,5 +161,56 @@ export const Cta3: IBlock = {
       content: DEFAULT_CONTENT,
       config: {},
     },
+    {
+      key: "cta-wth-bg-img  ",
+      title: "CTA with Background Image",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+          "background-image":
+            'url("https://static.levostg.online/W6OEVMW8/defaultblue-tryFJ012mgyH-1920w-pKkeQlte7lkYh.webp")',
+          "background-position": "50% 50%",
+          "background-size": "cover",
+        },
+        container: {
+          display: "grid",
+          "grid-template-columns": "1fr 1fr",
+          "column-gap": "xl",
+          "align-items": "center",
+        },
+        left_content: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+        },
+        title: {
+          "font-size": "3xl",
+          "font-weight": "700",
+          color: "text-1",
+        },
+        cta_wrapper: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "base",
+        },
+        images_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "1fr 1fr",
+          "column-gap": "base",
+        },
+        "images.$.image": {
+          "border-radius": "base",
+          "object-fit": "cover",
+          height: "300px",
+          width: "300px",
+        },
+        description: {
+          display: "none",
+        },
+      },
+      content: DEFAULT_CONTENT_2,
+      config: {},
+    },
   ],
 };

package/src/blocks/event/event-details.schema.ts

@@ -194,6 +194,11 @@ export const EventDetails: IBlock = {
         prompt_description: "Event start date in readable format.",
       },
     },
+    {
+      key: "id",
+      label: "Event ID",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "end-date-wrapper",
       label: "End Date Wrapper",
@@ -505,14 +510,15 @@ export const EventDetails: IBlock = {
         "hero-card": {
           display: "flex",
           "flex-direction": "column",
-          "border-radius": "16px",
-          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+          "border-radius": "base",
+          "box-shadow": "default",
           overflow: "hidden",
         },
         "hero-image": {
           width: "100%",
           height: "400px",
           "object-fit": "cover",
+          "border-radius": "base",
           mobile: {
             height: "250px",
           },
@@ -524,13 +530,8 @@ export const EventDetails: IBlock = {
           "padding-right": "lg",
         },
         title: {
-          "font-size": "2xl",
-          "font-weight": "700",
           color: "text-1",
           "margin-bottom": "base",
-          mobile: {
-            "font-size": "xl",
-          },
         },
         "event-info": {
           display: "flex",
@@ -548,12 +549,10 @@ export const EventDetails: IBlock = {
           height: "16px",
         },
         "start-date": {
-          "font-size": "sm",
           color: "text-2",
           "text-transform": "capitalize",
         },
         starts_at: {
-          "font-size": "sm",
           color: "text-2",
           "text-transform": "capitalize",
         },
@@ -567,12 +566,10 @@ export const EventDetails: IBlock = {
           height: "16px",
         },
         "end-date": {
-          "font-size": "sm",
           color: "text-2",
           "text-transform": "capitalize",
         },
         ends_at: {
-          "font-size": "sm",
           color: "text-2",
           "text-transform": "capitalize",
         },
@@ -586,7 +583,6 @@ export const EventDetails: IBlock = {
           height: "16px",
         },
         "time-range": {
-          "font-size": "sm",
           color: "text-2",
         },
         "kind-wrapper": {
@@ -599,7 +595,6 @@ export const EventDetails: IBlock = {
           height: "16px",
         },
         kind: {
-          "font-size": "sm",
           color: "text-2",
           "text-transform": "capitalize",
         },
@@ -613,7 +608,6 @@ export const EventDetails: IBlock = {
           height: "16px",
         },
         timing: {
-          "font-size": "sm",
           color: "text-2",
           "text-transform": "capitalize",
         },
@@ -630,8 +624,8 @@ export const EventDetails: IBlock = {
           display: "flex",
           "flex-direction": "column",
           "row-gap": "xl",
-          "border-radius": "16px",
-          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+          "border-radius": "base",
+          "box-shadow": "default",
           "padding-top": "lg",
           "padding-bottom": "lg",
           "padding-left": "lg",
@@ -647,20 +641,15 @@ export const EventDetails: IBlock = {
           "padding-bottom": "base",
           "padding-left": "xl",
           "padding-right": "xl",
-          "border-radius": "8px",
-          "font-weight": "600",
           "align-self": "flex-start",
         },
         "registration-ended": {
-          "font-size": "base",
           color: "text-2",
           "padding-top": "base",
           "padding-bottom": "base",
         },
         description: {
-          "font-size": "base",
           color: "text-2",
-          "line-height": "1.6",
         },
         "contact-sidebar": {
           "flex-basis": "33.33%",
@@ -669,16 +658,14 @@ export const EventDetails: IBlock = {
           },
         },
         "contact-card": {
-          "border-radius": "16px",
-          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+          "border-radius": "base",
+          "box-shadow": "default",
           "padding-top": "lg",
           "padding-bottom": "lg",
           "padding-left": "lg",
           "padding-right": "lg",
         },
         "contact-title": {
-          "font-size": "xl",
-          "font-weight": "700",
           color: "text-1",
           "margin-bottom": "base",
         },
@@ -693,12 +680,9 @@ export const EventDetails: IBlock = {
           "row-gap": "xs",
         },
         "name-label": {
-          "font-size": "base",
           color: "text-2",
         },
         "name-value": {
-          "font-size": "base",
-          "font-weight": "500",
           color: "text-1",
         },
         "email-field": {
@@ -707,12 +691,9 @@ export const EventDetails: IBlock = {
           "row-gap": "xs",
         },
         "email-label": {
-          "font-size": "base",
           color: "text-2",
         },
         "email-value": {
-          "font-size": "base",
-          "font-weight": "500",
           color: "text-1",
         },
         "phone-field": {
@@ -721,17 +702,31 @@ export const EventDetails: IBlock = {
           "row-gap": "xs",
         },
         "phone-label": {
-          "font-size": "base",
           color: "text-2",
         },
         "phone-value": {
-          "font-size": "base",
-          "font-weight": "500",
           color: "text-1",
         },
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+        "contact-title": {
+          selectedVariants: {
+            Heading_Level: "H4",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+      },
     },
   ],
 };

package/src/blocks/event/event-details.tsx

@@ -1,13 +1,13 @@
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
   Box,
-  Button,
   Container,
   Heading,
   Icon,
   Image,
   Section,
   Typography,
+  RegisterModal,
 } from "@levo-so/studio";
 import dayjs from "dayjs";
 
@@ -15,93 +15,88 @@ import type { IEventDetailsContent } from "./event-details.schema";
 
 const EventDetails: React.FC<ILevoBlockBaseProps<IEventDetailsContent>> = ({
   content,
-}) => {
-  return (
-    <Section elementKey="layout">
-      <Container elementKey="container">
-        <Box elementKey="main-wrapper">
-          <Box elementKey="hero-card">
-            <Image
-              elementKey="hero-image"
-              alt="Event cover image"
-              width={800}
-              height={400}
-            />
-            <Box elementKey="hero-content">
-              <Heading elementKey="title" />
-              <Box elementKey="event-info">
-                <Box elementKey="start-date-wrapper">
-                  <Icon elementKey="date-icon" />
-                  <Typography elementKey="starts_at">
-                    {dayjs(content?.starts_at).format("MMM D, YYYY")}
-                  </Typography>
-                </Box>
-                <Box elementKey="end-date-wrapper">
-                  <Icon elementKey="end-date-icon" />
-                  <Typography elementKey="ends_at">
-                    {dayjs(content?.ends_at).format("MMM D, YYYY")}
-                  </Typography>
-                </Box>
-                <Box elementKey="time-wrapper">
-                  <Icon elementKey="time-icon" />
-                  <Typography elementKey="time-range">
-                    {`${dayjs(content?.starts_at).format("hh:mm A")} - ${dayjs(content?.ends_at).format("hh:mm A")}`}
-                  </Typography>
-                </Box>
-                <Box elementKey="kind-wrapper">
-                  <Icon elementKey="kind-icon" />
-                  <Typography elementKey="kind">
-                    {content?.kind?.replace(/_/g, " ")}
-                  </Typography>
-                </Box>
-                <Box elementKey="timing-wrapper">
-                  <Icon elementKey="timing-icon" />
-                  <Typography elementKey="timing">
-                    {content?.timing?.replace(/_/g, " ")}
-                  </Typography>
-                </Box>
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="main-wrapper">
+        <Box elementKey="hero-card">
+          <Image
+            elementKey="hero-image"
+            alt="Event cover image"
+            width={800}
+            height={400}
+          />
+          <Box elementKey="hero-content">
+            <Heading elementKey="title" />
+            <Box elementKey="event-info">
+              <Box elementKey="start-date-wrapper">
+                <Icon elementKey="date-icon" />
+                <Typography elementKey="starts_at">
+                  {dayjs(content?.starts_at).format("MMM D, YYYY")}
+                </Typography>
+              </Box>
+              <Box elementKey="end-date-wrapper">
+                <Icon elementKey="end-date-icon" />
+                <Typography elementKey="ends_at">
+                  {dayjs(content?.ends_at).format("MMM D, YYYY")}
+                </Typography>
+              </Box>
+              <Box elementKey="time-wrapper">
+                <Icon elementKey="time-icon" />
+                <Typography elementKey="time-range">
+                  {`${dayjs(content?.starts_at).format("hh:mm A")} - ${dayjs(content?.ends_at).format("hh:mm A")}`}
+                </Typography>
+              </Box>
+              <Box elementKey="kind-wrapper">
+                <Icon elementKey="kind-icon" />
+                <Typography elementKey="kind">
+                  {content?.kind?.replace(/_/g, " ")}
+                </Typography>
+              </Box>
+              <Box elementKey="timing-wrapper">
+                <Icon elementKey="timing-icon" />
+                <Typography elementKey="timing">
+                  {content?.timing?.replace(/_/g, " ")}
+                </Typography>
               </Box>
             </Box>
           </Box>
+        </Box>
 
-          <Box elementKey="content-section">
-            <Box elementKey="main-content">
-              {(
-                content?.ends_at
-                  ? new Date(content?.ends_at) > new Date()
-                  : true
-              ) ? (
-                <Button elementKey="register-button" />
-              ) : (
-                <Typography elementKey="registration-ended" />
-              )}
-              <Typography elementKey="description" />
-            </Box>
+        <Box elementKey="content-section">
+          <Box elementKey="main-content">
+            {content?.id ? (
+              <RegisterModal
+                eventID={content?.id as string}
+                title={content?.title}
+              />
+            ) : null}
+            <Typography elementKey="description" />
+          </Box>
 
-            <Box elementKey="contact-sidebar">
-              <Box elementKey="contact-card">
-                <Heading elementKey="contact-title" />
-                <Box elementKey="contact-details">
-                  <Box elementKey="name-field">
-                    <Typography elementKey="name-label" />
-                    <Typography elementKey="name-value" />
-                  </Box>
-                  <Box elementKey="email-field">
-                    <Typography elementKey="email-label" />
-                    <Typography elementKey="email-value" />
-                  </Box>
-                  <Box elementKey="phone-field">
-                    <Typography elementKey="phone-label" />
-                    <Typography elementKey="phone-value" />
-                  </Box>
+          <Box elementKey="contact-sidebar">
+            <Box elementKey="contact-card">
+              <Heading elementKey="contact-title" />
+              <Box elementKey="contact-details">
+                <Box elementKey="name-field">
+                  <Typography elementKey="name-label" />
+                  <Typography elementKey="name-value" />
+                </Box>
+                <Box elementKey="email-field">
+                  <Typography elementKey="email-label" />
+                  <Typography elementKey="email-value" />
+                </Box>
+                <Box elementKey="phone-field">
+                  <Typography elementKey="phone-label" />
+                  <Typography elementKey="phone-value" />
                 </Box>
               </Box>
             </Box>
           </Box>
         </Box>
-      </Container>
-    </Section>
-  );
-};
+      </Box>
+    </Container>
+  </Section>
+);
 
 export default EventDetails;