@prosistemas/sca-web-kit 1.0.0

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

@@ -0,0 +1,322 @@
+.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%;
+  }
+}

package/dist/components/shared/success-cases/success-cases-swiper/success-case-card/success-case-card.d.ts

@@ -0,0 +1,10 @@
+export default function SuccessCaseCard({ review, customerPictureSrc, customerName, customerGymName, location, dateSince, className, dark, }: {
+    review: string;
+    customerPictureSrc: string;
+    customerName: string;
+    customerGymName: string;
+    location: string;
+    dateSince: string;
+    className?: string;
+    dark?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/success-cases/success-cases-swiper/success-case-card/success-case-card.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './success-case-card.module.scss';
+import { QuotesIcon, CalendarDotsIcon, MapPinIcon } from '@phosphor-icons/react/dist/ssr';
+import * as Avatar from '@radix-ui/react-avatar';
+export default function SuccessCaseCard({ review, customerPictureSrc, customerName, customerGymName, location, dateSince, className, dark = false, }) {
+    return (_jsxs("div", { className: `${styles['success-case-card']} ${className}`, style: {
+            background: dark ? 'white' : '',
+        }, children: [_jsx(QuotesIcon, { size: 32, weight: 'fill', color: 'var(--light200)' }), _jsx("div", { className: styles['review-wrapper'], children: _jsx("p", { className: styles['review'], children: review }) }), _jsx("div", { className: styles['success-card-bottom-wrapper'], children: _jsx("div", { className: `${styles['success-card-bottom']}`, children: _jsxs("div", { className: styles['customer'], children: [_jsxs("div", { className: styles['customer-left'], children: [_jsx("div", { className: styles['outer-circle'], children: _jsx("div", { className: styles['inner-circle'], children: _jsx(Avatar.Root, { children: _jsx(Avatar.Image, { className: styles['customer-picture'], src: customerPictureSrc, alt: 'Foto de um dos clientes do Sistema SCA', width: 45, height: 45 }) }) }) }), _jsxs("div", { className: styles['name-gym-wrapper'], children: [_jsx("p", { className: styles['customer-name'], children: customerName }), _jsx("p", { className: styles['customer-gym-name'], children: customerGymName })] })] }), _jsx("div", { className: styles['customer-right'], children: _jsxs("div", { className: styles['customer-info-details'], children: [_jsxs("div", { className: styles['customer-location'], children: [_jsx(MapPinIcon, { size: 18, color: 'var(--auxiliary-orange)' }), _jsx("p", { children: location })] }), _jsxs("div", { className: styles['customer-since'], children: [_jsx(CalendarDotsIcon, { size: 18, color: 'var(--auxiliary-orange)' }), _jsx("p", { children: dateSince })] })] }) })] }) }) })] }));
+}

package/dist/components/shared/success-cases/success-cases-swiper/success-case-card/success-case-card.module.scss

@@ -0,0 +1,154 @@
+.success-case-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  position: absolute;
+  transition: opacity 0.3s;
+
+  width: 100%;
+  height: 100%;
+
+  border: 2px solid var(--light500);
+  border-radius: 16px;
+  padding: 32px;
+
+  @media (max-width: 425px) {
+    padding: 16px;
+  }
+
+  .review-wrapper {
+    position: relative;
+
+    .review {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+
+
+      color: var(--neutral600);
+      font-size: 18px;
+      font-weight: 400;
+    }
+  }
+
+  .success-card-bottom-wrapper {
+    position: relative;
+    height: 75px;
+
+    .success-card-bottom {
+      display: flex;
+      justify-content: space-between;
+
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+
+      .customer {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        @media (max-width: 768px) {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 16px;
+        }
+
+
+        .customer-left {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+
+          .outer-circle,
+          .inner-circle,
+          .customer-picture {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+          }
+
+          .outer-circle {
+            background: var(--light100);
+            min-width: 75px;
+            height: 75px;
+
+            .inner-circle {
+              background: var(--light200);
+              width: 60px;
+              height: 60px;
+
+              .customer-picture {
+                width: 45px;
+                height: 45px;
+                object-fit: cover;
+              }
+            }
+          }
+
+          .name-gym-wrapper {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 45px;
+
+            .customer-name {
+              color: var(--neutral700);
+              font-size: 18px;
+              font-weight: 600;
+            }
+
+            .customer-gym-name {
+              color: var(--neutral500);
+              font-size: 14px;
+              font-weight: 500;
+            }
+          }
+        }
+
+
+        .customer-right {
+          display: flex;
+          align-items: flex-end;
+          height: 45px;
+
+          @media (max-width: 768px) {
+            height: fit-content;
+          }
+
+          .customer-info-details {
+            display: flex;
+            gap: 32px;
+
+            @media (max-width: 1580px) {
+              gap: 16px;
+            }
+
+
+            .customer-location,
+            .customer-since {
+              display: flex;
+              align-items: center;
+              gap: 8px;
+
+              color: var(--neutral600);
+              font-size: 14px;
+              font-weight: 400;
+            }
+          }
+        }
+
+        .customer-info {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+      }
+    }
+  }
+
+}

package/dist/components/shared/success-cases/success-cases-swiper/success-cases-swiper.d.ts

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

package/dist/components/shared/success-cases/success-cases-swiper/success-cases-swiper.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './success-cases-swiper.module.scss';
+import { useState } from 'react';
+import SuccessCaseCard from './success-case-card/success-case-card';
+import Button from '../../../ui/button/button';
+import { CaretRightIcon } from '@phosphor-icons/react';
+import Image from 'next/image';
+export default function SuccessCasesSwiper({ dark = false, }) {
+    const [index, setIndex] = useState(0);
+    function handleClick() {
+        setIndex(prev => (prev + 1) % 3);
+    }
+    return (_jsxs("div", { className: styles['success-cases-swiper'], children: [_jsxs("div", { className: styles['success-cases-left'], children: [_jsx(SuccessCaseCard, { review: 'Dahora demais', customerPictureSrc: 'https://t2.tudocdn.net/125246?w=1920', customerName: 'Luigi Erucci', customerGymName: 'Academia Power Guido', location: 'Alterosa, MG', dateSince: 'Desde 2003', className: `${index == 0 ? styles['show'] : styles['hide']} `, dark: dark }), _jsx(SuccessCaseCard, { review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ullamcorper maximus ipsum, vitae congue sem imperdiet vitae. Praesent pellentesque imperdiet erat in efficitur.', customerPictureSrc: 'https://media.tenor.com/77Wibhy_QxcAAAAe/xirtual-thinking-hideo-kojima.png', customerName: 'Hideo Kojima', customerGymName: 'KOJIMA PRODUCTIONS', location: 'Tokyo, JP', dateSince: 'Desde 2016', className: `${index == 1 ? styles['show'] : styles['hide']} `, dark: dark }), _jsx(SuccessCaseCard, { review: 'Suspendisse eget commodo orci, et mattis libero. Aenean nec ligula fermentum, hendrerit odio eget, convallis tortor. Nam posuere, libero ac ultricies porttitor, purus arcu lobortis sapien, sit amet consectetur massa enim a augue.', customerPictureSrc: 'https://desktop.sistemasca.com/img/clientes/zxfwm66zrh.jpg', customerName: 'Cliente Teste', customerGymName: 'Academia Teste', location: 'Teste, TST', dateSince: 'Desde 191 b.C', className: `${index == 2 ? styles['show'] : styles['hide']} `, dark: dark }), _jsx(Button, { icon: CaretRightIcon, onClick: handleClick, className: styles['success-case-button'], ariaLabel: 'Bot\u00E3o para ver o pr\u00F3ximo case de sucesso', round: true })] }), _jsxs("div", { className: styles['success-cases-right'], children: [_jsx(Image, { src: '/gym/stock-gym.webp', alt: 'Foto de uma academia', width: 690, height: 280, className: `${styles['success-case-picture']} ${index == 0 ? styles['show'] : styles['hide']}` }), _jsx(Image, { src: '/gym/stock-gym-02.webp', alt: 'Foto de uma academia', width: 690, height: 280, className: `${styles['success-case-picture']} ${index == 1 ? styles['show'] : styles['hide']}` }), _jsx(Image, { src: '/gym/stock-gym-03.webp', alt: 'Foto de uma academia', width: 690, height: 280, className: `${styles['success-case-picture']} ${index == 2 ? styles['show'] : styles['hide']}` })] })] }));
+}

package/dist/components/shared/success-cases/success-cases-swiper/success-cases-swiper.module.scss

@@ -0,0 +1,81 @@
+.hide {
+  opacity: 0;
+}
+
+.show {
+  opacity: 1;
+}
+
+.success-cases-swiper {
+  width: 100%;
+  height: 380px;
+
+  position: relative;
+  display: flex;
+  gap: 32px;
+
+  @media (max-width: 1330px) {
+    flex-direction: column;
+    height: calc(380px * 2);
+  }
+
+  @media (max-width: 768px) {
+    height: calc(380px * 2);
+  }
+
+  .success-cases-left,
+  .success-cases-right {
+
+    .success-case-card,
+    .success-case-picture {
+      border-radius: 16px;
+    }
+  }
+
+  .success-cases-left {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .success-case-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+
+      position: absolute;
+      top: calc(50% - 16px);
+      right: -16px;
+    }
+  }
+
+  .success-cases-right {
+    position: relative;
+    width: 80%;
+    height: 100%;
+
+    @media (max-width: 1330px) {
+      width: 100%;
+    }
+
+    @media (max-width: 768px) {
+      height: 65%;
+    }
+
+    @media (max-width: 375px) {
+      height: 45%;
+    }
+
+    .success-case-picture {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      width: 100%;
+      height: 100%;
+
+      object-fit: cover;
+      transition: opacity 0.3s;
+    }
+  }
+}

package/dist/components/shared/success-cases/success-cases.d.ts

@@ -0,0 +1,5 @@
+export default function SuccessCases({ buttonHref, buttonInternalHref, buttonTarget, }: {
+    buttonHref?: string;
+    buttonInternalHref?: string;
+    buttonTarget?: React.HTMLAttributeAnchorTarget;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/success-cases/success-cases.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './success-cases.module.scss';
+import SuccessCasesSwiper from './success-cases-swiper/success-cases-swiper';
+import InfoHeader from '../info-header/info-header';
+import Button from '../../ui/button/button';
+import Stacks from '../../ui/stacks/stacks';
+export default function SuccessCases({ buttonHref, buttonInternalHref, buttonTarget, }) {
+    return (_jsxs("div", { className: styles['success-cases'], children: [_jsx(Stacks, {}), _jsxs("div", { className: styles['success-cases-wrapper'], children: [_jsxs("div", { className: styles['success-cases-title'], children: [_jsx(InfoHeader, { className: styles['title'], tagLabel: 'CASES DE SUCESSO', title: 'Essas pessoas confiam no nosso trabalho' }), _jsx(Button, { label: 'Leia outros cases de sucesso', className: styles['success-cases-button'], href: buttonHref, internalHref: buttonInternalHref, target: buttonTarget })] }), _jsx(SuccessCasesSwiper, {})] })] }));
+}

package/dist/components/shared/success-cases/success-cases.module.scss

@@ -0,0 +1,60 @@
+.success-cases {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  cursor: default;
+
+  .title {
+    align-items: flex-start;
+
+    @media (max-width: 1330px) {
+      align-items: center;
+      gap: 16px;
+    }
+  }
+
+  .success-cases-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+
+    padding: 0 64px;
+
+    @media (max-width: 1330px) {
+      padding: 0 32px;
+    }
+
+    @media (max-width: 768px) {
+      padding: 0 8px;
+    }
+
+    .success-cases-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+
+      @media (max-width: 1330px) {
+        justify-content: center;
+      }
+
+      .success-cases-button {
+        height: fit-content;
+        padding: 16px 42px;
+        background: white;
+        color: var(--auxiliary-orange);
+        border: 1px solid var(--auxiliary-orange);
+
+        @media (max-width: 1330px) {
+          display: none;
+        }
+      }
+
+      .success-cases-button:hover {
+        background: var(--auxiliary-orange);
+        color: white;
+      }
+    }
+
+  }
+}

package/dist/components/shared/support-sticky-button/support-sticky-button.d.ts

@@ -0,0 +1 @@
+export default function SupportStickyButton(): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/support-sticky-button/support-sticky-button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import styles from './support-sticky-button.module.scss';
+import { CaretUpIcon } from '@phosphor-icons/react/dist/ssr';
+export default function SupportStickyButton() {
+    return (_jsxs("div", { className: styles['support-sticky-button'], children: [_jsxs("div", { className: styles['left'], children: [_jsx("div", { className: styles['person-wrapper'], children: _jsx(Image, { src: '/people/person_04.webp', width: 64, height: 64, alt: 'Imagem de uma pessoa', className: styles['person'] }) }), _jsx("p", { className: styles['text'], children: "Posso ajudar?" })] }), _jsx("div", { className: styles['right'], children: _jsx(CaretUpIcon, { size: 16, weight: 'bold', color: 'var(--neutral100)' }) })] }));
+}