@prosistemas/sca-web-kit 1.0.0

package/dist/components/shared/footer-banner-autoplayer/footer-banner-autoplayer.module.scss

@@ -0,0 +1,108 @@
+.footer-banner-autoplayer {
+  width: 100%;
+  padding: var(--global-padding);
+
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 62px;
+
+  background: var(--dark800);
+  border-radius: 24px 24px 0 0;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .left {
+    width: 33%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    color: var(--neutral000);
+
+    @media (max-width: 1024px) {
+      width: 100%;
+      align-items: center;
+      text-align: center;
+    }
+
+    @media (max-width: 768px) {
+      width: 100%;
+      align-items: flex-start;
+      text-align: start;
+    }
+
+    .info-header {
+      text-align: start;
+      align-items: flex-start;
+      gap: 16px;
+
+      @media (max-width: 1024px) {
+        align-items: center;
+      }
+
+      @media (max-width: 768px) {
+        align-items: flex-start;
+      }
+    }
+
+    .monthly-fee {
+      font-size: 24px;
+      font-weight: 600;
+      letter-spacing: 1.2px;
+      margin-top: 32px;
+
+      .price {
+        font-size: 40px;
+        font-weight: 600;
+        letter-spacing: 2px;
+      }
+    }
+
+    .button {
+      padding: 16px 64px;
+    }
+  }
+
+  .middle {
+    position: relative;
+    min-height: 351px;
+    width: 33%;
+    height: 100%;
+
+    @media (max-width: 1024px) {
+      width: 100%;
+    }
+
+    .image {
+      border-radius: 16px;
+    }
+
+    .person {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+
+      @media (max-width: 1330px) {
+        scale: 90%;
+        transform-origin: bottom left;
+      }
+
+      @media (max-width: 1024px) {
+        scale: 100%;
+      }
+    }
+  }
+
+  .right {
+    width: 33%;
+    height: 100%;
+
+    @media (max-width: 1024px) {
+      width: 100%;
+    }
+  }
+}

package/dist/components/shared/index-header/index-header.d.ts

