@@ -35,9 +37,11 @@ function GaleryContent({ items }: JSX.IntrinsicElements["div"] & Props) { ))}
{content}
diff --git a/components/ui/Content/TitleMedium/index.tsx b/components/ui/Content/TitleMedium/index.tsx index db206d9..c0a7b40 100644 --- a/components/ui/Content/TitleMedium/index.tsx +++ b/components/ui/Content/TitleMedium/index.tsx @@ -133,7 +133,9 @@ function TitleMedium( ) { return ( {
- if (!highlight) return text;
+ const getHighlightedText = (text: string, highlight: string) => {
+ if (!highlight) return text;
- const regex = new RegExp(`(${highlight})`, "giu");
+ const regex = new RegExp(`(${highlight})`, "giu");
+ const parts = text.split(regex);
- const parts = text.split(regex);
+ return parts.map((part, index) => {
+ if (part.toLowerCase() === highlight.toLowerCase()) {
+ return (
+
+ {part}
+
+ );
+ }
+ return part;
+ });
+ };
- return parts.map((part, index) => {
- if (part.toLowerCase() === highlight.toLowerCase()) {
- return (
-
- {part}
-
- );
- }
- return part;
- });
- };
-
- return (
- <>
-
+
diff --git a/components/ui/Form/InputRadio/index.tsx b/components/ui/Form/InputRadio/index.tsx
index ac50b1b..1e9a6b5 100644
--- a/components/ui/Form/InputRadio/index.tsx
+++ b/components/ui/Form/InputRadio/index.tsx
@@ -11,68 +11,59 @@ function InputRadioComponent({
text,
name,
inputRadio,
- onValidate,
}: InputRadioComponentProps) {
- const handleChange = () => {
- if (onValidate) {
- onValidate(true);
- }
- };
-
return (
- <>
-
-
+
+
+ );
}
export default Menu;
diff --git a/sections/Final/Navbar/script.tsx b/sections/Final/Navbar/script.tsx
index 185cdd7..e3a5e3c 100644
--- a/sections/Final/Navbar/script.tsx
+++ b/sections/Final/Navbar/script.tsx
@@ -1,53 +1,47 @@
import { useScript as useScript } from "@deco/deco/hooks";
-export interface Props { }
-
-const setup = ({ }: Props) => {
-
- const toggleIcon = document.getElementById('toggle-icon')
- const mobileMenu = document.getElementById('mobile-menu')
- const hamburguerIcon = document.getElementById('hamburger-icon')
- const closeIcon = document.getElementById('close-icon')
- const body = document.querySelector('body')
- // const heightElement1 = element1.getBoundingClientRect().height;
- const nav = document.getElementById('nav')
- const heightNav = nav?.getBoundingClientRect().height
-
- toggleIcon?.addEventListener('click', () => {
-
- if (mobileMenu) {
-
- const currentTop = globalThis.getComputedStyle(mobileMenu).top;
-
- if (currentTop === '0px' && mobileMenu) {
- mobileMenu.style.top = `${heightNav}px`;
- } else {
- mobileMenu.style.top = `0px`;
- }
-
- mobileMenu?.classList.toggle('-translate-y-full')
- mobileMenu?.classList.toggle('translate-y-0')
-
- hamburguerIcon?.classList.toggle('opacity-0')
- closeIcon?.classList.toggle('opacity-0')
- body?.classList.toggle('overflow-hidden')
-
- }
-
- });
-
-}
+export interface Props {}
+
+const setup = ({}: Props) => {
+ const toggleIcon = document.getElementById("toggle-icon");
+ const mobileMenu = document.getElementById("mobile-menu");
+ const hamburguerIcon = document.getElementById("hamburger-icon");
+ const closeIcon = document.getElementById("close-icon");
+ const body = document.querySelector("body");
+ // const heightElement1 = element1.getBoundingClientRect().height;
+ const nav = document.getElementById("nav");
+ const heightNav = nav?.getBoundingClientRect().height;
+
+ toggleIcon?.addEventListener("click", () => {
+ if (mobileMenu) {
+ const currentTop = globalThis.getComputedStyle(mobileMenu).top;
+
+ if (currentTop === "0px" && mobileMenu) {
+ mobileMenu.style.top = `${heightNav}px`;
+ } else {
+ mobileMenu.style.top = `0px`;
+ }
+
+ mobileMenu?.classList.toggle("-translate-y-full");
+ mobileMenu?.classList.toggle("translate-y-0");
+
+ hamburguerIcon?.classList.toggle("opacity-0");
+ closeIcon?.classList.toggle("opacity-0");
+ body?.classList.toggle("overflow-hidden");
+ }
+ });
+};
function HeaderOnlyTextToWork(
- { }: Props,
+ {}: Props,
) {
return (
);
}
-export default HeaderOnlyTextToWork;
\ No newline at end of file
+export default HeaderOnlyTextToWork;
diff --git a/sections/Footer.tsx b/sections/Footer.tsx
index b962da7..7f4ad5e 100644
--- a/sections/Footer.tsx
+++ b/sections/Footer.tsx
@@ -62,7 +62,6 @@ export default function Footer({
+
+
+ );
}
export default FixedSectionForm;
\ No newline at end of file
diff --git a/components/ui/Form/Input/index.tsx b/components/ui/Form/Input/index.tsx
index cbb1c4c..47459cc 100644
--- a/components/ui/Form/Input/index.tsx
+++ b/components/ui/Form/Input/index.tsx
@@ -1,26 +1,22 @@
interface InputComponentProps {
+ name?: string;
placeholder?: string;
- onValidate?: (isValid: boolean) => void;
}
-function InputComponent({ placeholder, onValidate }: InputComponentProps) {
- const handleChange = (e: Event) => {
- const input = e.target as HTMLInputElement;
- if (onValidate) {
- onValidate(input.value.trim().length > 0);
- }
- };
+function InputComponent(
+ { name, placeholder }: InputComponentProps,
+) {
return (
<>
+
+
+
+
+
+
+
+
+ + {getHighlightedText(description, highlight)} +
+
+
-
-
- );
+
+ {ImageWidget && (
+
+
+ )}
+
-
);
}
-export default InputRadioComponent;
+export default InputRadioComponent;
\ No newline at end of file
diff --git a/components/ui/Form/TitleForm/index.tsx b/components/ui/Form/TitleForm/index.tsx
index bea85e7..9f2b47e 100644
--- a/components/ui/Form/TitleForm/index.tsx
+++ b/components/ui/Form/TitleForm/index.tsx
@@ -1,139 +1,135 @@
import type { JSX } from "preact";
function setClass(value: string) {
- switch (value) {
- case "primary":
- return "text-primary";
- case "Secondary":
- return "text-secondary";
- case "White":
- return "text-white";
- case "Accent":
- return "text-accent";
- case "Sacramento-State":
- return "text-sacramentoState";
- case "Sacramento-State-10":
- return "text-sacramentoState-10";
- case "Mint-Cream":
- return "text-mintCream";
- default:
- return "text-primary";
- }
+ switch (value) {
+ case "primary":
+ return "text-primary";
+ case "Secondary":
+ return "text-secondary";
+ case "White":
+ return "text-white";
+ case "Accent":
+ return "text-accent";
+ case "Sacramento-State":
+ return "text-sacramentoState";
+ case "Sacramento-State-10":
+ return "text-sacramentoState-10";
+ case "Mint-Cream":
+ return "text-mintCream";
+ default:
+ return "text-primary";
+ }
}
function setAlignment(value: string) {
- switch (value) {
- case "Left":
- return "text-left";
- case "Center":
- return "text-center";
- case "Right":
- return "text-right";
- default:
- return "";
- }
+ switch (value) {
+ case "Left":
+ return "text-left";
+ case "Center":
+ return "text-center";
+ case "Right":
+ return "text-right";
+ default:
+ return "";
+ }
}
function setAlignmentContent(value: string) {
- switch (value) {
- case "Start":
- return "justify-start";
- case "Center":
- return "justify-center";
- case "End":
- return "justify-end";
- default:
- return "justify-start";
- }
+ switch (value) {
+ case "Start":
+ return "justify-start";
+ case "Center":
+ return "justify-center";
+ case "End":
+ return "justify-end";
+ default:
+ return "justify-start";
+ }
}
function setFontSize(value: string): string {
- switch (value) {
- case "22px":
- return "text-[22px]";
- case "28px":
- return "text-[28px]";
- case "32px":
- return "text-[32px]";
- default:
- return "text-[28px]";
- }
+ switch (value) {
+ case "22px":
+ return "text-[22px]";
+ case "28px":
+ return "text-[28px]";
+ case "32px":
+ return "text-[32px]";
+ default:
+ return "text-[28px]";
+ }
}
function setContainerWidth(value: string): string {
- switch (value) {
- case "Largura Limitada (290px)":
- return "max-w-[290px] w-full";
- case "Largura Limitada (327px)":
- return "max-w-[327px] w-full";
- case "Largura Limitada (343px)":
- return "max-w-[343px] w-full";
- case "Largura Completa":
- return "w-full";
- default:
- return "max-w-[327px] w-full";
- }
+ switch (value) {
+ case "Largura Limitada (290px)":
+ return "max-w-[290px] w-full";
+ case "Largura Limitada (327px)":
+ return "max-w-[327px] w-full";
+ case "Largura Limitada (343px)":
+ return "max-w-[343px] w-full";
+ case "Largura Completa":
+ return "w-full";
+ default:
+ return "max-w-[327px] w-full";
+ }
}
function setPaddingTop(value: string): string {
- switch (value) {
- case "Espacamento (40px)":
- return "pt-[40px]";
- case "Espacamento (91px)":
- return "pt-[91px]";
- case "Espacamento (95px)":
- return "pt-[95px] ";
- default:
- return "pt-[40px]";
- }
+ switch (value) {
+ case "Espacamento (40px)":
+ return "pt-[40px]";
+ case "Espacamento (91px)":
+ return "pt-[91px]";
+ case "Espacamento (95px)":
+ return "pt-[95px] ";
+ default:
+ return "pt-[40px]";
+ }
}
function TitleForm(
- {
- description,
- content,
- colorTheme,
- alignment,
- fontSize,
- containerWidth,
- contentAlignment,
- paddingTop,
- }:
- & JSX.IntrinsicElements["div"]
- & Props,
+ {
+ description,
+ content,
+ colorTheme,
+ alignment,
+ fontSize,
+ containerWidth,
+ contentAlignment,
+ paddingTop,
+ }:
+ & JSX.IntrinsicElements["div"]
+ & Props,
) {
- return (
- <>
-
-
-
+ {text}
- {inputRadio.map((item, index) => ( -
-
+
+ ))}
+
+
+
+
+ {text}
+ {inputRadio.map((item, index) => ( +
+
+
- ))}
-
+
+
+ );
}
export default TitleForm;
diff --git a/components/ui/Form/index.tsx b/components/ui/Form/index.tsx
index b1e33b9..62ada32 100644
--- a/components/ui/Form/index.tsx
+++ b/components/ui/Form/index.tsx
@@ -16,16 +16,18 @@ function LoadComponent(
);
}
-function FormComponent({ sections }: JSX.IntrinsicElements["div"] & Props) {
+function FormComponent(
+ { sections, step }: JSX.IntrinsicElements["div"] & Props,
+) {
return (
<>
+
+
+
+
+
-
- );
+ {content}
+
+ + {description} +
+-
-
-
-
- - {description} -
-- {content} -
-
-
{sections?.map((item, index) => (
- //
-
+
);
}
-export default FormComponent;
+export default FormComponent;
\ No newline at end of file
diff --git a/components/ui/Form/script.tsx b/components/ui/Form/script.tsx
index e4460f6..31cad75 100644
--- a/components/ui/Form/script.tsx
+++ b/components/ui/Form/script.tsx
@@ -1,102 +1,137 @@
import { useScript } from "@deco/deco/hooks";
+export interface Props {
+ step?: number;
+}
-export interface Props {}
-
-const setup = ({}: Props) => {
+const setup = (_: Props) => {
+ const stepElement = Array.from(document.querySelectorAll("[data-step]"));
let currentStep = 0;
- const getFormPages = () => {
- return Array.from(
- document.querySelectorAll('[data-form="formulario"]'),
- ) as HTMLElement[];
- };
+ const totalSteps = () => stepElement.length;
- const totalSteps = () => getFormPages().length;
-
- const showCurrentPage = () => {
- const formPages = getFormPages();
- formPages.forEach((page, index) => {
- if (index === currentStep) {
- page.classList.add("block");
- page.classList.remove("hidden");
- } else {
- page.classList.add("hidden");
- page.classList.remove("block");
- }
+ const showCurrentPage = (): void => {
+ stepElement.forEach((page, index) => {
+ page.classList.toggle("block", index === currentStep);
+ page.classList.toggle("hidden", index !== currentStep);
});
-
- console.log(`Etapa atual: ${currentStep}`);
- console.log(`Total de páginas: ${totalSteps()}`);
+ validateInput();
};
const updateProgressBar = () => {
- const progressBar = document.getElementById("progress-bar") as HTMLElement;
- if (progressBar) {
- const progress = (currentStep / (totalSteps() - 1)) * 100;
- console.log("barra de progresso: " + progress);
+ const progressBars = document.querySelectorAll('[data-bar="progress"]');
+ const total = totalSteps();
- progressBar.style.width = `${progress}%`;
- }
+ const initialProgress = currentStep === 0
+ ? 15
+ : (currentStep / (total - 1)) * 100;
+
+ progressBars.forEach((progressBar) => {
+ const progressBarElement = progressBar as HTMLElement;
+
+ if (!progressBarElement.style.width && currentStep === 0) {
+ progressBarElement.style.width = "15%";
+ }
+
+ progressBarElement.style.background = "#3BEDB2";
+ progressBarElement.style.width = `${initialProgress}%`;
+ });
};
const handleNext = () => {
- const formPages = getFormPages();
-
- if (currentStep < totalSteps() - 1) {
+ const total = totalSteps();
+ if (currentStep < total - 1) {
currentStep++;
- console.log(`Indo para a próxima etapa: ${currentStep}`);
showCurrentPage();
updateProgressBar();
-
- window.scrollTo({
- top: formPages[currentStep]?.offsetTop || 0,
+
+ globalThis.scrollTo({
+ top: stepElement[currentStep]?.offsetTop || 0,
behavior: "smooth",
});
} else {
- alert("Você completou todos os formulários!");
+ window.location.href = '/me-liga/sucesso';
}
};
+
const handleBack = () => {
- const formPages = getFormPages();
-
if (currentStep > 0) {
currentStep--;
- console.log(`Voltando para a etapa anterior: ${currentStep}`);
showCurrentPage();
updateProgressBar();
- window.scrollTo({
- top: formPages[currentStep]?.offsetTop || 0,
+ globalThis.scrollTo({
+ top: stepElement[currentStep]?.offsetTop || 0,
behavior: "smooth",
});
} else {
- alert("Você está na primeira etapa!");
+ window.history.back();
}
};
- document.addEventListener("click", (event) => {
- if ((event.target as HTMLElement)?.id === "botao") {
- handleNext();
- }
- });
+ const validateInput = () => {
+ const inputs = document.querySelectorAll("input");
+ const nextButtons = document.querySelectorAll('[data-next="next"]');
+
+ inputs.forEach((input, index) => {
+ const nextButton = nextButtons[index] as HTMLButtonElement | undefined;
+ if (!nextButton) return;
+
+ const handleInput = () => {
+ let isValid = false;
+
+ if (input.type === "radio") {
+ const radioGroup = document.querySelectorAll(
+ `input[data-radio="${input.getAttribute("data-radio")}"]`,
+ );
+ isValid = Array.from(radioGroup).some((radio) =>
+ (radio as HTMLInputElement).checked
+ );
+ } else {
+ isValid = (input as HTMLInputElement).value.trim().length > 0;
+ }
+
+ nextButton.disabled = !isValid;
+ nextButton.style.backgroundColor = isValid ? "#003330" : "#003330";
+ nextButton.style.opacity = isValid ? "1" : "0.1";
+ nextButton.innerHTML = isValid
+ ? ``
+ : ``;
+ };
+
+ input.addEventListener("input", handleInput);
+ handleInput();
+ });
+ };
- document.addEventListener("click", (event) => {
- if ((event.target as HTMLElement)?.id === "back") {
- handleBack();
- }
- });
+ const bindEvents = () => {
+ const nextButtons = document.querySelectorAll('[data-next="next"]');
+ const backButtons = document.querySelectorAll('[data-back="back"]');
+
+ nextButtons.forEach((button) => {
+ button.addEventListener("click", handleNext);
+ });
+
+ backButtons.forEach((button) => {
+ button.addEventListener("click", handleBack);
+ });
+ };
+ bindEvents();
showCurrentPage();
updateProgressBar();
};
-function FormSteps({}: Props) {
+function FormSteps({ step }: Props) {
return (
);
diff --git a/components/ui/Galery/GaleryContent/index.tsx b/components/ui/Galery/GaleryContent/index.tsx
index ed12d0f..bcb1352 100644
--- a/components/ui/Galery/GaleryContent/index.tsx
+++ b/components/ui/Galery/GaleryContent/index.tsx
@@ -1,17 +1,19 @@
import type { JSX } from "preact";
+import Script, { type Props } from "./script.tsx";
import Image from "apps/website/components/Image.tsx";
function GaleryContent({ items }: JSX.IntrinsicElements["div"] & Props) {
return (
<>
-
-
- {
- /*
-
*/
- }
- {
- /* // Renderizando o componente
- // {LoadComponent(item.section)} */
- }
- - {sections[currentStep.value].text} 1 * - Solicitar plano -
-- {sections[currentStep.value].description} - Primeiramente, qual o seu nome completo? -
-
+
))}
+
{
- /**
- * @title Texto do Dropdown
- * @description Insira o texto do dropdown
- */
- dropdownText: string;
+ /**
+ * @title Texto do Dropdown
+ * @description Insira o texto do dropdown
+ */
+ dropdownText: string;
- /**
- * @title Ícone de Seta
- * @description Insira o ícone de seta
- */
- arrowIcon: ImageWidget;
+ /**
+ * @title Ícone de Seta
+ * @description Insira o ícone de seta
+ */
+ arrowIcon: ImageWidget;
- /**
- * @title Categorias Filtradas
- * @description Insira as categorias de integração filtradas
- */
- button?: FilteredCategories[];
+ /**
+ * @title Categorias Filtradas
+ * @description Insira as categorias de integração filtradas
+ */
+ button?: FilteredCategories[];
- /**
- * @title Logos
- * @description Lista de logos associados às categorias
- */
- logos: Logos[];
+ /**
+ * @title Logos
+ * @description Lista de logos associados às categorias
+ */
+ logos: Logos[];
}
export default function Section({
- dropdownText = "",
- arrowIcon = "",
- button,
- logos,
+ dropdownText = "",
+ arrowIcon = "",
+ button,
+ logos,
}: Props) {
- return (
-
-
+
);
-}
\ No newline at end of file
+}
diff --git a/sections/Final/Navbar/index.tsx b/sections/Final/Navbar/index.tsx
index 2933ef2..363b3d7 100644
--- a/sections/Final/Navbar/index.tsx
+++ b/sections/Final/Navbar/index.tsx
@@ -6,190 +6,190 @@ import ButtonComponent from "../Button/ButtonComponent.tsx";
import Script, { type Props } from "./script.tsx";
function Menu(
- { logo, icon, close_icon, menu, button, subMenu, linkIcons }:
- & JSX.IntrinsicElements["div"]
- & Props,
+ { logo, icon, close_icon, menu, button, subMenu, linkIcons }:
+ & JSX.IntrinsicElements["div"]
+ & Props,
) {
- return (
- <>
-
+
+
+
);
}
-export default GaleryContent;
+export default GaleryContent;
\ No newline at end of file
diff --git a/components/ui/Galery/GaleryContent/script.tsx b/components/ui/Galery/GaleryContent/script.tsx
new file mode 100644
index 0000000..c6ac3e3
--- /dev/null
+++ b/components/ui/Galery/GaleryContent/script.tsx
@@ -0,0 +1,63 @@
+import { useScript } from "@deco/deco/hooks";
+
+declare global {
+ var Swiper: any;
+}
+
+export interface Props {}
+
+const setup = () => {
+
+ const getClassSwiper = document.getElementById("swiper-container");
+
+ new Swiper(getClassSwiper, {
+ slidesPerView: 1.8,
+ spaceBetween: 20,
+ breakpoints: {
+ 768: {
+ slidesPerView: 3,
+ spaceBetween: 30,
+ },
+ 1024: {
+ slidesPerView: 4,
+ spaceBetween: 40,
+ },
+ },
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
+ },
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true,
+ },
+ });
+};
+
+if (typeof window !== "undefined" && typeof document !== "undefined") {
+ const swiperScript = document.createElement("script");
+ swiperScript.src = "https://unpkg.com/swiper/swiper-bundle.min.js";
+ swiperScript.onload = () => {
+ const swiperStyles = document.createElement("link");
+ swiperStyles.rel = "stylesheet";
+ swiperStyles.href = "https://unpkg.com/swiper/swiper-bundle.min.css";
+ document.head.appendChild(swiperStyles);
+
+ setup();
+ };
+
+ document.body.appendChild(swiperScript);
+}
+
+function Galery({}: Props) {
+ return (
+
+ );
+}
+
+export default Galery;
\ No newline at end of file
diff --git a/components/ui/Galery/GaleryImages/index.tsx b/components/ui/Galery/GaleryImages/index.tsx
index 32f0eab..1a52240 100644
--- a/components/ui/Galery/GaleryImages/index.tsx
+++ b/components/ui/Galery/GaleryImages/index.tsx
@@ -19,7 +19,11 @@ function GaleryImages({ items }: JSX.IntrinsicElements["div"] & Props) {
>
);
diff --git a/sections/Destaques/ModalContent.tsx b/sections/Destaques/ModalContent.tsx
index e2e92c4..a768928 100644
--- a/sections/Destaques/ModalContent.tsx
+++ b/sections/Destaques/ModalContent.tsx
@@ -110,17 +110,28 @@ export default function Section({
return (
{items.map((item, index) => (
-
+
-
@@ -36,4 +40,4 @@ function GaleryImages({ items }: JSX.IntrinsicElements["div"] & Props) { ); } -export default GaleryImages; \ No newline at end of file +export default GaleryImages; diff --git a/islands/Counter.tsx b/islands/Counter.tsx index f972146..5134776 100644 --- a/islands/Counter.tsx +++ b/islands/Counter.tsx @@ -5,13 +5,19 @@ export default function Counter() { return (
-
);
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index 9edbf6d..498b7bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.2",
- "swiper": "^11.1.14"
+ "swiper": "^11.2.1"
}
},
"node_modules/@remix-run/router": {
@@ -105,9 +105,9 @@
}
},
"node_modules/swiper": {
- "version": "11.1.14",
- "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz",
- "integrity": "sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==",
+ "version": "11.2.1",
+ "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.1.tgz",
+ "integrity": "sha512-62G69+iQRIfUqTmJkWpZDcX891Ra8O9050ckt1/JI2H+0483g+gq0m7gINecDqMtDh2zt5dK+uzBRxGhGOOvQA==",
"funding": [
{
"type": "patreon",
diff --git a/package.json b/package.json
index b75ce00..1b7fb72 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,6 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.2",
- "swiper": "^11.1.14"
+ "swiper": "^11.2.1"
}
}
diff --git a/sections/Destaques/Duvidas.tsx b/sections/Destaques/Duvidas.tsx
index 20e4b03..fef5f88 100644
--- a/sections/Destaques/Duvidas.tsx
+++ b/sections/Destaques/Duvidas.tsx
@@ -53,14 +53,14 @@ export interface Button {
* @description Selecione o tipo de botão que deseja
*/
buttonTheme?:
- | "Primary dark"
- | "Primary white"
- | "Secondary dark"
- | "Secondary white"
- | "Link dark"
- | "Link white"
- | "Faq"
- | "Nenhuma estilização"
+ | "Primary dark"
+ | "Primary white"
+ | "Secondary dark"
+ | "Secondary white"
+ | "Link dark"
+ | "Link white"
+ | "Faq"
+ | "Nenhuma estilização";
}
export interface Props {
@@ -105,14 +105,20 @@ export default function Section({
- {button?.map((btn, index) => (
-
- {/* */
+ }
-
- ))}
+ {button?.map((btn, index) => (
+
+
+ ))}
-
{items.map((item, index) => (
))}
diff --git a/sections/Destaques/ModalWithSubTopic.tsx b/sections/Destaques/ModalWithSubTopic.tsx
index c8f55f5..3f91d75 100644
--- a/sections/Destaques/ModalWithSubTopic.tsx
+++ b/sections/Destaques/ModalWithSubTopic.tsx
@@ -5,10 +5,10 @@ interface TableRow {
checks?: boolean[];
}
-interface Table{
+interface Table {
columnName?: string[];
header?: string[];
- tableRows?:TableRow[];
+ tableRows?: TableRow[];
}
interface Tab {
@@ -23,8 +23,7 @@ export interface Item {
descritiveInformative?: string[];
topics?: string[];
tabs?: Tab[];
- table?:Table[];
-
+ table?: Table[];
}
interface Props {
@@ -41,48 +40,69 @@ export default function Section({
- {/* {item.icon && (
+ {
+ /* {item.icon && (
-
+
))}
Me Liga
-{item.header}
++ {item.header} +
{items.map((item, index) => (
- );
- }
\ No newline at end of file
+ );
+}
diff --git a/sections/Destaques/Suporte.tsx b/sections/Destaques/Suporte.tsx
index 05cbe3d..3e7e65c 100644
--- a/sections/Destaques/Suporte.tsx
+++ b/sections/Destaques/Suporte.tsx
@@ -164,7 +164,8 @@ export default function Section({
return (
-
+ ))}
{item.header}
- {item.descritiveTitle && item.descritiveTitle.map((question, qIndex) => ( -- {question} -
- ))} - {item.descritiveInformative && item.descritiveInformative.map((info, iIndex) => ( -- {info} -
- ))} - {item.topics && item.topics.map((topic, tIndex) => ( -- • {topic} -
- ))} -
-
- )}
+
- {item.tabs.map((tab, tabIndex) => (
- {tab.name}
- ))}
-
- {item.tabs.map((tab, tabIndex) => (
-
- {tab.steps && tab.steps.length > 0 && (
- 
- )}
-
- ))}
-
- {tab.steps.map((step, sIndex) => (
-
- )}
- {tab.image && (
- - {sIndex + 1}. {step} -
- ))} -+ {item.header} +
+ {item.descritiveTitle && + item.descritiveTitle.map((question, qIndex) => ( ++ {question} +
+ ))} + {item.descritiveInformative && + item.descritiveInformative.map((info, iIndex) => ( ++ {info} +
+ ))} + {item.topics && + item.topics.map((topic, tIndex) => ( ++ • {topic} +
+ ))} +
+
+ )}
+
+ {item.tabs.map((tab, tabIndex) => (
+ {tab.name}
+ ))}
- ))}
+ {item.tabs.map((tab, tabIndex) => (
+
+ {tab.steps && tab.steps.length > 0 && (
+
+ )}
+
+ ))}
+
+ {tab.steps.map((step, sIndex) => (
+
+ )}
+ {tab.image && (
+ + {sIndex + 1}. {step} +
+ ))} +
-
- );
+ return (
+
+
+ );
}
-export default ParentComponent;
\ No newline at end of file
+export default ParentComponent;
diff --git a/sections/Final/Content/Product.tsx b/sections/Final/Content/Product.tsx
index 79c8cc9..743f30a 100644
--- a/sections/Final/Content/Product.tsx
+++ b/sections/Final/Content/Product.tsx
@@ -11,14 +11,14 @@ export interface Button {
* @description Escreva o texto do botão
*/
text: string;
-
+
/**
* @title Tamanho do botão
* @description Selecione o tamanho do botão
*/
- tamanho?:
- | "Máximo (100%)"
- | "Mínimo (Tamanho do conteúdo)";
+ tamanho?:
+ | "Máximo (100%)"
+ | "Mínimo (Tamanho do conteúdo)";
/**
* @title Link
@@ -35,14 +35,14 @@ export interface Button {
* @description Selecione o tipo de botão que deseja
*/
buttonTheme?:
- | "Primary dark"
- | "Primary white"
- | "Secondary dark"
- | "Secondary white"
- | "Link dark"
- | "Link white"
- | "Faq"
- | "Nenhuma estilização"
+ | "Primary dark"
+ | "Primary white"
+ | "Secondary dark"
+ | "Secondary white"
+ | "Link dark"
+ | "Link white"
+ | "Faq"
+ | "Nenhuma estilização";
}
export interface Props {
diff --git a/sections/Final/Content/Spacer.tsx b/sections/Final/Content/Spacer.tsx
index 2df6256..5ea7e40 100644
--- a/sections/Final/Content/Spacer.tsx
+++ b/sections/Final/Content/Spacer.tsx
@@ -3,28 +3,29 @@ import Chip from "../../../components/ui/Content/Chip/index.tsx";
import { ImageWidget } from "apps/admin/widgets.ts";
export interface Props {
- /**
- * @title Alinhamento
- * @description Selecione o alinhamento
- */
- contentAlign:
- | "Vertical"
- | "Horizontal"
+ /**
+ * @title Alinhamento
+ * @description Selecione o alinhamento
+ */
+ contentAlign:
+ | "Vertical"
+ | "Horizontal";
}
export default function Section({
- contentAlign = "Vertical",
- }: Props) {
+ contentAlign = "Vertical",
+}: Props) {
return (
-
);
}
diff --git a/sections/Final/Counter/Counter.tsx b/sections/Final/Counter/Counter.tsx
index 6763d69..99cb531 100644
--- a/sections/Final/Counter/Counter.tsx
+++ b/sections/Final/Counter/Counter.tsx
@@ -2,15 +2,15 @@ import type { JSX } from "preact";
import CounterComponent from "../../../islands/Counter.tsx";
import Script, { type Props } from "./script.tsx";
-function Counter({ }: JSX.IntrinsicElements["div"] & Props) {
+function Counter({}: JSX.IntrinsicElements["div"] & Props) {
return (
<>
-
- { contentAlign == "Vertical" && (
-
- )}
- { contentAlign == "Horizontal" && (
-
- )}
-
+
+ {contentAlign == "Vertical" && (
+
+
+ )}
+ {contentAlign == "Horizontal" && (
+
+ )}
+
+
);
}
-export default Counter;
\ No newline at end of file
+export default Counter;
diff --git a/sections/Final/Counter/script.tsx b/sections/Final/Counter/script.tsx
index 185cdd7..e3a5e3c 100644
--- a/sections/Final/Counter/script.tsx
+++ b/sections/Final/Counter/script.tsx
@@ -1,53 +1,47 @@
import { useScript as useScript } from "@deco/deco/hooks";
-export interface Props { }
-
-const setup = ({ }: Props) => {
-
- const toggleIcon = document.getElementById('toggle-icon')
- const mobileMenu = document.getElementById('mobile-menu')
- const hamburguerIcon = document.getElementById('hamburger-icon')
- const closeIcon = document.getElementById('close-icon')
- const body = document.querySelector('body')
- // const heightElement1 = element1.getBoundingClientRect().height;
- const nav = document.getElementById('nav')
- const heightNav = nav?.getBoundingClientRect().height
-
- toggleIcon?.addEventListener('click', () => {
-
- if (mobileMenu) {
-
- const currentTop = globalThis.getComputedStyle(mobileMenu).top;
-
- if (currentTop === '0px' && mobileMenu) {
- mobileMenu.style.top = `${heightNav}px`;
- } else {
- mobileMenu.style.top = `0px`;
- }
-
- mobileMenu?.classList.toggle('-translate-y-full')
- mobileMenu?.classList.toggle('translate-y-0')
-
- hamburguerIcon?.classList.toggle('opacity-0')
- closeIcon?.classList.toggle('opacity-0')
- body?.classList.toggle('overflow-hidden')
-
- }
-
- });
-
-}
+export interface Props {}
+
+const setup = ({}: Props) => {
+ const toggleIcon = document.getElementById("toggle-icon");
+ const mobileMenu = document.getElementById("mobile-menu");
+ const hamburguerIcon = document.getElementById("hamburger-icon");
+ const closeIcon = document.getElementById("close-icon");
+ const body = document.querySelector("body");
+ // const heightElement1 = element1.getBoundingClientRect().height;
+ const nav = document.getElementById("nav");
+ const heightNav = nav?.getBoundingClientRect().height;
+
+ toggleIcon?.addEventListener("click", () => {
+ if (mobileMenu) {
+ const currentTop = globalThis.getComputedStyle(mobileMenu).top;
+
+ if (currentTop === "0px" && mobileMenu) {
+ mobileMenu.style.top = `${heightNav}px`;
+ } else {
+ mobileMenu.style.top = `0px`;
+ }
+
+ mobileMenu?.classList.toggle("-translate-y-full");
+ mobileMenu?.classList.toggle("translate-y-0");
+
+ hamburguerIcon?.classList.toggle("opacity-0");
+ closeIcon?.classList.toggle("opacity-0");
+ body?.classList.toggle("overflow-hidden");
+ }
+ });
+};
function HeaderOnlyTextToWork(
- { }: Props,
+ {}: Props,
) {
return (
);
}
-export default HeaderOnlyTextToWork;
\ No newline at end of file
+export default HeaderOnlyTextToWork;
diff --git a/sections/Final/DropDown/DropDownComponent.tsx b/sections/Final/DropDown/DropDownComponent.tsx
index aa0c159..588118e 100644
--- a/sections/Final/DropDown/DropDownComponent.tsx
+++ b/sections/Final/DropDown/DropDownComponent.tsx
@@ -41,4 +41,4 @@ export default function Section({
hoverColor={hoverColor}
/>
);
-}
\ No newline at end of file
+}
diff --git a/sections/Final/Form/Form.tsx b/sections/Final/Form/Form.tsx
index 913140e..8c5581e 100644
--- a/sections/Final/Form/Form.tsx
+++ b/sections/Final/Form/Form.tsx
@@ -5,29 +5,26 @@ import FormComponent from "../../../components/ui/Button/index.tsx";
* @title {{{title}}}
*/
export interface Input {
- title: string;
- /**
- * @title Texto
- * @description Escreva o texto do input
- */
- placeholder: string;
- /**
- * @title ID
- * @description Selecione o texto do input
- */
- id_input: string;
+ title: string;
+ /**
+ * @title Texto
+ * @description Escreva o texto do input
+ */
+ placeholder: string;
+ /**
+ * @title ID
+ * @description Selecione o texto do input
+ */
+ id_input: string;
}
/**
* @title {{{title}}}
*/
export interface Props {
- title: string;
- input: Input;
+ title: string;
+ input: Input;
}
-export default function Section({
-}: Props) {
- return (
-
-
);
}
diff --git a/sections/Final/Form/TItleForm.tsx b/sections/Final/Form/TItleForm.tsx
index ea7cb38..531a160 100644
--- a/sections/Final/Form/TItleForm.tsx
+++ b/sections/Final/Form/TItleForm.tsx
@@ -2,91 +2,91 @@ import React from "react";
import TitleForm from "../../../components/ui/Form/TitleForm/index.tsx";
export interface Props {
- /**
- * @title Descrição
- * @description Escreva aqui a descrição que ficara em cima do título
- */
- description?: string;
- /**
- * @title Texto
- * @description Escreva aqui o seu conteúdo
- */
- content: string;
- /**
- * @title Alinhamento
- * @format button-group
- * @options site/loaders/icons.ts
- */
- textAlignment?: "Left" | "Center" | "Right";
- /**
- * @title Tema de Cor
- * @description Escolha o tema de cor do texto
- */
- colorTheme:
- | "Primary"
- | "Secondary"
- | "White"
- | "Accent"
- | "Sacramento-State"
- | "Sacramento-State-10"
- | "Mint-Cream";
- /**
- * @title Tamanho da Fonte
- * @description Escolha o tamanho da fonte (22px, 28px ou 32px)
- * @format select
- * @default 28px
- */
- fontSize?: "22px" | "28px" | "32px";
- /**
- * @title Largura do Contêiner
- * @description Escolha como o contêiner será exibido: Largura Limitada (290px), Largura Limitada (327px), Largura Limitada (343px) ou largura completa.
- * @format select
- * @default Largura Limitada (327px)
- */
- containerWidth?:
- | "Largura Limitada (290px)"
- | "Largura Limitada (327px)"
- | "Largura Limitada (343px)"
- | "Largura Completa";
- /**
- * @title Alinhamento do Conteúdo
- * @description Alinhe o conteúdo dentro do contêiner.
- * @format select
- * @default Start
- */
- contentAlignment?: "Start" | "Center" | "End";
- /**
- * @title Espaçamento Superior
- * @description Defina o espaçamento do contêiner.
- * @format select
- * @default Espacamento (40px)
- */
- paddingTop?:
- | "Espacamento (40px)"
- | "Espacamento (91px)"
- | "Espaçamento (95px)";
+ /**
+ * @title Descrição
+ * @description Escreva aqui a descrição que ficara em cima do título
+ */
+ description?: string;
+ /**
+ * @title Texto
+ * @description Escreva aqui o seu conteúdo
+ */
+ content: string;
+ /**
+ * @title Alinhamento
+ * @format button-group
+ * @options site/loaders/icons.ts
+ */
+ textAlignment?: "Left" | "Center" | "Right";
+ /**
+ * @title Tema de Cor
+ * @description Escolha o tema de cor do texto
+ */
+ colorTheme:
+ | "Primary"
+ | "Secondary"
+ | "White"
+ | "Accent"
+ | "Sacramento-State"
+ | "Sacramento-State-10"
+ | "Mint-Cream";
+ /**
+ * @title Tamanho da Fonte
+ * @description Escolha o tamanho da fonte (22px, 28px ou 32px)
+ * @format select
+ * @default 28px
+ */
+ fontSize?: "22px" | "28px" | "32px";
+ /**
+ * @title Largura do Contêiner
+ * @description Escolha como o contêiner será exibido: Largura Limitada (290px), Largura Limitada (327px), Largura Limitada (343px) ou largura completa.
+ * @format select
+ * @default Largura Limitada (327px)
+ */
+ containerWidth?:
+ | "Largura Limitada (290px)"
+ | "Largura Limitada (327px)"
+ | "Largura Limitada (343px)"
+ | "Largura Completa";
+ /**
+ * @title Alinhamento do Conteúdo
+ * @description Alinhe o conteúdo dentro do contêiner.
+ * @format select
+ * @default Start
+ */
+ contentAlignment?: "Start" | "Center" | "End";
+ /**
+ * @title Espaçamento Superior
+ * @description Defina o espaçamento do contêiner.
+ * @format select
+ * @default Espacamento (40px)
+ */
+ paddingTop?:
+ | "Espacamento (40px)"
+ | "Espacamento (91px)"
+ | "Espaçamento (95px)";
}
export default function Section({
- description,
- content,
- colorTheme,
- textAlignment,
- fontSize = "28px",
- containerWidth = "Largura Limitada (327px)",
- contentAlignment = "Start",
- paddingTop = "Espacamento (40px)",
+ description,
+ content,
+ colorTheme,
+ textAlignment,
+ fontSize = "28px",
+ containerWidth = "Largura Limitada (327px)",
+ contentAlignment = "Start",
+ paddingTop = "Espacamento (40px)",
}: Props) {
- return (
-
-
- );
+ return (
+
+
+ );
}
diff --git a/sections/Final/Headers/Openning.tsx b/sections/Final/Headers/Openning.tsx
index cdf76d2..c794be2 100644
--- a/sections/Final/Headers/Openning.tsx
+++ b/sections/Final/Headers/Openning.tsx
@@ -1,4 +1,11 @@
-export interface Props {
+import React from "react";
+import Openning from "../../../components/ui/Content/Openning/index.tsx";
+import { Section } from "deco/blocks/section.ts";
+
+/**
+ * @title {{{title}}}
+ */
+export interface Open {
/**
* @title Título
* @description Escreva aqui o título da abertura
@@ -9,11 +16,6 @@ export interface Props {
* @description Escreva a palavra ou frase com cor
*/
highlight?: string;
- // /**
- // * @title Subtítulo
- // * @description Escreva aqui o subtítulo da abertura - Desktop
- // */
- // subtitleDesktop?: string;
/**
* @title Subtítulo
* @description Escreva aqui o subtítulo da abertura
@@ -21,78 +23,27 @@ export interface Props {
subtitleDescription?: string;
}
-// const texts = [
-// "Gestão inteligente para economizar",
-// "Gestão inteligente para lucrar",
-// "Gestão inteligente para sonhar mais"
-// ];
+export interface Props {
+ /**
+ * @title Título Principal
+ * @description Escreva aqui o título principal da seção
+ */
+ title?: string;
+ /**
+ * @title Títulos de Abertura
+ * @description Lista de títulos de abertura com suas propriedades
+ */
+ open?: Open[];
+}
export default function Section({
title = "",
- highlight = "",
- // subtitleDesktop = "",
- subtitleDescription = "",
+ open = [],
}: Props) {
- // const [currentTextIndex, setCurrentTextIndex] = useState(0);
- // const [animatedText, setAnimatedText] = useState(texts[0]);
- // const navigate = useNavigate();
-
- // useEffect(() => {
- // const intervalId = setInterval(() => {
- // setCurrentTextIndex((prevIndex: number) => {
- // const nextIndex = (prevIndex + 1) % texts.length;
- // setAnimatedText(texts[nextIndex]);
- // return nextIndex;
- // });
- // }, 3000);
-
- // const timeoutId = setTimeout(() => {
- // navigate('/');
- // }, 9000);
-
- // return () => {
- // clearInterval(intervalId);
- // clearTimeout(timeoutId);
- // };
- // }, [navigate]);
-
- const getHighlightedText = (text: string, highlight: string) => {
- if (!highlight) return text;
-
- const parts = text.split(new RegExp(`(${highlight})`, "gi"));
- return parts.map((part, index) =>
- part.toLowerCase() === highlight.toLowerCase()
- ? {part}
- : part
- );
- };
-
return (
-
-
-
-
- - {getHighlightedText(title, highlight)} -
-
-
- {
- /* texto animado
- - {subtitleDescription} -
- { - /*- {subtitleDesktop} -
- */ - } -
-
*/
- }
- {animatedText}
-
-
+