@blinkpage/composer-tools 1.0.0

package/editor-components/footer/footer6/footer6.tsx

@@ -0,0 +1,372 @@
+import * as React from "react";
+import ComposerLink from "../../../../custom-hooks/composer-base-components/Link/link";
+import { BaseFooter } from "../../EditorComponent";
+import styles from "./footer6.module.scss";
+import { Base } from "../../../composer-base-components/base/base";
+
+type FooterValues = {
+  footerTitle: React.JSX.Element;
+  footerText: FooterTextValues[];
+};
+
+type FooterTextValues = {
+  footerText: React.JSX.Element;
+  path: string;
+};
+
+class Footer6Page extends BaseFooter {
+  constructor(props?: any) {
+    super(props, styles);
+
+    this.addProp({
+      type: "select",
+      key: "position",
+      displayer: "Position",
+      value: "Default",
+      additionalParams: {
+        selectItems: ["Default", "Absolute"],
+      },
+    });
+
+    this.addProp({
+      type: "string",
+      key: "subtitle",
+      displayer: "Subtitle",
+      value: "Let's work together",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "title",
+      displayer: "Title",
+      value: "hello@gradastudio.net",
+    });
+
+    this.addProp({
+      type: "array",
+      key: "footer",
+      displayer: "Footer",
+      value: [
+        {
+          type: "object",
+          key: "footer-title",
+          displayer: "Footer Column",
+          value: [
+            {
+              type: "string",
+              key: "footerTitle",
+              displayer: "Footer Title",
+              value: "Quick Links",
+            },
+            {
+              type: "array",
+              key: "footerText",
+              displayer: "Footer Text",
+              value: [
+                {
+                  type: "object",
+                  key: "footer-text",
+                  displayer: "Text Values",
+                  value: [
+                    {
+                      type: "string",
+                      key: "footerText",
+                      displayer: "Text",
+                      value: "About",
+                    },
+                    {
+                      type: "page",
+                      displayer: "Navigate To",
+                      key: "path",
+                      value: "",
+                    },
+                  ],
+                },
+                {
+                  type: "object",
+                  key: "footer-text",
+                  displayer: "Text Values",
+                  value: [
+                    {
+                      type: "string",
+                      key: "footerText",
+                      displayer: "Text",
+                      value: "News",
+                    },
+                    {
+                      type: "page",
+                      displayer: "Navigate To",
+                      key: "path",
+                      value: "",
+                    },
+                  ],
+                },
+                {
+                  type: "object",
+                  key: "footer-text",
+                  displayer: "Text Values",
+                  value: [
+                    {
+                      type: "string",
+                      key: "footerText",
+                      displayer: "Text",
+                      value: "Contact",
+                    },
+                    {
+                      type: "page",
+                      displayer: "Navigate To",
+                      key: "path",
+                      value: "",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "footer-title",
+          displayer: "Footer Column",
+          value: [
+            {
+              type: "string",
+              key: "footerTitle",
+              displayer: "Footer Title",
+              value: "Our Address",
+            },
+            {
+              type: "array",
+              key: "footerText",
+              displayer: "Footer Text",
+              value: [
+                {
+                  type: "object",
+                  key: "footer-text",
+                  displayer: "Text Values",
+                  value: [
+                    {
+                      type: "string",
+                      key: "footerText",
+                      displayer: "Text",
+                      value: "Care+ Family Parham Bridges Canton Jackson, MS 39211",
+                    },
+                    {
+                      type: "page",
+                      displayer: "Navigate To",
+                      key: "path",
+                      value: "",
+                    },
+                  ],
+                },
+                {
+                  type: "object",
+                  key: "footer-text",
+                  displayer: "Text Values",
+                  value: [
+                    {
+                      type: "string",
+                      key: "footerText",
+                      displayer: "Text",
+                      value: "+1 601 978 2212",
+                    },
+                    {
+                      type: "page",
+                      displayer: "Navigate To",
+                      key: "path",
+                      value: "",
+                    },
+                  ],
+                },
+                {
+                  type: "object",
+                  key: "footer-text",
+                  displayer: "Text Values",
+                  value: [
+                    {
+                      type: "string",
+                      key: "footerText",
+                      displayer: "Text",
+                      value: "hello@ozark.com",
+                    },
+                    {
+                      type: "page",
+                      displayer: "Navigate To",
+                      key: "path",
+                      value: "",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "footer-title",
+          displayer: "Footer Column",
+          value: [
+            {
+              type: "string",
+              key: "footerTitle",
+              displayer: "Footer Title",
+              value: "Get In Touch",
+            },
+            {
+              type: "array",
+              key: "footerText",
+              displayer: "Footer Text",
+              value: [
+                {
+                  type: "object",
+                  key: "footer-text",
+                  displayer: "Text Values",
+                  value: [
+                    {
+                      type: "string",
+                      key: "footerText",
+                      displayer: "Text",
+                      value: "Facebook",
+                    },
+                    {
+                      type: "page",
+                      displayer: "Navigate To",
+                      key: "path",
+                      value: "",
+                    },
+                  ],
+                },
+                {
+                  type: "object",
+                  key: "footer-text",
+                  displayer: "Text Values",
+                  value: [
+                    {
+                      type: "string",
+                      key: "footerText",
+                      displayer: "Text",
+                      value: "Twitter",
+                    },
+                    {
+                      type: "page",
+                      displayer: "Navigate To",
+                      key: "path",
+                      value: "",
+                    },
+                  ],
+                },
+                {
+                  type: "object",
+                  key: "footer-text",
+                  displayer: "Text Values",
+                  value: [
+                    {
+                      type: "string",
+                      key: "footerText",
+                      displayer: "Text",
+                      value: "Instagram",
+                    },
+                    {
+                      type: "page",
+                      displayer: "Navigate To",
+                      key: "path",
+                      value: "",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    this.addProp({
+      type: "string",
+      key: "footerDescription",
+      displayer: "Footer Text",
+      value: "2024 © Made with by Blinkpage.",
+    });
+
+    this.addProp({
+      type: "multiSelect",
+      key: "hoverAnimation",
+      displayer: "Hover Animation Style",
+      value: ["animate2"],
+      additionalParams: {
+        selectItems: ["animate1", "animate2", "animate3"]
+      }
+    });
+  }
+
+  static getName(): string {
+    return "Footer 6";
+  }
+
+  render() {
+    const subtitle = this.getPropValue("subtitle");
+    const title = this.getPropValue("title");
+
+    const subtitleExist = this.castToString(subtitle);
+    const titleExist = this.castToString(title);
+
+    const footer = this.castToObject<any[]>("footer");
+
+    const footerDescription = this.getPropValue("footerDescription");
+    const footerDescriptionExist = this.castToString(footerDescription);
+
+    const position = this.getPropValue("position");
+
+    return (
+      <Base.Container className={`${this.decorateCSS("container")} ${position === "Absolute" ? this.decorateCSS("absolute") : ""}`}>
+        <Base.MaxContent className={this.decorateCSS("max-content")}>
+          <Base.VerticalContent className={this.decorateCSS("footer-page")}>
+            {(subtitleExist || titleExist) && (
+              <Base.VerticalContent className={this.decorateCSS("header")}>
+                {subtitleExist && <Base.SectionSubTitle className={this.decorateCSS("subtitle")}>{subtitle}</Base.SectionSubTitle>}
+                {titleExist && <Base.SectionTitle className={this.decorateCSS("title")}>{title}</Base.SectionTitle>}
+              </Base.VerticalContent>
+            )}
+
+            <div className={this.decorateCSS("middle-container")}>
+              {footer.length > 0 &&
+                footer.map((item: FooterValues, indexFooter: number) => {
+                  const footerTitleExist = this.castToString(item.footerTitle);
+                  const footerExist = footerTitleExist || item.footerText.length > 0;
+                  return (
+                    footerExist && (
+                      <div key={indexFooter} className={this.decorateCSS("list-group")}>
+                        {footerTitleExist && <Base.H3 className={this.decorateCSS("list-title")}>{item.footerTitle}</Base.H3>}
+                        {item.footerText.length > 0 &&
+                          item.footerText.map((item: FooterTextValues, indexFooterText: number) => {
+                            const footerTextExist = this.castToString(item.footerText);
+                            return (
+                              footerTextExist && (
+                                <ComposerLink key={indexFooterText} path={item.path}>
+                                  <Base.P 
+                                    className={this.decorateCSS("text")}
+                                    data-animation={item.path ? this.getPropValue("hoverAnimation").join(" ") : ""}
+                                  >
+                                    {item.footerText}
+                                  </Base.P>
+                                </ComposerLink>
+                              )
+                            );
+                          })}
+                      </div>
+                    )
+                  );
+                })}
+            </div>
+
+            {footerDescriptionExist && (
+              <Base.P className={this.decorateCSS("bottom-text")}>{footerDescription}</Base.P>
+            )}
+          </Base.VerticalContent>
+        </Base.MaxContent>
+      </Base.Container>
+    );
+  }
+}
+
+export default Footer6Page;

package/editor-components/footer/footer7/footer7.module.scss

@@ -0,0 +1,197 @@
+@use "../../../../composer-tools//composer-base-components//base//utitilities/viewports.module.scss" as *;
+
+.container {
+  padding: var(--composer-gap-md) var(--composer-gap-xl) !important;
+
+  &.absolute {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: transparent;
+  }
+  .max-content {
+    .footer-page {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--composer-gap-md);
+
+      .left {
+        max-width: 20%;
+
+        .image {
+           width: 200px;
+           height: var(--composer-gap-lg);
+           object-fit: cover;
+        }
+      }
+
+      .right {
+        display: flex;
+        flex-direction: column;
+        max-width: 70%;
+        gap: var(--composer-gap-xs);
+
+        .upper {
+          display: flex;
+          justify-content: flex-end;
+          flex-wrap: wrap;
+          gap: var(--composer-gap-md);
+
+          .link-element {
+            .link-text {
+              position: relative;
+              color: var(--composer-font-color-primary);
+              transition: all 0.3s ease;
+            }
+
+            &.has-path[data-animation~="animate1"] {
+              .link-text {
+                padding-bottom: 2px;
+                
+                &::after {
+                  content: '';
+                  position: absolute;
+                  bottom: 0;
+                  left: 0;
+                  width: 0;
+                  height: 2px;
+                  background-color: var(--composer-primary-color);
+                  transition: width 0.3s ease;
+                }
+                
+                &:hover {
+                  color: var(--composer-primary-color);
+                  
+                  &::after {
+                    width: 100%;
+                  }
+                }
+              }
+            }
+
+            &.has-path[data-animation~="animate2"] {
+              .link-text {
+                padding: 0 var(--composer-gap-xs);
+                border-radius: var(--composer-border-radius-sm);
+                
+                &:hover {
+                  color: var(--composer-primary-color);
+                  background-color: rgba(var(--composer-primary-color-rgb), 0.1);
+                }
+              }
+            }
+
+            &.has-path[data-animation~="animate3"] {
+              .link-text {
+                display: inline-block;
+                
+                &:hover {
+                  color: var(--composer-primary-color);
+                  transform: translateY(calc(var(--composer-gap-xs) * -1)) rotate(2deg);
+                }
+              }
+            }
+          }
+        }
+
+        .bottom {
+          display: flex;
+          justify-content: flex-end;
+
+          .text {
+            text-align: end;
+            color: var(--composer-tertiary-color);
+
+            &.left {
+              text-align: left;
+            }
+          }
+        }
+
+        &.full-width {
+          max-width: 100%;
+          width: 100%;
+
+          .upper, .bottom {
+            justify-content: flex-start;
+          }
+        }
+      }
+
+      &:not(:has(.left)) .right .upper {
+        justify-content: flex-start;
+      }
+
+      &:not(:has(.left)) .right .bottom {
+        justify-content: flex-start;
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-tablet-width}) {
+  .container {
+    padding: var(--composer-gap-md) var(--composer-gap-lg) !important;
+    .max-content {
+      .footer-page {
+        .left {
+          max-width: 30%;
+        }
+
+        .right {
+          max-width: 70%;
+        }
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-phone-width}) {
+  .container {
+    padding: var(--composer-gap-md) !important;
+    .max-content {
+      .footer-page {
+        flex-direction: column;
+        align-items: center;
+        gap: var(--composer-gap-xs);
+
+        .left {
+          max-width: 100%;
+
+          .image {
+            width: 150px;
+            height: var(--composer-gap-xl);
+          }
+        }
+
+        .right {
+          display: flex;
+          flex-direction: column;
+          max-width: 100%;
+          gap: var(--composer-gap-xs);
+          width: 100%;
+          align-items: center;
+
+          .upper {
+            justify-content: center;
+            .link-element{
+              .link-text{
+                text-align: center;
+              }
+            }
+          }
+
+          .bottom {
+            justify-content: center;
+
+            .text {
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+  }
+}