@@ -0,0 +1,2 @@
+import { IndexHeaderProps } from '../../../types';
+export default function IndexHeader({ sections }: IndexHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/index-header/index-header.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './index-header.module.scss';
+import { useEffect, useState } from 'react';
+import IndexedSectionButton from './indexed-section-button/indexed-section-button';
+export default function IndexHeader({ sections }) {
+    const [activeSection, setActiveSection] = useState('');
+    useEffect(() => {
+        const handleScroll = () => {
+            let closestSectionId = '';
+            let minDistance = Number.POSITIVE_INFINITY;
+            sections.forEach(({ id }) => {
+                const el = document.getElementById(id);
+                if (el) {
+                    const top = el.getBoundingClientRect().top;
+                    if (top >= 0 && top < minDistance) {
+                        minDistance = top;
+                        closestSectionId = id;
+                    }
+                }
+            });
+            if (closestSectionId)
+                setActiveSection(closestSectionId);
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        handleScroll();
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, [sections]);
+    return (_jsx("header", { className: styles['index-header'], children: sections.map(({ id, label }) => (_jsx(IndexedSectionButton, { activeSectionId: activeSection, onClick: () => setActiveSection(id), indexedSection: {
+                id: id,
+                label: label,
+            } }, id))) }));
+}

package/dist/components/shared/index-header/index-header.module.scss

@@ -0,0 +1,17 @@
+.index-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+
+  width: 100%;
+  height: 80px;
+  background: var(--neutral100);
+  padding: var(--global-padding);
+  padding-top: 0;
+  padding-bottom: 0;
+  overflow-x: auto;
+
+  display: flex;
+  align-items: flex-end;
+  gap: 32px;
+}

package/dist/components/shared/index-header/indexed-section-button/indexed-section-button.d.ts

@@ -0,0 +1,6 @@
+import { IndexedSection } from '../../../../types';
+export default function IndexedSectionButton({ activeSectionId, indexedSection, onClick, }: {
+    activeSectionId: string;
+    indexedSection: IndexedSection;
+    onClick: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/index-header/indexed-section-button/indexed-section-button.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './indexed-section-button.module.scss';
+export default function IndexedSectionButton({ activeSectionId, indexedSection, onClick, }) {
+    return (_jsx("button", { className: styles['button-wrapper'], onClick: onClick, children: _jsxs("a", { href: `#${indexedSection.id}`, className: `
+        ${styles['section-button']} 
+        ${activeSectionId == indexedSection.id ? styles['active'] : ''}
+      `, children: [_jsx("span", { children: indexedSection.label }), _jsx("div", { className: styles['highlight'] })] }) }));
+}

package/dist/components/shared/index-header/indexed-section-button/indexed-section-button.module.scss

@@ -0,0 +1,38 @@
+.button-wrapper {
+  all: unset;
+}
+
+.section-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+
+  cursor: pointer;
+  color: var(--neutral400);
+  text-align: center;
+  font-size: 16px;
+  font-variation-settings: 'wght' 500;
+  line-height: 150%;
+
+  z-index: 1;
+
+  white-space: nowrap;
+
+  transition: color .3s, font-variation-settings .3s;
+}
+
+.highlight {
+  width: 120%;
+  height: 2px;
+  transition: background .3s;
+}
+
+.active {
+  color: var(--neutral600);
+  font-variation-settings: 'wght' 600;
+
+  .highlight {
+    background: var(--auxiliary-orange);
+  }
+}

package/dist/components/shared/info-header/info-header.d.ts

@@ -0,0 +1,18 @@
+interface InfoHeaderProps {
+    className?: string;
+    tagLabel?: string;
+    tagLabelClassName?: string;
+    title: string;
+    titleClassName?: string;
+    subtitle?: string;
+    subtitleClassName?: string;
+    buttonLabel?: string;
+    buttonClassName?: string;
+    buttonHref?: string;
+    buttonInternalHref?: string;
+    buttonTarget?: React.HTMLAttributeAnchorTarget;
+    gap?: string;
+    dark?: boolean;
+}
+export default function InfoHeader({ className, tagLabel, tagLabelClassName, title, titleClassName, subtitle, subtitleClassName, buttonLabel, buttonClassName, buttonHref, buttonInternalHref, buttonTarget, gap, dark, }: InfoHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/shared/info-header/info-header.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './info-header.module.scss';
+import TagLabel from '../../ui/tag-label/tag-label';
+import Subtitle from '../../ui/subtitle/subtitle';
+import Button from '../../ui/button/button';
+import Title from '../../ui/title/title';
+export default function InfoHeader({ className, tagLabel, tagLabelClassName, title, titleClassName, subtitle, subtitleClassName, buttonLabel, buttonClassName, buttonHref, buttonInternalHref, buttonTarget, gap, dark, }) {
+    return (_jsxs("div", { className: `${styles['info-header']} ${className}`, style: {
+            gap: gap,
+        }, children: [tagLabel &&
+                _jsx(TagLabel, { label: tagLabel, className: tagLabelClassName, dark: dark }), _jsx(Title, { className: titleClassName, text: title, dark: dark }), subtitle &&
+                _jsx(Subtitle, { text: subtitle, className: subtitleClassName, dark: dark }), buttonLabel &&
+                _jsx(Button, { label: buttonLabel, className: buttonClassName, href: buttonHref, internalHref: buttonInternalHref, target: buttonTarget })] }));
+}

package/dist/components/shared/info-header/info-header.module.scss

@@ -0,0 +1,10 @@
+.info-header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+
+  z-index: 1;
+  gap: 32px;
+}

package/dist/components/shared/newsletter-modal/newsletter-modal.d.ts

@@ -0,0 +1,4 @@
+export default function NewsletterModal({ onCloseButtonClick, type, }: {
+    onCloseButtonClick?: () => void;
+    type: 'success' | 'already-registered' | 'error';
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/newsletter-modal/newsletter-modal.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './newsletter-modal.module.scss';
+import { montserrat } from '../../../fonts';
+import newsletterErrorIcon from '@prosistemas/sca-web-kit/assets/icons/not-found.svg';
+import newsletterSuccessIcon from '@prosistemas/sca-web-kit/assets/icons/newsletter-success.svg';
+import Button from '../../ui/button/button';
+import { XIcon } from '@phosphor-icons/react/dist/ssr';
+export default function NewsletterModal({ onCloseButtonClick, type, }) {
+    return (_jsxs("div", { className: styles['newsletter-modal'], children: [_jsx(Button, { className: styles['close-button'], icon: XIcon, iconWeight: "bold", round: true, onClick: onCloseButtonClick }), _jsx("img", { src: type === "error" ? newsletterErrorIcon : newsletterSuccessIcon, alt: "TODO", width: 150, height: 150, className: styles['icon'] }), type === 'success' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: `${styles['title']} ${montserrat.className}`, children: "Cadastro realizado com sucesso!" }), _jsx("p", { className: styles['subtitle'], children: "Agora voc\u00EA receber\u00E1 em primeira m\u00E3o, os melhores conte\u00FAdos sobre gest\u00E3o de pessoas, despesas e benef\u00EDcios." })] })) : type === 'already-registered' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: `${styles['title']} ${montserrat.className}`, children: "Seu e-mail j\u00E1 est\u00E1 cadastrado!" }), _jsx("p", { className: styles['subtitle'], children: "Esse endere\u00E7o de e-mail j\u00E1 consta no nosso banco de dados. " })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: `${styles['title']} ${montserrat.className}`, children: "Um erro ocorreu ao registrar seu e-mail!" }), _jsx("p", { className: styles['subtitle'], children: "Verifique se o seu e-mail foi digitado corretamente e tente novamente por gentileza." })] }))] }));
+}

