diff --git a/components/bannerWithTextColumn/BannerWithTextColumn.tsx b/components/bannerWithTextColumn/BannerWithTextColumn.tsx new file mode 100644 index 0000000..9412f5f --- /dev/null +++ b/components/bannerWithTextColumn/BannerWithTextColumn.tsx @@ -0,0 +1,315 @@ +import { FnContext, SectionProps } from "deco/mod.ts"; +import type { ImageWidget } from "apps/admin/widgets.ts"; +import Image from "apps/website/components/Image.tsx"; + +export interface Img { + /**@title Image Desktop*/ + imageDesktop?: ImageWidget; + + alt?: string; + + /** @description width ex: 500 */ + widthDesktop?: number; + /** @description height ex: 300 */ + heightDesktop?: number; + + /**@title Image Mobile*/ + imageMobile: ImageWidget; + /** @description width ex: 500 */ + widthMobile?: number; + /** @description height ex: 300 */ + heightMobile?: number; +} + +export interface TextList { + /** @format html */ + descriptionList?: string; +} + +export interface Tags { + /**@title Tags Desktop*/ + iconsDesktop: ImageWidget; + widthDesktop?: number; + heightDesktop?: number; + + /**@title Tags Mobile*/ + iconsMobile: ImageWidget; + widthMobile?: number; + heightMobile?: number; +} + +export interface CardInfo { + /**@description ex: +12,85% */ + percentage?: string; + + /**@description short text ex: Aumento da receita */ + about?: string; +} + +export interface List { + /**@description Adicione o icon para o check list */ + iconCheck?: ImageWidget; + + textList?: TextList[]; + + widthContainerList: "400" | "500"; + + tags?: Tags[]; + + cardInfo?: CardInfo[]; + + /** @title Ocultar o card no mobile */ + hiddenCardInfo?: boolean; +} + +export interface Button { + textButton: string; + link: string; +} + +export interface Content { + /** @format html */ + title?: string; + /** @format html */ + description?: string; + + list?: List; + + button?: Button; +} + +export interface Props { + bannerImg: Img; + + contentText?: Content; + + /** @title Espaçamento do container*/ + /** @description margem do container para deixar conteúdo centralizado ou normal */ + styleContainer?: "center" | "normal"; + + /** @title Posicionamento */ + placement?: "esquerdo" | "direito"; + + /** @tilte Margin top */ + /** @description Espaçamento entre uma section e outra ex:10px*/ + marginTop?: string; + + /** @tilte Margin Bottom*/ + /** @description spaçamento entre uma section e outra ex:10px*/ + marginBottom?: string; + + /** @description imagem de fundo */ + imageBackground?: ImageWidget; +} + +const PLACEMENT = { + esquerdo: "flex-col lg:flex-row-reverse", + direito: "flex-col lg:flex-row", +}; + +const variants = { + center: "mx-auto", + normal: "", +}; + +const widthContainer = { + 400: "400px", + 500: "500px", +}; + +export default function BannerWithTextColumn({ + bannerImg, + contentText, + placement = "direito", + styleContainer = "normal", + marginTop, + marginBottom, + device, + imageBackground, +}: Props & { device: string }) { + const widthContainerValue = contentText && contentText.list + ? contentText.list.widthContainerList + : 400; + const ishidden = contentText && contentText.list?.hiddenCardInfo + ? contentText.list?.hiddenCardInfo + : false; + + return ( +
+
+
+ {device === "desktop" + ? ( + bannerImg.imageDesktop && ( + {bannerImg.alt} + ) + ) + : ( + bannerImg.imageMobile && ( + {bannerImg.alt} + ) + )} +
+ + {/** content text */} + {contentText && ( +
+
+ {contentText.title && ( +
+
+ )} + + {/** tags */} + + {contentText.list?.tags && ( +
+
    + {contentText.list.tags.map((tag, index) => ( +
  • + {device === "desktop" + ? ( + + ) + : ( + + )} +
    • + ))} +
+
+ )} + + {(!ishidden || device === "desktop") && + contentText.list?.cardInfo && ( +
+
    + {contentText.list?.cardInfo.map((card, index) => ( +
  • + + {card.percentage} + +

    + {card.about} +

    +
    • + ))} +
+
+ )} + + {contentText.description && ( +
+
+ )} +
+ + {/** text List */} + + {contentText.list && ( +
+
    + {contentText.list.textList && + contentText.list.textList.map((text, index) => ( +
  • + {text.descriptionList && ( +
    + +
    +
    +
    + )} +
    • + ))} +
+
+ )} + + {contentText.button && ( + + + + )} +
+ )} +
+ + {imageBackground && ( +
+ +
+ )} +
+ ); +} + +export const loader = (props: Props, _req: Request, ctx: FnContext) => { + return { + ...props, + device: ctx.device || "desktop", + }; +}; diff --git a/components/cases/Cases.tsx b/components/cases/Cases.tsx new file mode 100644 index 0000000..9788374 --- /dev/null +++ b/components/cases/Cases.tsx @@ -0,0 +1,233 @@ +import type { ImageWidget } from "apps/admin/widgets.ts"; +import Image from "apps/website/components/Image.tsx"; +import Icon from "$store/components/ui/Icon.tsx"; + +import type { FnContext } from "deco/types.ts"; + +export interface Technology { + /** @title Icon services desktop */ + IconDesktop: ImageWidget; + /** @title Icon services mobile */ + IconMobile: ImageWidget; + + services: string; +} + +export interface CardCases { + /** @title Image card desktop */ + imgCardDesktop: ImageWidget; + + alt: string; + + /** @description widht ex: 580 */ + widthDesktop?: number; + /** @description height ex: 430 */ + heightDesktop?: number; + + /** @title Image card mobile */ + + imgCardMobile: ImageWidget; + + /** @description widht ex: 350 */ + widthMobile?: number; + /** @description height ex: 342 */ + heightMobile?: number; + + /** @title Logo store desktop */ + imgIconStoreDesktop: ImageWidget; + + /**@title Logo store mobile */ + imgIconStoreMobile: ImageWidget; + + link: string; + buttonName: string; + technology: Technology[]; +} + +export interface Props { + /** @title Icon do background bottom */ + IconBackgroundBottom?: ImageWidget; + + iconBackgroundTop?: ImageWidget; + + iconBackgroundLeftBottom?: ImageWidget; + + /** @description Adicione os Cases */ + cardCases?: CardCases[]; +} + +export default function Cases(props: Props & { device: string }) { + if (!props.cardCases) { + return null; + } + + return ( +
+
+ {props.cardCases.map((card, index) => ( +
+
+
+
+ {card.technology.map((tech, techIndex) => ( +
+ {props.device === "desktop" + ? ( + + ) + : ( + + )} +
+ ))} +
+
+ + {props.device === "desktop" && card.imgCardDesktop && ( + + {card.alt} + + )} + + {props.device !== "desktop" && card.imgCardMobile && ( + + {card.alt} + + )} + +
+
+ {props.device === "desktop" + ? ( + card.imgIconStoreDesktop && ( + {card.alt} + ) + ) + : ( + card.imgIconStoreMobile && ( + {card.alt} + ) + )} + + {card.link && card.buttonName && ( + + + + + )} +
+
+
+
+ ))} +
+ {props.device === "desktop" && ( + <> + {props.IconBackgroundBottom && ( +
+ icon background +
+ )} + + {props.iconBackgroundTop && ( +
+ icon background +
+ )} + + {props.iconBackgroundLeftBottom && ( +
+ icon background +
+ )} + + )} +
+ ); +} + +export const loader = ( + props: Props, + _req: Request, + ctx: FnContext, +) => { + const device = ctx.device; + return { + ...props, + device: device || "desktop", + }; +}; diff --git a/components/challenges/Challenges.tsx b/components/challenges/Challenges.tsx new file mode 100644 index 0000000..57ba748 --- /dev/null +++ b/components/challenges/Challenges.tsx @@ -0,0 +1,90 @@ +import { ImageWidget } from "apps/admin/widgets.ts"; +import type { FnContext } from "deco/types.ts"; +import Image from "apps/website/components/Image.tsx"; + +export interface Cards { + /**@title Icon */ + Icon: ImageWidget; + /** @title title */ + /** @format html */ + title?: string; + /** @title description */ + /** @format html */ + description?: string; +} + +export interface Props { + /** @tilte Title */ + /** @format html */ + title?: string; + + cards?: Cards[]; + + /** @tilte Margin top */ + /** @description Espaçamento entre uma section e outro ex:10px*/ + marginTop?: string; + + /** @tilte Margin Bottom */ + /** @description spaçamento entre uma section e outro ex:10px*/ + marginBottom?: string; +} + +export default function Challenges( + { title, cards, marginTop, marginBottom }: Props, +) { + return ( +
+ {title && ( +
+
+ )} + + {/** Cards **/} + +
+ +
+
+ ); +} diff --git a/components/feedBack/FeedBack.tsx b/components/feedBack/FeedBack.tsx new file mode 100644 index 0000000..fa28ace --- /dev/null +++ b/components/feedBack/FeedBack.tsx @@ -0,0 +1,86 @@ +import type { ImageWidget } from "apps/admin/widgets.ts"; +import Image from "apps/website/components/Image.tsx"; +import Icon from "$store/components/ui/Icon.tsx"; +export interface Props { + comment: string; + photo: ImageWidget; + name: string; + profession: string; + + /** @tilte Margin top */ + /** @description Espaçamento entre uma section e outra ex:10px*/ + marginTop?: string; + + /** @tilte Margin Bottom*/ + /** @description spaçamento entre uma section e outra ex:10px*/ + marginBottom?: string; + + backgroundImage?: ImageWidget; +} + +export default function FeedbackSection({ + comment, + photo, + name, + profession, + marginTop, + marginBottom, + backgroundImage, +}: Props) { + return ( +
+
+
+
+ + +

+ {comment && comment} +

+
+ +
+
+ photo user +
+
+

+ {name} +

+

+ {profession} +

+
+
+
+
+ + {backgroundImage && ( + + )} +
+ ); +} diff --git a/components/header/Menu.tsx b/components/header/Menu.tsx index 2416f78..22fd648 100644 --- a/components/header/Menu.tsx +++ b/components/header/Menu.tsx @@ -14,17 +14,28 @@ interface PropsMenuItem { } function MenuItem({ item }: PropsMenuItem) { - const existsChildren = item && item.children && item.children.length > 0 ? true : false; + const existsChildren = item && item.children && item.children.length > 0 + ? true + : false; return ( <>
+ class={clx( + `${existsChildren ? "collapse collapse-arrow" : ""} n1-menu-mobile`, + )} + > {existsChildren && ( )} -
+
{item.name} {item && item.children && item.children.length === 0 && ( @@ -40,15 +51,15 @@ function MenuItem({ item }: PropsMenuItem) { } {existsChildren && item && item.children && item.children.map((node) => { - console.log('node -------> ', node) + console.log("node -------> ", node); return (
  • - - + style={{ pointerEvents: `${node?.url ? "all" : "none"}` }} + > - +
    • ); })} @@ -67,10 +78,10 @@ function Menu({ items, whatsapp }: Props) { {items.map((item) => { return (
  • - - + style={{ pointerEvents: `${item?.url ? "all" : "none"}` }} + >
    • diff --git a/components/header/NavItem.tsx b/components/header/NavItem.tsx index d5e7016..8fcc6fa 100644 --- a/components/header/NavItem.tsx +++ b/components/header/NavItem.tsx @@ -58,10 +58,11 @@ function NavItem({ item, btnTextMenu, btnUrlMenu }: Props) { } group flex justify-between text-16 font-archimoto-medium uppercase whitespace-nowrap is-${nameItemScape} items-center`)} > - + class="overflow-y-hidden h-5 mr-[10px]" + > {name} @@ -134,8 +135,12 @@ function NavItem({ item, btnTextMenu, btnUrlMenu }: Props) { return (
  • {node.image?.map((i) => { diff --git a/components/result_chievements/Result_chievements.tsx b/components/result_chievements/Result_chievements.tsx new file mode 100644 index 0000000..5fbe184 --- /dev/null +++ b/components/result_chievements/Result_chievements.tsx @@ -0,0 +1,134 @@ +import type { ImageWidget } from "apps/admin/widgets.ts"; +import Image from "apps/website/components/Image.tsx"; + +import type { FnContext } from "deco/types.ts"; + +export interface TagsIcons { + /**@title Tags Desktop*/ + IconsDesktop: ImageWidget; + widthDesktop?: number; + heightDesktop?: number; + + /**@title Tags Mobile*/ + IconsMobile: ImageWidget; + widthMobile?: number; + heightMobile?: number; +} + +export interface Card { + /**@title Icon Seal Check */ + Iconcheck: ImageWidget; + /** @title description */ + /** @format html */ + description: string; +} + +export interface Props { + /** @title Título */ + /** @format html */ + title?: string; + + tags?: TagsIcons[]; + cards?: Card[]; + + /** @tilte Margin top */ + /** @description Espaçamento entre uma section e outra ex:10px*/ + marginTop?: string; + + /** @tilte Margin Bottom*/ + /** @description spaçamento entre uma section e outra ex:10px*/ + marginBottom?: string; +} + +export default function Result_achievements({ + title, + tags, + cards, + device, + marginTop, + marginBottom, +}: Props & { device: string }) { + return ( +
    + {title && ( +
    +
    + )} +
    +
      + {tags && tags.map((tag, index) => ( +
    • + {device === "desktop" + ? ( + tags + ) + : ( + tags + )} +
      • + ))} +
    +
    + + {/** Cards **/} + +
    +
      + {cards && + cards.map((card, index) => ( +
    • + {card.Iconcheck && ( + tags + )} + {card.description && ( +
      +
      + )} +
      • + ))} +
    +
    +
    + ); +} + +export const loader = ( + props: Props, + _req: Request, + ctx: FnContext, +) => { + const device = ctx.device; + return { + ...props, + device: device || "desktop", + }; +}; diff --git a/components/sliderColumn/BannerItems.tsx b/components/sliderColumn/BannerItems.tsx new file mode 100644 index 0000000..34ca689 --- /dev/null +++ b/components/sliderColumn/BannerItems.tsx @@ -0,0 +1,77 @@ + +import type { ImageWidget } from "apps/admin/widgets.ts"; +import { Picture, Source } from "apps/website/components/Picture.tsx"; + + + +interface ActionProps { + /** @title link */ + /** @description (ex: https://agencian1.com.br/) */ + href: string; + /** @title Título da imagem */ + title: string; + /** @title Subtítulo da imagem */ + subTitle: string; + /** @title Texto do botão */ + label: string; +} + +/** + * @titleBy alt + */ + interface Banner { + /** @title Imagem Desktop */ + desktop: ImageWidget; + /** @title Imagem Mobile */ + mobile: ImageWidget; + /** @title Texto da imagem */ + alt: string; + action?: ActionProps; +} + + export function BannerItem({ image, lcp, id }: { image: Banner; lcp?: boolean; id: string}, + ) { + const { + alt, + mobile, + desktop, + action, + } = image; + + return ( + <> +
    + + + + + {alt} + + + +
    + + ); + } \ No newline at end of file diff --git a/components/sliderColumn/Buttons.tsx b/components/sliderColumn/Buttons.tsx new file mode 100644 index 0000000..13b7b78 --- /dev/null +++ b/components/sliderColumn/Buttons.tsx @@ -0,0 +1,30 @@ + +import Icon from "$store/components/ui/Icon.tsx"; +import Slider from "$store/components/ui/Slider.tsx"; + + + +export default function Buttons() { + return ( + <> +
    + + +
    +
    + + +
    + + ); +} \ No newline at end of file diff --git a/components/sliderColumn/Dots.tsx b/components/sliderColumn/Dots.tsx new file mode 100644 index 0000000..c740989 --- /dev/null +++ b/components/sliderColumn/Dots.tsx @@ -0,0 +1,90 @@ + +import Slider from "$store/components/ui/Slider.tsx"; +import type { ImageWidget } from "apps/admin/widgets.ts"; + + +/** + * @titleBy title + */ +interface ActionProps { + /** @title link */ + /** @description (ex: https://agencian1.com.br/) */ + href: string; + /** @title Título da imagem */ + title: string; + /** @title Subtítulo da imagem */ + subTitle: string; + /** @title Texto do botão */ + label: string; +} + +/** + * @titleBy alt + */ +interface Banner { + /** @title Imagem Desktop */ + desktop: ImageWidget; + /** @title Imagem Mobile */ + mobile: ImageWidget; + /** @title Texto da imagem */ + alt: string; + action?: ActionProps; +} + +interface Props { + images?: Banner[]; + /** + * @description (Marque esta opção quando este banner for a maior imagem na tela para otimizações de imagem) + */ + preload?: boolean; + /** + * @title Mostrar setas + * @description (mostre setas para navegar pelas imagens) + */ + arrows?: boolean; + /** + * @title Mostrar pontos + * @description (mostre pontos para navegar pelas imagens) + */ + dots?: boolean; + /** + * @title Autoplay intervalo + * @description [tempo (em segundos) para iniciar a reprodução automática do carrossel (ex: 1 - significa 1 segundo)] + */ + interval?: number; +} + + + + +export default function Dots({ images, interval = 0 }: Props) { + return ( + <> +