@blinkpage/composer-tools 1.0.0

package/editor-components/feature/feature1/feature1.module.scss

@@ -0,0 +1,115 @@
+@use "../../../composer-base-components/base/utitilities/viewports.module.scss"
+  as *;
+
+.container {
+  background-color: var(--composer-html-background);
+  .max-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--composer-gap-lg);
+
+    .section-container {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      gap: var(--composer-gap-xl);
+
+      .section-title {
+        display: inline-block;
+        width: fit-content;
+        border-bottom: 2px solid var(--composer-tertiary-color);
+        padding-bottom: var(--composer-gap-sm);
+        text-align: center;
+        margin: 0;
+        transition: all 0.3s ease-in-out;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:hover {
+          border-color: var(--composer-primary-color);
+        }
+
+        &.active {
+          border-color: var(--composer-primary-color);
+        }
+      }
+    }
+
+    .active-section-content {
+      width: 100%;
+      .section-content-wrapper {
+        display: flex;
+        flex: 1;
+        gap: var(--composer-gap-xl);
+        animation: fadeIn 0.5s ease;
+        color: var(--composer-font-color-primary);
+        text-align: justify;
+        width: 100%;
+        .text-1,
+        .text-2 {
+          width: 100%;
+          text-align: justify;
+          ;
+        }
+      }
+    }
+
+    .section-hidden {
+      display: none;
+      opacity: 0;
+    }
+
+    .button-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      .button {
+        border-radius: var(--composer-border-radius-sm);
+        .button-text {
+          content: "";
+        }
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@container (max-width: #{$composer-tablet-width}) {
+  .container {
+    .max-content {
+      gap: var(--composer-gap-lg);
+      .section-container {
+        .section-title {
+          width: fit-content;
+        }
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-phone-width}) {
+  .max-content {
+    gap: var(--composer-gap-md) !important;
+  }
+
+  .section-container {
+    gap: var(--composer-gap-md) !important;
+    flex-direction: column;
+  }
+
+  .section-content-wrapper {
+    flex-direction: column !important;
+    gap: var(--composer-gap-md) !important;
+  }
+}

package/editor-components/feature/feature1/feature1.tsx

@@ -0,0 +1,148 @@
+import * as React from "react";
+import styles from "./feature1.module.scss";
+import { BaseFeature } from "../../EditorComponent";
+import { Base } from "../../../composer-base-components/base/base";
+import { INPUTS } from "composer-tools/custom-hooks/input-templates";
+import ComposerLink from "custom-hooks/composer-base-components/Link/link";
+
+interface Section {
+    sectionTitle: React.JSX.Element;
+    text1: React.JSX.Element;
+    text2: React.JSX.Element;
+}
+
+class Feature1 extends BaseFeature {
+    constructor(props?: any) {
+        super(props, styles);
+        this.addProp({
+            type: "array",
+            key: "sections",
+            displayer: "Sections",
+            additionalParams: {
+                maxElementCount: 4,
+            },
+            value: [
+                {
+                    type: "object",
+                    key: "section",
+                    displayer: "Section",
+                    value: [
+                        {
+                            type: "string",
+                            key: "sectionTitle",
+                            displayer: "Section Title",
+                            value: "What We Do"
+                        },
+                        {
+                            type: "string",
+                            key: "text1",
+                            displayer: "Text 1",
+                            value: "Graphic design, integre mea ut, eu eos vide errem noluisse. Putent laoreet et ius. Vel utroque dissentias ut, nam ad soleat alterum maluisset, cu est copiosae intellegat inciderint. Nam ei eirmod consequuntur, quod nostrum consectetuer usu ut. Vim veniam singulis senserit an, sumo consul mentitum duo ea. Copiosae antiopam ius ea, meis explicari reformidans vix cu. Ut possit patrioque prodesset est, vivendum concludaturque conclusion emque eam."
+                        },
+                        {
+                            type: "string",
+                            key: "text2",
+                            displayer: "Text 2",
+                            value: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Design, integre mea ut, eu eos vide errem noluisse. Putent laoreet et ius. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
+                        }
+                    ]
+                },
+                {
+                    type: "object",
+                    key: "section",
+                    displayer: "Section",
+                    value: [
+                        {
+                            type: "string",
+                            key: "sectionTitle",
+                            displayer: "Section Title",
+                            value: "Our Services"
+                        },
+                        {
+                            type: "string",
+                            key: "text1",
+                            displayer: "Text 1",
+                            value: "Our comprehensive services include branding, web design, print materials, and digital marketing. We pride ourselves on delivering exceptional designs that communicate your brand's message effectively. Our team of experts work closely with you to understand your vision and bring it to life."
+                        },
+                        {
+                            type: "string",
+                            key: "text2",
+                            displayer: "Text 2",
+                            value: "From concept to completion, we manage every aspect of your design project. Our process is collaborative and transparent, ensuring you are involved and informed at every stage. We believe in creating designs that not only look great but also achieve your business objectives and resonate with your target audience."
+                        }
+                    ]
+                }
+            ]
+        });
+
+        this.addProp(INPUTS.BUTTON("button", "Button", "VIEW SERVICES", "", null, null, "Primary"));
+        this.setComponentState("activeSection", 0);
+    }
+
+    static getName(): string {
+        return "Feature 1";
+    }
+
+
+    render() {
+        const sections = this.castToObject<Section[]>("sections");
+        const activeSection = this.getComponentState("activeSection");
+        const buttonType: INPUTS.CastedButton = this.castToObject<INPUTS.CastedButton>("button");
+
+        if (!sections || sections.length === 0) {
+            return null;
+        }
+
+
+        return (
+            <Base.Container className={this.decorateCSS("container")}>
+                <Base.MaxContent className={this.decorateCSS("max-content")}>
+                    <div className={this.decorateCSS("section-container")}>
+                        {sections.map((section: Section, index: number) => (
+                            this.castToString(section.sectionTitle) ? (
+                                <Base.SectionTitle
+                                    key={`section-title-${index}`}
+                                    className={`${this.decorateCSS("section-title")} ${activeSection === index ? this.decorateCSS("active") : ""}`}
+                                    onClick={() => this.setComponentState("activeSection", index)}
+                                >
+                                    {section.sectionTitle}
+                                </Base.SectionTitle>
+                            ) : null
+                        ))}
+                    </div>
+
+                    <div className={this.decorateCSS("active-section-content")}>
+                        {sections.map((section: Section, index: number) => (
+                            index === activeSection && (
+                                <div key={`section-content-${index}`} className={this.decorateCSS("section-content-wrapper")}>
+                                    {this.castToString(section.text1) && (
+                                        <Base.P className={this.decorateCSS("text-1")}>
+                                            {section.text1}
+                                        </Base.P>
+                                    )}
+                                    {this.castToString(section.text2) && (
+                                        <Base.P className={this.decorateCSS("text-2")}>
+                                            {section.text2}
+                                        </Base.P>
+                                    )}
+                                </div>
+                            )
+                        ))}
+                    </div>
+
+                    {this.castToString(buttonType.text) && (
+                        <div className={this.decorateCSS("button-container")}>
+                            <ComposerLink path={buttonType.url}>
+                                <Base.Button buttonType={buttonType.type} className={this.decorateCSS("button")}>
+                                    <Base.P className={this.decorateCSS("button-text")}>{buttonType.text}</Base.P>
+                                </Base.Button>
+                            </ComposerLink>
+                        </div>
+                    )}
+                </Base.MaxContent>
+            </Base.Container>
+        );
+    }
+}
+
+export default Feature1;

package/editor-components/feature/feature10/feature10.module.scss

@@ -0,0 +1,191 @@
+@use "../../../composer-base-components/base/utitilities/viewports.module.scss" as *;
+
+.container {
+    background-color:  color-mix(in srgb, var(--composer-html-background), var(--composer-font-color-primary) 5%);
+    .max-content {
+        .wrapper {
+            .section-wrapper{
+                .subtitle, .section-title, .section-description {
+                    content: "";
+                }
+            }
+            .arrow-container{
+                width: 100%;
+                display: flex;
+                justify-content: end;
+                gap: var(--composer-gap-md);
+                .arrow-right, .arrow-left{
+                    border: none;
+                    padding: var(--composer-gap-xs);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    background-color: transparent;
+                    .icon{
+                        background-color: transparent;
+                        font-size: 3rem;
+                        color: var(--composer-font-color-primary);
+                        padding: var(--composer-gap-xs);
+                    }
+                }
+            }
+                .cards-container {
+                    .carousel{
+                        >div{
+                            >div{
+                                display: flex;
+                                gap: var(--composer-gap-xl);
+                                padding: var(--composer-gap-lg) 0px;
+                                align-items: stretch;
+                                margin-left: unset;
+                                >div{
+                                    height: auto;
+                                    >div{
+                                        height: 100%;
+                                        >div{
+                                            height: 100%;     
+                                            width: 100% !important;                               
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                        &.no-padding{
+                            >div{
+                                >div{
+                                    padding: var(--composer-gap-sm) 0px var(--composer-gap-lg) 0px;
+                                }
+                            }
+                        }
+    
+                    .card-container {
+                        border-radius: var(--composer-border-radius-sm);
+                        background-color: var(--composer-html-background);
+                        transform: scale(1);
+                        transition: var(--composer-transition-duration-slow);
+                        height: 100%;
+                        &.fit-content{
+                            height: fit-content;
+                        }
+                        .image{
+                            height: 300px;
+                            width: 100%;
+                            border-radius: var(--composer-border-radius-sm) var(--composer-border-radius-sm) 0 0;
+                            object-fit: cover;
+                            &.border-radius{
+                                border-radius: var(--composer-border-radius-sm);
+                            }
+                        }
+                        .bottom{
+                            padding: var(--composer-gap-lg);
+                            display: flex;
+                            flex-direction: column;
+                            align-items: baseline;
+                            justify-content: baseline;
+                            gap: var(--composer-gap-md);
+                            .title, .description {
+                                text-align: left;
+                                color: var(--composer-font-color-primary);
+                            }
+                        }
+    
+ 
+                        &:hover{
+                            transform: scale(1.05)
+                        }
+                    }
+                 }
+                }
+            .button-wrapper{
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                .button {
+                    .button-text {
+                        content: "";
+                    }
+                    .icon{
+                        height: 15px;
+                        width: 15px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@container (max-width: #{$composer-tablet-width}) {
+    .container {
+        .max-content {
+            .wrapper {
+                .arrow-container{
+                    .arrow-right, .arrow-left{
+                        .icon{
+                            font-size: 1.5rem;
+                        }
+                    }
+                }
+                    .cards-container {
+                        .carousel{
+                            >div{
+                                >div{
+                                    gap: var(--composer-gap-md);
+    
+                                }
+                            }
+
+        
+                        .card-container{        
+                            .image {
+                                height: 200px;
+                            }
+                            .bottom{
+                                padding: var(--composer-gap-md);
+                            }
+                        }
+                    
+                     }
+                }
+            }
+        }
+    }
+
+}
+
+@container (max-width: #{$composer-phone-width}) {
+    .container {
+        .max-content {
+            .wrapper {
+                gap: var(--composer-gap-xs);
+                .arrow-container{
+                    gap: var(--composer-gap-sm);
+                }
+                .cards-container {
+                    .carousel{
+                        >div{
+                            >div{
+                                gap: var(--composer-gap-xs);
+                                padding: var(--composer-gap-md) 0px;
+
+                            }
+                        }
+                        &.no-padding{
+                            >div{
+                                >div{
+                                    padding: 0px 0px var(--composer-gap-md) 0px;
+                                }
+                            }
+                        }
+                        .card-container{
+                            &:hover{
+                                transform: scale(1)
+                            }
+                        }
+                    }
+                }
+    
+            }
+        }
+    }
+}