@blinkpage/composer-tools 1.0.0

package/editor-components/intro-section/intro-section8/intro-section8.module.scss

@@ -0,0 +1,151 @@
+@use "../../../composer-base-components/base/utitilities/viewports.module.scss" as *;
+
+.container {
+    position: relative;
+    overflow: visible;
+
+    .background {
+        position: absolute;
+        inset: 0;
+        background-color: var(--composer-primary-color);
+        clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
+        z-index: 0;
+    }
+
+    .max-content {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: var(--composer-gap-lg);
+
+        .text-content {
+            .subtitle {
+                margin-left: auto;
+                margin-right: auto;
+                transform: none;
+
+                &::before {
+                    display: none;
+                }
+            }
+
+            .title,
+            .description {
+                text-align: center;
+            }
+
+            .button-container {
+                display: flex;
+                justify-content: center;
+                gap: var(--composer-gap-sm);
+                flex-wrap: wrap;
+                width: 100%;
+
+                .button {
+                    .button-text {
+                        content: "";
+                    }
+                }
+            }
+
+            &.has-background {
+                .subtitle {
+                    padding: 0;
+                    background: none;
+                    color: var(--composer-font-color-secondary);
+                }
+
+                .title,
+                .description {
+                    color: var(--composer-font-color-secondary);
+                }
+            }
+        }
+
+        .media-wrapper {
+            position: relative;
+            width: 100%;
+            max-width: 960px;
+            aspect-ratio: 16 / 9;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: var(--composer-border-radius-sm);
+            overflow: hidden;
+            margin: 0 auto;
+
+            .video,
+            .image {
+                width: 100%;
+                height: 100%;
+                display: block;
+                object-fit: cover;
+            }
+
+            .thumbnail-container {
+                position: relative;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+                z-index: 1;
+
+                .thumbnail-image {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+
+                .overlay {
+                    position: absolute;
+                    inset: 0;
+                    background-color: var(--composer-overlay-color);
+                    z-index: 2;
+                    pointer-events: none;
+                }
+            }
+
+            .play-icon-wrapper {
+                position: absolute;
+                z-index: 3;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: var(--composer-font-color-secondary);
+                background: var(--composer-primary-color);
+                padding: var(--composer-gap-md);
+                border-radius: 50%;
+
+                .play-icon {
+                    display: flex;
+                    font-size: 2rem;
+
+                    &.is-image {
+                        width: var(--composer-gap-md);
+                        height: var(--composer-gap-md);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@container (max-width: #{$composer-phone-width}) {
+    .container {
+        .max-content {
+            .media-wrapper {
+                aspect-ratio: 16 / 12;
+
+                .play-icon-wrapper {
+                    padding: calc(var(--composer-gap-xs) * 3);
+
+                    .play-icon {
+                        font-size: 1.5rem;
+                    }
+                }
+            }
+        }
+    }
+}

package/editor-components/intro-section/intro-section8/intro-section8.tsx

@@ -0,0 +1,182 @@
+import * as React from "react";
+import { BaseIntroSection, TypeUsableComponentProps, TypeMediaInputValue } from "../../EditorComponent";
+import styles from "./intro-section8.module.scss";
+import { Base, TypeButton } from "../../../composer-base-components/base/base";
+import ComposerLink from "../../../../custom-hooks/composer-base-components/Link/link";
+import { INPUTS } from "composer-tools/custom-hooks/input-templates";
+
+type ButtonTypeObj = {
+    text: React.JSX.Element;
+    url: string;
+    type: TypeButton;
+}
+
+interface ContentType {
+    media: TypeMediaInputValue;
+    thumbnail: TypeMediaInputValue;
+    overlay: boolean;
+}
+
+class IntroSection8 extends BaseIntroSection {
+    constructor(props?: TypeUsableComponentProps) {
+        super(props, styles);
+
+        this.addProp({
+            type: "boolean",
+            key: "background",
+            displayer: "Background",
+            value: true,
+        });
+
+        this.addProp({
+            type: "string",
+            key: "subtitle",
+            displayer: "Subtitle",
+            value: "Find the Best Suitable Solution",
+        });
+
+        this.addProp({
+            type: "string",
+            key: "title",
+            displayer: "Title",
+            value: "Inspiration to Design and Create",
+        });
+
+        this.addProp({
+            type: "string",
+            key: "description",
+            displayer: "Description",
+            value: "Completely iterate covalent strategic theme areas via accurate e-markets.",
+        });
+
+        this.addProp({
+            type: "array",
+            key: "buttons",
+            displayer: "Buttons",
+            value: [INPUTS.BUTTON("button", "Button", "Get Started", "", null, null, "White")],
+        });
+
+        this.addProp({
+            type: "object",
+            key: "content",
+            displayer: "Content",
+            value: [
+                {
+                    type: "media",
+                    key: "media",
+                    displayer: "Media",
+                    value: {
+                        type: "video",
+                        url: "https://storage.googleapis.com/download/storage/v1/b/hq-blinkpage-staging-bbc49/o/6925587a3596a1002b2ec2a1?alt=media",
+                    },
+                    additionalParams: { availableTypes: ["image", "video"] },
+                },
+                {
+                    type: "media",
+                    key: "thumbnail",
+                    displayer: "Thumbnail",
+                    value: {
+                        type: "image",
+                        url: "https://storage.googleapis.com/download/storage/v1/b/hq-blinkpage-staging-bbc49/o/6936735a496aa1002ca98cfa?alt=media",
+                    },
+                    additionalParams: { availableTypes: ["image"] },
+                },
+                {
+                    type: "boolean",
+                    key: "overlay",
+                    displayer: "Overlay",
+                    value: true,
+                }
+            ]
+        });
+
+        this.addProp({
+            type: "media",
+            key: "playIcon",
+            displayer: "Play Icon",
+            value: { type: "icon", name: "FaPlay" },
+            additionalParams: { availableTypes: ["icon", "image"] },
+        });
+    }
+
+    static getName(): string {
+        return "Intro Section 8";
+    }
+
+    handlePlayVideo = () => {
+        this.setComponentState("isPlaying", true);
+    };
+
+    render() {
+        const subtitleExist = this.castToString(this.getPropValue("subtitle"));
+        const titleExist = this.castToString(this.getPropValue("title"));
+        const descriptionExist = this.castToString(this.getPropValue("description"));
+        const buttons = this.castToObject<ButtonTypeObj[]>("buttons") || [];
+        const visibleButtons = buttons.filter(btn => this.castToString(btn.text));
+        const hasBackground = !!this.getPropValue("background");
+        const content = this.castToObject<ContentType>("content");
+        const hasOverlay = !!content?.overlay;
+        const media = content?.media;
+        const thumbnail = content?.thumbnail;
+        const playIcon = this.getPropValue("playIcon");
+        const isVideo = media?.type === "video";
+        const isPlaying = !!this.getComponentState("isPlaying");
+        const hasContent = subtitleExist || titleExist || descriptionExist || visibleButtons.length > 0;
+        const hasMediaUrl = media && "url" in media && media.url;
+        const hasThumbnailUrl = thumbnail && "url" in thumbnail && thumbnail.url;
+
+        return (
+            <Base.Container className={this.decorateCSS("container")}>
+                {hasBackground && <div className={this.decorateCSS("background")} />}
+                <Base.MaxContent className={this.decorateCSS("max-content")}>
+                    {hasContent && (
+                        <Base.VerticalContent className={`${this.decorateCSS("text-content")} ${hasBackground && this.decorateCSS("has-background")}`}>
+                            {subtitleExist && (<Base.SectionSubTitle className={this.decorateCSS("subtitle")}>{this.getPropValue("subtitle")}</Base.SectionSubTitle>)}
+                            {titleExist && (<Base.SectionTitle className={this.decorateCSS("title")}>{this.getPropValue("title")}</Base.SectionTitle>)}
+                            {descriptionExist && (<Base.SectionDescription className={this.decorateCSS("description")}>{this.getPropValue("description")}</Base.SectionDescription>)}
+                            {visibleButtons.length > 0 && (
+                                <div className={this.decorateCSS("button-container")}>
+                                    {visibleButtons.map((item: ButtonTypeObj, index: number) => {
+                                        return (
+                                            <ComposerLink key={`button-${index}`} path={item.url}>
+                                                <Base.Button buttonType={item.type} className={this.decorateCSS("button")}>
+                                                    <Base.P className={this.decorateCSS("button-text")}>{item.text}</Base.P>
+                                                </Base.Button>
+                                            </ComposerLink>
+                                        );
+                                    })}
+                                </div>
+                            )}
+                        </Base.VerticalContent>
+                    )}
+                    {hasMediaUrl && (
+                        <div className={this.decorateCSS("media-wrapper")}>
+                            {isVideo ? (
+                                !isPlaying ? (
+                                    <div className={this.decorateCSS("thumbnail-container")} onClick={this.handlePlayVideo}>
+                                        <Base.Media value={hasThumbnailUrl ? thumbnail : media} className={this.decorateCSS("thumbnail-image")} />
+                                        {hasOverlay && <div className={this.decorateCSS("overlay")} />}
+                                        {(playIcon?.name || (playIcon && "url" in playIcon && playIcon.url)) && (
+                                            <div className={this.decorateCSS("play-icon-wrapper")}>
+                                                <Base.Media value={playIcon} className={`${this.decorateCSS("play-icon")} ${playIcon?.type === "image" && this.decorateCSS("is-image")}`} />
+                                            </div>
+                                        )}
+                                    </div>
+                                ) : (
+                                    <Base.Media value={{ ...media, settings: { autoplay: true, controls: true } }} className={this.decorateCSS("video")} />
+                                )
+                            ) : (
+                                <div className={this.decorateCSS("thumbnail-container")}>
+                                    <Base.Media value={media} className={this.decorateCSS("image")} />
+                                    {hasOverlay && <div className={this.decorateCSS("overlay")} />}
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </Base.MaxContent>
+            </Base.Container>
+        );
+    }
+}
+
+export default IntroSection8;

package/editor-components/intro-section/intro-section9/intro-section9.module.scss

@@ -0,0 +1,66 @@
+@use "../../../composer-base-components/base/utitilities/viewports.module.scss"
+  as *;
+
+.container {
+  .max-content {
+    .card {
+      padding: 80px var(--composer-gap-xl);
+      border-radius: var(--composer-border-radius-md);
+      background: color-mix(
+        in srgb,
+        var(--composer-html-background),
+        var(--composer-font-color-primary) 5%
+      );
+      .content {
+        align-items: center;
+
+        .title, .description {
+          text-align: center;
+        }
+
+        .subtitle {
+          text-align: center;
+
+          transform: translateX(0);
+          &::before {
+            display: none;
+          }
+        }
+
+        .action-buttons {
+          padding-top: var(--composer-gap-xl);
+          display: flex;
+          flex-direction: row;
+          gap: var(--composer-gap-md);
+
+          .button {
+            content: "";
+            .button-text{
+              content: "";
+            }
+            .button-icon{
+              width: 16px;
+              height: 16px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-phone-width}) {
+  .container {
+    .max-content {
+      .card {
+        .content {
+          .action-buttons {
+            flex-direction: column;
+            align-items: center;
+            gap: var(--composer-gap-sm);
+          }
+        }
+      }
+    }
+  }
+}

package/editor-components/intro-section/intro-section9/intro-section9.tsx

@@ -0,0 +1,132 @@
+import * as React from "react";
+import ComposerLink from "../../../../custom-hooks/composer-base-components/Link/link";
+import { BaseIntroSection } from "../../EditorComponent";
+import styles from "./intro-section9.module.scss";
+import { Base } from "../../../composer-base-components/base/base";
+import { INPUTS } from "composer-tools/custom-hooks/input-templates";
+
+class IntroSection9 extends BaseIntroSection {
+  constructor(props?: any) {
+    super(props, styles);
+
+    this.addProp({
+      type: "string",
+      key: "subtitle",
+      displayer: "Subtitle",
+      value: "",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "title",
+      displayer: "Title",
+      value:
+        '<p dir="ltr"><b><strong class="editor-text-bold" style="white-space: pre-wrap;">Mindblown</strong></b><span style="white-space: pre-wrap;"> unique</span></p><p dir="ltr"><span style="white-space: pre-wrap;"> digital ideas.</span></p>',
+    });
+
+    this.addProp({
+      type: "string",
+      key: "description",
+      displayer: "Description",
+      value:
+        "Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.",
+    });
+
+    this.addProp({
+      type: "array",
+      key: "buttons",
+      displayer: "Buttons",
+      value: [
+        INPUTS.BUTTON("button", "Button", "Get Started", "", "", null, "Black"),
+        INPUTS.BUTTON(
+          "button",
+          "Button",
+          "Watch Video",
+          "",
+          "FaPlay",
+          null,
+          "White"
+        ),
+      ],
+    });
+  }
+
+  static getName(): string {
+    return "Intro Section 9";
+  }
+  render() {
+    const subtitle = this.getPropValue("subtitle") || "";
+    const title = this.getPropValue("title") || "";
+    const description = this.getPropValue("description") || "";
+    const buttons = this.castToObject<INPUTS.CastedButton[]>("buttons");
+
+    const hasSubtitle = this.castToString(subtitle);
+    const hasTitle = this.castToString(title);
+    const hasDescription = this.castToString(description);
+    const hasAnyButton = buttons.some((b: any) => this.castToString(b?.text) || b?.icon);
+
+    return (
+      <Base.Container className={this.decorateCSS("container")}>
+        <Base.MaxContent className={this.decorateCSS("max-content")}>
+          <div className={this.decorateCSS("card")}>
+            <Base.VerticalContent className={this.decorateCSS("content")}>
+              {hasSubtitle && (
+                <Base.SectionSubTitle className={this.decorateCSS("subtitle")}>
+                  {subtitle}
+                </Base.SectionSubTitle>
+              )}
+              {hasTitle && (
+                <Base.SectionTitle className={this.decorateCSS("title")}>
+                  {title}
+                </Base.SectionTitle>
+              )}
+              {hasDescription && (
+                <Base.SectionDescription
+                  className={this.decorateCSS("description")}
+                >
+                  {description}
+                </Base.SectionDescription>
+              )}
+
+              {hasAnyButton && (
+                <div className={this.decorateCSS("action-buttons")}>
+                  {buttons.map((item: INPUTS.CastedButton, index: number) => {
+                    const btnTextExist = this.castToString(item.text);
+                    const btnIconExist = this.castToString(item.icon?.name);
+                    const buttonIcon = item.icon;
+                    const buttonExist = btnTextExist || btnIconExist;
+                    const buttonUrl = item.url || "#";
+                    return buttonExist && (
+                      <ComposerLink key={`is9-btn-${index}`} path={buttonUrl}>
+                        <Base.Button
+                          buttonType={item.type}
+                          className={this.decorateCSS("button")}
+                        >
+                          {btnIconExist && (
+                            <Base.Media
+                              value={buttonIcon}
+                              className={this.decorateCSS("button-icon")}
+                            />
+                          )}
+                          {btnTextExist && (
+                            <Base.P
+                              className={this.decorateCSS("button-text")}
+                            >
+                              {item.text}
+                            </Base.P>
+                          )}
+                        </Base.Button>
+                      </ComposerLink>
+                    );
+                  })}
+                </div>
+              )}
+            </Base.VerticalContent>
+          </div>
+        </Base.MaxContent>
+      </Base.Container>
+    );
+  }
+}
+
+export default IntroSection9;

package/editor-components/legal/privacy-policy.module.scss

@@ -0,0 +1,19 @@
+.privacyPolicy {
+  height: 100%;
+  overflow-y: auto;
+
+  .maxContent {
+    .container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: var(--composer-gap-md);
+        color: var(--composer-font-color-primary);
+        .text {
+        color: var(--composer-font-color-primary);
+        font-size: calc(var(--composer-font-size-md));
+        }
+    }
+  }
+}
+
+

package/editor-components/legal/privacy-policy.tsx

@@ -0,0 +1,126 @@
+import * as React from "react";
+import { Base } from "composer-tools/composer-base-components/base/base";
+import { BaseLegal } from "../EditorComponent";
+import styles from "./privacy-policy.module.scss";
+
+class PrivacyPolicyPage extends BaseLegal {
+  constructor(props?: any) {
+    super(props, styles);
+
+    this.addProp({
+      type: "string",
+      key: "title",
+      displayer: "Title",
+      value: "Privacy Policy",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "effectiveDate",
+      displayer: "Effective Date",
+      value: "Effective Date: 2030-01-01",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "lastUpdated",
+      displayer: "Last Updated",
+      value: "Last Updated: 2025-01-01",
+    });
+    
+    this.addProp({
+      type: "string",
+      key: "introduction",
+      displayer: "Introduction",
+      value: "This Privacy Policy describes how your personal information is collected, used, and shared when you visit or interact with this website Blinkpage.",
+    });
+   
+    this.addProp({
+      type: "string",
+      key: "text",
+      displayer: "Text",
+      value: `
+        1. Information We Collect<br/>
+        a. Information You Provide<br/><br/>
+        Contact Forms: When you submit information through a contact or inquiry form, we may collect your name, email address, and any other data you provide voluntarily.<br/><br/>
+
+        Newsletter Subscriptions: If you subscribe to our newsletter, we will collect your email address to send periodic updates or promotional content.<br/><br/>
+
+        Other Fields: Custom fields may collect data such as your phone number or organization, depending on the form setup.<br/><br/>
+
+        b. Automatically Collected Information<br/><br/>
+        Cookies & Analytics:<br/>
+        This Site uses cookies and third-party tools (such as Google Analytics) to collect anonymous data about your interactions (e.g., pages visited, time on site, browser type). These tools help us understand how the site is used and improve performance.<br/><br/>
+
+        2. How We Use Your Information<br/><br/>
+        Your data may be used to:<br/><br/>
+
+        Communicate with you<br/><br/>
+
+        Respond to inquiries<br/><br/>
+
+        Send newsletters and updates<br/><br/>
+
+        Analyze traffic and improve website functionality<br/><br/>
+
+        3. Sharing Your Information<br/><br/>
+        We do not sell your personal information. Your data may be shared with:<br/><br/>
+
+        Trusted service providers (e.g., analytics or newsletter platforms)<br/><br/>
+
+        Authorities when legally required<br/><br/>
+
+        4. Your Rights<br/><br/>
+        Depending on your jurisdiction, you may have rights to:<br/><br/>
+
+        Access or update your information<br/><br/>
+
+        Request deletion of your personal data<br/><br/>
+
+        Withdraw consent for communications<br/><br/>
+
+        To exercise your rights, please contact us using the information provided on the site.<br/><br/>
+
+        5. Data Retention<br/><br/>
+        We retain your personal information only for as long as necessary to fulfill the purposes outlined in this policy or as required by law.<br/><br/>
+
+        6. External Links<br/><br/>
+        This website may contain links to third-party websites. We are not responsible for their content or privacy practices.<br/><br/>
+
+        7. Security<br/><br/>
+        We implement reasonable safeguards to protect your information, but no system is 100% secure.<br/><br/>
+
+        8. Policy Changes<br/><br/>
+        We may update this privacy policy as needed. Revisions will be posted on this page with an updated date.<br/><br/>
+
+        9. Contact<br/><br/>
+        If you have any questions about this policy, please contact us via the form or email provided on this website.`,
+    });
+  }
+
+  static getName(): string {
+    return "Privacy Policy";
+  }
+  render() {
+    const titleExist = this.castToString(this.getPropValue("title"));
+    const effectiveDateExist = this.castToString(this.getPropValue("effectiveDate"));
+    const lastUpdatedExist = this.castToString(this.getPropValue("lastUpdated"));
+    const introductionExist = this.castToString(this.getPropValue("introduction"));
+    const textExist = this.castToString(this.getPropValue("text"));
+    return (
+      <Base.Container className={styles.privacyPolicy}>
+        <Base.MaxContent className={styles.maxContent}>
+            <Base.VerticalContent className={styles.container}>
+            {titleExist &&<span className={styles.text}>{this.getPropValue("title")}</span>}
+            {effectiveDateExist &&<span className={styles.text}>{this.getPropValue("effectiveDate")}</span>}
+            {lastUpdatedExist &&<span className={styles.text}>{this.getPropValue("lastUpdated")}</span>}
+            {introductionExist &&<span className={styles.text}>{this.getPropValue("introduction")}</span>}
+            {textExist &&<div className={styles.text}>{this.getPropValue("text")}</div>}
+        </Base.VerticalContent>
+        </Base.MaxContent>
+      </Base.Container>
+    );
+  }
+}
+
+export default PrivacyPolicyPage;