@levo-so/blocks 0.1.74 → 0.1.76

package/src/blocks/content/content-10.schema.ts

@@ -0,0 +1,450 @@
+import type { IBlock } from "@levo-so/studio";
+
+const MEDIA = {
+  id: "7141014160938075687",
+  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+  kind: "image",
+  mimetype: "image/png",
+  srcset: {
+    "1080w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+    "1200w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+    "1920w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+    "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+    "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+    "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+    "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+    path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  "header-section": null,
+  "header-content": null,
+  "tag-container": null,
+  tag: "<p>Financial Planning</p>",
+  "title-section": null,
+  title: "How to Get from 0 to 100 Customers for your SaaS startup",
+  "meta-info": null,
+  "author-container": null,
+  "author-image-container": null,
+  "author-image": {
+    kind: "custom",
+    data: MEDIA,
+  },
+  "author-name": "John Doe",
+  "publish-date": "2025-12-29T14:03:50.371Z",
+  "reading-time": "<p>4 mins</p>",
+  "blog-cover": MEDIA,
+  "content-section": null,
+  content: `<p><span>Identifying an industry problem and building a user-friendly software product to solve that problem is just one part of the battle. The real test is whether you’re able to get your first set of customers and grow them in order to sustain your business.</span></p><p><span>With the growing number of software developers in the market, it is easy for anyone to build a product. But how do you crack into the market and get reliable business traction?</span></p><p><a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://www.linkedin.com/in/trivediravi/"><span><strong>Ravi Trivedi</strong></span></a><span>, Founder of </span><a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://www.pushengage.com/"><span><strong>PushEngage</strong></span></a><span> – a platform enables website owners to send push notifications to its customers, was a speaker at Startup Saturday, Bangalore, where he took us through the journey of getting from 0 to 100 customers.</span></p><p><span>With hands-on experience running different companies in India and the US, over the past few years, he has been working closely with early-stage startups to help them with customer acquisitions, growth and analytics.</span></p><p><span>Read through some of the interesting short-term tactics that Ravi shared to help SaaS startups get their first 100 customers.</span></p><img src="${MEDIA.location}" srcset="${MEDIA.srcset.path}" data-width="100%" data-align="center"><img src="${MEDIA.location}" srcset="${MEDIA.srcset.path}" data-width="100%" data-align="center"><p><strong>3- Step Marketing Process:</strong></p><p><strong>Step 1 – Identify Your Target Market</strong></p><p><span>The first step in your marketing plan should be about identifying your target customer. In order to do this, first try and explain what it is that your business is offering in 140 characters. Keeping your answer short and precise will give you direction and also help your customers understand what you’re offering quickly.<br><br>Spend time in chalking out a detailed description of your customer, the more focused the target the lesser will be the cost per acquisition. However, don’t make it so targeted that there isn’t a large enough audience.</span></p><p><span>“At PushEngage, Ravi and his team targeted Shopify, an upcoming e-commerce platform and pitched their email marketing service to them. They knew that Shopify would benefit directly from their service, and went after them specifically.”</span></p><p><strong>Step 2 – Hone The Messaging On Your Landing Page</strong></p><p><span>As the website is the main point of engagement with your customers, keep the messaging focused on a particular set of audience. In the early stage, it is okay to ignore the smaller audience segments in order to capture the attention of the more lucrative segment. You can check out the websites of Groove or Freshdesk for some really interesting website content ideas.</span></p><p><span>Ideally, the first-fold of your website should explain what your company does, and there should also be a section that offers social proof – this could be either news coverage, customer reviews or certificates and awards. &nbsp;</span></p><p><span>Finally, use </span><a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://www.levo.so/analytics"><span><strong>analytics to track the traffic on your page</strong></span></a><span> and tweak messaging and user experience accordingly.</span></p><p><strong>Step 3 – Use Marketing Tools For Fast Growth</strong></p><p><span>There are many marketing tools that’ll help you find your target customers online.</span></p><p><span>From competitor analysis tools like SimilarWeb and Buzzsumo that tell you what your competition is up to, to advertising tools like AdWords and AdSpy, there are a lot of free tools available to get initial traction.</span></p><p><span>Additionally, you can join industry-specific online communities and affiliate marketing sites to further grow your customers. It is important to leverage these aspects of the digital medium to meet your first set of customers.</span></p><p><span>Here are a few tips to get your </span><strong>first 10 customers:</strong></p><ol><li><p><span>Talk to potential customers while developing your product.</span></p><ul><li><p><span>Use their inputs to tweak your offering, as they’re your first leads.</span></p></li><li><p><span>Start advertising your service through AdWords and Facebook ads with a minimum budget.</span></p></li><li><p><span>Reach out to your personal network.<br>“Export your LinkedIn contact list and send them a holiday message instead of direct selling (Make it a habit to send at least 1 or 2 such messages every year)”</span></p></li><li><p><span><strong>Speak to your online customers directly and listen to their suggestions – If you’re selling globally, as a founder you need to interact directly with your customers in order to get practical feedback of your service.</strong></span></p></li></ul></li></ol><p><span>Here are a few tips to get</span> <span>from </span><strong>10 -100 customers:</strong></p><ol><li><p><span>Find influencers in your sector and offer them a deal to get referrals. PushEngage found 5 influencers and offered them a lifetime free plan. These influencers helped them improve their product and also gave a lot of referred customers.</span></p></li><li><p><span>Connect with the best affiliates and bloggers in your field and build a good relationship with them. Only the top 10 matter, as they’re the ones that will give you the desired traction.</span></p></li><li><p><span>‘Powered By’ words are like gold for SAAS startups. Try and get this type of branding in the early days to get indirect branding benefits.</span></p></li><li><p><span>Communities and marketplaces like Quora, Facebook groups and Reddit are easy targets for sector-specific topics. Be present and genuine in these platforms to witness organic interest in your service.</span></p></li><li><p><span>Create content and showcase your expertise through a blog. You can use tools like Content Analyzer, Buzzsumo or become a guest blogger to grow your organic audience.</span></p></li><li><p><span>Collect reviews from your employees, customers and vendors in marketplaces like G2Crowd, Capterra, and others.</span></p></li><li><p><span>Select one of these marketing activities that work for you and go deep to get maximum leverage.</span></p></li></ol><p></p>`,
+  "author-description": "<p>Lead Editor</p>",
+};
+
+export type IContent10Content = typeof DEFAULT_CONTENT;
+
+export const Content10: IBlock = {
+  category_id: "content",
+  title: "Content 10",
+  key: "content-10",
+  version: "v1",
+  prompt_description:
+    "Centered layout with a category label above a large headline, author and details underneath, a wide featured image, and a brief supporting text at the bottom left.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description: "Defines the overall page structure and layout. No content needed.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Wraps the central content and ensures proper spacing on the page. No content needed.",
+      },
+    },
+    {
+      key: "header-section",
+      label: "Header Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Section grouping the blog post header information—tag, title, meta, and cover image. No content needed.",
+      },
+    },
+    {
+      key: "header-content",
+      label: "Header Content",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Groups elements within the header: tag, title, meta, before the cover image. For structural use.",
+      },
+    },
+    {
+      key: "tag-container",
+      label: "Tag Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Holds the category or tag label for the article. No content needed in this container.",
+      },
+    },
+    {
+      key: "tag",
+      label: "Tag",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "A short, descriptive blog post tag or category, such as 'Financial Planning'. Use 1–3 words. Neutral and factual.",
+        usecase: "category",
+        min_characters: 7,
+        max_characters: 28,
+      },
+    },
+    {
+      key: "title-section",
+      label: "Title Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Container for the main blog post headline. No content needed here.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main headline for the blog post. Clear, compelling, and professional. Use sentence case. Aim for strong impact; avoid jargon.",
+        usecase: "main_title",
+        min_characters: 28,
+        max_characters: 60,
+      },
+    },
+    {
+      key: "meta-info",
+      label: "Meta Info",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Holds author’s name, publication date, and estimated reading time. No content needed here.",
+      },
+    },
+    {
+      key: "author-container",
+      label: "Author Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Groups the author’s profile image and information. No direct content needed.",
+      },
+    },
+    {
+      key: "author-info-wrapper",
+      label: "Author Info Wrapper",
+      field_interface: "BoxWidget",
+    },
+
+    {
+      key: "author-image",
+      label: "Author Image",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description:
+          "Author avatar or profile image; describe the facial features, style, background, and any clothing/accessories",
+        orientation: "square",
+        size: "icon",
+        usecase: "avatar",
+      },
+    },
+    {
+      key: "author-name",
+      label: "Author Name",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Author's full name. Use proper capitalization, 2–3 words, simple formality.",
+        usecase: "author",
+        min_characters: 5,
+        max_characters: 28,
+      },
+    },
+    {
+      key: "author-description",
+      label: "Author Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Author's description. Use proper capitalization, 2–3 words, simple formality.",
+        usecase: "author",
+        min_characters: 5,
+        max_characters: 28,
+      },
+    },
+    {
+      key: "publish-date",
+      label: "Publish Date",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Date the article was published. Human-readable, e.g., 'April 25, 2025'. Month spelled out.",
+        usecase: "date",
+        min_characters: 10,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "reading-time",
+      label: "Reading Time",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Estimated reading time in minutes. Use short format: '10 Minutes' or '8 Min'.",
+        usecase: "reading_time",
+        min_characters: 6,
+        max_characters: 13,
+      },
+    },
+    {
+      key: "blog-cover",
+      label: "Block Cover",
+      field_interface: "MediaWidget",
+      hint: {
+        prompt_description:
+          "Large, visually engaging banner illustrating the article's theme. Use abstract, thematic, or relevant imagery. Should be clear and unobtrusive for a blog hero.",
+        orientation: "landscape",
+        size: "large",
+        usecase: "hero",
+      },
+    },
+    {
+      key: "content-wrapper",
+      label: "Content Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Main body container for the blog content. No direct content needed here.",
+      },
+    },
+    {
+      key: "content-section",
+      label: "Content Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Main body container for the blog content. No direct content needed here.",
+      },
+    },
+    {
+      key: "content",
+      label: "Content",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Full blog article body. Use formal, professional tone suitable for financial topics. Include headings, paragraphs, and clear explanations. Length should be 800–2000 words for a comprehensive post.",
+        usecase: "description",
+        min_characters: 800,
+        max_characters: 12000,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          width: "100%",
+          "padding-top": "10xl",
+          "padding-bottom": "10xl",
+          "padding-right": "8xl",
+          "padding-left": "8xl",
+          tablet: {
+            "padding-top": "5xl",
+            "padding-bottom": "5xl",
+            "padding-right": "5xl",
+            "padding-left": "5xl",
+          },
+          mobile: {
+            "padding-right": "2xl",
+            "padding-left": "2xl",
+            "padding-top": "7xl",
+            "padding-bottom": "7xl",
+          },
+        },
+        container: {
+          width: "100%",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "3xl",
+        },
+        "header-section": {
+          display: "flex",
+          width: "full",
+          "flex-direction": "column",
+          "row-gap": "3xl",
+          "column-gap": "3xl",
+        },
+        "header-content": {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "sm",
+        },
+        "tag-container": {
+          width: "fit-content",
+          "border-radius": "md",
+          border: "1px solid",
+          "border-color": "var(--color-border)",
+          "background-color": "#E9E9EB",
+          "padding-bottom": "2xs",
+          "padding-left": "base",
+          "padding-right": "base",
+          "padding-top": "2xs",
+        },
+        tag: {
+          "font-size": "xs",
+          "font-weight": "semibold",
+          color: "var(--color-text-1)",
+        },
+        "title-section": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+        },
+        title: {
+          "text-align": "center",
+          "font-size": "3xl",
+          "font-weight": "bold",
+          mobile: {
+            "font-size": "2xl",
+            "max-width": "none",
+          },
+          tablet: {
+            "font-size": "4xl",
+          },
+        },
+        "meta-info": {
+          display: "flex",
+          "flex-wrap": "wrap",
+          "align-items": "center",
+          "justify-content": "center",
+          "column-gap": "sm",
+          "row-gap": "xs",
+          "font-size": "sm",
+          "font-weight": "normal",
+          color: "var(--color-text-2)",
+        },
+        "author-container": {
+          display: "none",
+          "align-items": "center",
+          "column-gap": "2xs",
+          "row-gap": "2xs",
+        },
+        "author-image": {
+          "border-radius": "full",
+          height: "40px",
+          width: "40px",
+          "font-size": "40px",
+          "object-fit": "cover",
+        },
+        "author-name": {
+          "font-size": "base",
+        },
+        "publish-date": {},
+        "reading-time": {},
+        "blog-cover": {
+          height: "472px",
+          width: "100%",
+          "object-fit": "cover",
+          "border-radius": "xl",
+          tablet: {
+            height: "314px",
+          },
+          mobile: {
+            height: "164px",
+          },
+        },
+        "content-wrapper": {
+          display: "flex",
+          "column-gap": "3xl",
+          "align-items": "start",
+          tablet: {
+            "row-gap": "xl",
+          },
+          mobile: {},
+        },
+        "content-section": {
+          display: "flex",
+          width: "100%",
+          "flex-direction": "column",
+          "justify-content": "between",
+          "row-gap": "3xl",
+          "padding-bottom": "xl",
+          tablet: {
+            "padding-bottom": "xl",
+          },
+          mobile: {
+            "padding-bottom": "xl",
+          },
+        },
+        content: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+          "font-size": "base",
+          "line-height": 1.625,
+          width: "100%",
+          "padding-left": "none",
+          "padding-right": "none",
+          "justify-content": "start",
+          "align-items": "start",
+        },
+        "author-description": {
+          "font-size": "sm",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: "1",
+          },
+          selectedVariants: {
+            Heading_Level: "H4",
+          },
+        },
+        "author-name": {
+          selectedVariants: {
+            Heading_Level: "H6",
+          },
+          heading: {
+            level: "4",
+          },
+        },
+        "author-description": {
+          selectedVariants: {
+            Typography_Variants: "Small",
+          },
+        },
+        "reading-time": {
+          selectedVariants: {
+            Typography_Variants: "Small",
+          },
+        },
+        "publish-date": {
+          selectedVariants: {
+            Typography_Variants: "Small",
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,43 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import { Box, Container, Heading, Icon, Media, Section, Typography } from "@levo-so/studio";
+import type React from "react";
+
+import type { IContent10Content } from "./content-10.schema";
+
+const Content10: React.FC<ILevoBlockBaseProps<IContent10Content>> = ({ content }) => {
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header-section">
+          <Box elementKey="header-content">
+            <Box elementKey="tag-container">
+              <Typography elementKey="tag" />
+            </Box>
+            <Box elementKey="title-section">
+              <Heading elementKey="title" />
+              <Box elementKey="meta-info">
+                <Box elementKey="author-container">
+                  <Icon elementKey="author-image" />
+                  <Box elementKey="author-info-wrapper">
+                    <Heading elementKey="author-name" />
+                    <Typography elementKey="author-description" />
+                  </Box>
+                </Box>
+                <Typography elementKey="publish-date" />
+                <Typography elementKey="reading-time" />
+              </Box>
+            </Box>
+          </Box>
+          <Media elementKey="blog-cover" alt="Blog Cover" />
+        </Box>
+        <Box elementKey="content-wrapper">
+          <Box elementKey="content-section">
+            <Typography elementKey="content" className="LevoProseMirror" />
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Content10;