@prosistemas/sca-web-kit 2.4.2 → 2.5.2

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

@@ -1,103 +0,0 @@
-.footer-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 32px;
-
-  width: 100%;
-  height: 100%;
-
-  background: var(--dark900);
-
-  border-radius: 24px 24px 0 0;
-  padding: var(--global-padding);
-
-  @media(max-width: 1024px) {
-    flex-direction: column;
-    gap: 64px;
-  }
-
-  .footer-banner-info-header {
-    align-items: flex-start;
-    text-align: start;
-    max-width: 33%;
-
-    @media(max-width: 1024px) {
-      max-width: 75%;
-      align-items: center;
-      text-align: center;
-    }
-  }
-
-  .image-person-wrapper {
-    width: 33%;
-    height: 330px;
-    position: relative;
-    z-index: 0;
-
-    @media(max-width: 1024px) {
-      max-width: 75%;
-      width: 75%;
-    }
-
-    .image {
-      border-radius: 24px;
-      z-index: -1;
-      position: relative;
-    }
-
-    .person {
-      z-index: 1;
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-  }
-
-  .bullet-list-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
-
-    @media(max-width: 1024px) {
-      max-width: 75%;
-      width: 75%;
-    }
-
-    .title {
-      color: #FFF;
-      font-size: 32px;
-      font-weight: 600;
-    }
-
-    .bullet-list {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-
-      .list-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        .text {
-          color: var(--neutral000);
-          font-size: 16px;
-          font-weight: 400;
-          line-height: 150%;
-        }
-      }
-
-      .separator {
-        width: 100%;
-        height: 1px;
-
-        opacity: 0.5;
-        background: var(--light600);
-      }
-    }
-
-
-  }
-}

package/dist/components/shared/footer-banner-autoplayer/footer-banner-autoplayer.d.ts

@@ -1,3 +0,0 @@
-export default function FooterBannerAutoplayer({ className }: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/footer-banner-autoplayer/footer-banner-autoplayer.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './footer-banner-autoplayer.module.scss';
-import { montserrat } from '../../../fonts';
-import Image from 'next/image';
-import InfoHeader from '../info-header/info-header';
-import Autoplayer from '../autoplayer/autoplayer';
-import Button from '../../ui/button/button';
-export default function FooterBannerAutoplayer({ className = '' }) {
-    return (_jsxs("div", { className: `${styles['footer-banner-autoplayer']} ${className}`, children: [_jsxs("div", { className: styles['left'], children: [_jsx(InfoHeader, { tagLabel: 'SISTEMA COMPLETO', title: 'Plano ideal para o seu negócio', className: styles['info-header'], dark: true }), _jsxs("p", { className: `${styles['monthly-fee']} ${montserrat.className}`, children: ["R$", _jsx("span", { className: `${styles['price']}`, children: "178,00" }), "/m\u00EAs"] }), _jsxs("p", { children: ["Menos de R$6,00 por dia ou em at\u00E9 6x sem juros no anual com ", _jsx("b", { children: "20% de desconto" }), "!"] }), _jsx("a", { href: 'https://app.sistemasca.com/cadastro', target: '_blank', style: { marginTop: `12px` }, children: _jsx(Button, { label: 'Teste agora', className: styles['button'] }) })] }), _jsxs("div", { className: styles['middle'], children: [_jsx(Image, { src: '/gym/stock-gym-blurred.webp', alt: 'Foto borrada de uma academia.', className: styles['image'], fill: true }), _jsx(Image, { src: '/people/person_15.webp', alt: 'Imagem de uma pessoa segurando um celular.', width: 400, height: 400, className: styles['person'] })] }), _jsx("div", { className: styles['right'], children: _jsx(Autoplayer, {}) })] }));
-}

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

@@ -1,108 +0,0 @@
-.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

@@ -1,2 +0,0 @@
-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

@@ -1,35 +0,0 @@
-'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

@@ -1,17 +0,0 @@
-.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

@@ -1,6 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,38 +0,0 @@
-.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/phone/phone.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,16 +0,0 @@
-'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}` }) })] }));
-}

package/dist/components/shared/phone/phone.module.scss