package/dist/components/shared/newsletter-modal/newsletter-modal.module.scss

@@ -0,0 +1,47 @@
+.newsletter-modal {
+  position: relative;
+
+  gap: 24px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+
+  width: 720px;
+  height: 415px;
+
+  background: #FFF;
+  border-radius: 14px;
+  border: 1.124px solid var(--light100);
+  box-shadow: 0 52px 72px 0 rgba(32, 41, 64, 0.10);
+
+  .close-button {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+  }
+
+  .icon {
+    margin-bottom: -32px;
+  }
+
+  .title {
+    text-align: center;
+    color: var(--neutral500) !important;
+
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 120%;
+    letter-spacing: -0.24px;
+  }
+
+  .subtitle {
+    max-width: 460px;
+
+    color: var(--neutral500) !important;
+    text-align: center;
+
+    font-size: 16px;
+    line-height: 150%;
+  }
+}

package/dist/components/shared/newsletter-modal-dialog/newsletter-modal-dialog.d.ts

@@ -0,0 +1,5 @@
+export default function NewsletterModalDialog({ modalType, open, setOpenAction, }: {
+    modalType: 'success' | 'already-registered' | 'error';
+    open: boolean;
+    setOpenAction: React.Dispatch<React.SetStateAction<boolean>>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/newsletter-modal-dialog/newsletter-modal-dialog.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './newsletter-modal-dialog.module.scss';
+import NewsletterModal from '../newsletter-modal/newsletter-modal';
+import * as Dialog from '@radix-ui/react-dialog';
+import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
+export default function NewsletterModalDialog({ modalType, open, setOpenAction, }) {
+    return (_jsx(Dialog.Root, { open: open, children: _jsx(Dialog.Portal, { children: _jsx(Dialog.Overlay, { className: styles['overlay'], children: _jsxs(Dialog.Content, { children: [_jsx(VisuallyHidden.Root, { children: _jsx(Dialog.Title, { children: "Tela de confirma\u00E7\u00E3o de inscri\u00E7\u00E3o na Newsletter do SCA" }) }), _jsx(NewsletterModal, { type: modalType, onCloseButtonClick: () => {
+                                setOpenAction(false);
+                            } })] }) }) }) }));
+}

package/dist/components/shared/newsletter-modal-dialog/newsletter-modal-dialog.module.scss

@@ -0,0 +1,15 @@
+.overlay {
+  z-index: 100;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+}

package/dist/components/shared/newsletter-strip/newsletter-strip.d.ts

@@ -0,0 +1,7 @@
+export default function NewsletterStrip({ buttonLabel, onButtonClick, onFormSubmit, buttonLoading, buttonDisabled, }: {
+    buttonLabel?: string;
+    onButtonClick?: () => void;
+    onFormSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+    buttonLoading?: boolean;
+    buttonDisabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/newsletter-strip/newsletter-strip.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './newsletter-strip.module.scss';
+import { inter } from '../../../fonts';
+import scaGradientLogo from '@prosistemas/sca-web-kit/assets/logos/sca/sca-s-gradient.svg';
+import InfoHeader from '../info-header/info-header';
+import Button from '../../ui/button/button';
+import { EnvelopeIcon } from '@phosphor-icons/react/dist/ssr';
+export default function NewsletterStrip({ buttonLabel, onButtonClick, onFormSubmit, buttonLoading = false, buttonDisabled = false, }) {
+    return (_jsxs("div", { className: styles['newsletter-strip'], children: [_jsxs("div", { className: styles['left'], children: [_jsx(EnvelopeIcon, { color: 'white', weight: 'light', size: 48, className: styles['icon'] }), _jsx(InfoHeader, { title: 'Os melhores conte\u00FAdos de tecnologia e fitness', subtitle: 'Assine e receba novidades toda semana em sua caixa de entrada.', className: styles['feature-card'], titleClassName: styles['feature-card-title'], dark: true })] }), _jsxs("form", { className: styles['right'], onSubmit: onFormSubmit, children: [_jsx("input", { className: `${styles['email']} ${inter.className}`, id: "email", type: "email", name: "email", placeholder: "Insira seu e-mail", required: true }), _jsx(Button, { className: styles['button'], onClick: onButtonClick, label: buttonLabel ?? "Assinar", loading: buttonLoading, disabled: buttonDisabled, type: 'submit' }), _jsx("div", { className: styles['blue-hue'] }), _jsx("img", { src: scaGradientLogo, alt: 'Logo do SCA', width: 243, height: 318, className: styles['background-logo'] })] })] }));
+}

package/dist/components/shared/newsletter-strip/newsletter-strip.module.scss

@@ -0,0 +1,128 @@
+.newsletter-strip {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--global-padding-single);
+
+  padding: 64px var(--global-padding-single);
+  background: var(--dark700);
+  overflow: hidden;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
+
+  .left,
+  .right {
+    display: flex;
+    align-items: center;
+  }
+
+  .left {
+    gap: 32px;
+
+    @media (max-width: 1024px) {
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .icon {
+      z-index: 1;
+    }
+
+    .feature-card {
+      gap: 6px;
+      text-align: start;
+      align-items: flex-start;
+
+      @media (max-width: 1024px) {
+        text-align: center;
+        align-items: center;
+
+      }
+
+      .feature-card-title {
+        font-size: 24px;
+      }
+    }
+  }
+
+  .right {
+    position: relative;
+    gap: 16px;
+
+    @media (max-width: 540px) {
+      width: 100%;
+      flex-direction: column;
+    }
+
+    .email {
+      width: 335px;
+      height: 55.5px;
+
+      padding: 16px 24px;
+      border-radius: 8px;
+
+      background: #FFF;
+      border: none;
+      outline: none;
+      z-index: 1;
+
+      color: black;
+
+      @media (max-width: 540px) {
+        width: 100%;
+      }
+    }
+
+    .button {
+      width: 145px;
+      height: 55.5px;
+      padding: 16px 48px;
+      z-index: 1;
+
+      @media (max-width: 540px) {
+        width: 100%;
+      }
+    }
+
+    .blue-hue,
+    .background-logo {
+      position: absolute;
+      top: -100px;
+      right: 0px;
+
+      z-index: 0;
+
+      @media (max-width: 1024px) {
+        left: 50%;
+        transform: translateX(-50%);
+        scale: 120%;
+        transform-origin: bottom center;
+      }
+
+      @media (max-width: 540px) {
+        display: none;
+      }
+    }
+
+    .blue-hue {
+      opacity: 0.7;
+
+      width: 219px;
+      height: 425px;
+      border-radius: 100%;
+      background: var(--light500);
+      filter: blur(125px);
+
+    }
+
+    .background-logo {
+      position: absolute;
+      z-index: 0;
+    }
+  }
+
+
+}

package/dist/components/shared/phone/phone.d.ts

@@ -0,0 +1,6 @@
+export default function Phone({ className, phoneClassName, buttonsClassName, cameraClassName, }: {
+    className?: string;
+    phoneClassName?: string;
+    buttonsClassName?: string;
+    cameraClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/phone/phone.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './phone.module.scss';
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import { ArrowLeftIcon, TimerIcon, PersonIcon, MagnifyingGlassPlusIcon } from '@phosphor-icons/react';
+export default function Phone({ className, phoneClassName, buttonsClassName, cameraClassName, }) {
+    const [activeIndex, setActiveIndex] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setActiveIndex(prev => (prev + 1) % 3);
+        }, 3000);
+        return () => clearInterval(interval);
+    }, []);
+    return (_jsxs("div", { className: `${styles['phone-wrapper']} ${className}`, children: [_jsxs("div", { className: styles['buttons-left'], children: [_jsx("div", { className: `${styles['action']} ${buttonsClassName}` }), _jsx("div", { className: `${styles['volume']} ${buttonsClassName}` }), _jsx("div", { className: `${styles['volume']} ${buttonsClassName}` })] }), _jsx("div", { className: `${styles['phone']} ${phoneClassName}`, children: _jsx("div", { className: styles['screen'], children: _jsxs("div", { className: styles['screen-shine'], children: [_jsxs("div", { className: styles['system-topbar'], children: [_jsx(Image, { src: '/phone/system-bar.svg', width: 172, height: 7, alt: 'Image dos \u00EDcones de um celular', className: styles['status'] }), _jsxs("div", { className: `${styles['camera']} ${cameraClassName}`, children: [_jsx("div", { className: styles['sound'] }), _jsx("div", { className: styles['aperture'] })] })] }), _jsxs("div", { className: styles['app-topbar'], children: [_jsxs("div", { className: styles['left'], children: [_jsx(ArrowLeftIcon, { weight: 'bold', color: 'var(--neutral100)', className: styles['icon'] }), _jsx("p", { children: "Execu\u00E7\u00E3o" })] }), _jsxs("div", { className: styles['right'], children: [_jsx(TimerIcon, { weight: 'bold', color: 'var(--neutral100)', className: styles['icon'] }), _jsx("p", { children: "00:27:12" })] })] }), _jsxs("div", { className: styles['app-background'], children: [_jsx("p", { className: styles['exercise'], children: "Rosca Direta" }), _jsxs("div", { className: styles['gif-wrapper'], children: [_jsxs("div", { className: styles['series'], children: [_jsx("div", { className: `${activeIndex == 0 ? styles['green-ball'] : styles['series-ball']}`, children: _jsx("p", { children: "1" }) }), _jsx("div", { className: styles['series-line'] }), _jsx("div", { className: `${activeIndex == 1 ? styles['green-ball'] : styles['series-ball']}`, children: _jsx("p", { children: "2" }) }), _jsx("div", { className: styles['series-line'] }), _jsx("div", { className: `${activeIndex == 2 ? styles['green-ball'] : styles['series-ball']}`, children: _jsx("p", { children: "3" }) })] }), _jsx(Image, { src: '/animated/rosca-direta.webp', alt: 'Animação do exercício Rosca Direta', width: 130, height: 130, unoptimized: true })] }), _jsxs("div", { className: styles['series-rest-wrapper'], children: [_jsxs("p", { children: ["S\u00E9ries: ", _jsx("b", { children: "3" })] }), _jsxs("p", { children: ["Descanso: ", _jsx("b", { children: "45s" })] })] }), _jsx("div", { className: styles['progress-bar'], children: _jsx("div", { className: styles['progress'] }) }), _jsxs("div", { className: styles['rest-weight-wrapper'], children: [_jsxs("div", { className: styles['rest'], children: [_jsx("p", { className: styles['title'], children: "12 reps" }), _jsx("p", { children: "Repeti\u00E7\u00F5es ou tempo" })] }), _jsx("div", { className: styles['separator'] }), _jsxs("div", { className: styles['weight'], children: [_jsx("p", { className: styles['title'], children: "15kg" }), _jsx("p", { children: "Carga ou velocidade" })] })] }), _jsxs("div", { className: styles['exercise-buttons'], children: [_jsxs("div", { className: styles['muscles'], children: [_jsx(PersonIcon, { weight: 'bold', color: 'var(--primary)' }), _jsx("p", { children: "M\u00FAsculos" })] }), _jsxs("div", { className: styles['amplify'], children: [_jsx(MagnifyingGlassPlusIcon, { weight: 'bold', color: 'var(--primary)' }), _jsx("p", { children: "Ampliar" })] })] })] }), _jsx("div", { className: styles['home-indicator'] })] }) }) }), _jsx("div", { className: styles['buttons-right'], children: _jsx("div", { className: `${styles['action']} ${buttonsClassName}` }) })] }));
+}