Fix: adjusted all screens

This commit is contained in:
Pedro Chueiri 2026-02-09 22:09:34 -03:00
parent 82cfff771c
commit dd5a326bef
48 changed files with 3436 additions and 1775 deletions

977
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -13,6 +13,7 @@
"lint": "eslint ."
},
"dependencies": {
"googleapis": "^171.4.0",
"lucide-svelte": "^0.562.0"
},
"devDependencies": {

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 7.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
<path d="M12.1666 11.2503H14.2499L15.0833 7.91699H12.1666V6.25033C12.1666 5.39199 12.1666 4.58366 13.8333 4.58366H15.0833V1.78366C14.8116 1.74783 13.7858 1.66699 12.7024 1.66699C10.4399 1.66699 8.83325 3.04783 8.83325 5.58366V7.91699H6.33325V11.2503H8.83325V18.3337H12.1666V11.2503Z" fill="white" fill-opacity="0.25"/>
</svg>

After

Width:  |  Height:  |  Size: 425 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" width="84" height="32" viewBox="0 0 84 32" fill="none">
<g clip-path="url(#clip0_1_1163)">
<path d="M57.1012 18.1749L57.9374 18.4258C57.8817 18.6628 57.7981 18.8579 57.6726 19.0112C57.5472 19.1645 57.4078 19.2899 57.2266 19.3596C57.0454 19.4432 56.8225 19.4851 56.5437 19.4851C56.2092 19.4851 55.9444 19.4432 55.7214 19.3457C55.5123 19.2481 55.3312 19.0809 55.1779 18.83C55.0245 18.5931 54.9409 18.2725 54.9409 17.8962C54.9409 17.3945 55.0803 17.0042 55.3451 16.7255C55.6099 16.4467 56.0002 16.3213 56.488 16.3213C56.8782 16.3213 57.1709 16.4049 57.3939 16.5582C57.6169 16.7115 57.7841 16.9485 57.8817 17.283L57.0454 17.4641C57.0176 17.3666 56.9897 17.2969 56.9479 17.2551C56.8921 17.1854 56.8364 17.1297 56.7528 17.0878C56.6691 17.046 56.5855 17.0321 56.5019 17.0321C56.2928 17.0321 56.1256 17.1157 56.0141 17.2969C55.9305 17.4223 55.8887 17.6314 55.8887 17.8962C55.8887 18.2307 55.9444 18.4676 56.042 18.5931C56.1395 18.7185 56.2928 18.7882 56.474 18.7882C56.6552 18.7882 56.7946 18.7324 56.8782 18.6349C56.9897 18.5094 57.0594 18.3701 57.1012 18.1749Z" fill="#006A71"/>
<path d="M58.272 17.8955C58.272 17.3937 58.4113 17.0035 58.6901 16.7247C58.9688 16.446 59.3591 16.3066 59.8608 16.3066C60.3765 16.3066 60.7667 16.446 61.0455 16.7108C61.3242 16.9896 61.4636 17.3659 61.4636 17.8676C61.4636 18.23 61.4079 18.5227 61.2824 18.7457C61.157 18.9686 60.9897 19.1498 60.7528 19.2753C60.5298 19.4007 60.2371 19.4704 59.9026 19.4704C59.5542 19.4704 59.2755 19.4146 59.0385 19.3031C58.8155 19.1916 58.6343 19.0244 58.481 18.7735C58.3277 18.5227 58.272 18.2579 58.272 17.8955ZM59.2197 17.8955C59.2197 18.2021 59.2755 18.4251 59.387 18.5645C59.4985 18.7038 59.6518 18.7735 59.8608 18.7735C60.0699 18.7735 60.2232 18.7038 60.3347 18.5784C60.4462 18.439 60.5019 18.2021 60.5019 17.8676C60.5019 17.5749 60.4462 17.3659 60.3208 17.2404C60.2093 17.1011 60.042 17.0453 59.8469 17.0453C59.6518 17.0453 59.4985 17.115 59.387 17.2544C59.2755 17.3659 59.2197 17.5889 59.2197 17.8955Z" fill="#006A71"/>
<path d="M63.1916 16.3623L63.6655 18.2299L64.1394 16.3623H65.3798V19.4285H64.5993V17.087L64 19.4285H63.3031L62.7038 17.087V19.4285H61.9233V16.3623H63.1916Z" fill="#006A71"/>
<path d="M65.9932 16.3623H67.5681C67.9165 16.3623 68.1674 16.4459 68.3346 16.6132C68.5019 16.7804 68.5855 17.0034 68.5855 17.31C68.5855 17.6167 68.4879 17.8675 68.3068 18.0348C68.1256 18.216 67.8329 18.2996 67.4566 18.2996H66.9409V19.4424H65.9932V16.3623ZM66.9409 17.6724H67.1778C67.359 17.6724 67.4845 17.6445 67.5681 17.5748C67.6378 17.5052 67.6796 17.4355 67.6796 17.3379C67.6796 17.2404 67.6517 17.1567 67.582 17.087C67.5123 17.0174 67.4008 16.9895 67.2197 16.9895H66.9548V17.6724H66.9409Z" fill="#006A71"/>
<path d="M69.0872 16.3623H70.0349V18.6759H71.5123V19.4285H69.0872V16.3623Z" fill="#006A71"/>
<path d="M71.9863 16.3623H72.9341V19.4285H71.9863V16.3623Z" fill="#006A71"/>
<path d="M75.4985 18.9131H74.4253L74.272 19.4148H73.3103L74.4671 16.3486H75.4985L76.6553 19.4148H75.6657L75.4985 18.9131ZM75.3033 18.258L74.9688 17.157L74.6343 18.258H75.3033Z" fill="#006A71"/>
<path d="M76.9478 16.3623H77.8258L78.9826 18.0627V16.3623H79.8746V19.4285H78.9826L77.8397 17.7421V19.4285H76.9478V16.3623Z" fill="#006A71"/>
<path d="M80.293 16.3623H83.178V17.1149H82.2163V19.4285H81.2686V17.1149H80.3069V16.3623H80.293Z" fill="#006A71"/>
<path d="M54.843 4.69629H59.4005C60.3064 4.69629 61.0312 4.82173 61.5747 5.05866C62.1322 5.30953 62.5921 5.65796 62.9406 6.10396C63.3029 6.56389 63.5678 7.0935 63.7211 7.69281C63.8883 8.29211 63.9719 8.93322 63.9719 9.61615C63.9719 10.6754 63.8465 11.4977 63.6096 12.083C63.3726 12.6684 63.0381 13.1562 62.6061 13.5604C62.174 13.9506 61.7141 14.2155 61.2263 14.3548C60.5573 14.536 59.9441 14.6196 59.4005 14.6196H54.843V4.69629ZM57.9092 6.94019V12.3618H58.6618C59.3029 12.3618 59.7629 12.2921 60.0277 12.1527C60.2925 12.0134 60.5155 11.7625 60.6688 11.4141C60.8221 11.0656 60.9057 10.4803 60.9057 9.68583C60.9057 8.6266 60.7385 7.9158 60.3901 7.52556C60.0416 7.13531 59.4841 6.94019 58.6758 6.94019H57.9092Z" fill="#006A71"/>
<path d="M64.8223 11.3449L67.7491 11.1637C67.8188 11.6376 67.9442 12 68.1393 12.2508C68.4599 12.655 68.9059 12.8501 69.4913 12.8501C69.9233 12.8501 70.2717 12.7526 70.5087 12.5435C70.7456 12.3345 70.871 12.0975 70.871 11.8327C70.871 11.5818 70.7596 11.3449 70.5366 11.1358C70.3136 10.9268 69.7839 10.7456 68.9616 10.5644C67.6097 10.2578 66.662 9.8536 66.0766 9.35185C65.4913 8.85011 65.2125 8.209 65.2125 7.42851C65.2125 6.91283 65.3658 6.43896 65.6585 5.97903C65.9512 5.5191 66.3972 5.17067 66.9965 4.90586C67.5958 4.64105 68.4041 4.51562 69.4355 4.51562C70.7038 4.51562 71.6794 4.75256 72.3345 5.22643C73.0034 5.7003 73.3937 6.4529 73.5191 7.48426L70.6202 7.65152C70.5366 7.20551 70.3832 6.88496 70.1324 6.6759C69.8815 6.46684 69.547 6.36929 69.115 6.36929C68.7526 6.36929 68.4878 6.43897 68.3066 6.59228C68.1254 6.74559 68.0418 6.92677 68.0418 7.14977C68.0418 7.30308 68.1115 7.45639 68.2648 7.58182C68.4042 7.70726 68.7526 7.83269 69.2961 7.94419C70.6341 8.23687 71.5958 8.52957 72.1812 8.82225C72.7665 9.11492 73.1846 9.49123 73.4494 9.92329C73.7142 10.3554 73.8397 10.8571 73.8397 11.4007C73.8397 12.0418 73.6585 12.6271 73.3101 13.1568C72.9616 13.7003 72.4599 14.1045 71.8327 14.3832C71.2055 14.662 70.3972 14.8014 69.4355 14.8014C67.7491 14.8014 66.5784 14.4808 65.9233 13.8257C65.2822 13.1707 64.9198 12.3484 64.8223 11.3449Z" fill="#006A71"/>
<path d="M74.6204 11.3449L77.5472 11.1637C77.6169 11.6376 77.7423 12 77.9374 12.2508C78.258 12.655 78.704 12.8501 79.2894 12.8501C79.7214 12.8501 80.0698 12.7526 80.3068 12.5435C80.5437 12.3345 80.6691 12.0975 80.6691 11.8327C80.6691 11.5818 80.5576 11.3449 80.3346 11.1358C80.1117 10.9268 79.582 10.7456 78.7597 10.5644C77.4078 10.2578 76.4601 9.8536 75.8747 9.35185C75.3033 8.85011 75.0106 8.209 75.0106 7.42851C75.0106 6.91283 75.1639 6.43896 75.4566 5.97903C75.7493 5.5191 76.1953 5.17067 76.7946 4.90586C77.3939 4.64105 78.2022 4.51562 79.2336 4.51562C80.5019 4.51562 81.4775 4.75256 82.1326 5.22643C82.8015 5.7003 83.1918 6.4529 83.3172 7.48426L80.4183 7.65152C80.3346 7.20551 80.1813 6.88496 79.9305 6.6759C79.6796 6.46684 79.3451 6.36929 78.913 6.36929C78.5507 6.36929 78.2859 6.43897 78.1047 6.59228C77.9235 6.74559 77.8399 6.92677 77.8399 7.14977C77.8399 7.30308 77.9096 7.45639 78.0629 7.58182C78.2022 7.70726 78.5507 7.83269 79.0942 7.94419C80.4322 8.23687 81.3939 8.52957 81.9792 8.82225C82.5646 9.11492 82.9827 9.49123 83.2475 9.92329C83.5123 10.3554 83.6378 10.8571 83.6378 11.4007C83.6378 12.0418 83.4566 12.6271 83.1082 13.1568C82.7597 13.7003 82.258 14.1045 81.6308 14.3832C81.0036 14.662 80.1953 14.8014 79.2336 14.8014C77.5472 14.8014 76.3765 14.4808 75.7214 13.8257C75.0664 13.1707 74.704 12.3484 74.6204 11.3449Z" fill="#006A71"/>
<path d="M48.446 20.1675L45.7004 21.0317C46.2439 20.07 46.899 19.0108 47.554 18.1885L48.446 20.1675Z" fill="#006A71"/>
<path d="M12.334 12.6475V15.9785H13.6441C13.6441 15.9785 15.1075 15.9088 15.3305 14.5569C15.3584 14.529 15.3584 13.9576 15.3305 13.874C15.1911 12.7172 13.5047 12.6475 13.5047 12.6475H12.334Z" fill="#006A71"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.3868 0L44.7666 11.9861C44.155 12.8208 42.323 15.3513 40.5989 17.8309V9.87397H35.7208V20.5265C35.048 20.0708 34.34 19.7503 33.658 19.6354V19.1004C33.658 19.0586 33.6301 19.0446 33.6022 19.0725C33.6022 19.0725 33.0726 19.4906 30.759 19.7276C30.104 19.7972 29.7834 19.7694 29.5465 19.7276C26.2573 19.1701 26.104 16.7729 26.104 16.7729C26.104 16.7498 26.0998 16.7184 26.096 16.6901C26.0929 16.667 26.0901 16.646 26.0901 16.6335V15.7136C26.0901 15.6718 26.0901 15.6021 26.104 15.5742C26.104 15.5742 26.327 12.9959 29.5465 12.7171H30.759C32.1667 12.8983 33.3096 13.5952 33.3096 13.5952C33.3514 13.6091 33.3793 13.5952 33.3793 13.5533V10.3199C33.3793 10.2781 33.3514 10.2363 33.3096 10.2084C33.3096 10.2084 32.6684 9.79027 30.7172 9.67877C30.6197 9.62302 28.9054 9.60909 28.4455 9.67877C21.3374 10.2502 21.0726 15.3931 21.0726 15.6161V16.8704C21.0726 17.0237 21.0726 22.2781 28.4455 22.738C29.037 22.7835 30.0836 22.7547 30.5241 22.7426C30.6229 22.7399 30.6917 22.738 30.7172 22.738H30.7407C30.8959 23.6006 31.3224 24.5259 31.9164 25.3798L10.9129 32L0 2.22997L39.3868 0ZM41.1424 5.84609C41.1424 7.40707 39.8044 8.66143 38.1598 8.66143C36.5152 8.66143 35.1772 7.39313 35.1772 5.84609C35.1772 4.28512 36.5152 3.03076 38.1598 3.03076C39.8044 3.03076 41.1424 4.28512 41.1424 5.84609ZM7.59532 22.6544C7.55351 22.6544 7.52563 22.6265 7.52563 22.5847V9.94358C7.52563 9.90177 7.55351 9.87389 7.59532 9.87389H13.7556C15.3166 9.8042 20.0831 10.2363 20.0831 14.2641C20.0831 19.3512 12.4873 18.8077 12.4873 18.8077C12.4455 18.8077 12.4176 18.8356 12.4176 18.8774V22.5847C12.4176 22.6265 12.3897 22.6544 12.3479 22.6544H7.59532Z" fill="#006A71"/>
<path d="M38.2998 28.7805C38.69 28.7805 38.9966 28.7805 39.4984 28.5575C41.2266 27.6516 47.0663 13.3938 53.2266 9.00352C53.2684 8.97565 53.3102 8.93384 53.3381 8.89203C53.3799 8.83628 53.3799 8.78053 53.3799 8.78053C53.3799 8.78053 53.3799 8.48785 52.474 8.48785C46.9966 8.33454 41.2963 19.8328 38.2998 24.3763C38.258 24.4321 38.0628 24.3763 38.0628 24.3763C38.0628 24.3763 36.0559 22.007 34.3137 21.1011C34.2719 21.0871 34.0768 21.0175 33.8677 21.0314C33.7283 21.0314 32.92 21.1986 32.5437 21.5889C32.0977 22.0628 32.1116 22.3276 32.1116 22.899C32.1116 22.9408 32.1395 23.1359 32.1952 23.2335C32.6273 23.9861 34.5646 26.6621 36.1674 28.1394C36.4043 28.3206 36.7806 28.7805 38.2998 28.7805Z" fill="#29B44B"/>
</g>
<defs>
<clipPath id="clip0_1_1163">
<rect width="84" height="32" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 9.5 KiB

View File

@ -0,0 +1,3 @@
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.00008 0.666504H12.0001C14.6667 0.666504 16.8334 2.83317 16.8334 5.49984V12.4998C16.8334 13.7817 16.3242 15.0111 15.4178 15.9175C14.5113 16.8239 13.282 17.3332 12.0001 17.3332H5.00008C2.33342 17.3332 0.166748 15.1665 0.166748 12.4998V5.49984C0.166748 4.21796 0.675973 2.98858 1.5824 2.08215C2.48882 1.17573 3.7182 0.666504 5.00008 0.666504ZM4.83342 2.33317C4.03777 2.33317 3.2747 2.64924 2.71209 3.21185C2.14949 3.77446 1.83341 4.53752 1.83341 5.33317V12.6665C1.83341 14.3248 3.17508 15.6665 4.83342 15.6665H12.1667C12.9624 15.6665 13.7255 15.3504 14.2881 14.7878C14.8507 14.2252 15.1667 13.4622 15.1667 12.6665V5.33317C15.1667 3.67484 13.8251 2.33317 12.1667 2.33317H4.83342ZM12.8751 3.58317C13.1513 3.58317 13.4163 3.69292 13.6117 3.88827C13.807 4.08362 13.9167 4.34857 13.9167 4.62484C13.9167 4.9011 13.807 5.16606 13.6117 5.36141C13.4163 5.55676 13.1513 5.6665 12.8751 5.6665C12.5988 5.6665 12.3339 5.55676 12.1385 5.36141C11.9432 5.16606 11.8334 4.9011 11.8334 4.62484C11.8334 4.34857 11.9432 4.08362 12.1385 3.88827C12.3339 3.69292 12.5988 3.58317 12.8751 3.58317ZM8.50008 4.83317C9.60515 4.83317 10.665 5.27216 11.4464 6.05356C12.2278 6.83496 12.6667 7.89477 12.6667 8.99984C12.6667 10.1049 12.2278 11.1647 11.4464 11.9461C10.665 12.7275 9.60515 13.1665 8.50008 13.1665C7.39501 13.1665 6.33521 12.7275 5.5538 11.9461C4.7724 11.1647 4.33342 10.1049 4.33342 8.99984C4.33342 7.89477 4.7724 6.83496 5.5538 6.05356C6.33521 5.27216 7.39501 4.83317 8.50008 4.83317ZM8.50008 6.49984C7.83704 6.49984 7.20116 6.76323 6.73231 7.23207C6.26347 7.70091 6.00008 8.3368 6.00008 8.99984C6.00008 9.66288 6.26347 10.2988 6.73231 10.7676C7.20116 11.2364 7.83704 11.4998 8.50008 11.4998C9.16312 11.4998 9.79901 11.2364 10.2678 10.7676C10.7367 10.2988 11.0001 9.66288 11.0001 8.99984C11.0001 8.3368 10.7367 7.70091 10.2678 7.23207C9.79901 6.76323 9.16312 6.49984 8.50008 6.49984Z" fill="white" fill-opacity="0.25"/>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
<path d="M6.53329 4.16652C6.53306 4.60855 6.35726 5.03239 6.04454 5.34479C5.73182 5.6572 5.30781 5.83258 4.86578 5.83236C4.42376 5.83214 3.99992 5.65633 3.68752 5.34361C3.37511 5.0309 3.19973 4.60688 3.19995 4.16486C3.20017 3.72283 3.37598 3.29899 3.6887 2.98659C4.00141 2.67419 4.42542 2.4988 4.86745 2.49902C5.30948 2.49924 5.73331 2.67505 6.04572 2.98777C6.35812 3.30049 6.53351 3.7245 6.53329 4.16652ZM6.58329 7.06652H3.24995V17.4999H6.58329V7.06652ZM11.85 7.06652H8.53329V17.4999H11.8166V12.0249C11.8166 8.97486 15.7916 8.69152 15.7916 12.0249V17.4999H19.0833V10.8915C19.0833 5.74986 13.2 5.94152 11.8166 8.46652L11.85 7.06652Z" fill="white" fill-opacity="0.25"/>
</svg>

After

Width:  |  Height:  |  Size: 775 B

View File

@ -0,0 +1,35 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradiente principal verde-azul -->
<linearGradient id="lockGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#41FE95;stop-opacity:1" />
<stop offset="50%" style="stop-color:#2EE7A6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#207CE5;stop-opacity:1" />
</linearGradient>
<!-- Gradiente para a borda (mais escuro) -->
<linearGradient id="lockBorderGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#2DD284;stop-opacity:1" />
<stop offset="50%" style="stop-color:#1BC7A0;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1E6BC4;stop-opacity:1" />
</linearGradient>
<!-- Gradiente para o arco do cadeado -->
<linearGradient id="lockShackleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1BC7A0;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1E6BC4;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Corpo do cadeado com gradiente -->
<rect x="25" y="45" width="50" height="40" rx="5" fill="url(#lockGradient)" stroke="url(#lockBorderGradient)"
stroke-width="2" />
<!-- Arco do cadeado -->
<path d="M35 45V30C35 21.7157 41.7157 15 50 15C58.2843 15 65 21.7157 65 30V45" stroke="url(#lockShackleGradient)"
stroke-width="3" fill="none" />
<!-- Buraco da fechadura -->
<circle cx="50" cy="65" r="4" fill="white" />
<rect x="48" y="65" width="4" height="8" fill="white" />
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,18 @@
<svg width="130" height="29" viewBox="0 0 130 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.8577 15.9784C14.6525 16.1666 14.4289 16.3365 14.1826 16.4865C13.5343 16.8842 12.7898 17.0824 11.9505 17.0824C11.1324 17.0824 10.3992 16.8842 9.7524 16.4865C9.10415 16.0888 8.59319 15.5608 8.21811 14.9013C7.85577 14.2657 7.67035 13.575 7.65761 12.8334H7.65478V5.38699V0H2.81555V12.7555C2.81555 14.4597 3.21328 15.9826 4.00873 17.323C4.80418 18.6634 5.88837 19.7207 7.26413 20.4921C8.63848 21.2649 10.2011 21.6513 11.9505 21.6513C12.9852 21.6513 13.9533 21.5069 14.8577 21.2238V15.9784Z" fill="white"/>
<path d="M19.9601 8.10154C19.21 6.74984 18.1711 5.6982 16.842 4.94946C15.513 4.1993 13.973 3.82422 12.2236 3.82422C11.0856 3.82422 10.0255 4.062 9.04321 4.53192V9.50278C9.25835 9.30321 9.49331 9.12628 9.75233 8.97201C10.4006 8.5856 11.1323 8.39311 11.9504 8.39311C12.7912 8.39311 13.5357 8.58702 14.1825 8.97201C14.8308 9.35841 15.3361 9.88635 15.6998 10.5572C16.0537 11.2112 16.2348 11.9259 16.2433 12.6987H16.2447V20.6532C16.3764 20.5853 16.508 20.5174 16.6368 20.4409C18.0111 19.6342 19.0967 18.5556 19.8922 17.2025C20.6877 15.8508 21.0854 14.3689 21.0854 12.7539C21.0854 11.0045 20.7103 9.45324 19.9601 8.10154Z" fill="white"/>
<path d="M0.5 23.5986L3.14254 20.9561C5.34206 23.1556 8.38091 24.5172 11.7382 24.5172C15.0955 24.5172 18.1344 23.157 20.3339 20.9561L22.9764 23.5986C20.1004 26.4747 16.1274 28.2538 11.7382 28.2538C7.34909 28.2524 3.37466 26.4747 0.5 23.5986Z" fill="url(#paint0_linear_53_76)"/>
<path d="M38.9818 8.14272C38.1863 6.81367 37.0965 5.75778 35.7108 4.97507C34.3251 4.19094 32.7583 3.80029 31.0103 3.80029C29.2835 3.80029 27.7336 4.20368 26.3607 5.00904C24.9864 5.81581 23.8965 6.89434 23.0897 8.24463C22.283 9.59633 21.881 11.0782 21.881 12.6904C21.881 14.3252 22.2391 15.8198 22.9538 17.1701C23.6686 18.5218 24.6509 19.6003 25.9007 20.4057C27.1491 21.211 28.5914 21.6144 30.2276 21.6144C31.6359 21.6144 32.839 21.313 33.8382 20.7114C34.5176 20.3024 35.0951 19.7843 35.5763 19.1658V21.1714H40.1749V12.689C40.1735 10.9862 39.7758 9.47036 38.9818 8.14272ZM34.7738 14.9041C34.3987 15.5636 33.8878 16.0916 33.2409 16.4879C32.5941 16.8856 31.8496 17.0838 31.0103 17.0838C30.1922 17.0838 29.4604 16.8856 28.8136 16.4879C28.1667 16.0916 27.6558 15.5622 27.2807 14.9041C26.9056 14.2459 26.7188 13.5198 26.7188 12.7243C26.7188 11.9303 26.9056 11.2028 27.2807 10.5446C27.6558 9.88649 28.1667 9.35854 28.8136 8.96082C29.4604 8.56309 30.1936 8.36494 31.0103 8.36494C31.8496 8.36494 32.5941 8.56451 33.2409 8.96082C33.8878 9.35854 34.3987 9.88649 34.7738 10.5446C35.1489 11.2042 35.3357 11.9303 35.3357 12.7243C35.3357 13.5198 35.1489 14.2459 34.7738 14.9041Z" fill="white"/>
<path d="M48.3458 21.6497C46.5737 21.6497 45.0805 21.3256 43.8661 20.6788C42.6503 20.032 41.6906 19.0836 40.9872 17.8338L44.5639 15.824C44.9503 16.5048 45.4273 16.9988 45.9948 17.3059C46.5624 17.613 47.2659 17.7659 48.1066 17.7659C48.6289 17.7659 49.0776 17.7036 49.4526 17.5791C49.8277 17.4545 50.1221 17.2719 50.3387 17.0342C50.5538 16.7949 50.6628 16.5062 50.6628 16.1651C50.6628 15.7108 50.4349 15.3767 49.982 15.1602C49.5277 14.945 48.9544 14.7681 48.2623 14.6322C47.5688 14.4964 46.8257 14.3378 46.0316 14.1552C45.2362 13.9741 44.4875 13.7122 43.7826 13.3711C43.0777 13.03 42.5045 12.536 42.0629 11.8892C41.6199 11.2424 41.3991 10.3733 41.3991 9.28346C41.3991 8.26154 41.6765 7.34154 42.2341 6.52486C42.7904 5.70676 43.5802 5.05992 44.6021 4.58294C45.624 4.10595 46.8271 3.86816 48.2128 3.86816C49.4385 3.86816 50.4958 4.03801 51.3804 4.37912C52.2664 4.72023 53.0095 5.16325 53.6125 5.70818C54.214 6.2531 54.6854 6.85464 55.0265 7.51422L51.4498 9.52407C51.1992 8.91121 50.786 8.45687 50.2056 8.16105C49.6267 7.86665 48.9969 7.71803 48.3147 7.71803C47.9283 7.71803 47.5758 7.78031 47.2588 7.90486C46.9403 8.02942 46.6912 8.20068 46.5086 8.41582C46.326 8.63238 46.2355 8.88715 46.2355 9.18296C46.2355 9.63731 46.4563 9.98408 46.8993 10.2219C47.3423 10.4611 47.9155 10.6479 48.619 10.7838C49.3224 10.9197 50.0726 11.0796 50.868 11.2608C51.6621 11.4433 52.4066 11.7094 53.1001 12.0619C53.7922 12.4143 54.3655 12.9083 54.8198 13.5438C55.2742 14.1793 55.5006 15.02 55.5006 16.0646C55.5006 17.2012 55.1708 18.182 54.5127 19.0115C53.8531 19.8409 52.9798 20.4877 51.89 20.9534C50.7987 21.4162 49.6182 21.6497 48.3458 21.6497Z" fill="white"/>
<path d="M62.9584 21.6497C61.1863 21.6497 59.6931 21.3256 58.4786 20.6788C57.2628 20.032 56.3032 19.0836 55.5997 17.8338L59.1764 15.824C59.5628 16.5048 60.0398 16.9988 60.6074 17.3059C61.175 17.613 61.8784 17.7659 62.7192 17.7659C63.2414 17.7659 63.6901 17.7036 64.0652 17.5791C64.4403 17.4545 64.7347 17.2719 64.9512 17.0342C65.1664 16.7949 65.2754 16.5062 65.2754 16.1651C65.2754 15.7108 65.0475 15.3767 64.5946 15.1602C64.1402 14.945 63.567 14.7681 62.8749 14.6322C62.1813 14.4964 61.4382 14.3378 60.6442 14.1552C59.8487 13.9741 59.1 13.7122 58.3951 13.3711C57.6903 13.03 57.117 12.536 56.6754 11.8892C56.2324 11.2424 56.0116 10.3733 56.0116 9.28346C56.0116 8.26154 56.289 7.34154 56.8467 6.52486C57.4029 5.70676 58.1927 5.05992 59.2147 4.58294C60.2366 4.10595 61.4396 3.86816 62.8253 3.86816C64.051 3.86816 65.1083 4.03801 65.993 4.37912C66.8776 4.72023 67.6221 5.16325 68.225 5.70818C68.8266 6.2531 69.2979 6.85464 69.639 7.51422L66.0623 9.52407C65.8118 8.91121 65.3985 8.45687 64.8182 8.16105C64.2393 7.86665 63.6094 7.71803 62.9272 7.71803C62.5408 7.71803 62.1884 7.78031 61.8713 7.90486C61.5529 8.02942 61.3038 8.20068 61.1212 8.41582C60.9386 8.63238 60.848 8.88715 60.848 9.18296C60.848 9.63731 61.0688 9.98408 61.5118 10.2219C61.9548 10.4611 62.5281 10.6479 63.2315 10.7838C63.935 10.9197 64.6851 11.0796 65.4806 11.2608C66.2746 11.4433 67.0191 11.7094 67.7127 12.0619C68.4048 12.4143 68.978 12.9083 69.4324 13.5438C69.8867 14.1793 70.1132 15.02 70.1132 16.0646C70.1132 17.2012 69.7834 18.182 69.1252 19.0115C68.4657 19.8409 67.5924 20.4877 66.5025 20.9534C65.4112 21.4162 64.2294 21.6497 62.9584 21.6497Z" fill="white"/>
<path d="M74.6849 24.0912H73.5129V11.7631C73.5129 10.5034 73.8144 9.37111 74.4188 8.36901C75.0218 7.36691 75.8299 6.56722 76.8419 5.97275C77.854 5.37829 78.9806 5.08105 80.2233 5.08105C81.5184 5.08105 82.6635 5.37829 83.6585 5.97275C84.6521 6.56722 85.4419 7.37541 86.0278 8.39591C86.6138 9.4164 86.9068 10.5388 86.9068 11.7645C86.9068 12.9889 86.6138 14.1127 86.0278 15.1332C85.4419 16.1537 84.6478 16.9661 83.6443 17.5691C82.6408 18.172 81.5099 18.4749 80.2502 18.4749C79.0783 18.4749 78.0139 18.1862 77.0557 17.6101C76.0975 17.0341 75.3388 16.2697 74.7797 15.32C74.2206 14.3703 73.9404 13.3271 73.9404 12.192L74.6863 13.337V24.0912H74.6849ZM80.2233 17.3553C81.2523 17.3553 82.1851 17.102 83.0187 16.5967C83.8524 16.0914 84.519 15.4163 85.0158 14.5727C85.5126 13.7305 85.7618 12.7935 85.7618 11.7631C85.7618 10.7511 85.5126 9.82404 85.0158 8.98046C84.519 8.1383 83.8524 7.46316 83.0187 6.95645C82.1836 6.45116 81.2523 6.1978 80.2233 6.1978C79.1943 6.1978 78.2616 6.45116 77.4279 6.95645C76.5928 7.46175 75.9276 8.13689 75.4308 8.98046C74.934 9.82404 74.6849 10.7511 74.6849 11.7631C74.6849 12.7921 74.9326 13.7291 75.4308 14.5727C75.9276 15.4163 76.5928 16.09 77.4279 16.5967C78.2616 17.102 79.1929 17.3553 80.2233 17.3553Z" fill="white"/>
<path d="M94.3504 18.4466C93.1077 18.4466 91.9938 18.1451 91.0087 17.5407C90.0235 16.9378 89.238 16.1253 88.652 15.1048C88.0661 14.0843 87.7731 12.9704 87.7731 11.7631C87.7731 10.5388 88.0661 9.4206 88.652 8.40859C89.238 7.39659 90.0363 6.58981 91.0483 5.98544C92.0603 5.38248 93.1954 5.07959 94.4566 5.07959C95.6993 5.07959 96.8259 5.37682 97.8379 5.97129C98.8499 6.56575 99.6567 7.36545 100.261 8.36755C100.864 9.37106 101.167 10.502 101.167 11.7617V18.2045H100.076V13.1997L100.662 12.0278C100.662 13.2167 100.386 14.2995 99.8365 15.2761C99.2859 16.2527 98.5357 17.0241 97.5874 17.5931C96.6349 18.1621 95.5577 18.4466 94.3504 18.4466ZM94.4566 17.3553C95.4856 17.3553 96.4225 17.1019 97.2647 16.5966C98.1083 16.0913 98.7778 15.4162 99.2746 14.5726C99.7714 13.7305 100.02 12.7935 100.02 11.7631C100.02 10.7511 99.7714 9.81974 99.2746 8.96767C98.7778 8.11561 98.1069 7.44188 97.2647 6.94366C96.4211 6.44686 95.4856 6.19775 94.4566 6.19775C93.4276 6.19775 92.4948 6.44686 91.6612 6.94366C90.8261 7.44047 90.1608 8.11561 89.664 8.96767C89.1672 9.81974 88.9181 10.7511 88.9181 11.7631C88.9181 12.7921 89.1658 13.7291 89.664 14.5726C90.1608 15.4162 90.8261 16.0899 91.6612 16.5966C92.4948 17.1019 93.4276 17.3553 94.4566 17.3553Z" fill="white"/>
<path d="M108.8 24.3841C107.558 24.3841 106.4 24.1138 105.325 23.5717C104.251 23.0296 103.422 22.2441 102.836 21.2151L103.794 20.656C104.291 21.5081 104.983 22.1606 105.87 22.6135C106.758 23.0664 107.725 23.2929 108.772 23.2929C109.89 23.2929 110.879 23.031 111.74 22.5073C112.601 21.9836 113.276 21.2604 113.764 20.3375C114.252 19.4147 114.487 18.3404 114.469 17.1161V13.3894L115.001 12.3505C115.001 13.4148 114.735 14.4141 114.203 15.3454C113.671 16.2768 112.942 17.0269 112.019 17.5945C111.096 18.1635 110.03 18.4466 108.824 18.4466C107.6 18.4466 106.486 18.1451 105.483 17.5407C104.479 16.9378 103.685 16.1296 103.099 15.1176C102.513 14.1056 102.22 12.9789 102.22 11.7362C102.22 10.5289 102.513 9.41918 103.099 8.40859C103.685 7.398 104.483 6.58981 105.495 5.98544C106.507 5.38248 107.642 5.07959 108.904 5.07959C110.146 5.07959 111.273 5.37682 112.285 5.97129C113.297 6.56575 114.104 7.36545 114.708 8.36755C115.311 9.37106 115.614 10.502 115.614 11.7617V17.1925C115.614 18.6475 115.325 19.9129 114.749 20.9858C114.172 22.0601 113.369 22.8937 112.34 23.4882C111.313 24.0869 110.132 24.3841 108.8 24.3841ZM108.908 17.3284C109.937 17.3284 110.868 17.075 111.703 16.5697C112.537 16.0645 113.204 15.3851 113.7 14.533C114.197 13.6809 114.446 12.7496 114.446 11.7376C114.446 10.7256 114.197 9.79851 113.7 8.95493C113.204 8.11278 112.537 7.44188 111.703 6.94508C110.868 6.44827 109.937 6.19916 108.908 6.19916C107.896 6.19916 106.973 6.44827 106.139 6.94508C105.304 7.44188 104.639 8.11278 104.142 8.95493C103.645 9.79851 103.396 10.7256 103.396 11.7376C103.396 12.7496 103.644 13.6809 104.142 14.533C104.639 15.3851 105.304 16.0645 106.139 16.5697C106.973 17.075 107.896 17.3284 108.908 17.3284Z" fill="white"/>
<path d="M123.318 18.4466C122.075 18.4466 120.944 18.1451 119.924 17.5408C118.903 16.9378 118.095 16.1254 117.501 15.1049C116.906 14.0844 116.609 12.9705 116.609 11.7631C116.609 10.5034 116.906 9.37111 117.501 8.36901C118.095 7.36691 118.902 6.56722 119.924 5.97275C120.944 5.37829 122.075 5.08105 123.318 5.08105C124.613 5.08105 125.754 5.38253 126.739 5.98691C127.724 6.58986 128.514 7.39805 129.108 8.41006C129.703 9.42207 130 10.5402 130 11.7645C130 12.9719 129.703 14.0858 129.108 15.1063C128.514 16.1268 127.714 16.9392 126.712 17.5422C125.708 18.1451 124.578 18.4466 123.318 18.4466ZM123.318 17.3553C124.347 17.3553 125.278 17.102 126.113 16.5967C126.947 16.0914 127.614 15.4163 128.11 14.5727C128.607 13.7305 128.856 12.7935 128.856 11.7631C128.856 10.7511 128.607 9.81979 128.11 8.96773C127.614 8.11566 126.948 7.44193 126.113 6.94371C125.278 6.44691 124.347 6.1978 123.318 6.1978C122.289 6.1978 121.356 6.44691 120.522 6.94371C119.687 7.44052 119.018 8.11566 118.513 8.96773C118.007 9.81979 117.754 10.7511 117.754 11.7631C117.754 12.7921 118.007 13.7291 118.513 14.5727C119.018 15.4163 119.689 16.09 120.522 16.5967C121.356 17.102 122.287 17.3553 123.318 17.3553Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_53_76" x1="22.9746" y1="24.6045" x2="0.499377" y2="24.6045" gradientUnits="userSpaceOnUse">
<stop stop-color="#41FE95"/>
<stop offset="1" stop-color="#0000FF"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

3
src/lib/assets/none.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L11 11M1 11L11 1" stroke="white" stroke-opacity="0.38" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 242 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 184 KiB

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M13.8332 4.85C13.2637 4.19961 12.9498 3.3645 12.9499 2.5H10.3749V12.8333C10.3554 13.3927 10.1195 13.9226 9.71681 14.3112C9.31413 14.6999 8.77622 14.917 8.21655 14.9167C7.03322 14.9167 6.04989 13.95 6.04989 12.75C6.04989 11.3167 7.43322 10.2417 8.85822 10.6833V8.05C5.98322 7.66667 3.46655 9.9 3.46655 12.75C3.46655 15.525 5.76655 17.5 8.20822 17.5C10.8249 17.5 12.9499 15.375 12.9499 12.75V7.50833C13.9941 8.25821 15.2477 8.66054 16.5332 8.65833V6.08333C16.5332 6.08333 14.9666 6.15833 13.8332 4.85Z" fill="white" fill-opacity="0.25"/>
</svg>

After

Width:  |  Height:  |  Size: 651 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
<path d="M8.83341 12.5003L13.1584 10.0003L8.83341 7.50033V12.5003ZM18.4667 5.97533C18.5751 6.36699 18.6501 6.89199 18.7001 7.55866C18.7584 8.22533 18.7834 8.80033 18.7834 9.30033L18.8334 10.0003C18.8334 11.8253 18.7001 13.167 18.4667 14.0253C18.2584 14.7753 17.7751 15.2587 17.0251 15.467C16.6334 15.5753 15.9167 15.6503 14.8167 15.7003C13.7334 15.7587 12.7417 15.7837 11.8251 15.7837L10.5001 15.8337C7.00841 15.8337 4.83341 15.7003 3.97508 15.467C3.22508 15.2587 2.74175 14.7753 2.53341 14.0253C2.42508 13.6337 2.35008 13.1087 2.30008 12.442C2.24175 11.7753 2.21675 11.2003 2.21675 10.7003L2.16675 10.0003C2.16675 8.17533 2.30008 6.83366 2.53341 5.97533C2.74175 5.22533 3.22508 4.74199 3.97508 4.53366C4.36675 4.42533 5.08341 4.35033 6.18341 4.30033C7.26675 4.24199 8.25841 4.21699 9.17508 4.21699L10.5001 4.16699C13.9917 4.16699 16.1667 4.30033 17.0251 4.53366C17.7751 4.74199 18.2584 5.22533 18.4667 5.97533Z" fill="white" fill-opacity="0.25"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -9,6 +9,10 @@
Star,
CheckCircle
} from 'lucide-svelte';
import { goto } from '$app/navigation';
import checkIcon from '$lib/assets/check.svg';
import noneIcon from '$lib/assets/none.svg';
let mounted = false;
let visibleElements = {};
@ -33,6 +37,25 @@
return () => observer.disconnect();
});
const basspagoFeatures = [
'Suporte ágil e direto, sem depender de múltiplos intermediários',
'Integração rápida e simples via APIs prontas para uso',
'Controle centralizado com ferramentas intuitivas',
'Operação completa no mundo físico e digital com app de conta e PDV integrados',
'Crescimento flexível, sem exigência de volumetrias elevadas',
'Atualização constante com as últimas evoluções do Pix e do mercado'
];
const competitorFeatures = [
'SLA via tickets demorados e suporte fragmentado deixa a operação parada',
'Integrações complexas e demoradas exigem equipes especializadas',
'Processos internos frágeis, sem visibilidade e difíceis de operar',
'Sem suporte ao ponto de venda físico, soluções fragmentadas',
'Barreiras altas com requisitos de volume e custos iniciais',
'Atualizações lentas, deixando a operação defasada'
];
// Dados para seção CTA
const benefits = [
{ icon: Zap, title: 'Setup rápido', description: 'Ative em poucos minutos' },
{ icon: Shield, title: 'Segurança bancária', description: 'Padrões PCI DSS' },
@ -50,30 +73,78 @@
];
</script>
<section class="relative overflow-hidden bg-black py-32">
<div class="container-basspago relative z-10 text-center text-white">
<!-- Badge -->
<section class="compare-section">
<div class="compare-container">
<div
class="compare-text fade-up"
data-animate
id="cta-badge"
id="compare-text"
>
{#if mounted && visibleElements['cta-badge']}
<div
class="inline-flex items-center gap-2
rounded-full
bg-white/10
px-6 py-2
text-sm font-medium
mb-10"
in:fly={{ y: 20, duration: 400 }}
{#if mounted && visibleElements['compare-text']}
<h2
in:fly={{ y: 20, duration: 500 }}
>
<Star size={16} class="text-[var(--color-brand-emerald)]" />
Mais de 50.000 empresas confiam
</div>
Por que escolher a Bass Pago?
</h2>
<p
in:fly={{ y: 20, duration: 500, delay: 100 }}
>
Analise os diferenciais da Bass Pago frente a outras soluções de pagamento.
Dados e performance falam mais alto que promessas.
</p>
{/if}
</div>
<!-- Title -->
<div class="compare-table">
<div
class="compare-columns"
data-animate
id="compare-table"
>
{#if mounted && visibleElements['compare-table']}
<div
class="compare-column fade-up"
in:fly={{ y: 30, duration: 600, delay: 200 }}
>
<div class="compare-header">
<span><b>Bass Pago</b></span>
</div>
{#each basspagoFeatures as feature, index}
<div
class="item"
in:fly={{ x: -20, duration: 400, delay: 300 + index * 100 }}
>
<img src={checkIcon} alt="Check" />
{feature}
</div>
{/each}
</div>
<div
class="compare-column fade-up"
in:fly={{ y: 30, duration: 600, delay: 250 }}
>
<div class="compare-header">
<span>Outros provedores</span>
</div>
{#each competitorFeatures as feature, index}
<div
class="item"
in:fly={{ x: 20, duration: 400, delay: 300 + index * 100 }}
>
<img src={noneIcon} alt="None" />
{feature}
</div>
{/each}
</div>
{/if}
</div>
</div>
</div>
</section>
<section class="relative overflow-hidden bg-black py-32">
<div class="container-basspago relative z-10 text-center text-white">
<div
data-animate
id="cta-title"
@ -94,7 +165,6 @@
{/if}
</div>
<!-- Subtitle -->
<div
data-animate
id="cta-subtitle"
@ -107,8 +177,7 @@
mb-16"
in:fly={{ y: 20, duration: 500, delay: 100 }}
>
Uma infraestrutura completa de pagamentos para empresas que exigem performance,
segurança e escala.
Solução completa para pagamentos online, incluindo gateway, antifraude e gestão de risco.
</p>
{/if}
</div>
@ -144,7 +213,6 @@
{/if}
</div>
<!-- Buttons -->
<div
class="mb-20
flex flex-col sm:flex-row
@ -158,55 +226,117 @@
class="flex flex-col sm:flex-row gap-5"
in:fly={{ y: 20, duration: 500, delay: 300 }}
>
<button class="btn-primary group">
<button class="btn-primary group" on:click={() => goto('/precos#form-negociacao-basspago')}>
Criar conta grátis
<ArrowRight size={16} class="group-hover:translate-x-1 transition-transform" />
</button>
<button
class="inline-flex items-center justify-center
rounded-xl
border border-white/30
px-10 py-4
text-sm font-medium
text-white
transition-all duration-300
hover:bg-white/10
hover:border-white/50"
>
Falar com especialista
</button>
</div>
{/if}
</div>
<!-- Guarantees -->
<div
class="mx-auto max-w-4xl"
data-animate
id="cta-guarantees"
>
{#if mounted && visibleElements['cta-guarantees']}
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
in:fly={{ duration: 500, delay: 400 }}
>
{#each guarantees as item}
<div
class="flex items-center justify-center gap-2
text-sm text-white/75"
>
<CheckCircle size={16} class="text-[var(--color-brand-emerald)]" />
{item}
</div>
{/each}
</div>
{/if}
</div>
</div>
</section>
<style>
.compare-section {
background-color: #000;
color: white;
padding: 60px 20px;
position: relative;
}
.compare-container {
max-width: 1280px;
margin: auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
align-items: center;
}
.compare-text {
padding-right: 79px;
}
.compare-text h2 {
font-weight: 600;
font-size: clamp(2.4rem, 2.6vw, 2.6rem);
margin-bottom: 30px;
}
.compare-text p {
color: #ccc;
line-height: 1.6;
}
.compare-table {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.compare-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.compare-column {
display: flex;
flex-direction: column;
gap: 12px;
}
.compare-header {
font-weight: 400;
color: #aaa;
margin-bottom: 8px;
text-align: center;
}
.compare-header b {
color: #fff;
}
.item {
display: flex;
align-items: center;
gap: 10px;
background: #1f1f1f;
padding: 12px 16px;
border-radius: 8px;
color: white;
font-weight: 400;
min-height: 66px;
}
.item img {
width: 18px;
height: 18px;
flex-shrink: 0;
}
@media (max-width: 1024px) {
.compare-container {
grid-template-columns: 1fr;
}
.compare-text {
padding-right: 0;
text-align: center;
}
}
@media (max-width: 640px) {
.compare-columns {
grid-template-columns: 1fr;
}
}
/* Gradient text animation */
.text-gradient {
background: linear-gradient(

View File

@ -40,23 +40,18 @@
{
icon: Shield,
title: 'Segurança bancária',
description: 'Infraestrutura certificada PCI DSS com criptografia de ponta.'
description: 'Seguimos o padrão PCI-DSS,garantindo mais segurança.'
},
{
icon: Zap,
title: 'Pagamentos em tempo real',
description: 'PIX instantâneo e alta taxa de aprovação em cartões.'
description: 'Pix instantâneo e com baixa latência, processado em segundos.'
},
{
icon: BarChart3,
title: 'Relatórios e controle',
description: 'Dashboard completo para conciliação financeira.'
},
{
icon: Users,
title: 'Gestão de clientes',
description: 'Ferramentas para fidelização e crescimento de receita.'
},
{
icon: Clock,
title: 'Suporte especializado',
@ -65,18 +60,13 @@
{
icon: BadgeCheck,
title: 'Participante do Pix junto ao Banco Central',
description: 'Conexão direta com o sistema PIX, sem intermediários.'
description: 'Tranquilidade em saber que seus pagamentos estão em boas mãos.'
},
{
icon: ShieldCheck,
title: 'Prevenção de fraudes em tempo real',
description: 'Análise inteligente de transações com bloqueio automático.'
},
{
icon: DollarSign,
title: 'Baixo setup e mensalidade acessível',
description: 'Sem exigências de volumetria elevada para começar.'
}
];
const stats = [
@ -102,23 +92,22 @@
class="mb-6 text-4xl md:text-5xl font-black text-gray-900"
in:fly={{ y: 30, duration: 600, delay: 100 }}
>
Tecnologia pensada
Soluções financeiras
<br />
<span class="text-gradient">para escalar seu negócio</span>
<span class="text-gradient">para todos os segmentos</span>
</h2>
<p
class="text-xl text-gray-600 leading-relaxed"
in:fly={{ y: 30, duration: 600, delay: 200 }}
>
Uma plataforma completa de pagamentos para empresas que exigem segurança, desempenho e
confiabilidade.
Potencialize seu negócio agora com nossa infraestrutura exclusiva, feita para crescer junto com você.
</p>
{/if}
</div>
<!-- FEATURES GRID -->
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4 mb-20">
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 mb-20">
{#each features as feature, index}
<div
class="text-center group"

View File

@ -1,16 +1,16 @@
<script>
import { onMount } from 'svelte';
import { fly } from 'svelte/transition';
import {
Mail,
Phone,
MapPin,
Linkedin,
Shield,
Award
} from 'lucide-svelte';
import bassLogo from '$lib/assets/bass_assinatura02@2x (1).png';
import bassLogo from '$lib/assets/logo-basspago.svg';
import appleStore from '$lib/assets/apple-store.svg';
import googlePlay from '$lib/assets/google-play.svg';
import facebook from '$lib/assets/facebook.svg';
import instagram from '$lib/assets/instagram.svg';
import tiktok from '$lib/assets/tiktok.svg';
import linkedin from '$lib/assets/linkedin.svg';
import youtube from '$lib/assets/youtube.svg';
import pciDss from '$lib/assets/ic-pci-dss.svg';
let mounted = false;
let visibleElements = {};
@ -34,257 +34,524 @@
return () => observer.disconnect();
});
const sections = {
produtos: {
title: 'Produtos',
links: [
'Conta PJ',
'PDV',
'API PIX',
'Checkout',
'Link de Pagamento'
]
},
empresa: {
title: 'Empresa',
links: ['Sobre', 'Carreiras', 'Blog', 'Parceiros']
},
desenvolvedores: {
title: 'Desenvolvedores',
links: ['Documentação', 'API', 'SDKs', 'Webhooks']
},
suporte: {
title: 'Suporte',
links: ['Central de Ajuda', 'Contato', 'Status']
},
legal: {
title: 'Legal',
links: ['Termos', 'Privacidade', 'LGPD', 'Compliance']
}
};
</script>
<footer class="bg-slate-950 text-slate-400">
<div class="container-basspago py-20">
<!-- Top -->
<footer class="footer desktop">
<div class="footer-wrapper">
<div
class="grid gap-12 lg:grid-cols-6 border-b border-slate-800 pb-16"
class="footer-col left"
data-animate
id="footer-content"
id="footer-col-1"
>
{#if mounted && visibleElements['footer-content']}
<!-- Brand -->
<div class="lg:col-span-2" in:fly={{ y: 30, duration: 500 }}>
<div class="flex items-center mb-6">
<img src={bassLogo} alt="BassPago" class="h-20 w-auto" />
</div>
<p class="text-sm leading-relaxed max-w-sm mb-8">
Infraestrutura de pagamentos para empresas que exigem segurança, confiabilidade e
escala operacional.
{#if mounted && visibleElements['footer-col-1']}
<img
src={bassLogo}
alt="Bass Pago"
class="footer-logo"
in:fly={{ y: 30, duration: 500 }}
/>
<p
class="footer-desc"
in:fly={{ y: 30, duration: 500, delay: 100 }}
>
A Infraestrutura financeira<br /> que impulsiona o seu negócio.
</p>
<div class="space-y-3 text-sm">
<div class="flex items-center gap-3">
<Mail size={16} />
contato@empresa.com.br
</div>
<div class="flex items-center gap-3">
<Phone size={16} />
(11) 4000-0000
</div>
<div class="flex items-center gap-3">
<MapPin size={16} />
São Paulo SP
</div>
</div>
<div class="mt-6">
<a
href="#"
class="inline-flex h-10 w-10 items-center justify-center rounded-md bg-slate-800 hover:bg-slate-700 transition-colors duration-300"
aria-label="LinkedIn"
<div
class="app-buttons"
in:fly={{ y: 30, duration: 500, delay: 200 }}
>
<Linkedin size={18} />
<a href="https://apps.apple.com/br/app/bass-pago/id6499055719">
<img src={appleStore} alt="App Store" />
</a>
<a href="https://play.google.com/store/apps/details?id=com.basspago.app">
<img src={googlePlay} alt="Google Play" />
</a>
</div>
</div>
<!-- Links -->
{#each Object.values(sections) as section, index}
<div in:fly={{ y: 30, duration: 500, delay: (index + 1) * 100 }}>
<h4 class="mb-4 text-sm font-semibold text-white">
{section.title}
</h4>
<ul class="space-y-3 text-sm">
{#each section.links as link}
<li>
<a href="#" class="hover:text-white transition-colors duration-300">
{link}
</a>
</li>
{/each}
</ul>
</div>
{/each}
{/if}
</div>
<!-- Bottom -->
<div
class="pt-8 flex flex-col lg:flex-row items-center justify-between gap-6 text-sm"
class="footer-col center"
data-animate
id="footer-bottom"
id="footer-col-2"
>
{#if mounted && visibleElements['footer-bottom']}
<div class="text-center lg:text-left" in:fly={{ y: 20, duration: 400 }}>
© 2024 Nome da Plataforma · Todos os direitos reservados<br />
CNPJ 00.000.000/0001-00
</div>
{#if mounted && visibleElements['footer-col-2']}
<div
class="flex items-center gap-6"
in:fly={{ y: 20, duration: 400, delay: 100 }}
class="footer-menus"
in:fly={{ y: 30, duration: 500, delay: 100 }}
>
<div class="flex items-center gap-2">
<Shield size={16} class="text-emerald-400" />
PCI DSS
<div class="menu">
<h4>Explore</h4>
<a href="/">Home</a>
<a href="/conta-digital">Conta Digital</a>
<a href="/solucoes-banking">Soluções Banking</a>
<a href="/pix">Pix</a>
<a href="/adquirencia">Adquiriência</a>
<a href="/emissao-de-cartoes">Emissão de Cartões</a>
</div>
<div class="flex items-center gap-2">
<Award size={16} class="text-emerald-400" />
ISO 27001
<div class="menu">
<h4>Bass</h4>
<a href="/sobre">Sobre</a>
<a href="/politicas-e-termos">Política e Termos</a>
<a href="/precos">Preços</a>
<a href="/desenvolvedores">Desenvolva com Bass</a>
</div>
<div class="menu">
<h4>Atendimento</h4>
<a href="/centro-de-suporte">Centro de Suporte</a>
<br />
<h4>Ouvidoria</h4>
<a href="mailto:ouvidoria@basspago.com.br">ouvidoria@basspago.com.br</a>
</div>
<div
class="flex items-center gap-2"
in:fly={{ y: 20, duration: 400, delay: 200 }}
>
<span
class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-emerald-500 text-xs font-bold text-white"
>
BR
</span>
Brasil
</div>
{/if}
</div>
<div
class="footer-col right"
data-animate
id="footer-col-3"
>
{#if mounted && visibleElements['footer-col-3']}
<p
class="social-label"
in:fly={{ y: 30, duration: 500, delay: 150 }}
>
Siga-nos
</p>
<div
class="footer-socials"
in:fly={{ y: 30, duration: 500, delay: 200 }}
>
<a href="https://www.facebook.com/profile.php?id=61569768364698&mibextid=ZbWKwL">
<img src={facebook} alt="Facebook" />
</a>
<a href="https://www.instagram.com/basspago/">
<img src={instagram} alt="Instagram" />
</a>
<a href="https://www.tiktok.com/@basspago">
<img src={tiktok} alt="Tiktok" />
</a>
<a href="https://www.linkedin.com/company/bass-pago/">
<img src={linkedin} alt="Linkedin" />
</a>
<a href="https://www.youtube.com/@basspago">
<img src={youtube} alt="Youtube" />
</a>
</div>
<div
class="footer-cert"
in:fly={{ y: 30, duration: 500, delay: 250 }}
>
<img src={pciDss} alt="PCI-DSS" />
<p>Seguimos o padrão PCI-DSS, garantindo mais segurança nas suas transações.</p>
</div>
{/if}
</div>
</div>
<div class="footer-cnpj">
<p>
© 2025 Bass Pago Instituição de Pagamento é uma empresa de tecnologia e instituição de pagamento autorizada
pelo Banco Central do Brasil como participante indireta do Pix, sob o ISPB 37293930, inscrita sob o cnpj n*
37.293.930/0001-90.
</p>
</div>
</footer>
<footer class="footer mobile">
<div class="footer-wrapper">
<div
class="footer-col left"
data-animate
id="footer-mobile-col"
>
{#if mounted && visibleElements['footer-mobile-col']}
<img
src={bassLogo}
alt="Bass Pago"
class="footer-logo"
in:fly={{ y: 30, duration: 500 }}
/>
<p
class="footer-desc"
in:fly={{ y: 30, duration: 500, delay: 50 }}
>
A Infraestrutura financeira<br /> que impulsiona o seu negócio.
</p>
<div
class="app-buttons"
in:fly={{ y: 30, duration: 500, delay: 100 }}
>
<a href="https://apps.apple.com/br/app/bass-pago/id6499055719">
<img src={appleStore} alt="App Store" />
</a>
<a href="https://play.google.com/store/apps/details?id=com.basspago.app">
<img src={googlePlay} alt="Google Play" />
</a>
</div>
<div
class="social"
in:fly={{ y: 30, duration: 500, delay: 150 }}
>
<p class="social-label">Siga-nos</p>
<div class="footer-socials">
<a href="https://www.facebook.com/profile.php?id=61569768364698&mibextid=ZbWKwL">
<img src={facebook} alt="Facebook" />
</a>
<a href="https://www.instagram.com/basspago/">
<img src={instagram} alt="Instagram" />
</a>
<a href="https://www.tiktok.com/@basspago">
<img src={tiktok} alt="Tiktok" />
</a>
<a href="https://www.linkedin.com/company/bass-pago/">
<img src={linkedin} alt="Linkedin" />
</a>
<a href="https://www.youtube.com/@basspago">
<img src={youtube} alt="Youtube" />
</a>
</div>
</div>
<div
class="footer-col center"
in:fly={{ y: 30, duration: 500, delay: 200 }}
>
<div class="footer-menus">
<div class="menu">
<h4>Explore</h4>
<a href="/">Home</a>
<a href="/conta-digital">Conta Digital</a>
<a href="/solucoes-banking">Soluções Banking</a>
<a href="/pix">Pix</a>
<a href="/adquirencia">Adquiriência</a>
<a href="/emissao-de-cartoes">Emissão de Cartões</a>
</div>
<div class="menu">
<h4>Bass</h4>
<a href="/sobre">Sobre</a>
<a href="/politicas-e-termos">Política e Termos</a>
<a href="/precos">Preços</a>
<a href="/desenvolvedores">Desenvolva com Bass</a>
</div>
<div class="menu">
<h4>Atendimento</h4>
<a href="/centro-de-suporte">Centro de Suporte</a>
<br />
<h4>Ouvidoria</h4>
<a href="mailto:ouvidoria@basspago.com.br">ouvidoria@basspago.com.br</a>
</div>
</div>
<div class="footer-cert">
<img src={pciDss} alt="PCI-DSS" />
<p>Seguimos o padrão PCI-DSS, garantindo mais segurança nas suas transações.</p>
</div>
</div>
{/if}
</div>
</div>
<div class="footer-cnpj">
<p>
© 2025 Bass Pago Instituição de Pagamento é uma empresa de tecnologia e instituição de pagamento autorizada
pelo Banco Central do Brasil como participante indireta do Pix, sob o ISPB 37293930, sob o cnpj n:
37.293.930/0001-90.
</p>
</div>
</footer>
<style>
/* Link hover effects */
a {
position: relative;
transition: all 0.3s ease;
}
a:hover {
transform: translateX(2px);
}
/* Social media button hover effect */
.bg-slate-800:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Contact info hover effects */
.flex.items-center.gap-3:hover {
color: rgb(226 232 240); /* slate-200 */
transform: translateX(4px);
transition: all 0.3s ease;
}
/* Certification badges hover effect */
.text-emerald-400 {
transition: all 0.3s ease;
}
.flex.items-center.gap-2:hover .text-emerald-400 {
transform: rotate(10deg) scale(1.2);
filter: brightness(1.2);
}
/* Footer section title hover effect */
h4:hover {
color: rgb(226 232 240); /* slate-200 */
transition: color 0.3s ease;
}
/* Brand logo hover effect */
img:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
/* Country indicator hover effect */
.bg-emerald-500:hover {
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.lg\:grid-cols-6 {
grid-template-columns: 1fr;
}
.lg\:col-span-2 {
grid-column: span 1;
}
}
/* Subtle animation for the entire footer */
footer {
position: relative;
.cta-section {
background-color: #000;
padding: 60px 20px;
display: flex;
justify-content: center;
overflow: hidden;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: -100%;
.cta-box {
background: linear-gradient(135deg, #207ce5, #2ee7a6);
border-radius: 40px;
text-align: center;
padding: 60px 40px;
color: white;
max-width: 717px;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #06b6d4, transparent);
animation: shimmer 3s ease-in-out infinite;
fill: linear-gradient(234deg, #41FE95 -9.25%, #00F 138.52%);
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
.cta-box h2 {
font-weight: 500;
margin-bottom: 20px;
}
/* Link underline effect */
ul a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background-color: rgb(226 232 240); /* slate-200 */
transition: width 0.3s ease;
.cta-box p {
color: #e6e6e6;
margin-bottom: 30px;
line-height: 1.6;
}
ul a:hover::after {
/* Footer */
.footer {
max-width: 1280px;
margin: 0 auto;
color: white;
padding: 60px 40px;
}
.footer-wrapper {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr 200px;
gap: 60px;
}
.footer-col.left {
display: flex;
flex-direction: column;
gap: 40px;
}
.footer-logo {
width: 120px;
}
.footer-desc {
color: #ffffff75;
font-size: 14px;
}
.app-buttons {
display: flex;
gap: 10px;
}
.app-buttons img {
height: 36px;
}
.footer-cnpj {
color: #888;
margin: 20px auto;
border-top: 1px solid rgba(255, 255, 255, 0.10);
padding: 10px 0;
}
.footer-cnpj p {
font-size: 12px;
text-align: center;
color: #888;
margin: 0 auto;
max-width: 710px;
width: 100%;
}
.mobile .footer-cnpj p {
width: 100%;
text-align: left;
}
/* Coluna 2 - centro */
.footer-col.center {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.footer-menus {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.menu h4 {
font-size: 14px;
color: #444;
margin-bottom: 10px;
font-weight: 100;
}
.menu a {
display: block;
color: rgb(255 255 255 / 50%);
text-decoration: none;
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
}
.menu a:hover {
opacity: 0.8;
}
.footer-cert {
display: flex;
align-items: baseline;
gap: 32px;
margin-top: 30px;
justify-content: center;
color: #888;
font-size: 13px;
flex-direction: column;
}
.footer-cert p {
font-size: 13px;
}
.footer-cert img {
height: 36px;
}
/* Coluna 3 - direita */
.footer-col.right {
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-col.right h4 {
font-size: 14px;
color: #aaa;
margin-bottom: 4px;
}
.social-label {
font-size: 14px;
color: #aaa;
margin-top: 10px;
}
.footer-socials {
display: flex;
gap: 10px;
text-align: right;
}
.footer-socials img {
width: 20px;
height: 20px;
opacity: 0.8;
}
.footer-socials img:hover {
opacity: 1;
}
.mobile {
display: none;
}
.desktop {
display: block;
}
/* Link CTA */
.link-cta {
position: relative;
display: inline-block;
overflow: hidden;
background-color: #fff;
color: #111;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
font-size: 15px;
transition: color 0.3s ease, background-color 0.3s ease;
z-index: 1;
}
.link-cta::before {
content: "";
position: absolute;
right: -131px;
top: -64px;
width: 433px;
height: 166px;
border-radius: 150px;
background: linear-gradient(261deg, #41FE95 6.53%, #00F 123.97%);
transform: translateX(-100%);
transition: transform 0.9s ease;
z-index: 0;
}
.link-cta:hover::before {
transform: translateX(0%);
}
.link-cta:hover {
color: #fff;
}
.link-cta span {
position: relative;
z-index: 1;
}
/* Responsividade Mobile */
@media (max-width: 768px) {
.footer-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-menus {
grid-template-columns: 1fr;
gap: 30px;
}
.footer {
padding: 40px 20px;
}
.mobile {
display: block;
}
.desktop {
display: none;
}
.footer-socials {
justify-content: flex-start;
}
.footer-cert {
align-items: flex-start;
text-align: left;
}
}
@media (max-width: 480px) {
.cta-box {
padding: 40px 20px;
}
.cta-box h2 {
font-size: 1.5rem;
}
.footer-col.left {
gap: 30px;
}
.app-buttons {
flex-direction: column;
align-items: flex-start;
}
.footer-socials {
gap: 15px;
}
.footer-socials img {
width: 24px;
height: 24px;
}
}
</style>

View File

@ -30,7 +30,7 @@
href: '#solucoes',
hasDropdown: true,
submenu: [
{ name: 'Banking', href: '/banking' },
// { name: 'Banking', href: '/banking' },
{ name: 'PIX', href: '/pix' },
{ name: 'PDV', href: '/pdv' }
]
@ -103,12 +103,10 @@
? 'bg-slate-900/90 backdrop-blur-xl shadow-lg'
: 'bg-slate-900/70 backdrop-blur-md'}"
>
<!-- Logo -->
<div class="flex items-center gap-3 cursor-pointer" on:click={goHome}>
<img src={bassLogo} alt="BassPago" class="h-20 w-auto" />
</div>
<!-- Desktop Navigation - Centralizado -->
<nav class="hidden lg:flex items-center justify-center flex-1 gap-8">
{#each menuItems as item}
<div class="relative group">
@ -149,11 +147,10 @@
{/each}
</nav>
<!-- CTA Button - Direita -->
<div class="hidden lg:flex items-center">
<button
class="rounded-full bg-white px-6 py-2.5 text-sm font-semibold text-slate-900 hover:bg-slate-100 transition-colors"
on:click={() => goto('/precos')}
on:click={() => goto('/precos#form-negociacao-basspago')}
>
Abrir conta
</button>
@ -210,11 +207,10 @@
</div>
{/each}
<!-- Mobile CTA -->
<div class="border-t border-white/10 p-4">
<button
class="w-full rounded-full bg-white px-6 py-2.5 text-sm font-semibold text-slate-900 hover:bg-slate-100 transition-colors"
on:click={() => goto('/precos')}
on:click={() => goto('/precos#form-negociacao-basspago')}
>
Abrir conta
</button>

View File

@ -2,20 +2,62 @@
import { onMount } from 'svelte';
import { fly, fade } from 'svelte/transition';
import { ArrowRight } from 'lucide-svelte';
import { goto } from '$app/navigation';
import backgroundSection1 from '$lib/assets/backgroundSection2.png';
import logoCambionet from '$lib/assets/marca-cambionet.png';
import logoCazco from '$lib/assets/marca-cazco.png';
import logoCdl from '$lib/assets/marca-cdl.png';
import logoFecomercio from '$lib/assets/marca-fecomercio-rs.png';
import logoGramado from '$lib/assets/marca-gramado-sumit.png';
import logoHubsafe from '$lib/assets/marca-hubsafe.png';
import logoIcGloball from '$lib/assets/marca-ic-globall.png';
import logoIcSindi from '$lib/assets/marca-ic-sindi.png';
import logoJusfy from '$lib/assets/marca-jusfy.png';
import logoSesc from '$lib/assets/marca-sesc.png';
let mounted = false;
let heroSection;
let currentWordIndex = 0;
let isTransitioning = false;
const words = ['Escalar', 'Evoluir', 'Empresas'];
const logos = [
{ src: logoCambionet, alt: 'Cambionet' },
{ src: logoCazco, alt: 'Cazco' },
{ src: logoCdl, alt: 'CDL' },
{ src: logoFecomercio, alt: 'Fecomércio RS' },
{ src: logoGramado, alt: 'Gramado Summit' },
{ src: logoHubsafe, alt: 'Hubsafe' },
{ src: logoIcGloball, alt: 'IC Globall' },
{ src: logoIcSindi, alt: 'IC Sindi' },
{ src: logoJusfy, alt: 'Jusfy' },
{ src: logoSesc, alt: 'SESC' }
];
onMount(() => {
mounted = true;
const wordInterval = setInterval(() => {
isTransitioning = true;
setTimeout(() => {
currentWordIndex = (currentWordIndex + 1) % words.length;
isTransitioning = false;
}, 300);
}, 3000);
return () => {
clearInterval(wordInterval);
};
});
</script>
<section
bind:this={heroSection}
class="relative min-h-screen overflow-hidden bg-black flex items-center justify-center"
class="relative min-h-screen overflow-hidden bg-black flex flex-col items-center justify-center"
>
<img
src={backgroundSection1}
@ -42,8 +84,9 @@
/>
{/if}
<!-- Conteúdo Principal -->
<div
class="relative z-10 container-basspago pt-20 sm:pt-32 md:pt-40 pb-20 sm:pb-32 text-center max-w-5xl mx-auto px-4 sm:px-6"
class="relative z-10 container-basspago pt-20 sm:pt-32 md:pt-40 text-center max-w-5xl mx-auto px-4 sm:px-6 flex-1 flex flex-col justify-center"
>
{#if mounted}
<h1
@ -57,8 +100,17 @@
Infraestrutura de pagamento
<br />
flexível para{' '}
<span class="text-gradient" style="background-size: 300% 300%;">
expandir seus negócios
<span class="word-transition">
{#if !isTransitioning}
<span
class="text-gradient"
style="background-size: 300% 300%;"
in:fly={{ y: 30, duration: 400, delay: 100 }}
out:fly={{ y: -30, duration: 300 }}
>
{words[currentWordIndex]}
</span>
{/if}
</span>
</h1>
{/if}
@ -69,16 +121,15 @@
class="mx-auto max-w-3xl
text-base sm:text-lg md:text-xl
text-white/90
mb-8 sm:mb-12
mb-16 sm:mb-20
leading-relaxed"
in:fly={{ y: 20, duration: 800, delay: 150 }}
>
Construa, escale e personalize suas soluções financeiras com total segurança, tecnologia de
ponta e respaldo legal.
A melhor solução de pagamentos instantâneos, unindo confiança, segurança e
escalabilidade para crescer sem limites.
</p>
{/if}
<!-- CTAs -->
{#if mounted}
<div
class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center"
@ -86,6 +137,7 @@
>
<!-- Primary Button -->
<button
on:click={() => goto('/precos#form-negociacao-basspago')}
class="relative group
inline-flex items-center justify-center gap-3
rounded-2xl
@ -97,7 +149,7 @@
transition-all duration-300
hover:shadow-2xl hover:scale-105
w-full sm:w-auto"
>
>
<span
class="absolute inset-0
bg-gradient-to-r from-blue-600 to-emerald-400
@ -109,36 +161,41 @@
Abrir conta
<ArrowRight size={18} />
</span>
</button>
</button>
</div>
{/if}
</div>
<!-- Stats -->
{#if mounted}
<div
class="mt-16 sm:mt-20 grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-8 max-w-2xl mx-auto"
in:fly={{ y: 30, duration: 1000, delay: 500 }}
class="hero-logos-section relative z-10 w-full pb-12 sm:pb-16"
in:fly={{ y: 20, duration: 800, delay: 250 }}
>
<div class="text-center">
<div class="text-3xl sm:text-4xl font-black text-white mb-1 sm:mb-2">50k+</div>
<span class="text-white/70 text-xs sm:text-sm">Empresas ativas</span>
<div class="hero-logos-wrapper">
<div class="hero-logos-track">
<!-- Primeira sequência de logos -->
{#each logos as logo}
<img src={logo.src} alt={logo.alt} />
{/each}
<!-- Duplicação para loop infinito -->
{#each logos as logo}
<img src={logo.src} alt={logo.alt} />
{/each}
</div>
<div class="text-center">
<div class="text-3xl sm:text-4xl font-black text-gradient mb-1 sm:mb-2">R\$ 2bi+</div>
<span class="text-white/70 text-xs sm:text-sm">Processado/mês</span>
</div>
<div class="text-center">
<div class="text-3xl sm:text-4xl font-black text-white mb-1 sm:mb-2">99,9%</div>
<span class="text-white/70 text-xs sm:text-sm">Disponibilidade</span>
</div>
</div>
{/if}
</div>
</section>
<style>
/* Gradient animation personalizada */
.text-gradient {
background: linear-gradient(45deg, #3b82f6, #10b981, #3b82f6);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientMove 6s ease infinite;
}
@ -154,13 +211,95 @@
}
}
/* Container para as transições de palavras */
.word-transition {
display: inline-block;
position: relative;
min-width: 200px;
min-height: 1.2em;
text-align: left;
}
/* Seção dos logos - posicionada na parte inferior */
.hero-logos-section {
margin-top: auto;
}
/* Logos Parceiros - Wrapper */
.hero-logos-wrapper {
width: 100vw;
overflow: hidden;
margin: 0 auto;
padding: 20px 0;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/* Logos Parceiros - Track */
.hero-logos-track {
display: flex;
width: max-content;
gap: 40px;
align-items: center;
opacity: 0.6;
animation: scroll 20s linear infinite;
}
.hero-logos-track img {
height: 30px;
flex-shrink: 0;
filter: brightness(0) invert(1);
transition: opacity 0.3s ease;
}
.hero-logos-track img:hover {
opacity: 1;
}
/* Animação de scroll infinito */
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Floating animation já está definida no CSS global */
.floating-animation {
animation: floating 6s ease-in-out infinite;
}
/* Animação adicional para o botão */
button:hover .absolute {
transform: translateX(0);
/* Responsividade para logos */
@media (max-width: 768px) {
.hero-logos-track {
gap: 30px;
}
.hero-logos-track img {
height: 24px;
}
.hero-logos-wrapper {
padding: 15px 0;
}
}
@media (max-width: 480px) {
.hero-logos-track {
gap: 25px;
}
.hero-logos-track img {
height: 20px;
}
.hero-logos-wrapper {
padding: 12px 0;
}
}
</style>

View File

@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import { fly, fade } from 'svelte/transition';
import { UserPlus, Settings, Zap, TrendingUp, ArrowRight, CheckCircle } from 'lucide-svelte';
import { goto } from '$app/navigation';
let mounted = false;
let visibleElements = {};
@ -136,15 +137,13 @@
{#if mounted && visibleElements['howitworks-cta']}
<div in:fly={{ y: 24, duration: 500 }}>
<button
on:click={() => goto('/precos#form-negociacao-basspago')}
class="btn-primary px-14 py-4 text-base inline-flex items-center gap-2 group"
>
Criar conta grátis
<ArrowRight size={18} class="group-hover:translate-x-1 transition-transform" />
</button>
<p class="mt-4 text-sm text-gray-500">
Sem taxa de setup • Sem fidelidade • Suporte especializado
</p>
</div>
{/if}
</div>

View File

@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import { fly } from 'svelte/transition';
import { ArrowRight, CreditCard, Smartphone, BarChart3 } from 'lucide-svelte';
import { goto } from '$app/navigation';
let mounted = false;
let visibleElements = {};
@ -132,6 +133,7 @@
<!-- CTA Button -->
<button
on:click={() => goto('/precos#form-negociacao-basspago')}
class="inline-flex items-center gap-2 px-8 py-3 rounded-full font-semibold transition-all duration-300 group {solution.bordered
? 'bg-gray-900 text-white hover:bg-gray-800'
: 'bg-white text-black hover:bg-gray-100'} mt-auto"

View File

@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import { fly, fade } from 'svelte/transition';
import { CreditCard, Code, ArrowRight, Check, Zap, Building2 } from 'lucide-svelte';
import { goto } from '$app/navigation';
let mounted = false;
let visibleElements = {};
@ -32,29 +33,39 @@
title: 'PDV Completo',
subtitle: 'Venda presencial',
description:
'Sistema de ponto de venda completo para lojas físicas. Aceite PIX, cartões e controle seu negócio em tempo real.',
'Receba de forma rápida e segura no seu estabelecimento físico, com Pix integrado ao PDV.',
highlight: 'Mais vendido',
color: 'from-blue-500 to-cyan-500'
},
{
icon: Code,
title: 'Api pix',
subtitle: 'Para desenvolvedores',
description:
'API robusta para integrar pagamentos PIX em qualquer sistema. Documentação completa e suporte técnico especializado.',
highlight: 'Mais integrado',
color: 'from-green-500 to-emerald-500'
color: 'from-blue-500 to-cyan-500',
link: '/pdv'
},
{
icon: Building2,
title: 'Banking',
subtitle: 'Conta empresarial',
subtitle: 'Conta Digital',
description:
'Conta digital completa para empresas com PIX, TED, cartões corporativos e gestão financeira integrada.',
'Acompanhe recebimentos, pague fornecedores e controle tudo em um único ambiente.',
highlight: 'Sem mensalidade',
color: 'from-purple-500 to-pink-500'
color: 'from-blue-600 to-emerald-400',
link: '/conta-digital'
},
{
icon: Code,
title: 'APIs First',
subtitle: 'Para desenvolvedores',
description:
'APIs projetadas para eliminar complexidade e ganhar velocidade na integração',
highlight: 'Mais integrado',
color: 'from-green-500 to-emerald-500',
link: '/pix'
}
];
// Função para lidar com o clique no botão
function handleProductClick(product) {
if (product.link) {
goto(product.link);
}
}
</script>
<section id="produtos" class="section-padding bg-gray-50">
@ -79,8 +90,8 @@
class="text-xl text-gray-600 max-w-3xl mx-auto"
in:fly={{ y: 24, duration: 500, delay: 200 }}
>
Do PDV completo para sua loja física até a conta digital empresarial. Tudo que você
precisa para aceitar pagamentos e gerir suas finanças de forma simples e segura.
Uma conta, múltiplas formas de pagamento. Pix, boleto, links de
pagamento e PDV integrados à sua operação
</p>
{/if}
</div>
@ -130,7 +141,9 @@
class="mt-auto w-full bg-gray-900 text-white py-4 rounded-xl
font-semibold flex items-center justify-center gap-2
hover:bg-gray-800 transition-all duration-300
group"
group {product.link ? 'cursor-pointer' : 'cursor-default opacity-75'}"
on:click={() => handleProductClick(product)}
disabled={!product.link}
>
Saiba mais
<ArrowRight size={18} class="group-hover:translate-x-1 transition-transform" />
@ -161,4 +174,14 @@
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Estilo para botões desabilitados */
button:disabled {
opacity: 0.75;
cursor: not-allowed;
}
button:disabled:hover {
background-color: #111827; /* Mantém a cor original quando desabilitado */
}
</style>

View File

@ -45,11 +45,10 @@
>
{#if mounted && visibleElements['benefits-header']}
<h2 in:fly={{ y: 30, duration: 600 }}>
A estrutura ideal para pagamentos ágeis, seguros e escaláveis
A conta digital é só o começo.
</h2>
<p in:fly={{ y: 30, duration: 600, delay: 100 }}>
Torne sua empresa referência no mercado financeiro digital com <br />
uma experiência de pagamentos inovadora e eficiente
Monitoramento em tempo real, alta capacidade transacional e prevenção ativa a fraudes.
</p>
{/if}
</div>
@ -67,10 +66,9 @@
<div in:fly={{ y: 40, duration: 700, delay: 200 }}>
<video class="benefit-bg-video" src={video} autoplay loop muted playsinline></video>
<div class="benefit-text">
<h3>Embedded Finance</h3>
<h3>Alta Performance</h3>
<p>
Eleve a experiência do seu cliente e aumente a sua rentabilidade com soluções financeiras integradas ao
seu core business.
Infraestrutura preparada para grandes volumes e picos de transações, sem comprometer performance ou segurança.
</p>
</div>
</div>
@ -88,10 +86,9 @@
<div in:fly={{ y: 40, duration: 700, delay: 300 }}>
<img src={cubes} alt="Cria sua própria experiência" />
<div class="benefit-text">
<h3>Cria sua própria experiência</h3>
<h3>Dashboard Inteligênites</h3>
<p>
Nossas APIs foram projetadas para oferecer flexibilidade e desempenho, permitindo integrações rápidas
e seguras com o mínimo de esforço.
Dashboards inteligentes que consolidam dados em tempo real para controle operacional e tomada de decisão.
</p>
</div>
</div>
@ -109,8 +106,7 @@
<div class="benefit-text">
<h3>Prevenção a fraude</h3>
<p>
Garanta segurança de ponta a ponta no seu modelo de banking ou adquirência com tecnologias avançadas
de análise de transações.
Controles, antifraude e governança integrados à operação para reduzir riscos e assegurar conformidade.
</p>
</div>
</div>
@ -128,7 +124,6 @@
>
{#if mounted && visibleElements['payment-icon-1']}
<div in:fly={{ y: 30, duration: 500, delay: 500 }}>
<div class="icon-circle"><img src={pix} alt="Pix" /></div>
<span>Pix</span>
</div>
{/if}
@ -141,7 +136,6 @@
>
{#if mounted && visibleElements['payment-icon-2']}
<div in:fly={{ y: 30, duration: 500, delay: 600 }}>
<div class="icon-circle"><img src={pagamentos} alt="Banking" /></div>
<span>Banking</span>
</div>
{/if}
@ -154,7 +148,6 @@
>
{#if mounted && visibleElements['payment-icon-3']}
<div in:fly={{ y: 30, duration: 500, delay: 700 }}>
<div class="icon-circle"><img src={adquirencia} alt="Payments" /></div>
<span>PDV</span>
</div>
{/if}

View File

@ -0,0 +1,80 @@
// src/routes/api/negociacao/+server.js
import { google } from 'googleapis';
import { json } from '@sveltejs/kit';
// Configurar Gmail API
const gmail = google.gmail('v1');
const auth = new google.auth.GoogleAuth({
keyFile: './path/to/service-account-key.json', // ou use variáveis de ambiente
scopes: ['https://www.googleapis.com/auth/gmail.send']
});
export async function POST({ request }) {
try {
const formData = await request.json();
// Validação básica
const requiredFields = ['nome', 'celular', 'email', 'empresa', 'setor', 'funcionarios', 'faturamento'];
const errors = {};
for (const field of requiredFields) {
if (!formData[field] || formData[field].trim() === '') {
errors[field] = `${field} é obrigatório`;
}
}
if (Object.keys(errors).length > 0) {
return json({ success: false, errors }, { status: 400 });
}
// Montar o email
const emailContent = `From: noreply@seudominio.com
To: comercial@basspago.com.br
Subject: Nova Solicitação de Negociação - ${formData.empresa}
Content-Type: text/html; charset=utf-8
<h2>Nova Solicitação de Negociação - Bass Pago</h2>
<p><strong>Data:</strong> ${new Date().toLocaleString('pt-BR')}</p>
<h3>Dados do Cliente:</h3>
<ul>
<li><strong>Nome:</strong> ${formData.nome}</li>
<li><strong>Celular:</strong> ${formData.celular}</li>
<li><strong>E-mail:</strong> ${formData.email}</li>
<li><strong>Empresa:</strong> ${formData.empresa}</li>
<li><strong>Setor:</strong> ${formData.setor}</li>
<li><strong>Funcionários:</strong> ${formData.funcionarios}</li>
<li><strong>Faturamento Anual:</strong> ${formData.faturamento}</li>
</ul>
${formData.detalhes ? `
<h3>Detalhes Adicionais:</h3>
<p>${formData.detalhes}</p>
` : ''}`;
// Codificar em base64
const encodedMessage = Buffer.from(emailContent).toString('base64url');
// Enviar email
await gmail.users.messages.send({
auth,
userId: 'me',
requestBody: {
raw: encodedMessage
}
});
return json({
success: true,
message: 'Solicitação enviada com sucesso! Nossa equipe entrará em contato em breve.'
});
} catch (error) {
console.error('Erro ao enviar email:', error);
return json({
success: false,
message: 'Erro ao enviar solicitação. Tente novamente.'
}, { status: 500 });
}
}

View File

@ -78,8 +78,7 @@
</p>
<a
href="https://portal.basspago.com.br/abertura-de-conta"
class="link-cta white"
href="/precos#form-negociacao-basspago" class="link-cta"
>
<span>Abrir conta →</span>
</a>

View File

@ -16,7 +16,7 @@
title: 'SAC',
description: 'Dúvidas ou sugestões? Nossos especialistas estão prontos para atender você.',
schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
contact: 'suporte@basspago.com',
contact: 'Chat on-line',
href: 'mailto:suporte@basspago.com',
ariaLabel: 'Enviar email para suporte@basspago.com'
},
@ -24,15 +24,15 @@
title: 'Ouvidoria',
description: 'Não teve solução no atendimento? Registre sua reclamação ou denúncia aqui:',
schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
contact: 'Chat Online',
href: '#',
contact: 'ouvidoria@basspago.com',
href: 'mailto:ouvidoria@basspago.com',
ariaLabel: 'Chat Online Bass Pago'
},
{
title: 'Vendas',
description: 'Quer contratar nossos produtos e serviços? Fale com a gente.',
schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
contact: 'comercial@basspago.com',
contact: 'Chat on-line ou comercial@basspago.com',
href: 'mailto:comercial@basspago.com',
ariaLabel: 'Enviar email para comercial@basspago.com'
}
@ -73,28 +73,28 @@
const faqs = [
{
question: 'A conta Bass Pago é segura?',
answer: 'Sim, seguimos todas as normas regulatórias e usamos camadas avançadas de segurança para proteger suas transações e dados.'
question: 'Há outros canais de suporte seguros além destes?',
answer: 'Não. Todo o suporte da Bass Pago é feito exclusivamente pelo canais oficiais divuldagados nesta página.'
},
{
question: 'Como faço para abrir uma conta digital na Bass Pago?',
answer: 'O processo é simples e digital: você pode abrir sua conta através da nossa plataforma, com validação de documentos e aprovação rápida.'
question: 'Como a Bass Pago previne fraudes?',
answer: 'Nossas soluções possuem monitoramento em tempo real, controles antifraude e alertas automáticos, reduzindo riscos de transações suspeitas.'
},
{
question: 'A conta Bass Pago tem tarifas?',
answer: 'Temos planos competitivos e transparentes, com opções para diferentes volumes e necessidades de negócio.'
question: 'Como identificar tentativas de fraude ou falso atendente?',
answer: 'Desconfie de contatos que pedem dados confidenciais ou pressionam por decisões rápidas. Verifique sempre pelos canis oficiais antes de agir.'
},
{
question: 'Como funciona o suporte ao cliente da Bass Pago?',
answer: 'Oferecemos suporte on-line, com atendimento rápido para resolver dúvidas e problemas.'
question: 'Meus dados estão protegidos?',
answer: 'Sim. Todos os seus dados são criptografados e armazenados com padrões de segurança de nível bancário, garantindo proteção total contra acessos não autorizados.'
},
{
question: 'O que é Embedded Finance na Bass Pago?',
answer: 'É a integração de serviços financeiros na sua plataforma, por meio da nossa infraestrutura white label, que possibilita oferecer soluções sob sua marca com total controle.'
question: 'Alguém me ligou pedindo minha senha, é normal?',
answer: 'Não. A Bass Pago nunca solicita senhas, códigos ou dados sensíveis por telefone, e-mail ou WhatsApp. Sempre confirme pelo app oficial ou canais de suporte.'
},
{
question: 'Posso abrir uma conta com restrições financeiras?',
answer: 'Sim, você pode abrir sua conta digital na Bass Pago mesmo tendo restrições no Serasa ou SPC, pois isso não impede o cadastro e uso dos nossos serviços.'
question: 'Posso compartilhar minha senha com minha equipe?',
answer: 'Não. Cada usuário deve ter acesso individual. Compartilhar senhas coloca em risco a segurança de sua conta.'
}
];
@ -205,6 +205,28 @@
</div>
</section>
<!-- FAQ Section -->
<section class="faq-section">
<div class="faq-container">
<h2 class="faq-title fade-up">Perguntas frequentes</h2>
<div class="faq-list">
{#each faqs as faq, i}
<div class="faq-item fade-up" style="animation-delay: {i * 0.1}s;">
<button class="faq-question" on:click={() => toggleFaq(i)} aria-expanded={openFaq === i}>
{faq.question}
<span class="faq-icon" class:open={openFaq === i}>+</span>
</button>
{#if openFaq === i}
<div class="faq-answer">
<p>{faq.answer}</p>
</div>
{/if}
</div>
{/each}
</div>
</div>
</section>
<Footer />
<style>
@ -427,113 +449,26 @@
opacity: 0.8;
}
/* Security Section */
.security-section {
background-color: var(--color-white);
padding: 60px 40px;
display: flex;
align-items: center;
justify-content: center;
}
/* Security Container */
.security-container {
display: flex;
gap: 98px;
align-items: center;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}
/* Security Visual */
.security-visual {
flex-shrink: 0;
}
/* Security Phone Wrapper */
.security-phone-wrapper {
position: relative;
width: 497px;
height: 444px;
display: flex;
align-items: center;
justify-content: center;
}
/* Security Phone */
.security-phone {
object-fit: contain;
object-position: center;
width: 100%;
height: 100%;
}
/* Security Content */
.security-content {
display: flex;
flex-direction: column;
gap: 45px;
max-width: 613px;
}
/* Security Title */
.security-title {
font-family: var(--font-family-space-grotesk);
font-weight: 400;
line-height: 1.2;
color: var(--color-black);
letter-spacing: -0.4px;
margin: 0;
max-width: 519px;
font-size: clamp(1.7rem, 3vw, 2.4rem);
}
/* Security Description */
.security-description {
font-family: var(--font-family-space-grotesk);
font-weight: 400;
font-size: 20px;
line-height: 1.4;
color: rgba(0, 0, 0, 0.75);
letter-spacing: -0.2px;
margin: 0;
max-width: 540px;
}
.link-cta {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-black);
color: var(--color-white);
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.link-cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
/* FAQ Section */
.faq-section {
background-color: var(--color-white);
background-color: var(--color-dark);
padding: 80px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.faq-container {
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.faq-title {
font-family: var(--font-family-space-grotesk);
font-weight: 400;
color: var(--color-black);
color: var(--color-white);
text-align: center;
margin-bottom: 40px;
font-size: clamp(1.7rem, 3vw, 2.4rem);
@ -542,25 +477,26 @@
.faq-list {
display: flex;
flex-direction: column;
gap: 20px;
gap: 15px;
}
.faq-item {
border: 1px solid #e5e5e5;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.04);
border: none;
border-radius: var(--border-radius-md);
overflow: hidden;
}
.faq-question {
width: 100%;
padding: 20px;
padding: 20px 25px;
background: none;
border: none;
text-align: left;
font-family: var(--font-family-space-grotesk);
font-size: 16px;
font-weight: 500;
color: var(--color-black);
color: var(--color-white);
cursor: pointer;
display: flex;
justify-content: space-between;
@ -569,12 +505,16 @@
}
.faq-question:hover {
background-color: #f5f5f5;
background-color: rgba(255, 255, 255, 0.08);
}
.faq-icon {
font-size: 20px;
transition: transform 0.3s ease;
color: var(--color-primary);
font-weight: bold;
flex-shrink: 0;
margin-left: 10px;
}
.faq-icon.open {
@ -582,15 +522,16 @@
}
.faq-answer {
padding: 0 20px 20px;
animation: slideDown 0.3s ease-out;
padding: 0 25px 20px;
overflow: hidden;
animation: slideDown 0.3s ease-out forwards;
}
.faq-answer p {
font-family: var(--font-family-space-grotesk);
font-size: 14px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.75);
color: rgba(255, 255, 255, 0.75);
margin: 0;
}
@ -630,10 +571,12 @@
from {
opacity: 0;
max-height: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
max-height: 200px;
max-height: 300px;
transform: translateY(0);
}
}
@ -648,10 +591,6 @@
max-width: 1116px;
}
.security-section {
padding: 200px 40px;
}
.xs\:hidden {
display: block;
}
@ -691,20 +630,6 @@
.contact-card--social {
flex: 1 1 100%;
}
.security-container {
gap: 60px;
}
.security-phone-wrapper {
width: 400px;
height: 360px;
}
.security-description {
font-size: 18px;
letter-spacing: -0.18px;
}
}
/* Mobile */
@ -743,37 +668,6 @@
gap: 10px;
}
.security-section {
padding: 40px 20px;
}
.security-container {
flex-direction: column;
gap: 40px;
text-align: center;
}
.security-content {
align-items: center;
}
.security-phone-wrapper {
width: 100%;
max-width: 300px;
height: auto;
aspect-ratio: 497/444;
}
.security-title {
letter-spacing: -0.28px;
max-width: 100%;
}
.security-description {
letter-spacing: -0.16px;
max-width: 100%;
}
.mobile {
display: block;
}
@ -793,5 +687,17 @@
.lg\:hidden {
display: block;
}
/* FAQ specific mobile adjustments */
.faq-question {
padding: 15px 20px;
font-size: 15px;
}
.faq-answer {
padding: 0 20px 15px;
}
.faq-answer p {
font-size: 13px;
}
}
</style>

View File

@ -14,12 +14,12 @@
import gestaoUsuarios from '$lib/assets/gestao-de-usuarios.svg';
import iphonePixMockup from '$lib/assets/iphone-pix-mockup.png';
import check from '$lib/assets/check.svg';
import bankingInterfaceMockup from '$lib/assets/banking-interface-mockup.png';
import approvalFlowMockup from '$lib/assets/approval-flow-mockup.svg';
import bankingInterfaceMockup from '$lib/assets/banking-interface-mockup2.png';
import approvalFlowMockup from '$lib/assets/lock-icon.svg';
import paymentScheduleMockup from '$lib/assets/payment-schedule-mockup.svg';
const features = [
{ icon: pixETedAzul, label: 'Pix e Ted' },
{ icon: pixETedAzul, label: 'Pix' },
{ icon: pagamentosAzul, label: 'Pagamentos' },
{ icon: cobranca, label: 'Cobrança' },
{ icon: saldosExtratos, label: 'Saldos e\nExtratos' },
@ -82,9 +82,9 @@
<div class="conta-digital-hero__container">
<!-- Desktop Layout: Content first, then image -->
<div class="conta-digital-hero__content fade-up lg:flex xs:hidden">
<h1 class="conta-digital-hero__title">Você no controle do seu dinheiro</h1>
<h1 class="conta-digital-hero__title">Você no controle do <br />seu dinheiro</h1>
<p class="conta-digital-hero__subtitle">Fácil, rápido e sem complicações.</p>
<a href="https://portal.basspago.com.br/abertura-de-conta" class="link-cta">
<a href="/precos#form-negociacao-basspago" class="link-cta">
<span>Abrir conta →</span>
</a>
</div>
@ -92,13 +92,13 @@
<img src={phoneCard} alt="Celular com cartão" />
</div>
<div class="conta-digital-hero__content fade-up lg:hidden">
<h1 class="conta-digital-hero__title">Você no controle do seu dinheiro</h1>
<h1 class="conta-digital-hero__title">Você no controle do <br />seu dinheiro</h1>
<!-- Mobile Layout: Image first, then content -->
<div class="conta-digital-hero__image fade-up lg:hidden">
<img src={phoneCard} alt="Celular com cartão" />
</div>
<p class="conta-digital-hero__subtitle">Fácil, rápido e sem complicações.</p>
<a href="https://portal.basspago.com.br/abertura-de-conta" class="link-cta">
<a href="/precos#form-negociacao-basspago" class="link-cta">
<span>Abrir conta →</span>
</a>
</div>
@ -214,12 +214,12 @@
<!-- Main Banking Interface Section -->
<div class="conta-digital-account__main">
<div class="conta-digital-account__content fade-up">
<h2 class="conta-digital-account__title">Centralize tudo em um só lugar</h2>
<h2 class="conta-digital-account__title">Centralize tudo em <br />um só lugar</h2>
<div class="conta-digital-account__mockup fade-up lg:hidden">
<img src={bankingInterfaceMockup} alt="Interface de internet banking" />
</div>
<p class="conta-digital-account__subtitle">
Cobre por cartão, boleto ou Pix, receba na sua conta, pague fornecedores e gerencie o financeiro da sua empresa com facilidade.
Tenha toda a sua operação financeira centralizada em dashboards inteligentes. Receba por Pix ou boleto ou PDV e acompanhe cada movimentação com clareza e segurança.
</p>
</div>
<div class="conta-digital-account__mockup fade-up xs:hidden lg:flex">
@ -403,6 +403,7 @@
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
margin-top: 40px;
}
.link-cta:hover {
@ -680,6 +681,30 @@
width: 100%;
height: auto;
object-fit: contain;
/* Adicione estas propriedades para a sombra */
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
border-radius: 12px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.conta-digital-account__mockup img:hover {
transform: translateY(-5px);
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.2);
}
.conta-digital-account__mockup.fade-up img,
.conta-digital-account__mockup.lg\:hidden img,
.conta-digital-account__mockup.xs\:hidden img {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
border-radius: 12px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.conta-digital-account__mockup.fade-up img:hover,
.conta-digital-account__mockup.lg\:hidden img:hover,
.conta-digital-account__mockup.xs\:hidden img:hover {
transform: translateY(-5px);
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.2);
}
/* Feature Cards Section */
@ -747,6 +772,50 @@
object-fit: contain;
}
.conta-digital-account__feature-mockup img[src*="lock-icon"] {
width: 60px !important;
height: 60px !important;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
transition: transform 0.3s ease, filter 0.3s ease;
}
.conta-digital-account__feature-mockup img[src*="lock-icon"]:hover {
transform: scale(1.1);
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
}
.conta-digital-account__feature-card:nth-child(1) .conta-digital-account__feature-mockup {
right: 40px;
bottom: 40px;
}
/* Opcional: Adicionar uma animação sutil */
@keyframes lockPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.conta-digital-account__feature-mockup img[src*="lock-icon"] {
animation: lockPulse 3s ease-in-out infinite;
}
.conta-digital-account__feature-mockup img[src*="lock-icon"]:hover {
animation: none;
transform: scale(1.1);
}
/* Garantir que o cadeado apareça em desktop */
@media (min-width: 768px) {
.conta-digital-account__feature-mockup {
display: flex !important;
align-items: center;
justify-content: center;
right: 30px;
bottom: 30px;
max-width: 100px;
}
}
/* API Documentation Section */
.api-documentation {
background: #000;

View File

@ -29,24 +29,24 @@
const steps = [
{
step: 'Passo 1',
title: 'Comece a desenvolver',
description: 'Use nossa tecnologia e segurança para impulsionar sua aplicação.',
title: 'Solicite acesso',
description: 'Fale com nossos especialistas e solicite acesso a nossa apis e credenciais.',
link: '#embreve',
linkText: 'Comece aqui →'
},
{
step: 'Passo 2',
title: 'Modo de teste',
description: 'Explore a plataforma e simule transferências no sandbox.',
title: 'Integre rápido',
description: 'Conecte seu negócio às nossas APIs de forma rápida e sem complicações.',
link: '#embreve',
linkText: 'Solicite acesso →'
linkText: 'Comece a desenvolver →'
},
{
step: 'Passo 3',
title: 'Início rápido',
description: 'Obtenha suas chaves de API e mova dinheiro real.',
title: 'Go-live',
description: 'Pronto! Seu negócio já pode processar pagamentos com segurança.',
link: '#embreve',
linkText: 'Solicite credenciais →'
linkText: 'Produção →'
}
];
@ -67,18 +67,18 @@
image: case3
},
{
title: 'Para Fintechs',
description: 'Infraestrutura modular para escalar produtos financeiros com agilidade, segurança e conformidade, do Pix à emissão de cartões, tudo via API',
title: 'Para Satartups',
description: 'Soluções escaláveis que crescem junto com seu negócio. Receba, concilie e monitore transações sem precisar migrar de plataforma.',
image: case4
},
{
title: 'Para Construtoras',
description: 'Soluções financeiras robustas para quem precisa escalar com controle. Emita, concilie e aprove pagamentos com governança e eficiencia em toda a cadeia de obras.',
title: 'Para B2B',
description: 'Solução B2B completa que permite receber pagamentos e criar cobranças recorrentes de forma segura e ágil.',
image: case5
},
{
title: 'Ecossistema B2B',
description: 'Sistema White label sob sua marca. Leve serviços financeiros à sua rede com agilidade e escala. Conte com uma infraestrutura B2B white label, sob sua marca e controle.',
title: 'Para Sistemas corporativos',
description: 'Simplifique faturamento corporativo com pagamentos digitais, monitoramento de recebíveis e controle total de cada transação.',
image: case6
}
];
@ -86,7 +86,7 @@
const features = [
{
icon: pixCinza,
label: 'Pix'
label: 'Cobrança'
},
{
icon: pagamentosCinza,
@ -94,12 +94,8 @@
},
{
icon: adquirenciaCinza,
label: 'Adquirência'
label: 'Webhooks'
},
{
icon: cartoesCinza,
label: 'Cartões'
}
];
onMount(() => {
@ -134,7 +130,7 @@
<div class="container">
<div class="row">
<div class="content fade-up">
<h1>Construa com Bass Pago</h1>
<h1>Construa com <br />Bass Pago</h1>
<div class="mobile">
<div class="image fade-up">
@ -142,9 +138,9 @@
</div>
</div>
<p class="lead">Soluções integradas de pagamento e banking para atender diversos modelos de negócios.</p>
<p class="lead">Sua empresa pronta para crescer com uma integração descomplicada</p>
<a href="https://portal.basspago.com.br/abertura-de-conta" class="link-cta white">
<a href="/precos#form-negociacao-basspago" class="link-cta">
<span>Abrir conta →</span>
</a>
</div>
@ -202,8 +198,8 @@
<div class="dev-text-box">
<h2>Ferramentas para desenvolvedores</h2>
<p>
Nossas APIs foram projetadas para oferecer flexibilidade e desempenho,
permitindo integrações rápidas e seguras com o mínimo de esforço.
APIs desenhadas para acelerar seu time-to-market,
mantendo controle e segurança em cada transação.
</p>
<a href="https://devs.basspago.com.br/docs/quick-start/introduction" class="btn-ghost">
Referências de API
@ -242,22 +238,19 @@
</h2>
<p class="fade-up">
Conecte sua aplicação à nossa infraestrutura com poucos cliques, explore nosso sandbox completo
e acelere seu tempo de desenvolvimento com APIs pensadas para quem constrói.
Personalize suas cobranças: restrinja ao mesmo CPF, bloqueie
CNPJs ou crie regras de recebimento sob medida.
</p>
<div class="integration-benefits">
<span class="fade-up">Integração simples</span>
<span class="fade-up">Documentação clara</span>
<span class="fade-up">Autonomia para testar</span>
<span class="fade-up">Time to market ágil</span>
</div>
<div class="integration-buttons fade-up">
<a href="centro-de-suporte" class="link-cta white">
<span>Solicite a documentação →</span>
</a>
<a href="centro-de-suporte" class="link-cta">
<span>Documentação</span>
<span>Acesse a documentação →</span>
</a>
</div>
</div>
@ -346,7 +339,7 @@
}
.build-with .image {
width: 535px;
width: 365px;
height: 394px;
flex-shrink: 0;
min-width: 280px;
@ -512,7 +505,7 @@
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.8);
z-index: 1;
}

View File

@ -13,18 +13,22 @@
Wifi,
Users,
BarChart3,
Bell,
Zap,
Smartphone
} from 'lucide-svelte';
import Header from '$lib/components/Header.svelte';
import Footer from '$lib/components/Footer.svelte';
import backgroundPDV from '$lib/assets/backgroundPDV.png';
import appleStore from '$lib/assets/apple-store.svg';
import googlePlay from '$lib/assets/google-play.svg';
import phoneCard from '$lib/assets/phone-card.png';
import iphonePixMockup from '$lib/assets/iphone-pix-mockup.png';
import bankingInterfaceMockup from '$lib/assets/banking-interface-mockup.png';
import cubesPlus from '$lib/assets/cubes-plus.svg';
let mounted = false;
let visibleElements = {};
let activeFeature = 'pagamentos';
@ -32,41 +36,33 @@
const pdvFeatures = [
{
icon: CreditCard,
title: 'Múltiplas formas de pagamento',
description: 'Aceite cartões, PIX, dinheiro e carteiras digitais em um só lugar.'
title: 'Pagamento Seguro',
description: 'Receba com segurança e veja a confirmação na hora.'
},
{
icon: Wifi,
title: 'Funciona online e offline',
description: 'Continue vendendo mesmo sem internet. Sincronização automática.'
title: 'Link de pagamento',
description: 'Gere links de cobrança para envio por WhatsApp.'
},
{
icon: BarChart3,
title: 'Relatórios em tempo real',
description: 'Acompanhe suas vendas, estoque e performance em dashboards intuitivos.'
title: 'Crie Operadores',
description: 'Toda a equipe cobra, você controla tudo na palma da mão.'
},
{
icon: Users,
title: 'Gestão de equipe',
description: 'Controle de usuários, permissões e comissões por vendedor.'
}
];
const benefits = [
{
icon: '💰',
title: 'Aumente suas vendas',
description: 'Aceite todos os tipos de pagamento e não perca nenhuma venda por falta de opção.'
title: 'Extratos Inteligentes',
description: 'Visualize extratos por operador, loja ou período.'
},
{
icon: '⚡',
title: 'Agilidade no atendimento',
description: 'Interface intuitiva que acelera o processo de venda e melhora a experiência do cliente.'
icon: Bell,
title: 'Notificações',
description: 'Receba notificações em tempo real (sem precisar de comprovante).'
},
{
icon: '📊',
title: 'Controle total do negócio',
description: 'Tenha visão completa das suas vendas, estoque e performance em tempo real.'
icon: Zap,
title: 'Smart',
description: 'Aplicativo leve, intuitivo e pronto para o seu dia a dia.'
}
];
@ -98,7 +94,6 @@
integracao: {
title: 'Integração Simples',
description: 'Conecte facilmente com seus sistemas existentes através de APIs robustas.',
image: cubesPlus,
items: [
'APIs RESTful completas',
'Webhooks em tempo real',
@ -209,7 +204,7 @@
<section class="pdv-hero">
<div class="pdv-hero__container">
<div class="pdv-hero__content fade-up">
<h1>Sistema de PDV completo para o seu negócio</h1>
<h1>Sistema de PDV integrado a conta</h1>
<div class="mobile">
<div class="pdv-hero__visual fade-up">
@ -220,10 +215,10 @@
</div>
<p class="pdv-hero__subtitle">
Aceite todos os tipos de pagamento, gerencie vendas e controle seu negócio em uma plataforma integrada.
Diga adeus às maquininhas. Receba pagamentos de forma rápida e segura, direto pelo aplicativo.
</p>
<a href="https://portal.basspago.com.br/abertura-de-conta" class="cta-btn">
<a href="/precos#form-negociacao-basspago" class="cta-btn">
Começar agora <ArrowRight size={16} class="icon" />
</a>
</div>
@ -240,9 +235,9 @@
<section class="pdv-features-section">
<div class="pdv-features__container">
<div class="section-header">
<h2 class="fade-up">Tudo que você precisa em um só lugar</h2>
<h2 class="fade-up">Toda a operação na palma da sua mão</h2>
<p class="fade-up">
Nossa solução de PDV oferece todas as ferramentas necessárias para otimizar suas vendas e gerenciar seu negócio com eficiência.
Gerencie múltiplos usuários e acompanhe cada cobrança com segurança, agilidade e total visibilidade.
</p>
</div>
@ -290,8 +285,25 @@
</button>
</div>
<div class="pdv-detailed__content">
<div class="pdv-detailed__text fade-up">
<div class="pdv-detailed__content {activeFeature === 'integracao' ? 'integracao-layout' : ''}">
<div class="pdv-detailed__text fade-up {activeFeature === 'integracao' ? 'integracao-background' : ''}">
{#if activeFeature === 'integracao'}
<!-- Layout especial para integração -->
<div class="integracao-header">
<h3>{detailedFeatures[activeFeature].title}</h3>
<p>{detailedFeatures[activeFeature].description}</p>
</div>
<div class="integracao-apps">
<a href="https://apps.apple.com/br/app/bass-pago/id6499055719" class="app-button">
<img src={appleStore} alt="App Store" />
</a>
<a href="https://play.google.com/store/apps/details?id=com.basspago.app" class="app-button">
<img src={googlePlay} alt="Google Play" />
</a>
</div>
{:else}
<!-- Layout normal para outras abas -->
<h3>{detailedFeatures[activeFeature].title}</h3>
<p>{detailedFeatures[activeFeature].description}</p>
@ -303,11 +315,14 @@
</li>
{/each}
</ul>
{/if}
</div>
{#if detailedFeatures[activeFeature].image}
<div class="pdv-detailed__image fade-up">
<img src={detailedFeatures[activeFeature].image} alt={detailedFeatures[activeFeature].title} />
</div>
{/if}
</div>
</div>
</section>
@ -496,58 +511,6 @@
margin: 0;
}
/* Benefits Section */
.pdv-benefits-section {
background: #000;
padding: 80px 20px;
color: white;
}
.pdv-benefits__container {
max-width: 1200px;
margin: 0 auto;
}
.pdv-benefits__header {
text-align: center;
margin-bottom: 60px;
}
.pdv-benefits__header h2 {
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 400;
margin: 0;
}
.pdv-benefits__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}
.pdv-benefit-card {
text-align: center;
padding: 40px 20px;
}
.pdv-benefit-card__icon {
font-size: 3rem; /* Tamanho para emojis */
margin-bottom: 20px;
display: block; /* Garante que o emoji fique centralizado */
}
.pdv-benefit-card__content h3 {
font-size: 1.3rem;
font-weight: 500;
margin-bottom: 15px;
}
.pdv-benefit-card__content p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin: 0;
}
/* Detailed Features Section */
.pdv-detailed-features {
background: #fff;
@ -653,168 +616,98 @@
border-radius: 20px;
}
/* Implementation Steps Section */
.pdv-implementation {
background: #000;
padding: 80px 20px;
color: white;
}
.pdv-implementation__container {
max-width: 1200px;
margin: 0 auto;
}
.pdv-implementation__header {
text-align: center;
margin-bottom: 60px;
}
.pdv-implementation__header h2 {
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 400;
margin-bottom: 20px;
}
.highlight {
color: #41FE95;
}
.pdv-implementation__header p {
color: rgba(255, 255, 255, 0.8);
font-size: 1.1rem;
}
.pdv-implementation__steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 60px;
}
.pdv-step {
text-align: center;
/* Estilo específico para a aba integração */
.pdv-detailed__text.integracao-background {
background-image: url('/src/lib/assets/backgroundPDV.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 60px 40px;
border-radius: 20px;
position: relative;
}
.pdv-step__number {
position: absolute;
top: -10px;
right: -10px;
background: #41FE95;
color: #000;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.9rem;
}
.pdv-step__icon {
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: #41FE95;
}
.pdv-step h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 15px;
}
.pdv-step p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
margin: 0;
}
.pdv-implementation__cta {
text-align: center;
}
/* FAQ Section */
.pdv-faq-section {
background: #f9f9f9;
padding: 80px 20px;
}
.pdv-faq__container {
max-width: 800px;
margin: 0 auto;
}
.pdv-faq__header {
text-align: center;
margin-bottom: 50px;
}
.pdv-faq__header h2 {
color: #111;
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 400;
margin: 0;
}
.pdv-faq__list {
min-height: 750px; /* Reduzi a altura mínima */
display: flex;
flex-direction: column;
gap: 20px;
justify-content: flex-start; /* Mudei para flex-start */
text-align: center;
}
.pdv-faq-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
/* Overlay para melhorar legibilidade do texto */
.pdv-detailed__text.integracao-background::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
border-radius: 20px;
z-index: 1;
}
.pdv-faq-question {
width: 100%;
padding: 25px;
background: none;
border: none;
text-align: left;
font-size: 1.1rem;
font-weight: 500;
color: #111;
cursor: pointer;
/* Garantir que o conteúdo fique acima do overlay */
.pdv-detailed__text.integracao-background > * {
position: relative;
z-index: 2;
}
/* Header da integração (título e descrição no topo) */
.integracao-header {
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
transition: background 0.2s;
text-align: center;
margin-bottom: 30px; /* Reduzi o espaçamento */
}
.pdv-faq-question:hover {
background: #f8f9fa;
.integracao-header h3 {
color: white;
font-size: 2.5rem;
font-weight: 500;
margin-bottom: 20px;
max-width: 600px;
}
.faq-icon {
transition: transform 0.3s ease;
flex-shrink: 0;
margin-left: 15px;
}
.faq-icon.rotate-180 {
transform: rotate(180deg);
}
.pdv-faq-answer {
padding: 0 25px 25px;
color: #666;
.integracao-header p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.3rem;
line-height: 1.6;
margin: 0;
max-width: 700px;
}
.pdv-faq-answer p {
margin: 0;
/* Botões dos apps mais próximos da descrição */
.integracao-apps {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 0; /* Removi o margin-top: auto */
padding-top: 20px; /* Reduzi o padding-top */
}
.app-button {
display: block;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.app-button:hover {
transform: translateY(-3px);
opacity: 0.9;
}
.app-button img {
height: 50px;
width: auto;
}
/* Ajustar o layout quando for integração para ocupar toda a largura */
.pdv-detailed__content.integracao-layout {
display: block;
}
.pdv-detailed__content.integracao-layout .pdv-detailed__text.integracao-background {
width: 100%;
max-width: none;
}
/* Utility Classes */
@ -834,8 +727,7 @@
/* Responsive Styles */
@media (max-width: 1024px) {
.pdv-hero__container,
.pdv-mobile__container {
.pdv-hero__container {
flex-direction: column;
gap: 50px;
}
@ -875,11 +767,6 @@
padding: 25px;
}
.pdv-benefits__grid {
grid-template-columns: 1fr;
gap: 30px;
}
.pdv-detailed__tabs {
flex-direction: column;
align-items: center;
@ -889,9 +776,34 @@
width: 200px;
}
.pdv-implementation__steps {
grid-template-columns: 1fr;
gap: 30px;
.pdv-detailed__text.integracao-background {
padding: 40px 20px;
min-height: 350px; /* Reduzi para mobile */
}
.integracao-header {
margin-bottom: 25px; /* Menos espaço no mobile */
}
.integracao-header h3 {
font-size: 2rem;
color: white;
}
.integracao-header p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
}
.integracao-apps {
flex-direction: column;
align-items: center;
gap: 15px;
padding-top: 15px; /* Menos espaço no mobile */
}
.app-button img {
height: 45px;
}
}
@ -900,8 +812,7 @@
padding: 80px 15px 40px;
}
.pdv-feature-card,
.pdv-faq-question {
.pdv-feature-card {
padding: 20px;
}
@ -911,11 +822,35 @@
}
.section-header,
.pdv-benefits__header,
.pdv-detailed__header,
.pdv-implementation__header,
.pdv-faq__header {
.pdv-detailed__header {
margin-bottom: 40px;
}
.pdv-detailed__text.integracao-background {
padding: 30px 15px;
min-height: 300px; /* Ainda menor para mobile pequeno */
}
.integracao-header {
margin-bottom: 20px; /* Ainda menos espaço */
}
.integracao-header h3 {
font-size: 1.8rem;
color: white;
}
.integracao-header p {
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
}
.integracao-apps {
padding-top: 10px; /* Mínimo espaço no mobile pequeno */
}
.app-button img {
height: 40px;
}
}
</style>

View File

@ -195,7 +195,7 @@ func main ( ) {
<p class="subtitle">Tecnologia que garante velocidade, segurança e escala nos seus pagamentos.</p>
<a href="https://portal.basspago.com.br/abertura-de-conta" class="cta-btn">
<a href="/precos#form-negociacao-basspago" class="link-cta">
Abrir conta <ArrowRight size={16} class="icon" />
</a>
</div>
@ -315,11 +315,21 @@ func main ( ) {
<div class="pix-card fade-up">
<div class="pix-card__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="27" viewBox="0 0 26 27" fill="none">
<path d="M3.25391 11.5185C3.25391 10.8731 3.36147 10.2277 3.50489 9.61816C3.61246 9.15204 3.75588 8.72178 3.93515 8.29152C4.07857 7.93297 4.25785 7.61027 4.43712 7.28758C5.08252 6.10436 5.97889 5.13627 7.01869 4.34746C8.77559 3.05668 10.9627 2.37543 13.1858 2.51885C14.0463 2.55471 14.9068 2.73398 15.7315 3.05668C15.839 3.09253 15.9825 3.12839 16.09 3.2001C16.4844 3.37937 16.8788 3.55865 17.2732 3.77378" stroke="#0000FF" stroke-width="0.717102" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M22.9476 14.5C22.9476 15.2171 22.8401 15.9342 22.6608 16.6155C22.5532 17.0457 22.4098 17.476 22.2305 17.9062C21.4776 19.7348 20.2226 21.2049 18.6809 22.2088C16.2069 23.8223 13.0158 24.2167 10.0757 23.0335C9.7171 22.8901 9.3227 22.7108 9 22.4957" stroke="#0000FF" stroke-width="0.717102" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M21.623 15.8266L22.9497 14.5L24.1329 15.8266" stroke="#0000FF" stroke-width="0.717102" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.50986 10.2635L3.18322 11.5543L2 10.2635" stroke="#0000FF" stroke-width="0.717102" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7 13.5H11M13 7.5V10.8333M19 13.5H15C14.0573 13.5 13.586 13.5 13.2933 13.7933C13 14.0853 13 14.5567 13 15.5M13 17.3467V19.192M15 15.5V16.5C15 17.464 15.5227 17.5 16.3333 17.5C16.5101 17.5 16.6797 17.5702 16.8047 17.6953C16.9298 17.8203 17 17.9899 17 18.1667M15.6667 19.5H15M17 15.5C17.9427 15.5 18.414 15.5 18.7067 15.7933C18.9993 16.0867 19 16.5587 19 17.5027C19 18.4467 19 18.9193 18.7067 19.2127C18.4933 19.426 18.1847 19.4847 17.6667 19.5M7 9.5C7 8.55733 7 8.086 7.29333 7.79333C7.58533 7.5 8.05667 7.5 9 7.5C9.94333 7.5 10.414 7.5 10.7067 7.79333C11 8.08533 11 8.55667 11 9.5C11 10.4433 11 10.914 10.7067 11.2067C10.4147 11.5 9.94333 11.5 9 11.5C8.05667 11.5 7.586 11.5 7.29333 11.2067C7 10.9147 7 10.4433 7 9.5ZM7 17.5C7 16.5573 7 16.086 7.29333 15.7933C7.58533 15.5 8.05667 15.5 9 15.5C9.94333 15.5 10.414 15.5 10.7067 15.7933C11 16.0853 11 16.5567 11 17.5C11 18.4433 11 18.914 10.7067 19.2067C10.4147 19.5 9.94333 19.5 9 19.5C8.05667 19.5 7.586 19.5 7.29333 19.2067C7 18.9147 7 18.4433 7 17.5ZM15 9.5C15 8.55733 15 8.086 15.2933 7.79333C15.5853 7.5 16.0567 7.5 17 7.5C17.9433 7.5 18.414 7.5 18.7067 7.79333C19 8.08533 19 8.55667 19 9.5C19 10.4433 19 10.914 18.7067 11.2067C18.4147 11.5 17.9433 11.5 17 11.5C16.0567 11.5 15.586 11.5 15.2933 11.2067C15 10.9147 15 10.4433 15 9.5Z" stroke="#0000FF" stroke-width="0.72" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M3.25391 11.5185C3.25391 10.8731 3.36147 10.2277 3.50489 9.61816C3.61246 9.15204 3.75588 8.72178 3.93515 8.29152C4.07857 7.93297 4.25785 7.61027 4.43712 7.28758C5.08252 6.10436 5.97889 5.13627 7.01869 4.34746C8.77559 3.05668 10.9627 2.37543 13.1858 2.51885C14.0463 2.55471 14.9068 2.73398 15.7315 3.05668C15.839 3.09253 15.9825 3.12839 16.09 3.2001C16.4844 3.37937 16.8788 3.55865 17.2732 3.77378"
stroke="#0000FF" stroke-width="0.717102" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M22.9476 14.5C22.9476 15.2171 22.8401 15.9342 22.6608 16.6155C22.5532 17.0457 22.4098 17.476 22.2305 17.9062C21.4776 19.7348 20.2226 21.2049 18.6809 22.2088C16.2069 23.8223 13.0158 24.2167 10.0757 23.0335C9.7171 22.8901 9.3227 22.7108 9 22.4957"
stroke="#0000FF" stroke-width="0.717102" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M21.623 15.8266L22.9497 14.5L24.1329 15.8266" stroke="#0000FF" stroke-width="0.717102"
stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.50986 10.2635L3.18322 11.5543L2 10.2635" stroke="#0000FF" stroke-width="0.717102"
stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M7 13.5H11M13 7.5V10.8333M19 13.5H15C14.0573 13.5 13.586 13.5 13.2933 13.7933C13 14.0853 13 14.5567 13 15.5M13 17.3467V19.192M15 15.5V16.5C15 17.464 15.5227 17.5 16.3333 17.5C16.5101 17.5 16.6797 17.5702 16.8047 17.6953C16.9298 17.8203 17 17.9899 17 18.1667M15.6667 19.5H15M17 15.5C17.9427 15.5 18.414 15.5 18.7067 15.7933C18.9993 16.0867 19 16.5587 19 17.5027C19 18.4467 19 18.9193 18.7067 19.2127C18.4933 19.426 18.1847 19.4847 17.6667 19.5M7 9.5C7 8.55733 7 8.086 7.29333 7.79333C7.58533 7.5 8.05667 7.5 9 7.5C9.94333 7.5 10.414 7.5 10.7067 7.79333C11 8.08533 11 8.55667 11 9.5C11 10.4433 11 10.914 10.7067 11.2067C10.4147 11.5 9.94333 11.5 9 11.5C8.05667 11.5 7.586 11.5 7.29333 11.2067C7 10.9147 7 10.4433 7 9.5ZM7 17.5C7 16.5573 7 16.086 7.29333 15.7933C7.58533 15.5 8.05667 15.5 9 15.5C9.94333 15.5 10.414 15.5 10.7067 15.7933C11 16.0853 11 16.5567 11 17.5C11 18.4433 11 18.914 10.7067 19.2067C10.4147 19.5 9.94333 19.5 9 19.5C8.05667 19.5 7.586 19.5 7.29333 19.2067C7 18.9147 7 18.4433 7 17.5ZM15 9.5C15 8.55733 15 8.086 15.2933 7.79333C15.5853 7.5 16.0567 7.5 17 7.5C17.9433 7.5 18.414 7.5 18.7067 7.79333C19 8.08533 19 8.55667 19 9.5C19 10.4433 19 10.914 18.7067 11.2067C18.4147 11.5 17.9433 11.5 17 11.5C16.0567 11.5 15.586 11.5 15.2933 11.2067C15 10.9147 15 10.4433 15 9.5Z"
stroke="#0000FF" stroke-width="0.72" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div>
@ -331,7 +341,9 @@ func main ( ) {
<div class="pix-card fade-up">
<div class="pix-card__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="27" viewBox="0 0 26 27" fill="none">
<path d="M5 13.5H10.3333M13 5.5V9.94444M21 13.5H15.6667C14.4098 13.5 13.7813 13.5 13.3911 13.8911C13 14.2804 13 14.9089 13 16.1667M13 18.6289V21.0893M15.6667 16.1667V17.5C15.6667 18.7853 16.3636 18.8333 17.4444 18.8333C17.6802 18.8333 17.9063 18.927 18.073 19.0937C18.2397 19.2604 18.3333 19.4865 18.3333 19.7222M16.5556 21.5H15.6667M18.3333 16.1667C19.5902 16.1667 20.2187 16.1667 20.6089 16.5578C20.9991 16.9489 21 17.5782 21 18.8369C21 20.0956 21 20.7258 20.6089 21.1169C20.3244 21.4013 19.9129 21.4796 19.2222 21.5M5 8.16667C5 6.90978 5 6.28133 5.39111 5.89111C5.78044 5.5 6.40889 5.5 7.66667 5.5C8.92444 5.5 9.552 5.5 9.94222 5.89111C10.3333 6.28044 10.3333 6.90889 10.3333 8.16667C10.3333 9.42444 10.3333 10.052 9.94222 10.4422C9.55289 10.8333 8.92444 10.8333 7.66667 10.8333C6.40889 10.8333 5.78133 10.8333 5.39111 10.4422C5 10.0529 5 9.42444 5 8.16667ZM5 18.8333C5 17.5764 5 16.948 5.39111 16.5578C5.78044 16.1667 6.40889 16.1667 7.66667 16.1667C8.92444 16.1667 9.552 16.1667 9.94222 16.5578C10.3333 16.9471 10.3333 17.5756 10.3333 18.8333C10.3333 20.0911 10.3333 20.7187 9.94222 21.1089C9.55289 21.5 8.92444 21.5 7.66667 21.5C6.40889 21.5 5.78133 21.5 5.39111 21.1089C5 20.7196 5 20.0911 5 18.8333ZM15.6667 8.16667C15.6667 6.90978 15.6667 6.28133 16.0578 5.89111C16.4471 5.5 17.0756 5.5 18.3333 5.5C19.5911 5.5 20.2187 5.5 20.6089 5.89111C21 6.28044 21 6.90889 21 8.16667C21 9.42444 21 10.052 20.6089 10.4422C20.2196 10.8333 19.5911 10.8333 18.3333 10.8333C17.0756 10.8333 16.448 10.8333 16.0578 10.4422C15.6667 10.0529 15.6667 9.42444 15.6667 8.16667Z" stroke="#0000FF" stroke-width="0.72" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M5 13.5H10.3333M13 5.5V9.94444M21 13.5H15.6667C14.4098 13.5 13.7813 13.5 13.3911 13.8911C13 14.2804 13 14.9089 13 16.1667M13 18.6289V21.0893M15.6667 16.1667V17.5C15.6667 18.7853 16.3636 18.8333 17.4444 18.8333C17.6802 18.8333 17.9063 18.927 18.073 19.0937C18.2397 19.2604 18.3333 19.4865 18.3333 19.7222M16.5556 21.5H15.6667M18.3333 16.1667C19.5902 16.1667 20.2187 16.1667 20.6089 16.5578C20.9991 16.9489 21 17.5782 21 18.8369C21 20.0956 21 20.7258 20.6089 21.1169C20.3244 21.4013 19.9129 21.4796 19.2222 21.5M5 8.16667C5 6.90978 5 6.28133 5.39111 5.89111C5.78044 5.5 6.40889 5.5 7.66667 5.5C8.92444 5.5 9.552 5.5 9.94222 5.89111C10.3333 6.28044 10.3333 6.90889 10.3333 8.16667C10.3333 9.42444 10.3333 10.052 9.94222 10.4422C9.55289 10.8333 8.92444 10.8333 7.66667 10.8333C6.40889 10.8333 5.78133 10.8333 5.39111 10.4422C5 10.0529 5 9.42444 5 8.16667ZM5 18.8333C5 17.5764 5 16.948 5.39111 16.5578C5.78044 16.1667 6.40889 16.1667 7.66667 16.1667C8.92444 16.1667 9.552 16.1667 9.94222 16.5578C10.3333 16.9471 10.3333 17.5756 10.3333 18.8333C10.3333 20.0911 10.3333 20.7187 9.94222 21.1089C9.55289 21.5 8.92444 21.5 7.66667 21.5C6.40889 21.5 5.78133 21.5 5.39111 21.1089C5 20.7196 5 20.0911 5 18.8333ZM15.6667 8.16667C15.6667 6.90978 15.6667 6.28133 16.0578 5.89111C16.4471 5.5 17.0756 5.5 18.3333 5.5C19.5911 5.5 20.2187 5.5 20.6089 5.89111C21 6.28044 21 6.90889 21 8.16667C21 9.42444 21 10.052 20.6089 10.4422C20.2196 10.8333 19.5911 10.8333 18.3333 10.8333C17.0756 10.8333 16.448 10.8333 16.0578 10.4422C15.6667 10.0529 15.6667 9.42444 15.6667 8.16667Z"
stroke="#0000FF" stroke-width="0.72" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div>
@ -342,12 +354,7 @@ func main ( ) {
</div>
<div class="pix-automatico__visual fade-up">
<div class="pix-visual-bg">
<div class="pix-visual-qr">
<QrCode size={64} />
</div>
<div class="pix-visual-footer">PIX AUTOMÁTICO</div>
</div>
<img src={qrcodeBlue} alt="qrcode" />
</div>
</div>
</section>
@ -445,16 +452,13 @@ func main ( ) {
{#if mounted && visibleElements['howitworks-cta']}
<div in:fly={{ y: 24, duration: 500 }}>
<a
href="https://portal.basspago.com.br/abertura-de-conta"
href="/precos#form-negociacao-basspago"
class="cta-btn-white px-14 py-4 text-base inline-flex items-center gap-2 group"
>
Criar conta grátis
<ArrowRight size={18} class="group-hover:translate-x-1 transition-transform" />
</a>
<p class="mt-4 text-sm text-white/60">
Sem taxa de setup • Sem fidelidade • Suporte especializado
</p>
</div>
{/if}
</div>
@ -593,12 +597,13 @@ func main ( ) {
left: 50%;
width: 132px;
height: 160px;
transform: translate(-50%, -54%);
transform: translate(-50%, -50%); /* Mudança aqui: de -54% para -50% */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; /* Adicione esta linha */
pointer-events: none;
}
}
.qr-bg {
width: 94px;
@ -608,9 +613,9 @@ func main ( ) {
margin-bottom: 10px;
opacity: .88;
position: relative;
}
}
.qr-code {
.qr-code {
width: 84px;
height: 84px;
background: #fff;
@ -619,14 +624,14 @@ func main ( ) {
align-items: center;
justify-content: center;
position: absolute;
top: 6px;
top: 50%;
left: 50%;
transform: translateX(-50%);
transform: translate(-50%, -50%);
box-shadow: 0 3px 14px #0001;
}
}
.qr-footer {
margin-top: 104px;
.qr-footer {
margin-top: 0;
background: #ececec;
border-radius: 17px;
font-size: 0.7em;
@ -635,7 +640,7 @@ func main ( ) {
font-weight: 400;
letter-spacing: .04em;
box-shadow: 0 1px 6px #0001;
}
}
.pix-instant__features {
max-width: 1240px;
@ -724,65 +729,78 @@ func main ( ) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
}
text-align: center;
}
.pix-automatico__logo img {
height: 32px;
.pix-automatico__logo {
margin-bottom: 4px;
}
align-self: center;
}
.pix-automatico__qr {
width: 170px;
.pix-automatico__logo img {
height: 32px;
display: block;
}
.pix-automatico__qr {
width: 100%;
max-width: none;
height: 170px;
background: #eee;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
margin: 0;
align-self: stretch;
}
.pix-automatico__qr img {
width: 100%;
height: 100%;
.pix-automatico__qr img {
width: 170px;
height: 170px;
object-fit: contain;
}
}
.pix-automatico__qr-card h3 {
.pix-automatico__qr-card h3 {
font-size: 1.24rem;
font-weight: 600;
color: #222;
margin: 0;
}
text-align: center;
width: 100%;
}
.pix-automatico__qr-card .desc {
.pix-automatico__qr-card .desc {
color: rgba(51, 51, 51, 0.7);
font-size: 1rem;
text-align: center;
margin: 0 0 2px 0;
}
.download-btn {
margin: 0;
width: 100%;
}
.download-btn {
width: 100%;
max-width: 100%;
background: #000;
color: #fff;
border: none;
border-radius: 7px;
font-size: .95rem;
padding: 12px 0;
margin-top: 8px;
margin: 8px 0 0 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
transition: background .2s;
}
}
.download-btn:hover {
.download-btn:hover {
background: #333;
}
}
.pix-automatico__descricao {
max-width: 440px;
@ -843,7 +861,7 @@ func main ( ) {
align-items: center;
justify-content: center;
font-size: 1.37em;
color: #0000ff;
color: var(--pix-blue);
margin-right: 2px;
}

View File

@ -14,36 +14,11 @@
title: 'Política de Privacidade',
file: 'privacidade.md'
},
pldft: {
title: 'Política PLDFT',
file: 'pldft.md'
},
anticorrupcao: {
title: 'Política Anticorrupção',
file: 'anticorrupcao.md'
},
compliance: {
title: 'Política de Compliance',
file: 'compliance.md'
},
'manual-etica': {
title: 'Manual de Ética',
file: 'manual-etica.md'
},
seguranca: {
title: 'Segurança',
file: 'seguranca.md'
}
};
const menuItems = [
{ href: '/politicas-e-termos', label: 'Termos e condições de uso', key: 'termos' },
{ href: '/politicas-e-termos', label: 'Política de Privacidade', key: 'privacidade' },
{ href: '/politicas-e-termos', label: 'Política de PLDFT', key: 'pldft' },
{ href: '/politicas-e-termos', label: 'Política Anticorrupção', key: 'anticorrupcao' },
{ href: '/politicas-e-termos', label: 'Política de Compliance', key: 'compliance' },
{ href: '/politicas-e-termos', label: 'Manual de Ética', key: 'manual-etica' },
{ href: '/politicas-e-termos', label: 'Segurança', key: 'seguranca' }
];
let currentPolicy = 'termos';

View File

@ -10,8 +10,8 @@
const beneficios = [
{
title: 'Infraestrutura abrangente',
description: 'Soluções integradas de pagamentos e banking para atender diversos modelos de negócios.'
title: 'Segurança',
description: 'Antifraude nativo em todas as transações, protegendo seu negócio automaticamente.'
},
{
title: 'Mais economia',
@ -22,8 +22,8 @@
description: 'Cresça de 100 a 1.000.000 com nossa plataforma, projetada para escalar sem fricção'
},
{
title: 'Maior taxa de conversão',
description: 'Aumente a segurança das suas transações, reduza falsos positivos e garanta uma taxa de aprovação mais alta'
title: 'Suporte de verdade',
description: 'Nosso time garante atendimento rápido e eficiente, sem filas de espera e SLA demorado.'
}
];
@ -33,14 +33,13 @@
icon: planoPf,
title: 'Plano PF',
description: 'Plano essencial para começar a receber via Pix com agilidade e zero burocracia.',
price: 'GRATUITA',
price: 'ZERO',
priceLabel: 'Mensalidade',
recursos: [
'Pix GRATUITO',
'Pix',
'Pix saque',
'Pagamento de contas',
'Extrato',
'Cartão débito virtual'
],
isPro: false
},
@ -49,7 +48,7 @@
icon: planoPj,
title: 'Plano PJ',
description: 'Tudo que sua empresa precisa para pagar, receber e escalar.',
price: 'GRATUITO',
price: 'ZERO',
priceLabel: 'Mensalidade',
recursos: [
'Pix',
@ -57,7 +56,7 @@
'Pagamento',
'Fluxo de aprovação',
'Agendamentos',
'CNAB 240',
'Pagamento em lote',
'Controle de acessos'
],
isPro: false
@ -69,12 +68,10 @@
description: 'Para empresas que precisam de soluções de pagamento personalizadas.',
info: 'Tenha uma solução segura e flexível, com APIs completas e integração simples para automatizar toda a jornada financeira da sua empresa.',
recursos: [
'Gateway de pagamento',
'APIs Pix (cash in e cash out)',
'API de pagamento',
'API de subcontas',
'Emissão de cartões',
'Utilize nossas licenças',
'Webhooks',
'Conta Escrow'
],
isPro: true
@ -97,6 +94,8 @@
let success = false;
let message = '';
const GOOGLE_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbxwB7e3k4_RXX5HaX0Y77AMtTjxTUPWRjFttaFagQ5QXYOxrB4finzgvAlcmOxPxPheNw/exec';
function validateField(field) {
const newErrors = { ...errors };
@ -170,7 +169,7 @@
return Object.keys(errors).length === 0;
}
async function submitForm(e) {
async function submitForm(e) {
e.preventDefault();
if (!validateAll()) {
@ -181,44 +180,57 @@
message = '';
try {
const response = await fetch('/api/negociacao', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
const form = document.createElement('form');
form.method = 'POST';
form.action = GOOGLE_SCRIPT_URL;
form.style.display = 'none';
Object.keys(formData).forEach(key => {
if (formData[key]) {
const input = document.createElement('input');
input.type = 'hidden';
input.name = key;
input.value = formData[key];
form.appendChild(input);
}
});
const result = await response.json();
const iframe = document.createElement('iframe');
iframe.name = 'response_frame';
iframe.style.display = 'none';
if (result.success) {
document.body.appendChild(iframe);
document.body.appendChild(form);
form.target = 'response_frame';
form.submit();
setTimeout(() => {
success = true;
message = result.message;
message = 'Solicitação enviada com sucesso! Nossa equipe entrará em contato.';
formData = {
nome: '',
celular: '',
email: '',
empresa: '',
setor: '',
funcionarios: '',
faturamento: '',
detalhes: ''
nome: '', celular: '', email: '', empresa: '',
setor: '', funcionarios: '', faturamento: '', detalhes: ''
};
} else {
errors = {};
if (document.body.contains(form)) document.body.removeChild(form);
if (document.body.contains(iframe)) document.body.removeChild(iframe);
setTimeout(() => {
success = false;
if (result.errors) {
errors = result.errors;
} else {
message = result.message || 'Ocorreu um erro ao enviar o formulário.';
}
}
message = '';
}, 8000);
}, 2000);
} catch (error) {
console.error(' Erro:', error);
success = false;
message = 'Ocorreu um erro ao enviar o formulário. Tente novamente mais tarde.';
message = 'Erro ao enviar. Tente o botão "Enviar via Email".';
} finally {
loading = false;
}
}
}
onMount(() => {
const observer = new IntersectionObserver(
@ -291,7 +303,6 @@
</div>
</section>
<!-- Planos Section -->
<section id="planos-basspago" class="planos-basspago">
<div class="planos-basspago-inner">
<header class="section-header text-center text-black">
@ -335,22 +346,12 @@
{/each}
</ul>
</div>
{#if !plano.isPro}
<a href="https://portal.basspago.com.br/abertura-de-conta" class="link-cta white">
<span>Abrir conta →</span>
</a>
<button class="no-destak" on:click={() => console.log(`Mais detalhes ${plano.id}`)}>
Mais detalhes
</button>
{/if}
</article>
{/each}
</div>
</div>
</section>
<!-- Form Negociação Section -->
<section id="form-negociacao-basspago" class="form-negociacao-basspago">
<div class="form-negociacao-container">
<div class="form-negociacao-info">
@ -359,11 +360,14 @@
</div>
<h2 class="fade-up">Alto volume de pagamentos ou modelo de negócios exclusivo?</h2>
<p class="fade-up">
Se você não encontrar o que procura, ainda podemos ajudar a encontrar o caminho certo para o seu negócio.
Converse conosco sobre o seu volume de transações para obter os melhores preços e flexibilidade para crescer.
Ainda com dúvidas sobre o seu modelo? Nossa
equipe pode ajudá-lo a escolher a solução ideal,
considerando volume de transações, melhores
preços e total flexibilidade.
</p>
</div>
<!-- Usar submitForm para Google Apps Script -->
<form class="negociacao-form fade-up" on:submit={submitForm}>
{#if success}
<div class="form-message success-message">
@ -514,7 +518,7 @@
</div>
</div>
<div>
<div class="form-buttons">
<button type="submit" class="link-cta white" disabled={loading}>
<span>{loading ? 'Enviando...' : 'Enviar →'}</span>
</button>

View File

@ -163,10 +163,10 @@
{/each}
</div>
<div class="integration-buttons fade-up">
<a href="https://portal.basspago.com.br/abertura-de-conta" class="link-cta white">
<a href="/precos#form-negociacao-basspago" class="link-cta white">
<span>Abra sua conta →</span>
</a>
<a href="centro-de-suporte" class="link-cta">
<a href="/centro-suporte" class="link-cta">
<span>Suporte</span>
</a>
</div>

View File

@ -1,103 +1,227 @@
# Política de Privacidade
**Última atualização: 15 de janeiro de 2025**
**Última atualização: 9 de fevereiro de 2026**
## 1. Generalidades
A Política de Privacidade da Bass Pago, regula o acesso ao uso do conteúdo disponibilizado por meio do site, internet, aplicativo móvel e outros serviços digitais desenvolvidos e / ou fornecido pela empresa, nome corporativo Bass Tecnologia e Processamento Ltda, CNPJ no número 37.293.930/0001-90.
# 1. Introdução e Escopo
# 1.1. Finalidade da Política
A presente Política de Privacidade ("Política") estabelece as diretrizes adotadas pela Bass Pago Instituição de Pagamento ("Bass Pago") para a:
Esta política tem como base a Lei nº 13709 Lei Geral de Proteção de Dados. Os produtos e serviços adquiridos ou utilizados por meio de nossos clientes estão sujeitos a seus respectivos termos de uso e políticas de privacidade aplicáveis. Além disso, os métodos de pagamento disponibilizados pela plataforma também podem estar sujeitos aos termos de uso e às políticas de privacidade determinadas pelas instituições financeiras e pelos emissores de cartões.
Coleta
Uso
Armazenamento
Compartilhamento
Proteção de dados pessoais
No âmbito de seus sites, aplicativos, APIs, plataformas tecnológicas, produtos e serviços digitais.
Ao realizar o cadastro na plataforma para utilizar os serviços e produtos Bass Pago, o Usuário declara ter lido, compreendido e aceito todas as disposições desta Política de Privacidade, a qual complementa os Termos de Uso aceitos durante o cadastramento no sistema.
# 1.2. Conformidade Legal
Esta Política foi elaborada em conformidade com:
## 2. Aceitação
Ao concordar com os Termos de Uso da Bass Pago, o Usuário também aceita esta Política de Privacidade, e consente com o tratamento dos seus dados pessoais, na forma e hipóteses aplicáveis.
Lei nº 13.709/2018 Lei Geral de Proteção de Dados Pessoais (LGPD)
Normas setoriais aplicáveis às instituições de pagamento
Diretrizes do Banco Central do Brasil
Boas práticas de governança
Segurança da informação
Padrões reconhecidos internacionalmente de privacidade e proteção de dados
# 1.3. Instrumentos Adicionais
Os produtos e serviços da Bass Pago podem estar sujeitos, adicionalmente, a:
O Usuário fica ciente de que as operações descritas nesta referem-se ao uso dos serviços e produtos disponibilizados pela Bass Pago, sendo que a sua discordância em relação ao conteúdo deste documento impossibilitará o início ou a continuidade da utilização desses serviços e produtos.
Termos específicos
Contratos
Regulamentos operacionais
Políticas de parceiros, emissores de cartões, arranjos de pagamento e instituições financeiras envolvidas
# 1.4. Aceitação
Ao utilizar os serviços da Bass Pago, o Usuário declara que:
## 3. Informações Pessoais
A Bass Pago, como controladora de dados, poderá coletar os seguintes dados pessoais:
Leu esta Política
Compreendeu seu conteúdo
Concorda com suas disposições
Esta Política complementa os Termos de Uso e demais instrumentos contratuais aplicáveis.
informados direta e livremente pelo titular, no momento do cadastro na plataforma, durante a contratação e uso dos serviços, enquanto navega no website ou blog da Bass Pago, ao se inscrever na newsletter, ao participar de pesquisas ou promoções feitas pela Bass Pago, bem como, durante o suporte em nossos canais de atendimento, mensagens instantâneas e/ou contato telefônico:
dados cadastrais: nome, gênero, filiação, data de nascimento, CPF, e/ou outros documentos de identificação, endereço, selfie, além do nome da empresa e CNPJ em se tratando de pessoa jurídica;
dados de contato: telefones e e-mail;
dados bancários.
fornecidas e/ou coletadas de bases de dados de terceiros:
dados sobre restrições financeiras: apontamentos negativos, restrições de crédito, restrições à constituição de garantia e valores devidos, se houver;
informações públicas sobre ações judiciais cíveis, criminais e trabalhistas;
dados sobre histórico de crédito;
pontuação gerada por empresas especializadas em serviços de proteção ao crédito;
dados de navegação e do dispositivo coletados durante o uso dos sistemas Bass Pago:
endereços IP de dispositivos;
interações realizadas e perfil de uso do Site, Blog ou APP;
tipo de conexão de rede do dispositivo;
cookies;
características do dispositivo, tais como modelo e sistema operacional e ID do DRM;
informações sobre geolocalização;
e-mail do Usuário logado;
interação do Usuário no aplicativo.
dados coletados a partir do uso dos sistemas Bass Pago:
dados de uso dos serviços e produtos;
dados de transações e movimentações na conta do Usuário;
histórico de atendimento ao Usuário;
dados públicos:
informações sobre o Usuário que estejam publicamente disponíveis;
informações sobre menções ou interações com a Bass Pago;
depoimentos relativos a Bass Pago publicados em redes sociais, acompanhados do nome e imagem do Usuário.
Ao utilizar o sistema, o Usuário se responsabiliza pelos seus dados pessoais e também de terceiros publicados ou compartilhados, e confirma possuir o consentimento da parte terceira e/ou outra hipótese legal de tratamento para fornecê-los à empresa.
# 2. Definições
Para fins desta Política, aplicam-se, entre outras, as definições previstas na LGPD, especialmente:
## 4. Objetivo
A Bass Pago implementa procedimentos rigorosos para o tratamento de dados pessoais, seguindo elevados padrões de segurança e confidencialidade.
# 2.1. Dados Pessoais
Informação relacionada a pessoa natural identificada ou identificável.
Em conformidade com o princípio da finalidade estabelecido pela LGPD, no qual o tratamento de dados pessoais deve atender a propósitos legítimos, específicos e explícitos, informados ao Usuário, sem possibilidade de tratamento posterior incompatível com essas finalidades, a Bass Pago poderá utilizar os dados pessoais para os seguintes propósitos:
# 2.2. Dados Pessoais Sensíveis
Dados sobre:
- Disponibilização e prestação dos serviços e/ou produtos contratados;
- Identificação, autenticação e verificação da identidade e elegibilidade do Usuário para contratação dos serviços oferecidos pela Bass Pago;
- Manutenção do cadastro do Usuário atualizado ou cumprimento de obrigações e/ou regulatórias impostas à Bass Pago, incluindo normas de Conheça seu Cliente ("Know Your Customer"), prevenção à lavagem de dinheiro e financiamento ao terrorismo, dentre outras;
- Atendimento a solicitações e dúvidas;
- Contato via telefone, e-mail, SMS, WhatsApp ou outros meios de comunicação, inclusive para envio de notificações ou push sobre o uso dos serviços da Bass Pago;
- Autenticação de transações financeiras;
- Marketing, prospecção, promoção dos nossos produtos e serviços, incluindo o envio de informações, novidades, funcionalidades, conteúdos, notícias e demais eventos relevantes para a manutenção do relacionamento com o Usuário;
- Aperfeiçoamento dos serviços prestados, inclusive para a disponibilização de novos produtos e serviços;
- Prevenção e resolução de problemas técnicos ou de segurança;
- Colaboração ou cumprimento de ordem judicial emanada de autoridade competente ou de órgão fiscalizador;
- Geração de estatísticas, estudos, pesquisas e levantamentos pertinentes às atividades e comportamento do Usuário no uso dos produtos e/ou serviços;
- Execução de medidas de prevenção e combate a ilícitos, fraudes, crimes financeiros e garantia da segurança dos Usuários, da Bass e de terceiros.
Origem racial ou étnica
Convicção religiosa
Opinião política
Filiação sindical
Dados genéticos
Dados biométricos
Dados relativos à saúde
Nota: Tratados apenas quando estritamente necessários e com base legal adequada.
## 5. Compartilhamento de dados
Os dados pessoais dos Usuários serão compartilhados pela Bass Pago com terceiros apenas nas seguintes situações:
# 2.3. Titular
Pessoa natural a quem se referem os dados pessoais.
- Sucessão empresarial, como fusão, aquisição e incorporação;
- Contratação de serviços de processamento de dados com terceiros (operadores), como hospedagem de dados, sistemas de processamento (serviços de computação em nuvem), consultoria em tecnologia da informação, serviços de telecomunicação, entrega, publicidade e marketing, organização de eventos, serviços de análise de crédito;
- Atendimento a medidas de prevenção e combate à lavagem de dinheiro, financiamento ao terrorismo e outros ilícitos ou fraudes, garantindo a segurança dos usuários da Bass Pago e do sistema financeiro;
- Cumprimento da lei e dos regulamentos aos quais a Bass Pago está sujeita;
- Com parceiros comerciais, prestadores de serviço, fornecedores e subcontratados para a execução de serviços contratados;
- Por ordem judicial ou requerimento de autoridades competentes;
- Solicitação do Titular.
# 2.4. Tratamento
Toda operação realizada com dados pessoais.
A Bass compromete-se a exigir compromisso de confidencialidade e conformidade dos terceiros que acessam os dados dos Usuários, inclusive dos processadores diretos e indiretos dos dados que podem estar fora do território brasileiro, por instrumento contratual ou declaração específica com força obrigacional.
# 2.5. Controlador
A Bass Pago, a quem competem as decisões referentes ao tratamento dos dados.
A Bass Pago informa ao Usuário que está obrigada, por lei, a compartilhar dados pessoais em caso de exigência de autoridade judicial, policial ou administrativa. A disponibilização destes dados ocorrerá apenas após a validação da ordem pelos órgãos competentes.
# 2.6. Operador
Pessoa natural ou jurídica que realiza o tratamento de dados pessoais em nome da Bass Pago.
No caso de compartilhamento de dados, este será realizado na medida necessária para atender à finalidade prevista, observando padrões de segurança, confidencialidade e as regulamentações de proteção à privacidade. Os dados pessoais dos usuários também poderão ser compartilhados com o Conselho de Controle de Atividades Financeiras - COAF, conforme estabelecido pela Lei n. 9.613/1998, que trata da prevenção de fraudes e crimes no sistema financeiro.
# 3. Bases Legais para o Tratamento
O tratamento de dados pessoais pela Bass Pago ocorre sempre com fundamento em ao menos uma das bases legais previstas na LGPD, incluindo, mas não se limitando a:
## 6. Proteção dos dados
Com o objetivo de assegurar a proteção dos dados dos usuários e terceiros armazenados, a Bass Pago implementa medidas físicas e digitais de segurança, incluindo controles de acesso, criptografia de informações, firewall, auditoria de alterações, autenticação multifatorial e controle de permissões, adotando diversas técnicas preventivas e seguindo as melhores práticas de segurança.
# 3.1. Bases Legais Aplicáveis
Cumprimento de obrigação legal ou regulatória
Execução de contrato ou de procedimentos preliminares
Exercício regular de direitos em processo judicial, administrativo ou arbitral
Legítimo interesse do controlador, observados os direitos e liberdades fundamentais do titular
Proteção do crédito
Consentimento do titular, quando exigido
# 4. Dados Pessoais Coletados
A Bass Pago poderá coletar e tratar, conforme a natureza da relação e dos serviços utilizados, os seguintes dados pessoais:
Realizamos treinamentos periódicos para nossos colaboradores sobre segurança da informação, com o objetivo de consicentizá-los acerca dos princípios estabelecidos nesta Política. Colaboradores e terceiros que tenham acesso aos dados comprometem-se a seguir regras de privacidade, proteção de dados e confidencialidade, garantindo a segurança das informações e o uso adequado dos dados.
# 4.1. Dados Fornecidos Diretamente pelo Usuário
Nome completo, CPF, CNPJ, data de nascimento
Documentos de identificação
Endereço, telefone, e-mail e demais dados de contato
Dados cadastrais e empresariais
Imagens, selfies, biometria e documentos para validação de identidade (KYC)
Informações fornecidas em atendimentos, comunicações ou formulários
# 4.2. Dados Obtidos de Terceiros
Informações provenientes de bases públicas ou privadas
Dados de bureaus de crédito, prevenção à fraude e PLD/FT
Informações cadastrais e reputacionais permitidas por lei
# 4.3. Dados Técnicos e de Navegação
Endereço IP, data e hora de acesso
Identificadores de dispositivos, sistema operacional e navegador
Cookies e tecnologias similares
Dados de geolocalização, quando autorizados
# 4.4. Dados Transacionais e Operacionais
Informações sobre transações financeiras, movimentações, pagamentos e uso dos serviços
Registros operacionais, logs e trilhas de auditoria
# 4.5. Responsabilidade por Dados de Terceiros
O Usuário declara possuir autorização legal para fornecer dados de terceiros, quando aplicável.
Embora a Bass Pago esteja comprometida com as melhores práticas de segurança da informação, não podemos garantir a impossibilidade de eventos danosos decorrentes de invasões hackers, incidentes de segurança relacionados ao acesso a sites suspeitos ou instalação de software malicioso, ou ainda falhas e vícios que possam resultar na divulgação ou acesso indevido de informações. Nesse contexto, a Bass Pago não será responsável por eventuais indenizações.
# 5. Finalidades do Tratamento
Os dados pessoais são tratados para as seguintes finalidades, conforme aplicável:
Apesar das diversas medidas implementadas pela Bass Pago para proteger os dados, o Usuário também desempenha um papel crucial na segurança de sua conta. Portanto, é sua responsabilidade manter seus dados seguros, protegendo suas senhas, login, chave criptográfica e outras informações relacionadas à sua conta. Além disso, o acesso à conta Bass deve ocorrer exclusivamente a partir de ambientes de conexão e dispositivos seguros e confiáveis.
# 5.1. Prestação de Serviços
Prestação, execução e gestão dos serviços e produtos contratados
Identificação, autenticação e verificação de identidade
# 5.2. Conformidade Legal
Cumprimento de obrigações legais, regulatórias e normativas, inclusive PLD/FT
Prevenção e combate a fraudes, ilícitos e incidentes de segurança
# 5.3. Atendimento e Suporte
Atendimento ao Usuário e suporte técnico
Comunicação institucional, operacional e comercial
# 5.4. Desenvolvimento e Melhoria
Desenvolvimento, aprimoramento e personalização de produtos e serviços
Realização de análises, estatísticas e relatórios, preferencialmente de forma anonimizada
# 5.5. Direitos da Bass Pago
Exercício regular de direitos da Bass Pago
# 6. Compartilhamento de Dados
A Bass Pago poderá compartilhar dados pessoais, sempre de forma proporcional e necessária, com:
## 7. Tempo de armazenamento dos dados
Durante o período em que o Usuário for um cliente, seus dados pessoais serão armazenados e mantidos de forma segura, em conformidade com às finalidades descritas nesta Política de Privacidade.
# 6.1. Parceiros Operacionais
Prestadores de serviços
Parceiros tecnológicos
Fornecedores
# 6.2. Setor Financeiro
Instituições financeiras
Arranjos de pagamento
Emissores e adquirentes
# 6.3. Grupo Econômico
Empresas do mesmo grupo econômico
# 6.4. Autoridades
Autoridades administrativas, regulatórias, judiciais ou policiais, quando exigido
# 6.5. Operações Societárias
Terceiros envolvidos em operações societárias, como fusão ou aquisição
# 6.6. Proteções Contratuais
Todos os compartilhamentos são realizados mediante:
A Bass Pago está sujeita às obrigações regulatórias e, conforme essas regulamentações, poderá manter armazenadas certas informações sobre os Usuários mesmo após o encerramento da conta. Essa prática é adotada, especialmente, para cumprimento de obrigações legais ou regulatórias, independentemente de eventual pedido de eliminação e consentimento, nos termos do artigo 16 da Lei Geral de Proteção de Dados.
Contratos
Cláusulas de confidencialidade
Obrigações de proteção de dados compatíveis com esta Política e com a legislação vigente
# 7. Transferência Internacional de Dados
Quando aplicável, a Bass Pago poderá realizar transferências internacionais de dados pessoais, observando:
## 8. Revogação de Consentimento
O titular tem o direito de revogar seu consentimento mediante manifestação expressa, os dados em questão serão tratados conforme disposto no item 7 desta política.
Requisitos legais
Garantias adequadas
Mecanismos de proteção previstos na LGPD
# 8. Segurança da Informação
# 8.1. Medidas de Proteção
A Bass Pago adota medidas técnicas, administrativas e organizacionais adequadas para proteger os dados pessoais contra:
## 9. Das Alterações
Reservamo-nos o direito modificar esta Política de Privacidade, sempre que necessário, devido a alterações nas leis vigentes, ajustes tecnológicos ou inovações nos serviços e produtos oferecidos. As atualizações entrarão em vigor após serem publicadas no sistema Bass Pago ou comunicadas aos usuários por e-mail, via postal ou qualquer outro meio eletrônico. Essas modificações serão válidas, eficazes e vinculantes para todos os usuários.
Acessos não autorizados
Perdas
Destruição
Alteração
Divulgação indevida
# 8.2. Controles Implementados
Controles de acesso e segregação de funções
Criptografia e autenticação multifator
Monitoramento, registros de logs e auditorias
Políticas internas, treinamentos e gestão de riscos
# 8.3. Limitações de Segurança
Embora sejam adotados os melhores esforços de segurança, nenhum sistema é absolutamente imune a riscos.
## 10. Legislação e Foro Aplicável
Ao efetuar o cadastro no sistema Bass Pago, o Usuário reconhece que a relação estabelecida por esta Política de Privacidade é regida pelas normas brasileiras. Qualquer questão decorrente desta Política de Privacidade será dirimida no foro da comarca de Palmeira das Missões-RS, excluindo-se qualquer outro, por mais privilegiado que seja.
# 9. Retenção e Eliminação dos Dados
# 9.1. Período de Armazenamento
Os dados pessoais serão armazenados pelo período necessário para o cumprimento das:
Finalidades do tratamento
Obrigações legais, regulatórias e contratuais
Incluindo prazos mínimos exigidos por normas aplicáveis às instituições de pagamento, que podem alcançar até 10 (dez) anos.
# 9.2. Eliminação dos Dados
Após o término desses prazos, os dados serão:
Eliminados, ou
Anonimizados
Exceção: Quando houver outra base legal que autorize sua conservação.
# 10. Direitos dos Titulares
A Bass Pago assegura aos titulares o exercício dos direitos previstos no artigo 18 da LGPD, incluindo:
# 10.1. Direitos Garantidos
Confirmação da existência de tratamento
Acesso aos dados
Correção de dados incompletos, inexatos ou desatualizados
Anonimização, bloqueio ou eliminação, quando aplicável
Portabilidade, observados segredos comerciais e regulatórios
Informação sobre compartilhamentos
Revogação do consentimento
Oposição ao tratamento, quando cabível
# 10.2. Processamento de Solicitações
As solicitações serão analisadas e respondidas nos prazos legais.
# 11. Cookies e Tecnologias Semelhantes
# 11.1. Utilização
A Bass Pago utiliza cookies e tecnologias similares para:
Garantir o funcionamento adequado das plataformas
Melhorar a experiência do Usuário
Apoiar análises de desempenho
# 11.2. Gerenciamento
O Usuário pode gerenciar suas preferências de cookies diretamente em seu navegador, ciente de que a desativação poderá impactar determinadas funcionalidades.
# 12. Encarregado pelo Tratamento de Dados (DPO)
A Bass Pago mantém Encarregado pelo Tratamento de Dados Pessoais, nos termos da LGPD, que poderá ser contatado por meio dos canais oficiais divulgados em seu site institucional.
# 13. Alterações desta Política
# 13.1. Atualizações
Esta Política poderá ser atualizada a qualquer tempo, para refletir alterações:
Legais
Regulatórias
Operacionais
# 13.2. Disponibilização
A versão vigente será sempre disponibilizada nos canais oficiais da Bass Pago.
# 14. Legislação Aplicável e Foro
# 14.1. Lei Aplicável
Esta Política é regida pelas leis da República Federativa do Brasil.
# 14.2. Foro Competente
Fica eleito o foro da comarca da sede da Bass Pago Instituição de Pagamento, com renúncia a qualquer outro, por mais privilegiado que seja, para dirimir eventuais controvérsias.
Para dúvidas sobre esta Política de Privacidade ou para exercer seus direitos como titular de dados pessoais, entre em contato conosco através dos nossos canais oficiais de atendimento ou com nosso Encarregado pelo Tratamento de Dados Pessoais (DPO).

File diff suppressed because it is too large Load Diff