@@ -1,322 +0,0 @@
-.phone-wrapper {
-  width: 223px;
-  height: 433px;
-  position: absolute;
-  right: 250px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .buttons-left {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    height: 60%;
-
-    .action,
-    .volume {
-      background: linear-gradient(235deg, rgba(255, 255, 255, 0.40) 29.48%, rgba(255, 255, 255, 0.49) 96.53%);
-      border-radius: 5px 0 0 5px;
-      width: 3px;
-    }
-
-    .action {
-      height: 25px;
-      margin-bottom: 15px;
-    }
-
-    .volume {
-      height: 40px;
-      margin-bottom: 7px;
-    }
-  }
-
-  .buttons-right {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    height: 50%;
-
-    .action {
-      background: linear-gradient(235deg, rgba(255, 255, 255, 0.40) 29.48%, rgba(255, 255, 255, 0.49) 96.53%);
-      border-radius: 0 5px 5px 0;
-      width: 3px;
-      height: 50px;
-    }
-  }
-
-  .phone {
-    width: 215px;
-    height: 433px;
-
-    border-radius: 24px;
-    border: 1px solid rgba(239, 239, 239, 0.28);
-    background: linear-gradient(235deg, rgba(255, 255, 255, 0.40) 29.48%, rgba(255, 255, 255, 0.00) 96.53%);
-    backdrop-filter: blur(12px);
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .screen {
-      width: 195px;
-      height: 416px;
-      border-radius: 18px;
-      background: #2261EB;
-
-      .screen-shine {
-        width: 195px;
-        height: 416px;
-
-        border-radius: 18px;
-        background: linear-gradient(155deg, rgba(255, 255, 255, 0.25) 0.68%, rgba(255, 255, 255, 0.00) 38.68%);
-        background-blend-mode: screen;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-
-        .system-topbar {
-          width: 100%;
-          height: 16px;
-
-          display: flex;
-          flex-wrap: nowrap;
-          justify-content: center;
-          align-items: center;
-
-          .status {
-            margin-top: 5px;
-          }
-
-          .camera {
-            height: 16px;
-            width: 80px;
-            position: absolute;
-            border-radius: 0 0 10px 10px;
-            background: linear-gradient(155deg, rgba(255, 255, 255, 0.25) 0.68%, rgba(255, 255, 255, 0.175) 38.68%);
-
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 3px;
-
-            .aperture,
-            .sound {
-              opacity: 0.7;
-            }
-
-            .sound {
-              width: 30px;
-              height: 4px;
-              background: black;
-              border-radius: 3px;
-              margin-left: 5px;
-            }
-
-            .aperture {
-              width: 4px;
-              height: 4px;
-              background: black;
-              border-radius: 100%;
-            }
-          }
-        }
-
-        .app-topbar {
-          width: 100%;
-          height: 50px;
-          padding: 0 8px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .left,
-          .right {
-            display: flex;
-            flex-wrap: nowrap;
-            align-items: center;
-            gap: 7px;
-            font-size: 9px;
-            font-weight: 600;
-            color: var(--neutral100);
-          }
-        }
-
-        .app-background {
-          width: 180px;
-          height: 325px;
-          background: white;
-          border-radius: 16px;
-          padding: 16px;
-
-          display: flex;
-          flex-direction: column;
-
-          .exercise {
-            color: var(--neutral600);
-            font-weight: 600;
-            font-size: 10px;
-          }
-
-          .gif-wrapper {
-            display: flex;
-            flex-wrap: nowrap;
-            align-items: center;
-            height: 150px;
-            width: 100%;
-
-            .series {
-              width: 18px;
-              height: 80px;
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              /* background-color: red; */
-
-              .series-ball,
-              .green-ball {
-                width: 18px;
-                height: 18px;
-                border-radius: 50%;
-
-                display: flex;
-                flex-wrap: nowrap;
-                justify-content: center;
-                align-items: center;
-
-                font-size: 10px;
-              }
-
-              .series-ball {
-                border: var(--neutral200) solid 1px;
-                color: var(--neutral200);
-                transition: border 0.5s, color 0.5s;
-              }
-
-              .green-ball {
-                background: var(--auxiliary-green);
-                color: white;
-                transition: border 0.5s, color 0.5s, background 0.5s;
-              }
-
-              .series-line {
-                width: 1px;
-                height: 12px;
-                background: var(--neutral200);
-              }
-            }
-          }
-
-          .series-rest-wrapper {
-            display: flex;
-            flex-wrap: nowrap;
-            justify-content: space-between;
-
-            font-size: 10px;
-            color: var(--neutral600);
-          }
-
-          .progress-bar,
-          .progress {
-            height: 7px;
-            border-radius: 7px;
-          }
-
-          .progress-bar {
-            width: 100%;
-            margin-top: 12px;
-            background-color: var(--neutral200);
-
-            .progress {
-              background-color: var(--light500);
-              animation: expandWidth 3s ease-in-out infinite;
-            }
-          }
-
-          .rest-weight-wrapper {
-            margin-top: 30px;
-            display: flex;
-            flex-wrap: nowrap;
-            justify-content: space-between;
-            align-items: center;
-            color: var(--neutral600);
-            font-size: 6px;
-
-            .separator {
-              height: 25px;
-              width: 1px;
-              background: var(--light500);
-            }
-
-            .rest,
-            .weight {
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              width: 100%;
-            }
-
-            .title {
-              font-size: 9px;
-              font-weight: 600;
-            }
-          }
-
-          .exercise-buttons {
-            margin-top: 10px;
-            height: 30px;
-            width: 100%;
-            /* background-color: red; */
-
-            display: flex;
-            flex-wrap: nowrap;
-            justify-content: flex-end;
-            align-items: center;
-            gap: 5px;
-
-            .muscles,
-            .amplify {
-              display: flex;
-              flex-wrap: nowrap;
-              justify-content: center;
-              align-items: center;
-              gap: 3px;
-
-              width: 55px;
-              height: 23px;
-              border-radius: 3px;
-              border: 1px solid var(--neutral200);
-              color: var(--neutral600);
-              font-weight: 600;
-              font-size: 6px;
-            }
-          }
-        }
-
-        .home-indicator {
-          width: 48px;
-          height: 3px;
-          border-radius: 3px;
-          background: var(--light500);
-          opacity: 0.9;
-          margin-top: 18px;
-        }
-      }
-    }
-  }
-}
-
-@keyframes expandWidth {
-  from {
-    width: 0%;
-  }
-
-  to {
-    width: 100%;
-  }
-}