generated from dwd/boilarplate-astro-tailwind
Akademy Landing MPA
This commit is contained in:
BIN
src/assets/Inter.ttf
Normal file
BIN
src/assets/Inter.ttf
Normal file
Binary file not shown.
34
src/assets/SvgTick.jsx
Normal file
34
src/assets/SvgTick.jsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import * as React from "react"
|
||||
|
||||
function SvgTick({ height, width}) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
// width={17.899}
|
||||
// height={17.676}
|
||||
width={width}
|
||||
height={height}
|
||||
// viewBox="0 0 17.899 17.676"
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
// {...props}
|
||||
>
|
||||
<defs>
|
||||
<style>
|
||||
{
|
||||
".prefix__a_greenTick{fill:none;stroke:#17c558!important;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.4px}"
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path
|
||||
className="prefix__a_greenTick"
|
||||
d="M16.91 8.136v.741a8 8 0 11-4.744-7.312"
|
||||
/>
|
||||
<path
|
||||
className="prefix__a_greenTick"
|
||||
d="M16.909 2.492l-8.094 8.1-2.428-2.426"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default SvgTick
|
||||
5
src/assets/akademy-logo-dark.svg
Normal file
5
src/assets/akademy-logo-dark.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="156" height="51" viewBox="0 0 156 51" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.92 40.932C6.696 40.932 5.652 40.68 4.788 40.176C3.924 39.672 3.252 39.012 2.772 38.196C2.316 37.38 2.088 36.468 2.088 35.46C2.088 33.468 2.964 31.944 4.716 30.888C6.492 29.808 9.468 29.148 13.644 28.908C13.572 28.428 13.392 28.032 13.104 27.72C12.816 27.384 12.408 27.132 11.88 26.964C11.376 26.772 10.752 26.676 10.008 26.676C9.48 26.676 8.928 26.748 8.352 26.892C7.8 27.012 7.224 27.192 6.624 27.432C6.048 27.672 5.412 27.96 4.716 28.296L2.664 24.516C3.552 24.036 4.452 23.616 5.364 23.256C6.276 22.896 7.212 22.62 8.172 22.428C9.132 22.236 10.116 22.14 11.124 22.14C12.828 22.14 14.292 22.44 15.516 23.04C16.74 23.616 17.688 24.516 18.36 25.74C19.032 26.94 19.368 28.488 19.368 30.384V40.5H14.688L14.292 38.556H14.148C13.26 39.228 12.288 39.792 11.232 40.248C10.176 40.704 9.072 40.932 7.92 40.932ZM9.756 36.504C10.524 36.504 11.22 36.36 11.844 36.072C12.492 35.76 13.092 35.388 13.644 34.956V32.364C12.036 32.412 10.788 32.568 9.9 32.832C9.012 33.072 8.4 33.384 8.064 33.768C7.728 34.128 7.56 34.536 7.56 34.992C7.56 35.328 7.644 35.616 7.812 35.856C8.004 36.072 8.256 36.24 8.568 36.36C8.904 36.456 9.3 36.504 9.756 36.504Z" fill="#8BCCE0"/>
|
||||
<path d="M24.5 0V44.5H37.5V30.5L45 44.5L58 42.5L48 25L55.5 9.5L43.5 6.5L37.5 18.5V0H24.5Z" fill="#FFC700"/>
|
||||
<path d="M63.92 40.932C62.696 40.932 61.652 40.68 60.788 40.176C59.924 39.672 59.252 39.012 58.772 38.196C58.316 37.38 58.088 36.468 58.088 35.46C58.088 33.468 58.964 31.944 60.716 30.888C62.492 29.808 65.468 29.148 69.644 28.908C69.572 28.428 69.392 28.032 69.104 27.72C68.816 27.384 68.408 27.132 67.88 26.964C67.376 26.772 66.752 26.676 66.008 26.676C65.48 26.676 64.928 26.748 64.352 26.892C63.8 27.012 63.224 27.192 62.624 27.432C62.048 27.672 61.412 27.96 60.716 28.296L58.664 24.516C59.552 24.036 60.452 23.616 61.364 23.256C62.276 22.896 63.212 22.62 64.172 22.428C65.132 22.236 66.116 22.14 67.124 22.14C68.828 22.14 70.292 22.44 71.516 23.04C72.74 23.616 73.688 24.516 74.36 25.74C75.032 26.94 75.368 28.488 75.368 30.384V40.5H70.688L70.292 38.556H70.148C69.26 39.228 68.288 39.792 67.232 40.248C66.176 40.704 65.072 40.932 63.92 40.932ZM65.756 36.504C66.524 36.504 67.22 36.36 67.844 36.072C68.492 35.76 69.092 35.388 69.644 34.956V32.364C68.036 32.412 66.788 32.568 65.9 32.832C65.012 33.072 64.4 33.384 64.064 33.768C63.728 34.128 63.56 34.536 63.56 34.992C63.56 35.328 63.644 35.616 63.812 35.856C64.004 36.072 64.256 36.24 64.568 36.36C64.904 36.456 65.3 36.504 65.756 36.504ZM84.5699 40.932C82.2899 40.932 80.4539 40.092 79.0619 38.412C77.6939 36.732 77.0099 34.44 77.0099 31.536C77.0099 29.568 77.3819 27.888 78.1259 26.496C78.8699 25.104 79.8179 24.036 80.9699 23.292C82.1219 22.524 83.3339 22.14 84.6059 22.14C85.5899 22.14 86.4179 22.308 87.0899 22.644C87.7859 22.956 88.4099 23.412 88.9619 24.012H89.1059L88.8179 21.312V15.372H94.5779V40.5H89.8979L89.5019 38.772H89.3579C88.7099 39.372 87.9539 39.888 87.0899 40.32C86.2499 40.728 85.4099 40.932 84.5699 40.932ZM86.0459 36.252C86.5979 36.252 87.1019 36.144 87.5579 35.928C88.0139 35.712 88.4339 35.328 88.8179 34.776V27.864C88.4099 27.456 87.9779 27.18 87.5219 27.036C87.0899 26.892 86.6339 26.82 86.1539 26.82C85.5779 26.82 85.0379 26.976 84.5339 27.288C84.0299 27.6 83.6339 28.104 83.3459 28.8C83.0579 29.496 82.9139 30.384 82.9139 31.464C82.9139 33.144 83.1899 34.368 83.7419 35.136C84.2939 35.88 85.0619 36.252 86.0459 36.252ZM106.732 40.932C104.86 40.932 103.168 40.56 101.656 39.816C100.144 39.072 98.9439 38.004 98.0559 36.612C97.1919 35.22 96.7599 33.528 96.7599 31.536C96.7599 29.568 97.2039 27.888 98.0919 26.496C98.9799 25.104 100.132 24.036 101.548 23.292C102.988 22.524 104.512 22.14 106.12 22.14C107.968 22.14 109.516 22.524 110.764 23.292C112.036 24.06 112.984 25.104 113.608 26.424C114.256 27.72 114.58 29.172 114.58 30.78C114.58 31.284 114.556 31.776 114.508 32.256C114.46 32.712 114.412 33.048 114.364 33.264H101.044V29.484H110.404L109.576 30.528C109.576 29.208 109.3 28.212 108.748 27.54C108.196 26.844 107.38 26.496 106.3 26.496C105.46 26.496 104.74 26.676 104.14 27.036C103.564 27.396 103.108 27.96 102.772 28.728C102.46 29.472 102.304 30.408 102.304 31.536C102.304 32.712 102.496 33.672 102.88 34.416C103.288 35.16 103.876 35.712 104.644 36.072C105.436 36.408 106.396 36.576 107.524 36.576C108.292 36.576 109.024 36.48 109.72 36.288C110.44 36.096 111.196 35.808 111.988 35.424L113.86 38.844C112.828 39.492 111.676 40.008 110.404 40.392C109.132 40.752 107.908 40.932 106.732 40.932ZM115.358 40.5V22.572H119.678L120.074 24.768H120.218C120.53 24.048 120.986 23.436 121.586 22.932C122.21 22.404 123.038 22.14 124.07 22.14C124.814 22.14 125.45 22.392 125.978 22.896C126.53 23.376 126.914 24.096 127.13 25.056C127.418 24.264 127.886 23.58 128.534 23.004C129.182 22.428 130.01 22.14 131.018 22.14C132.314 22.14 133.31 22.668 134.006 23.724C134.702 24.756 135.05 26.172 135.05 27.972V40.5H129.614V28.368C129.614 27.48 129.35 27.036 128.822 27.036C128.534 27.036 128.282 27.156 128.066 27.396C127.85 27.636 127.634 28.032 127.418 28.584V40.5H122.99V28.368C122.99 27.912 122.918 27.576 122.774 27.36C122.654 27.144 122.438 27.036 122.126 27.036C121.862 27.036 121.622 27.156 121.406 27.396C121.214 27.636 121.01 28.032 120.794 28.584V40.5H115.358ZM138.924 47.376C138.396 47.376 137.892 47.34 137.412 47.268C136.932 47.196 136.5 47.112 136.116 47.016L137.124 42.66C137.364 42.732 137.592 42.78 137.808 42.804C138.048 42.852 138.264 42.876 138.456 42.876C139.464 42.876 140.244 42.684 140.796 42.3C141.348 41.916 141.756 41.424 142.02 40.824L142.344 39.96L134.712 22.572H140.364L143.136 29.88C143.448 30.72 143.748 31.596 144.036 32.508C144.324 33.396 144.588 34.32 144.828 35.28H144.972C145.212 34.392 145.464 33.492 145.728 32.58C146.016 31.644 146.304 30.744 146.592 29.88L148.968 22.572H154.368L147.492 40.464C146.892 42 146.22 43.284 145.476 44.316C144.732 45.348 143.832 46.116 142.776 46.62C141.744 47.124 140.46 47.376 138.924 47.376Z" fill="#8BCCE0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
5
src/assets/akademy-logo-light.svg
Normal file
5
src/assets/akademy-logo-light.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="156" height="51" viewBox="0 0 156 51" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.92 40.932C6.696 40.932 5.652 40.68 4.788 40.176C3.924 39.672 3.252 39.012 2.772 38.196C2.316 37.38 2.088 36.468 2.088 35.46C2.088 33.468 2.964 31.944 4.716 30.888C6.492 29.808 9.468 29.148 13.644 28.908C13.572 28.428 13.392 28.032 13.104 27.72C12.816 27.384 12.408 27.132 11.88 26.964C11.376 26.772 10.752 26.676 10.008 26.676C9.48 26.676 8.928 26.748 8.352 26.892C7.8 27.012 7.224 27.192 6.624 27.432C6.048 27.672 5.412 27.96 4.716 28.296L2.664 24.516C3.552 24.036 4.452 23.616 5.364 23.256C6.276 22.896 7.212 22.62 8.172 22.428C9.132 22.236 10.116 22.14 11.124 22.14C12.828 22.14 14.292 22.44 15.516 23.04C16.74 23.616 17.688 24.516 18.36 25.74C19.032 26.94 19.368 28.488 19.368 30.384V40.5H14.688L14.292 38.556H14.148C13.26 39.228 12.288 39.792 11.232 40.248C10.176 40.704 9.072 40.932 7.92 40.932ZM9.756 36.504C10.524 36.504 11.22 36.36 11.844 36.072C12.492 35.76 13.092 35.388 13.644 34.956V32.364C12.036 32.412 10.788 32.568 9.9 32.832C9.012 33.072 8.4 33.384 8.064 33.768C7.728 34.128 7.56 34.536 7.56 34.992C7.56 35.328 7.644 35.616 7.812 35.856C8.004 36.072 8.256 36.24 8.568 36.36C8.904 36.456 9.3 36.504 9.756 36.504Z" fill="white"/>
|
||||
<path d="M24.5 0V44.5H37.5V30.5L45 44.5L58 42.5L48 25L55.5 9.5L43.5 6.5L37.5 18.5V0H24.5Z" fill="#F6EE1D"/>
|
||||
<path d="M63.92 40.932C62.696 40.932 61.652 40.68 60.788 40.176C59.924 39.672 59.252 39.012 58.772 38.196C58.316 37.38 58.088 36.468 58.088 35.46C58.088 33.468 58.964 31.944 60.716 30.888C62.492 29.808 65.468 29.148 69.644 28.908C69.572 28.428 69.392 28.032 69.104 27.72C68.816 27.384 68.408 27.132 67.88 26.964C67.376 26.772 66.752 26.676 66.008 26.676C65.48 26.676 64.928 26.748 64.352 26.892C63.8 27.012 63.224 27.192 62.624 27.432C62.048 27.672 61.412 27.96 60.716 28.296L58.664 24.516C59.552 24.036 60.452 23.616 61.364 23.256C62.276 22.896 63.212 22.62 64.172 22.428C65.132 22.236 66.116 22.14 67.124 22.14C68.828 22.14 70.292 22.44 71.516 23.04C72.74 23.616 73.688 24.516 74.36 25.74C75.032 26.94 75.368 28.488 75.368 30.384V40.5H70.688L70.292 38.556H70.148C69.26 39.228 68.288 39.792 67.232 40.248C66.176 40.704 65.072 40.932 63.92 40.932ZM65.756 36.504C66.524 36.504 67.22 36.36 67.844 36.072C68.492 35.76 69.092 35.388 69.644 34.956V32.364C68.036 32.412 66.788 32.568 65.9 32.832C65.012 33.072 64.4 33.384 64.064 33.768C63.728 34.128 63.56 34.536 63.56 34.992C63.56 35.328 63.644 35.616 63.812 35.856C64.004 36.072 64.256 36.24 64.568 36.36C64.904 36.456 65.3 36.504 65.756 36.504ZM84.5699 40.932C82.2899 40.932 80.4539 40.092 79.0619 38.412C77.6939 36.732 77.0099 34.44 77.0099 31.536C77.0099 29.568 77.3819 27.888 78.1259 26.496C78.8699 25.104 79.8179 24.036 80.9699 23.292C82.1219 22.524 83.3339 22.14 84.6059 22.14C85.5899 22.14 86.4179 22.308 87.0899 22.644C87.7859 22.956 88.4099 23.412 88.9619 24.012H89.1059L88.8179 21.312V15.372H94.5779V40.5H89.8979L89.5019 38.772H89.3579C88.7099 39.372 87.9539 39.888 87.0899 40.32C86.2499 40.728 85.4099 40.932 84.5699 40.932ZM86.0459 36.252C86.5979 36.252 87.1019 36.144 87.5579 35.928C88.0139 35.712 88.4339 35.328 88.8179 34.776V27.864C88.4099 27.456 87.9779 27.18 87.5219 27.036C87.0899 26.892 86.6339 26.82 86.1539 26.82C85.5779 26.82 85.0379 26.976 84.5339 27.288C84.0299 27.6 83.6339 28.104 83.3459 28.8C83.0579 29.496 82.9139 30.384 82.9139 31.464C82.9139 33.144 83.1899 34.368 83.7419 35.136C84.2939 35.88 85.0619 36.252 86.0459 36.252ZM106.732 40.932C104.86 40.932 103.168 40.56 101.656 39.816C100.144 39.072 98.9439 38.004 98.0559 36.612C97.1919 35.22 96.7599 33.528 96.7599 31.536C96.7599 29.568 97.2039 27.888 98.0919 26.496C98.9799 25.104 100.132 24.036 101.548 23.292C102.988 22.524 104.512 22.14 106.12 22.14C107.968 22.14 109.516 22.524 110.764 23.292C112.036 24.06 112.984 25.104 113.608 26.424C114.256 27.72 114.58 29.172 114.58 30.78C114.58 31.284 114.556 31.776 114.508 32.256C114.46 32.712 114.412 33.048 114.364 33.264H101.044V29.484H110.404L109.576 30.528C109.576 29.208 109.3 28.212 108.748 27.54C108.196 26.844 107.38 26.496 106.3 26.496C105.46 26.496 104.74 26.676 104.14 27.036C103.564 27.396 103.108 27.96 102.772 28.728C102.46 29.472 102.304 30.408 102.304 31.536C102.304 32.712 102.496 33.672 102.88 34.416C103.288 35.16 103.876 35.712 104.644 36.072C105.436 36.408 106.396 36.576 107.524 36.576C108.292 36.576 109.024 36.48 109.72 36.288C110.44 36.096 111.196 35.808 111.988 35.424L113.86 38.844C112.828 39.492 111.676 40.008 110.404 40.392C109.132 40.752 107.908 40.932 106.732 40.932ZM115.358 40.5V22.572H119.678L120.074 24.768H120.218C120.53 24.048 120.986 23.436 121.586 22.932C122.21 22.404 123.038 22.14 124.07 22.14C124.814 22.14 125.45 22.392 125.978 22.896C126.53 23.376 126.914 24.096 127.13 25.056C127.418 24.264 127.886 23.58 128.534 23.004C129.182 22.428 130.01 22.14 131.018 22.14C132.314 22.14 133.31 22.668 134.006 23.724C134.702 24.756 135.05 26.172 135.05 27.972V40.5H129.614V28.368C129.614 27.48 129.35 27.036 128.822 27.036C128.534 27.036 128.282 27.156 128.066 27.396C127.85 27.636 127.634 28.032 127.418 28.584V40.5H122.99V28.368C122.99 27.912 122.918 27.576 122.774 27.36C122.654 27.144 122.438 27.036 122.126 27.036C121.862 27.036 121.622 27.156 121.406 27.396C121.214 27.636 121.01 28.032 120.794 28.584V40.5H115.358ZM138.924 47.376C138.396 47.376 137.892 47.34 137.412 47.268C136.932 47.196 136.5 47.112 136.116 47.016L137.124 42.66C137.364 42.732 137.592 42.78 137.808 42.804C138.048 42.852 138.264 42.876 138.456 42.876C139.464 42.876 140.244 42.684 140.796 42.3C141.348 41.916 141.756 41.424 142.02 40.824L142.344 39.96L134.712 22.572H140.364L143.136 29.88C143.448 30.72 143.748 31.596 144.036 32.508C144.324 33.396 144.588 34.32 144.828 35.28H144.972C145.212 34.392 145.464 33.492 145.728 32.58C146.016 31.644 146.304 30.744 146.592 29.88L148.968 22.572H154.368L147.492 40.464C146.892 42 146.22 43.284 145.476 44.316C144.732 45.348 143.832 46.116 142.776 46.62C141.744 47.124 140.46 47.376 138.924 47.376Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
BIN
src/assets/akademy-logo.png
Normal file
BIN
src/assets/akademy-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
3
src/assets/cloud-icon.svg
Normal file
3
src/assets/cloud-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M25.8 13.3867C24.8933 8.78671 20.8533 5.33337 16 5.33337C12.1467 5.33337 8.8 7.52004 7.13333 10.72C3.12 11.1467 0 14.5467 0 18.6667C0 23.08 3.58667 26.6667 8 26.6667H25.3333C29.0133 26.6667 32 23.68 32 20C32 16.48 29.2667 13.6267 25.8 13.3867Z" fill="#16253D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 374 B |
9
src/assets/footer-akademy-B2B-bg-1.svg
Normal file
9
src/assets/footer-akademy-B2B-bg-1.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="1440" height="691" viewBox="0 0 1440 691" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1440" height="691" fill="url(#paint0_linear_308_527)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_308_527" x1="779" y1="1167.5" x2="-7.71658e-05" y2="170.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CAD1FF"/>
|
||||
<stop offset="1" stop-color="#4706D5"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 405 B |
3
src/assets/footer-akademy-B2B-bg-2.svg
Normal file
3
src/assets/footer-akademy-B2B-bg-2.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1440" height="366" viewBox="0 0 1440 366" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1440 365.999C945.424 120.208 273.927 62.7566 0 64.7549V19.5C344.193 -54.4373 1103.41 110.882 1440 195.644V365.999Z" fill="#C1BCFF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 252 B |
3
src/assets/footer-akademy-B2B-bg-3.svg
Normal file
3
src/assets/footer-akademy-B2B-bg-3.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1440" height="354" viewBox="0 0 1440 354" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M-1 169.5C313.578 105.1 1090.74 269.167 1440 354V0H-1V169.5Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 195 B |
9
src/assets/footer-akademy-B2C-bg-1.svg
Normal file
9
src/assets/footer-akademy-B2C-bg-1.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="1439" height="691" viewBox="0 0 1439 691" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1440" height="691" fill="url(#paint0_linear_304_803)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_304_803" x1="1512" y1="796.5" x2="235.5" y2="268.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D6EEFF"/>
|
||||
<stop offset="1" stop-color="#017DD9"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 398 B |
3
src/assets/footer-akademy-B2C-bg-2.svg
Normal file
3
src/assets/footer-akademy-B2C-bg-2.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1439" height="366" viewBox="0 0 1439 366" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1440 365.999C945.424 120.208 273.927 62.7566 0 64.7549V19.5C344.193 -54.4373 1103.41 110.882 1440 195.644V365.999Z" fill="#DEF0FD"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 252 B |
3
src/assets/footer-akademy-B2C-bg-3.svg
Normal file
3
src/assets/footer-akademy-B2C-bg-3.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1440" height="354" viewBox="0 0 1440 354" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 169.5C314.578 105.1 1091.74 269.167 1441 354V0H0V169.5Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 193 B |
BIN
src/assets/footer-akademy-products.png
Normal file
BIN
src/assets/footer-akademy-products.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
9
src/assets/footer-interakto-bg-1.svg
Normal file
9
src/assets/footer-interakto-bg-1.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="1436" height="505" viewBox="0 0 1436 505" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="-4.5" y="0.4375" width="1440" height="505" fill="url(#paint0_linear_114_578)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_114_578" x1="715.5" y1="-1286.56" x2="715.5" y2="505.437" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.588542" stop-color="#8AF4B8"/>
|
||||
<stop offset="1" stop-color="#018162"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 442 B |
3
src/assets/footer-interakto-bg-2.svg
Normal file
3
src/assets/footer-interakto-bg-2.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1436" height="353" viewBox="0 0 1436 353" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1435.5 352.438C940.924 106.646 269.427 49.1948 -4.5 51.1931V20.2193C339.693 -53.7179 1098.91 97.3206 1435.5 182.082V352.438Z" fill="#87F1B6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 262 B |
3
src/assets/footer-interakto-bg-3.svg
Normal file
3
src/assets/footer-interakto-bg-3.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="903" height="242" viewBox="0 0 903 242" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M904.5 241.938C589.942 158.565 170.599 97.6381 0.5 78.0976L904.5 0.9375V241.938Z" fill="#DAF6E6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 215 B |
9
src/assets/footer-interakto-coding-bg-1.svg
Normal file
9
src/assets/footer-interakto-coding-bg-1.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="1440" height="691" viewBox="0 0 1440 691" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1440" height="691" fill="url(#paint0_linear_45_276)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_45_276" x1="720" y1="-682.5" x2="720" y2="691" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#489CEC"/>
|
||||
<stop offset="1" stop-color="#01419B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 392 B |
4
src/assets/footer-interakto-coding-bg-2.svg
Normal file
4
src/assets/footer-interakto-coding-bg-2.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="1440" height="617" viewBox="0 0 1440 617" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1444 130.269C921.2 -18.3956 263.5 -9.99148 0 12.7936V334.715C476.4 293.221 1141 470.006 1444 617V130.269Z" fill="#E6F1FF"/>
|
||||
<path d="M1444 617C948.394 386.874 275.497 333.084 1 334.955V305.955C345.91 236.73 1106.71 378.143 1444 457.502V617Z" fill="#BAD7F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 378 B |
9
src/assets/footer-subscription-plans-bg-1.svg
Normal file
9
src/assets/footer-subscription-plans-bg-1.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="1436" height="541" viewBox="0 0 1436 541" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="-4" y="-150" width="1440" height="691" fill="url(#paint0_linear_324_576)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_324_576" x1="418" y1="-624" x2="1194.5" y2="643" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A1CEC8"/>
|
||||
<stop offset="1" stop-color="#01419B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 411 B |
3
src/assets/footer-subscription-plans-bg-2.svg
Normal file
3
src/assets/footer-subscription-plans-bg-2.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1436" height="357" viewBox="0 0 1436 357" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1436 357C941.424 111.209 269.927 53.7573 -4 55.7556V19.5001C340.193 -54.4372 1099.41 101.883 1436 186.645V357Z" fill="#BAD7F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 248 B |
3
src/assets/footer-subscription-plans-bg-3.svg
Normal file
3
src/assets/footer-subscription-plans-bg-3.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1436" height="196" viewBox="0 0 1436 196" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M-5 22C317 -42.4 1112.5 111.167 1470 196V-158H-5V22Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 187 B |
9
src/assets/footer-teenybeans-bg-1.svg
Normal file
9
src/assets/footer-teenybeans-bg-1.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="1440" height="506" viewBox="0 0 1440 506" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0.5" width="1440" height="505" fill="url(#paint0_linear_78_167)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_78_167" x1="720" y1="-1286.5" x2="720" y2="505.5" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.405348" stop-color="#CBD457"/>
|
||||
<stop offset="1" stop-color="#838C01"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 421 B |
3
src/assets/footer-teenybeans-bg-2.svg
Normal file
3
src/assets/footer-teenybeans-bg-2.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1440" height="353" viewBox="0 0 1440 353" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1440 352.5C945.424 106.709 273.927 49.2573 0 51.2556V20.2818C344.193 -53.6554 1103.41 97.3831 1440 182.145V352.5Z" fill="#CBD457"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 251 B |
3
src/assets/footer-teenybeans-bg-3.svg
Normal file
3
src/assets/footer-teenybeans-bg-3.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="889" height="241" viewBox="0 0 889 241" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M896 240.5C584.4 157.3 169 96.5 0.5 77L896 0V240.5Z" fill="#F7FCB5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 186 B |
3
src/assets/footer-teenybeans-bg-4.svg
Normal file
3
src/assets/footer-teenybeans-bg-4.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1440" height="1048" viewBox="0 0 1440 1048" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M902.271 251.963C482.552 97.4241 91.2073 187.572 -52 251.963V1048H1712V0C1616.97 125.803 1321.99 406.503 902.271 251.963Z" fill="#F7FCB6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 260 B |
9
src/assets/footer-toddlers-bg-1.svg
Normal file
9
src/assets/footer-toddlers-bg-1.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="1439" height="691" viewBox="0 0 1439 691" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1440" height="691" fill="url(#paint0_linear_270_284)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_270_284" x1="422" y1="-474" x2="1198.5" y2="793" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#FFBEE0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 393 B |
3
src/assets/footer-toddlers-bg-2.svg
Normal file
3
src/assets/footer-toddlers-bg-2.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1439" height="357" viewBox="0 0 1439 357" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1440 357C945.424 111.208 273.927 53.7569 0 55.7552V19.4996C344.193 -54.4377 1103.41 101.883 1440 186.644V357Z" fill="#FFE9F5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 247 B |
3
src/assets/footer-toddlers-bg-3.svg
Normal file
3
src/assets/footer-toddlers-bg-3.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1440" height="354" viewBox="0 0 1440 354" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 180C314.578 115.6 1091.74 269.167 1441 354V0H0V180Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 189 B |
7
src/assets/footer-toddlers-bg-31-svg.svg
Normal file
7
src/assets/footer-toddlers-bg-31-svg.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 254" width="1440" height="254">
|
||||
<title>footer-toddlers-bg-3-svg</title>
|
||||
<style>
|
||||
.s0 { fill: #ffffff }
|
||||
</style>
|
||||
<path id="Layer" class="s0" d="m0 80c314.6-64.4 1091.7 89.2 1441 174v-354h-1441z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 280 B |
10
src/assets/interakto-coding-section1-1.svg
Normal file
10
src/assets/interakto-coding-section1-1.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="1440" height="942" viewBox="0 0 1440 942" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1440" height="942" fill="url(#paint0_linear_8_120)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_8_120" x1="534.5" y1="10.5482" x2="691.368" y2="946.797" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00540305" stop-color="#00409A"/>
|
||||
<stop offset="0.424951" stop-color="#236DCC"/>
|
||||
<stop offset="1" stop-color="#3C8DF0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 468 B |
3
src/assets/interakto-coding-section1-2.svg
Normal file
3
src/assets/interakto-coding-section1-2.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1440" height="237" viewBox="0 0 1440 237" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1440 0C1074.27 180.4 328.948 217.5 2.00069 213.5H0V237H2.00069H1440V214.5V0Z" fill="#489CEC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 214 B |
3
src/assets/interakto-coding-section1-3.svg
Normal file
3
src/assets/interakto-coding-section1-3.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="765" height="69" viewBox="0 0 765 69" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M765 69C487.584 20.6 136.577 9.16667 0.5 8.5L765 0V69Z" fill="#489CEC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 187 B |
9
src/assets/interakto-coding-section2-1.svg
Normal file
9
src/assets/interakto-coding-section2-1.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="1440" height="1028" viewBox="0 0 1440 1028" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0H1440V1028L0 838V0Z" fill="url(#paint0_linear_9_566)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_9_566" x1="720" y1="0" x2="720" y2="1028" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0062D2"/>
|
||||
<stop offset="1" stop-color="#90C1FA"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 390 B |
17
src/assets/interakto-coding-section2-card1.svg
Normal file
17
src/assets/interakto-coding-section2-card1.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg width="600" height="427" viewBox="0 0 600 427" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_9_570)">
|
||||
<path d="M10.3356 30.7271C8.58068 16.1394 20.2277 3.41336 34.9134 3.87229L558.753 20.2423C572.102 20.6594 582.543 31.8938 581.982 45.2376L567.966 379.007C567.426 391.859 556.85 402 543.987 402H76.2858C64.1397 402 53.9084 392.926 52.4576 380.867L10.3356 30.7271Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_9_570" x="0.160278" y="0.860229" width="599.843" height="426.14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="4" dy="11"/>
|
||||
<feGaussianBlur stdDeviation="7"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9_570"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9_570" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
17
src/assets/interakto-coding-section2-card2.svg
Normal file
17
src/assets/interakto-coding-section2-card2.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg width="582" height="454" viewBox="0 0 582 454" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_9_572)">
|
||||
<path d="M10 27.6933C10 13.0808 22.948 1.85967 37.412 3.93709L543.252 76.5892C556.369 78.4731 565.477 90.6315 563.598 103.749L519.951 408.404C518.257 420.223 508.133 429 496.193 429H34C20.7452 429 10 418.255 10 405V27.6933Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_9_572" x="0" y="0.688782" width="581.843" height="453.311" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="4" dy="11"/>
|
||||
<feGaussianBlur stdDeviation="7"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9_572"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9_572" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/interakto-coding-section2-card3-svg.png
Normal file
BIN
src/assets/interakto-coding-section2-card3-svg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
9
src/assets/interakto-coding-section2-card3-svg.svg
Normal file
9
src/assets/interakto-coding-section2-card3-svg.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 600" width="1100" height="600">
|
||||
<title>interakto-coding-section2-card3-svg</title>
|
||||
<style>
|
||||
.s0 { fill: #ffffff }
|
||||
</style>
|
||||
<g id="Layer">
|
||||
<path id="Layer" class="s0" d="m10.7 46.1c-3.4-21.3 8.3-41.5 23.8-41.2l1023 24c13.8 0.3 24.6 17 23.5 36.4l-26.2 468.5c-1 17.5-11.4 31.1-24 31.1h-917.7c-11.2 0-20.9-11-23.4-26.3z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 411 B |
17
src/assets/interakto-coding-section2-card3.svg
Normal file
17
src/assets/interakto-coding-section2-card3.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg width="1100" height="427" viewBox="0 0 1100 427" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_218_98)">
|
||||
<path d="M10.7115 32.7821C7.29346 17.6145 18.9789 3.24988 34.5247 3.50922L1057.47 20.5741C1071.31 20.805 1082.08 32.6575 1081 46.453L1054.77 379.882C1053.79 392.368 1043.37 402 1030.84 402H113.11C101.888 402 92.1642 394.224 89.6972 383.276L10.7115 32.7821Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_218_98" x="0.114014" y="0.505768" width="1098.96" height="426.494" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="4" dy="11"/>
|
||||
<feGaussianBlur stdDeviation="7"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_218_98"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_218_98" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
9
src/assets/interakto-coding-section3-1.svg
Normal file
9
src/assets/interakto-coding-section3-1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 473 KiB |
22
src/assets/interakto-coding-section3-2.svg
Normal file
22
src/assets/interakto-coding-section3-2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 389 KiB |
9
src/assets/interakto-coding-section3-3.svg
Normal file
9
src/assets/interakto-coding-section3-3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 77 KiB |
9
src/assets/interakto-coding-section5-1.svg
Normal file
9
src/assets/interakto-coding-section5-1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.4 MiB |
9
src/assets/interakto-coding-section6-1.svg
Normal file
9
src/assets/interakto-coding-section6-1.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="1440" height="676" viewBox="0 0 1440 676" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1511 218.377C918.013 -75.3179 209.255 -10.5056 -70.9999 58.6124V508.162C315.922 412.644 1144.88 580.255 1511 676V218.377Z" fill="url(#paint0_linear_45_251)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_45_251" x1="720" y1="281" x2="957.5" y2="1193.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0F6CD7"/>
|
||||
<stop offset="1" stop-color="#76B0F3"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 495 B |
10
src/assets/interakto-section1-1.svg
Normal file
10
src/assets/interakto-section1-1.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="1440" height="810" viewBox="0 0 1440 810" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1440" height="810" fill="url(#paint0_linear_113_51)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_113_51" x1="579.5" y1="-52.8822" x2="797.831" y2="1470.34" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00540305" stop-color="#008162"/>
|
||||
<stop offset="0.569687" stop-color="#96FEBF"/>
|
||||
<stop offset="1" stop-color="#E1FFED"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 471 B |
3
src/assets/interakto-section1-2.svg
Normal file
3
src/assets/interakto-section1-2.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1440" height="774" viewBox="0 0 1440 774" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M356.962 206.435C-9.40881 -21.1906 -279.001 148.262 -368 261.442L-319.08 682.49C-184.225 356.052 94.6793 454.797 217.275 544.974C343.406 658.154 658.146 825.106 908.052 587.479C1157.96 349.852 1416.9 488.467 1515.13 587.479V774L1625.35 544.974C1675.25 391.123 1735.1 69.2197 1575.25 12.4132C1415.41 -44.3932 1275.17 107.507 1175.64 190.434C1055.4 290.612 723.334 434.061 356.962 206.435Z" fill="#4DC192"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 524 B |
17
src/assets/interakto-section1-3.svg
Normal file
17
src/assets/interakto-section1-3.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg width="1440" height="562" viewBox="0 0 1440 562" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_b_114_363)">
|
||||
<path d="M356.962 149.892C-9.40881 -15.3864 -279.001 107.653 -368 189.832L-319.08 495.554C-184.225 258.529 94.6793 330.227 217.275 395.705C343.406 477.884 658.146 599.108 908.052 426.567C1157.96 254.027 1416.9 354.675 1515.13 426.567V562L1625.35 395.705C1675.25 283.994 1735.1 50.2603 1575.25 9.01323C1415.41 -32.2338 1275.17 78.0609 1175.64 138.273C1055.4 211.013 723.334 315.171 356.962 149.892Z" fill="url(#paint0_linear_114_363)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_b_114_363" x="-392" y="-24" width="2095" height="610" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feGaussianBlur in="BackgroundImageFix" stdDeviation="12"/>
|
||||
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_114_363"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_114_363" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_114_363" x1="655.5" y1="0" x2="655.5" y2="562" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#94E0C1"/>
|
||||
<stop offset="0.625964" stop-color="#69CBA3" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
10
src/assets/interakto-section2-1.svg
Normal file
10
src/assets/interakto-section2-1.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="1440" height="904" viewBox="0 0 1440 904" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1522 148C1025.6 266.4 186.5 98.6667 -171 0L-40 903.5C632.5 586.5 884 596.5 1191 665.5C1436.6 720.7 1514 847.167 1522 903.5V148Z" fill="url(#paint0_linear_114_431)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_114_431" x1="675.5" y1="4.23579e-05" x2="1434" y2="904" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0364583" stop-color="#DBFFEA"/>
|
||||
<stop offset="0.526042" stop-color="#98FFC4"/>
|
||||
<stop offset="1" stop-color="#C0ECD3" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 592 B |
9
src/assets/interakto-section2-2.svg
Normal file
9
src/assets/interakto-section2-2.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="1440" height="215" viewBox="0 0 1440 215" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1489.5 127.5C931.9 274.3 259.167 103.667 -7.5 0L-59 215L1489.5 203.5V127.5Z" fill="url(#paint0_linear_114_434)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_114_434" x1="715.25" y1="5.36615e-08" x2="715" y2="215" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B5E9DC"/>
|
||||
<stop offset="1" stop-color="#8DE7D1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 457 B |
1
src/assets/menu-icon.svg
Normal file
1
src/assets/menu-icon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
|
||||
|
After Width: | Height: | Size: 174 B |
1
src/assets/navigate_next.svg
Normal file
1
src/assets/navigate_next.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 -960 960 960" width="24"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>
|
||||
|
After Width: | Height: | Size: 174 B |
10
src/assets/teenybeans-section1-1.svg
Normal file
10
src/assets/teenybeans-section1-1.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="1440" height="942" viewBox="0 0 1440 942" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1440" height="942" fill="url(#paint0_linear_78_27)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_78_27" x1="677.5" y1="1.7759e-06" x2="745.629" y2="944.083" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00540305" stop-color="#838B01"/>
|
||||
<stop offset="0.424951" stop-color="#A4AD2E"/>
|
||||
<stop offset="1" stop-color="#DEED00"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 471 B |
3
src/assets/teenybeans-section1-2.svg
Normal file
3
src/assets/teenybeans-section1-2.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1439" height="539" viewBox="0 0 1439 539" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1439 0C977.64 313.782 287.433 130.743 0 0V307.571C363.726 203.377 1110.89 418.443 1439 539V0Z" fill="#BDC91F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 231 B |
9
src/assets/teenybeans-section2-1.svg
Normal file
9
src/assets/teenybeans-section2-1.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="1440" height="890" viewBox="0 0 1440 890" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1440" height="890" fill="url(#paint0_linear_79_1786)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_79_1786" x1="720" y1="0" x2="720" y2="890" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#838C01"/>
|
||||
<stop offset="1" stop-color="#D5DD62"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 389 B |
3
src/assets/teenybeans-section2-2.svg
Normal file
3
src/assets/teenybeans-section2-2.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1440" height="320" viewBox="0 0 1440 320" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M-25 58.2009V227.009L1455 319.999V97.7461C968 -189.5 715 273.504 -25 58.2009Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 212 B |
11
src/assets/toddlers-section1-1.svg
Normal file
11
src/assets/toddlers-section1-1.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="1440" height="810" viewBox="0 0 1440 810" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1440" height="810" fill="url(#paint0_linear_267_192)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_267_192" x1="579.5" y1="-52.8822" x2="797.831" y2="1470.34" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.09375" stop-color="#FFF1FD"/>
|
||||
<stop offset="0.442708" stop-color="#FCEFF8"/>
|
||||
<stop offset="0.697917" stop-color="#FAFFF9"/>
|
||||
<stop offset="1" stop-color="#FCEFF8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 517 B |
10
src/assets/toddlers-section1-2.svg
Normal file
10
src/assets/toddlers-section1-2.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="1440" height="820" viewBox="0 0 1440 820" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M459 369C200.6 332.6 8.66667 424.5 -55 475V819.5L1468 674V-25.5V-46.5C1466.17 22.3333 1304.1 206.6 1200.5 285C1071 383 782 414.5 459 369Z" fill="url(#paint0_linear_268_162)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_268_162" x1="706.5" y1="-25.5001" x2="1876" y2="1852.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFF2FE"/>
|
||||
<stop offset="1" stop-color="#F0C4D4"/>
|
||||
<stop offset="1" stop-color="#FFF1FD"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 558 B |
3
src/assets/toddlers-section2-1.svg
Normal file
3
src/assets/toddlers-section2-1.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="1440" height="465" viewBox="0 0 1440 465" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1837.25 116.713C1083.84 -110.786 134.079 46.5515 -246.624 153.657L-262 341.681L1808.84 464.239L1837.25 116.713Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 247 B |
3
src/assets/toddlers-sprinkle-1.svg
Normal file
3
src/assets/toddlers-sprinkle-1.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="101" height="120" viewBox="0 0 101 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M23.0547 67.9087C9.60645 63.0264 0 50.1353 0 35C0 15.6699 15.6699 0 35 0C53.248 0 68.2344 13.9653 69.8545 31.7915C87.6289 35.4263 101 51.1514 101 70C101 91.5391 74.0391 120 52.5 120C30.9609 120 23 91.5391 23 70C23 69.2983 23.0186 68.6011 23.0547 67.9087Z" fill="#A7C4E6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 443 B |
3
src/assets/toddlers-sprinkle-11.svg
Normal file
3
src/assets/toddlers-sprinkle-11.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="109" height="36" viewBox="0 0 109 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.4" d="M4.067 10.4198L1.85675 12.612C-0.281259 14.7326 -0.547329 18.1561 1.55507 20.312C15.0911 34.1924 32.1681 31.6548 39.5255 28.3149C47.1392 24.3508 64.9592 16.5663 75.3293 17.1404C82.7368 17.5505 89.063 25.1589 93.1043 32.1222C95.1709 35.683 100.052 36.9015 103.197 34.2444L105.944 31.923C107.902 30.2685 108.607 27.5453 107.466 25.2496C104.7 19.683 100.365 12.9986 97.0912 10.8332C83.2221 1.65939 64.022 -6.20445 47.0446 7.11055C33.5041 17.73 20.6383 14.5562 13.0233 9.8685C10.2073 8.13508 6.41474 8.09119 4.067 10.4198Z" fill="#ADD8E5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 665 B |
3
src/assets/toddlers-sprinkle-12.svg
Normal file
3
src/assets/toddlers-sprinkle-12.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="60" height="66" viewBox="0 0 60 66" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M42.1591 2.15095C49.3924 -2.25167 58.6792 2.82696 58.8753 11.2925L59.8635 53.9435C60.0596 62.409 51.018 67.9123 43.5885 63.8494L6.1576 43.3797C-1.27184 39.3168 -1.517 28.7348 5.71629 24.3322L42.1591 2.15095Z" fill="#C1DBD5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 338 B |
3
src/assets/toddlers-sprinkle-13.svg
Normal file
3
src/assets/toddlers-sprinkle-13.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="71" height="72" viewBox="0 0 71 72" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.16042 61.0116L0.278702 63.9756C-0.80503 67.6186 1.74712 71.3504 5.54544 71.4873C67.9739 73.7369 74.3997 31.1944 68.8635 4.35481C68.1911 1.09498 64.8109 -0.712264 61.6244 0.249739L57.7645 1.41508C55.1152 2.21494 53.3805 4.73187 53.3894 7.49932C53.5183 47.4757 25.7824 56.7924 7.69159 56.4828C4.7522 56.4325 1.99866 58.1938 1.16042 61.0116Z" fill="#F8D88F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 472 B |
3
src/assets/toddlers-sprinkle-2.svg
Normal file
3
src/assets/toddlers-sprinkle-2.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="178" height="106" viewBox="0 0 178 106" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" d="M4.06496 81.8292L0.74732 95.6868C0.049217 98.6027 1.6181 101.619 4.47846 102.518C39.7931 113.617 64.6311 92.8123 72.8986 80.4493C80.6625 67.3651 100.22 39.0037 116.34 30.2311C129.658 22.9831 149.741 31.6681 162.524 39.6325C166.032 41.818 170.828 40.2966 172.106 36.3664L177.113 20.973C177.902 18.5482 177.082 15.8792 174.968 14.4532C165.563 8.10893 150.847 0.703238 143.194 0.442373C113.832 -0.558362 77.674 5.38191 64.5165 41.3374C52.9679 72.8961 27.1404 78.3898 11.3937 76.9398C8.08877 76.6354 4.83772 78.6015 4.06496 81.8292Z" fill="#ADD8E5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 677 B |
3
src/assets/toddlers-sprinkle-3.svg
Normal file
3
src/assets/toddlers-sprinkle-3.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="157" height="151" viewBox="0 0 157 151" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.45544 75.1966L53.9174 148.248C55.1896 150.054 57.685 150.487 59.491 149.215L75.5879 137.875C77.3939 136.603 77.8266 134.108 76.5544 132.302L63.0243 113.095C55.7088 102.711 58.1968 88.362 68.5813 81.0465L84.905 69.5472C95.2895 62.2317 109.638 64.7197 116.954 75.1042L130.484 94.3106C131.756 96.1166 134.251 96.5493 136.057 95.277L154.152 82.5304C155.958 81.2581 156.39 78.7627 155.118 76.9567L103.656 3.90489C101.748 1.19588 98.0047 0.546842 95.2957 2.45522L3.9051 66.8361C1.19609 68.7445 0.547055 72.4876 2.45544 75.1966Z" fill="#ADD8E5" stroke="#ADD8E5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 676 B |
3
src/assets/toddlers-sprinkle-4.svg
Normal file
3
src/assets/toddlers-sprinkle-4.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="70" height="94" viewBox="0 0 70 94" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.5" x="42.2246" y="-2.5885" width="34" height="94" rx="8" transform="rotate(27.9846 42.2246 -2.5885)" fill="#F0C4D4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 238 B |
3
src/assets/toddlers-sprinkle-5.svg
Normal file
3
src/assets/toddlers-sprinkle-5.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="102" height="153" viewBox="0 0 102 153" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" d="M82.6969 5.04021C95.0665 -4.59733 113.211 3.10097 114.876 18.6932L116.997 38.5574C117.632 44.4978 120.888 49.8436 125.876 53.1318L142.258 63.9312C155.578 72.7116 153.76 92.7868 139.081 99.0327L121.81 106.381C116.201 108.768 111.987 113.582 110.363 119.456L105.305 137.758C101.099 152.973 81.7506 157.547 71.1771 145.826L57.5338 130.701C53.581 126.32 47.8949 123.907 41.9971 124.109L21.6404 124.808C5.86394 125.35 -4.29199 108.257 3.72702 94.6601L13.3725 78.3049C16.4688 73.0548 17.002 66.6792 14.8207 60.9877L8.10376 43.4615C2.39474 28.5652 15.5683 13.3082 31.1377 16.7848L50.2876 21.0608C56.1182 22.3628 62.2256 20.99 66.9383 17.3182L82.6969 5.04021Z" fill="#F1B88B"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 800 B |
3
src/assets/toddlers-sprinkle-6.svg
Normal file
3
src/assets/toddlers-sprinkle-6.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="163" height="85" viewBox="0 0 163 85" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.5" x="66.9463" y="-91" width="135.43" height="135.43" rx="34" transform="rotate(36.3178 66.9463 -91)" fill="#F8D88F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 241 B |
3
src/assets/toddlers-sprinkle-7.svg
Normal file
3
src/assets/toddlers-sprinkle-7.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="46" height="92" viewBox="0 0 46 92" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M0 92C25.4051 92 46 71.4051 46 46C46 20.5949 25.4051 0 0 0C-25.4051 0 -46 20.5949 -46 46C-46 71.4051 -25.4051 92 0 92ZM0 67.8582C12.0719 67.8582 21.8582 58.0719 21.8582 46C21.8582 33.9281 12.0719 24.1418 0 24.1418C-12.0719 24.1418 -21.8582 33.9281 -21.8582 46C-21.8582 58.0719 -12.0719 67.8582 0 67.8582Z" fill="#C1DBD5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 489 B |
115
src/components/Auth/EmailVerification.jsx
Normal file
115
src/components/Auth/EmailVerification.jsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { Box, Button, Typography } from "@mui/material";
|
||||
import * as React from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { buzzOneSendOtpAsync } from "../../redux/authSlice";
|
||||
import { palette } from "../../theme/palette";
|
||||
|
||||
import { unwrapResult } from "@reduxjs/toolkit";
|
||||
import { TOKEN_NAME } from "../../utils/constants";
|
||||
|
||||
useNavigate;
|
||||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const EmailVerification = ({
|
||||
onPhaseChange,
|
||||
dataSet,
|
||||
showFromPublicRoute = true,
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const [showSendOtp, setShowSendOtp] = React.useState(true);
|
||||
|
||||
const { user } = useSelector(({ auth }) => {
|
||||
return {
|
||||
user: auth.user,
|
||||
};
|
||||
});
|
||||
console.log({ user });
|
||||
|
||||
const sendEmailOtp = async () => {
|
||||
dispatch(
|
||||
buzzOneSendOtpAsync({
|
||||
email: user.email || dataSet.email,
|
||||
token: localStorage.getItem(TOKEN_NAME) || dataSet.token,
|
||||
})
|
||||
)
|
||||
.then(unwrapResult)
|
||||
.then((res) => {
|
||||
// if (res.status === 200) {
|
||||
// SuccessToast(res.message);
|
||||
// if (!showFromPublicRoute) {
|
||||
// onPhaseChange('mailVerificationLink');
|
||||
// } else {
|
||||
// setShowSendOtp(false);
|
||||
// }
|
||||
// } else {
|
||||
// WarningToast(res.message);
|
||||
// }
|
||||
toast.success(res.message);
|
||||
// onPhaseChange('mailVerificationLink');
|
||||
if (!showFromPublicRoute) {
|
||||
onPhaseChange("mailVerificationLink");
|
||||
} else {
|
||||
setShowSendOtp(false);
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
toast.error(res.message);
|
||||
});
|
||||
};
|
||||
|
||||
return showFromPublicRoute ? (
|
||||
<Box
|
||||
display="flex"
|
||||
style={{ width: "100vw", height: "100vh", background: "white" }}
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
width="50vw"
|
||||
height="100vh"
|
||||
sx={{
|
||||
background:
|
||||
"transparent linear-gradient(326deg, #441514 0%, #441514 0%, #7553E8 100%, #441514 100%) 0% 0% no-repeat padding-box",
|
||||
}}
|
||||
>
|
||||
{/* <Carousel>
|
||||
|
||||
</Carousel> */}
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<>
|
||||
<Typography variant="h4">Email-id isn’t verified</Typography>
|
||||
<Box my={2} />
|
||||
<Typography style={{ fontSize: "12px", color: palette.palette.buzzFade }}>
|
||||
The email associated with your BuzzApp account needs to be confirmed. We can
|
||||
send{" "}
|
||||
<span style={{ color: palette.palette.primary.main }}>
|
||||
{dataSet && dataSet.email}
|
||||
</span>{" "}
|
||||
a quick verification link.
|
||||
</Typography>
|
||||
|
||||
<Box my={3} />
|
||||
<Button variant="contained" color="primary" fullWidth onClick={sendEmailOtp}>
|
||||
Send verification email
|
||||
</Button>
|
||||
<Box my={2} />
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
fullWidth
|
||||
onClick={skipAndProceed}
|
||||
>
|
||||
Skip for now
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmailVerification;
|
||||
195
src/components/Auth/MailVerificationLink.jsx
Normal file
195
src/components/Auth/MailVerificationLink.jsx
Normal file
@@ -0,0 +1,195 @@
|
||||
import { Box, Button, styled, Typography } from "@mui/material";
|
||||
import { unwrapResult } from "@reduxjs/toolkit";
|
||||
import OTPInput from "otp-input-react";
|
||||
import * as React from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { toast } from "react-toastify";
|
||||
import { buzzOneGetUserAsync, buzzOneSignInAsync, buzzOneVerifyOtpAsync, emailResendOtpAsync } from "../redux/authSlice";
|
||||
import { palette } from "../theme/palette";
|
||||
import { TOKEN_NAME } from "../utils/constants";
|
||||
|
||||
const ButtonCustom = styled(Button)(({ theme }) => ({
|
||||
"& .MuiButton-label": {
|
||||
fontSize: "12px",
|
||||
},
|
||||
}));
|
||||
|
||||
const OTPFieldCustom = styled(OTPInput)(({ theme }) => ({
|
||||
"& input": {
|
||||
background: theme.palette.buzzGreyBlue,
|
||||
border: "none",
|
||||
height: "55px !important",
|
||||
width: "40px !important",
|
||||
},
|
||||
}));
|
||||
|
||||
// const useStyles = makeStyles((theme) => ({
|
||||
// greyText: {
|
||||
// color: theme.palette.buzzGreyColor,
|
||||
// },
|
||||
// smallText: {
|
||||
// ...theme.typography.body2,
|
||||
// },
|
||||
// verticalSpace: {
|
||||
// margin: "50px 0",
|
||||
// },
|
||||
// button: {
|
||||
// backgroundColor: theme.palette.primary.main,
|
||||
// color: theme.palette.buzzContainerColor,
|
||||
// // height: 40,
|
||||
// },
|
||||
// otpInputs: {
|
||||
// "& input": {
|
||||
// background: theme.palette.buzzGreyBlue,
|
||||
// border: "none",
|
||||
// height: "55px !important",
|
||||
// width: "40px !important",
|
||||
// },
|
||||
// },
|
||||
// }));
|
||||
|
||||
const MailVerificationLink = ({
|
||||
onPhaseChange,
|
||||
dataSet,
|
||||
showFromPublicRoute = false,
|
||||
}) => {
|
||||
// const navigate = useNavigate();
|
||||
const classes = useStyles();
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const [OTP, setOTP] = React.useState("");
|
||||
const [message, setMessage] = React.useState(
|
||||
"NOTE: Cannot resend otp before 60 seconds."
|
||||
);
|
||||
|
||||
const { user } = useSelector(({ signInReducer }) => {
|
||||
return {
|
||||
user: signInReducer.user,
|
||||
};
|
||||
});
|
||||
|
||||
const skipAndProceed = async () => {
|
||||
if (showFromPublicRoute) {
|
||||
// navigate("/school-account");
|
||||
window.location.href = "/school-account";
|
||||
} else {
|
||||
let email = dataSet.email;
|
||||
let password = dataSet.password;
|
||||
dispatch(buzzOneSignInAsync({ email, password }))
|
||||
.then(unwrapResult)
|
||||
.then(async (res) => {
|
||||
if (res.status === 200) {
|
||||
await localStorage.setItem(TOKEN_NAME, res.token);
|
||||
await localStorage.setItem("userId", res.data.userId);
|
||||
dispatch(buzzOneGetUserAsync())
|
||||
.then(unwrapResult)
|
||||
.then(() => {
|
||||
// navigate("/school-account");
|
||||
window.location.href = "/school-account";
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const resendOtp = async () => {
|
||||
try {
|
||||
const data = await dispatch(
|
||||
emailResendOtpAsync({
|
||||
token: localStorage.getItem(TOKEN_NAME) || dataSet.token,
|
||||
})
|
||||
);
|
||||
|
||||
// console.log(data);
|
||||
data.payload && setMessage(data.payload.message);
|
||||
} catch (error) {
|
||||
setMessage(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const verifyOtp = async () => {
|
||||
dispatch(
|
||||
buzzOneVerifyOtpAsync({
|
||||
otp: OTP,
|
||||
token: localStorage.getItem(TOKEN_NAME) || dataSet.token,
|
||||
})
|
||||
)
|
||||
.then(unwrapResult)
|
||||
// .then((res) => res.status === 200 && skipAndProceed());
|
||||
.then((res) => {
|
||||
toast.success(res.message);
|
||||
// navigate("/school-account");
|
||||
window.location.href = "/school-account";
|
||||
})
|
||||
.catch((res) => {
|
||||
toast.error(res.message);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Typography variant="h4">Thanks, check your inbox</Typography>
|
||||
<Box my={2} />
|
||||
<Typography style={{ fontSize: "12px", color: palette.palette.buzzFade }}>
|
||||
We’ve sent an email to{" "}
|
||||
<span style={{ color: palette.palette.primary.main }}>
|
||||
{user && user.email ? user.email : dataSet && dataSet.email}
|
||||
</span>{" "}
|
||||
with a verification link.
|
||||
</Typography>
|
||||
<Box my={2} />
|
||||
<Typography style={{ fontSize: "12px", color: palette.palette.buzzFade }}>
|
||||
If it’s been a few minutes and you still haven’t received anything, check
|
||||
your spam folder or{" "}
|
||||
<span
|
||||
style={{ color: palette.palette.primary.main, cursor: "pointer" }}
|
||||
onClick={resendOtp}
|
||||
>
|
||||
resend the email
|
||||
</span>
|
||||
.
|
||||
</Typography>
|
||||
|
||||
<Box my={3} />
|
||||
<OTPFieldCustom
|
||||
value={OTP}
|
||||
onChange={setOTP}
|
||||
autoFocus
|
||||
OTPLength={6}
|
||||
disabled={false}
|
||||
// secure
|
||||
className={classes.otpInputs}
|
||||
/>
|
||||
|
||||
<Box my={3} />
|
||||
<ButtonCustom
|
||||
variant="contained"
|
||||
color="primary"
|
||||
fullWidth
|
||||
onClick={verifyOtp}
|
||||
>
|
||||
Verify otp
|
||||
</ButtonCustom>
|
||||
|
||||
<Box my={3} />
|
||||
<ButtonCustom
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
fullWidth
|
||||
onClick={skipAndProceed}
|
||||
>
|
||||
Skip for now
|
||||
</ButtonCustom>
|
||||
|
||||
<Box my={3} />
|
||||
<Typography
|
||||
style={{ fontSize: "12px", color: palette.palette.primary.main }}
|
||||
>
|
||||
{message}
|
||||
</Typography>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MailVerificationLink;
|
||||
39
src/components/Auth/SignInHOC.jsx
Normal file
39
src/components/Auth/SignInHOC.jsx
Normal file
@@ -0,0 +1,39 @@
|
||||
// import { Box } from "@material-ui";
|
||||
import * as React from "react";
|
||||
// import ForgotPasswordAcknowledgement from "./ForgotPasswordAcknowledgement";
|
||||
// import ForgotPasswordEmail from "./ForgotPasswordEmail";
|
||||
import SignInPhase from "./SignInPhase";
|
||||
// import ResetPassword from "./ResetPassword";
|
||||
// import PasswordResetAcknowledgement from './PasswordResetAcknowledgement';
|
||||
import { Box } from "@mui/material";
|
||||
import MailVerificationLink from "./MailVerificationLink";
|
||||
// import useResponsive from "../../hooks/useResponsive";
|
||||
|
||||
const SignInHOC = () => {
|
||||
const [phase, setPhase] = React.useState("signin");
|
||||
const [dataSet, setDataSet] = React.useState(null);
|
||||
const [newotp, setNewotp] = React.useState(null);
|
||||
|
||||
// const { isWeb, isTab } = useResponsive();
|
||||
|
||||
const ChangePhase = (phaseValue) => {
|
||||
setPhase(phaseValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={4}>
|
||||
{phase === "signin" && (
|
||||
<SignInPhase
|
||||
onPhaseChange={ChangePhase}
|
||||
onDataSet={(data) => setDataSet(data)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{phase === "mailVerificationLink" && dataSet && (
|
||||
<MailVerificationLink onPhaseChange={ChangePhase} dataSet={dataSet} />
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignInHOC;
|
||||
154
src/components/Auth/SignInPhase.jsx
Normal file
154
src/components/Auth/SignInPhase.jsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import { Visibility, VisibilityOff } from "@mui/icons-material";
|
||||
import { Box, Button, IconButton, Typography } from "@mui/material";
|
||||
import { unwrapResult } from "@reduxjs/toolkit";
|
||||
import { useFormik } from "formik";
|
||||
import * as React from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
// import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import validator from "validator";
|
||||
import BuzzInput from "../BuzzInput/BuzzInput";
|
||||
import { buzzOneGetUserAsync, buzzOneSignInAsync, logOut } from "../redux/authSlice";
|
||||
|
||||
const validate = (values) => {
|
||||
const errors = {};
|
||||
const { email, password } = values;
|
||||
|
||||
if (!email) {
|
||||
errors.email = "**This field is required";
|
||||
} else if (!validator.isEmail(email)) {
|
||||
errors.email = "Please Enter a valid Email";
|
||||
}
|
||||
if (!password) {
|
||||
errors.password = "**This Field is required";
|
||||
} else if (password.toString().length < 5) {
|
||||
errors.password = "Password can not be less than 5 characters";
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
const SignInPhase = ({ onPhaseChange, onDataSet }) => {
|
||||
const dispatch = useDispatch();
|
||||
// const navigate = useNavigate();
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
showPassword: false,
|
||||
email: "",
|
||||
password: "",
|
||||
},
|
||||
onSubmit: (values) => {
|
||||
const { email, password } = values;
|
||||
dispatch(buzzOneSignInAsync({ email, password }))
|
||||
.then(unwrapResult)
|
||||
.then((res) => {
|
||||
// console.log('all details hhh', res);
|
||||
if (!res) {
|
||||
dispatch(logOut());
|
||||
return;
|
||||
}
|
||||
onDataSet({
|
||||
email: email,
|
||||
password: password,
|
||||
token: res.token,
|
||||
});
|
||||
dispatch(buzzOneGetUserAsync())
|
||||
.then(unwrapResult)
|
||||
.then((res) => {
|
||||
// navigate("/");
|
||||
window.location.href = "/";
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.error(error.message);
|
||||
});
|
||||
},
|
||||
validate,
|
||||
});
|
||||
|
||||
const handleShowPassword = () => {
|
||||
formik.setFieldValue("showPassword", !formik.values.showPassword);
|
||||
};
|
||||
|
||||
const { email, password } = formik.values;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
<Typography variant="h3">Sign In</Typography>
|
||||
|
||||
{/* <Box display="flex" alignItems="center">
|
||||
<Typography style={{ marginRight: 10 }}>New here ?</Typography>{" "}
|
||||
<Link underline="hover" variant="body2" to={"/signup"}>
|
||||
Create an account
|
||||
</Link>
|
||||
</Box> */}
|
||||
</Box>
|
||||
|
||||
<form
|
||||
noValidate
|
||||
autoComplete="off"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<Box my={5}>
|
||||
<BuzzInput
|
||||
required
|
||||
type="email"
|
||||
name="email"
|
||||
id="childNameId"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
placeholder="Ex: jondoe@workemail.com"
|
||||
value={email}
|
||||
onBlur={formik.handleBlur}
|
||||
onChange={formik.handleChange}
|
||||
error={formik.touched.email && formik.errors.email !== ""}
|
||||
helperText={formik.touched.email ? formik.errors.email : ""}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box my={5}>
|
||||
<BuzzInput
|
||||
required
|
||||
id="childNameId"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
value={password}
|
||||
placeholder="Enter password"
|
||||
onChange={formik.handleChange}
|
||||
type={formik.values.showPassword ? "text" : "password"}
|
||||
name={"password"}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.password && formik.errors.password !== ""}
|
||||
helperText={formik.touched.password ? formik.errors.password : ""}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<IconButton
|
||||
type="checkbox"
|
||||
aria-label="toggle password visibility"
|
||||
value={formik.values.showPassword}
|
||||
onClick={handleShowPassword}
|
||||
>
|
||||
{formik.values.showPassword ? <Visibility /> : <VisibilityOff />}
|
||||
</IconButton>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={formik.handleSubmit}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignInPhase;
|
||||
43
src/components/Auth/SignInScreen.jsx
Normal file
43
src/components/Auth/SignInScreen.jsx
Normal file
@@ -0,0 +1,43 @@
|
||||
// import { Box } from "@material-ui/core";
|
||||
import React from "react";
|
||||
// import { useDispatch } from 'react-redux';
|
||||
// import { AUTH_TOKEN } from "../../environments";
|
||||
// import useResponsive from "../../hooks/useResponsive";
|
||||
import { Box } from "@mui/material";
|
||||
import SignInHOC from "./SignInHOC";
|
||||
import { store } from "../redux/store";
|
||||
import { Provider } from "react-redux";
|
||||
|
||||
const SignInScreen = () => {
|
||||
// if (AUTH_TOKEN()) {
|
||||
// return <></>;
|
||||
// }
|
||||
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<Box
|
||||
display="flex"
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
style={{
|
||||
width: "100vw",
|
||||
height: "100vh",
|
||||
background:
|
||||
"transparent linear-gradient(326deg, #441514 0%, #441514 0%, #7553E8 100%, #441514 100%) 0% 0% no-repeat padding-box",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
py={8}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="space-evenly"
|
||||
style={{ width: "70vw", background: "white" }}
|
||||
>
|
||||
<SignInHOC />
|
||||
</Box>
|
||||
</Box>
|
||||
</Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignInScreen;
|
||||
367
src/components/Auth/SignUp/SelectSchool.jsx
Normal file
367
src/components/Auth/SignUp/SelectSchool.jsx
Normal file
@@ -0,0 +1,367 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
TextField,
|
||||
Typography,
|
||||
makeStyles,
|
||||
useTheme,
|
||||
} from "@material-ui/core";
|
||||
import { Autocomplete } from "@material-ui/lab";
|
||||
import { unwrapResult } from "@reduxjs/toolkit";
|
||||
import * as React from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import {
|
||||
buzzOneGetUserAsync,
|
||||
logOut,
|
||||
} from "../../../auth/SignInScreen/SigninStore/signinSlice";
|
||||
import { isValidToken } from "../../../auth/utils/jwtValidator";
|
||||
import BuzzLabel from "../../../components/BuzzLabel/BuzzLabel";
|
||||
import BuzzSelect from "../../../components/BuzzSelect/BuzzSelect";
|
||||
import useResponsive from "../../../hooks/useResponsive";
|
||||
import useToast from "../../../hooks/useToast";
|
||||
import {
|
||||
saveOtherDetailsAsync,
|
||||
searchSchoolAsync,
|
||||
} from "../OnboardingStore/onboardingSlice";
|
||||
|
||||
const generalStyle = {
|
||||
inputWidth: {
|
||||
width: 400,
|
||||
},
|
||||
};
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
overAll: {
|
||||
width: "100vw",
|
||||
height: "100vh",
|
||||
backgroundColor: theme.palette.buzzPurple,
|
||||
},
|
||||
card: {
|
||||
width: 500,
|
||||
height: 550,
|
||||
padding: "50px 0",
|
||||
backgroundColor: theme.palette.buzzContainerColor,
|
||||
},
|
||||
title: {
|
||||
fontSize: "2rem",
|
||||
textAlign: "center",
|
||||
},
|
||||
option: {
|
||||
width: generalStyle.inputWidth.width,
|
||||
padding: 5,
|
||||
borderBottom: `1px solid ${theme.palette.buzzBorder}`,
|
||||
...theme.typography.body1,
|
||||
color: theme.palette.buzzGreyColor,
|
||||
},
|
||||
greyText: {
|
||||
color: theme.palette.buzzGreyColor,
|
||||
},
|
||||
smallText: {
|
||||
...theme.typography.body2,
|
||||
},
|
||||
verticalSpace: {
|
||||
margin: "50px 0",
|
||||
},
|
||||
dropdownContainer: {
|
||||
width: generalStyle.inputWidth.width,
|
||||
border: `1px solid ${theme.palette.buzzBorder}`,
|
||||
},
|
||||
button: {
|
||||
width: generalStyle.inputWidth.width,
|
||||
height: 50,
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.buzzFadeLite,
|
||||
fontSize: 10,
|
||||
},
|
||||
}));
|
||||
|
||||
const SelectSchool = ({ history }) => {
|
||||
const theme = useTheme();
|
||||
const [schoolName, setSchoolName] = React.useState(null);
|
||||
const [designation, setDesignation] = React.useState("");
|
||||
const [staffStrength, setStaffStrength] = React.useState("");
|
||||
const classes = useStyles();
|
||||
const { isWeb, isMobile } = useResponsive();
|
||||
|
||||
const { ErrorToast } = useToast();
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const { searchSchool } = useSelector(({ onboardingReducer }) => {
|
||||
return {
|
||||
signUpCreds: onboardingReducer.signUpCreds,
|
||||
loading: onboardingReducer.loading,
|
||||
searchSchool: onboardingReducer.searchSchool,
|
||||
select_school: onboardingReducer.select_school,
|
||||
};
|
||||
});
|
||||
|
||||
const designations = [
|
||||
{ position: "Principal" },
|
||||
{ position: "Dean" },
|
||||
{ position: "Center Co-ordinator" },
|
||||
{ position: "Head of IT" },
|
||||
{ position: "Head of Human Resources" },
|
||||
{ position: "Other" },
|
||||
];
|
||||
|
||||
const strengths = [
|
||||
{ strength: "Less than 50" },
|
||||
{ strength: "50 - 100" },
|
||||
{ strength: "101-200" },
|
||||
{ strength: "201-500" },
|
||||
{ strength: "501 +" },
|
||||
];
|
||||
|
||||
const updateNewUser = () => {
|
||||
if (schoolName && staffStrength.length > 0 && designation.length > 0) {
|
||||
dispatch(
|
||||
saveOtherDetailsAsync({
|
||||
searchTerms: schoolName.schoolName,
|
||||
staffStrength: staffStrength,
|
||||
designation: designation,
|
||||
})
|
||||
)
|
||||
.then(unwrapResult)
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
schoolName._id && localStorage.setItem("schoolId", schoolName._id);
|
||||
localStorage.setItem("schoolName", schoolName.schoolName);
|
||||
if (isValidToken()) {
|
||||
dispatch(buzzOneGetUserAsync())
|
||||
.then(unwrapResult)
|
||||
.then(() => {
|
||||
if (schoolName._id) {
|
||||
if (isWeb) {
|
||||
history.push(
|
||||
`/school-management/view-branch-details/${schoolName._id}`
|
||||
);
|
||||
} else {
|
||||
history.push(
|
||||
`/school-management/view-branch-details/${schoolName._id}/${schoolName.schoolName}/kyc`
|
||||
);
|
||||
}
|
||||
} else history.push("/");
|
||||
});
|
||||
} else {
|
||||
dispatch(logOut());
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
ErrorToast("All fields are mandatory to continue!");
|
||||
}
|
||||
};
|
||||
|
||||
return isWeb ? (
|
||||
<Box
|
||||
display="flex"
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
className={classes.overAll}
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent={"space-around"}
|
||||
alignItems={"center"}
|
||||
className={classes.card}
|
||||
>
|
||||
<Box flex={"1 1 0%"}>
|
||||
<Typography
|
||||
variant={"h3"}
|
||||
className={`${classes.greyText} ${classes.title}`}
|
||||
>
|
||||
Create school account
|
||||
</Typography>
|
||||
<Typography className={`${classes.greyText} ${classes.smallText}`}>
|
||||
Give us these additional details to setup your dashboard
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box m={6} width={generalStyle.inputWidth.width}>
|
||||
<BuzzLabel label={"School Name"} />
|
||||
<Autocomplete
|
||||
freeSolo
|
||||
disablePortal
|
||||
id="combo-box-demo"
|
||||
options={searchSchool}
|
||||
getOptionLabel={(option) => option.schoolName}
|
||||
sx={{
|
||||
width: "70%",
|
||||
"& .MuiOutlinedInput-root": {
|
||||
padding: "6px",
|
||||
"& .MuiAutocomplete-input": {
|
||||
padding: "0px 4px 0px 6px",
|
||||
},
|
||||
},
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
sx={{
|
||||
"& .css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root": {
|
||||
top: -9,
|
||||
},
|
||||
}}
|
||||
{...params}
|
||||
onChange={(e) => {
|
||||
e.target.value.length >= 3 &&
|
||||
dispatch(searchSchoolAsync(e.target.value));
|
||||
setSchoolName({ schoolName: e.target.value });
|
||||
}}
|
||||
value={schoolName && schoolName.schoolName}
|
||||
/>
|
||||
)}
|
||||
onChange={(event, school) => setSchoolName(school)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<BuzzSelect
|
||||
size="small"
|
||||
width={generalStyle.inputWidth.width}
|
||||
name="designationId"
|
||||
labelKey="position"
|
||||
valueKey="position"
|
||||
options={designations}
|
||||
// mt={2}
|
||||
value={designation}
|
||||
onChange={(e) => setDesignation(e.target.value)}
|
||||
label="Designation"
|
||||
/>
|
||||
|
||||
<BuzzSelect
|
||||
size="small"
|
||||
width={generalStyle.inputWidth.width}
|
||||
name="staffStrengthId"
|
||||
labelKey="strength"
|
||||
valueKey="strength"
|
||||
options={strengths}
|
||||
// mt={2}
|
||||
value={staffStrength}
|
||||
onChange={(e) => setStaffStrength(e.target.value)}
|
||||
label="Student strength"
|
||||
/>
|
||||
|
||||
<Button
|
||||
className={classes.button}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={updateNewUser}
|
||||
>
|
||||
Go to dashboard
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
display="flex"
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
className={classes.overAll}
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent={"space-around"}
|
||||
alignItems={"center"}
|
||||
width={isMobile ? "85vw" : "80vw"}
|
||||
bgcolor={theme.palette.buzzContainerColor}
|
||||
py={isMobile ? 3 : 6}
|
||||
px={isMobile ? 2 : 5}
|
||||
height={500}
|
||||
>
|
||||
<Box flex={"1 1 0%"}>
|
||||
<Typography
|
||||
variant={"h3"}
|
||||
className={`${classes.greyText} ${classes.title}`}
|
||||
>
|
||||
Create school account
|
||||
</Typography>
|
||||
<Typography className={`${classes.greyText} ${classes.smallText}`}>
|
||||
Give us these additional details to setup your dashboard
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box my={6} mx={2} width={"100%"}>
|
||||
<BuzzLabel label={"School Name"} />
|
||||
<Autocomplete
|
||||
freeSolo
|
||||
disablePortal
|
||||
id="combo-box-demo"
|
||||
options={searchSchool}
|
||||
getOptionLabel={(option) => option.schoolName}
|
||||
sx={{
|
||||
width: "70%",
|
||||
"& .MuiOutlinedInput-root": {
|
||||
padding: "6px",
|
||||
"& .MuiAutocomplete-input": {
|
||||
padding: "0px 4px 0px 6px",
|
||||
},
|
||||
},
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
sx={{
|
||||
"& .css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root": {
|
||||
top: -9,
|
||||
},
|
||||
}}
|
||||
{...params}
|
||||
onChange={(e) => {
|
||||
e.target.value.length >= 3 &&
|
||||
dispatch(searchSchoolAsync(e.target.value));
|
||||
setSchoolName({ schoolName: e.target.value });
|
||||
}}
|
||||
value={schoolName && schoolName.schoolName}
|
||||
/>
|
||||
)}
|
||||
onChange={(event, school) => setSchoolName(school)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<BuzzSelect
|
||||
size="small"
|
||||
width={"100%"}
|
||||
name="designationId"
|
||||
labelKey="position"
|
||||
valueKey="position"
|
||||
options={designations}
|
||||
// mt={2}
|
||||
value={designation}
|
||||
onChange={(e) => setDesignation(e.target.value)}
|
||||
label="Designation"
|
||||
/>
|
||||
|
||||
<BuzzSelect
|
||||
size="small"
|
||||
width={"100%"}
|
||||
name="staffStrengthId"
|
||||
labelKey="strength"
|
||||
valueKey="strength"
|
||||
options={strengths}
|
||||
// mt={2}
|
||||
value={staffStrength}
|
||||
onChange={(e) => setStaffStrength(e.target.value)}
|
||||
label="Student strength"
|
||||
/>
|
||||
|
||||
<Button
|
||||
// className={classes.button}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 50,
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.buzzFadeLite,
|
||||
fontSize: 10,
|
||||
}}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={updateNewUser}
|
||||
>
|
||||
Go to dashboard
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectSchool;
|
||||
274
src/components/Auth/SignUp/SignUp.jsx
Normal file
274
src/components/Auth/SignUp/SignUp.jsx
Normal file
@@ -0,0 +1,274 @@
|
||||
import { Box, Button, Typography } from "@mui/material";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import { unwrapResult } from "@reduxjs/toolkit";
|
||||
import React from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import validator from "validator";
|
||||
import BuzzInput from "../../../components/BuzzInput/BuzzInput";
|
||||
import { buzzOneSignUpAsync } from "../../../redux/authSlice";
|
||||
import { palette } from "../../../theme/palette";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
greyText: {
|
||||
color: theme.palette.buzzGreyColor,
|
||||
},
|
||||
smallText: {
|
||||
...theme.typography.body2,
|
||||
},
|
||||
verticalSpace: {
|
||||
margin: "50px 0",
|
||||
},
|
||||
button: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.buzzContainerColor,
|
||||
},
|
||||
}));
|
||||
|
||||
const SignUpScreen = () => {
|
||||
const dispatch = useDispatch();
|
||||
const { availability } = useSelector(({ auth }) => {
|
||||
return {
|
||||
availability: auth.availability,
|
||||
};
|
||||
});
|
||||
|
||||
const [name, setName] = React.useState("");
|
||||
const [email, setEmail] = React.useState("");
|
||||
const [phoneNumber, setPhoneNumber] = React.useState("");
|
||||
const [password, setPassword] = React.useState("");
|
||||
const [formFilled, setFormFilled] = React.useState(false);
|
||||
|
||||
const classes = useStyles();
|
||||
const navigate = useNavigate();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (formFilled)
|
||||
if (
|
||||
validator.isEmpty(name) &&
|
||||
validator.isEmpty(email) &&
|
||||
validator.isEmpty(phoneNumber) &&
|
||||
validator.isEmpty(password)
|
||||
) {
|
||||
setFormFilled(false);
|
||||
toast.warning("All fields are mandatory.");
|
||||
}
|
||||
}, [name, email, phoneNumber, password]);
|
||||
|
||||
const checkForValidity = () => {
|
||||
// TODO ONBOARDING /v1/auth/identity/email-and-password/signup
|
||||
// if its success then call otp /v1/auth/identity/otp/send
|
||||
// if its not success then show error message
|
||||
|
||||
dispatch(
|
||||
buzzOneSignUpAsync({
|
||||
name: name,
|
||||
email: email,
|
||||
contact: phoneNumber,
|
||||
password: password,
|
||||
})
|
||||
)
|
||||
.then(unwrapResult)
|
||||
.then((result) => {
|
||||
console.log("result", result);
|
||||
if (result.id && result.token) {
|
||||
navigate("/verify_otp");
|
||||
} else {
|
||||
// WarningToast(result.message);
|
||||
toast.warning(result.message);
|
||||
// WarningToast(result.validation.body.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const activateButton = () => {
|
||||
if (
|
||||
!validator.isEmpty(name) &&
|
||||
!validator.isEmpty(email) &&
|
||||
!validator.isEmpty(phoneNumber) &&
|
||||
!validator.isEmpty(password)
|
||||
) {
|
||||
setFormFilled(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
style={{ width: "100vw", height: "100vh", background: "white" }}
|
||||
>
|
||||
<Box width={"50vw"} height={"100vh"}>
|
||||
<Box px={12} mt={5}>
|
||||
<Typography variant="h3" className={classes.greyText}>
|
||||
Signup
|
||||
</Typography>
|
||||
<Typography fontSize="medium" className={classes.greyText}>
|
||||
Already have an account?{" "}
|
||||
<Link style={{ cursor: "pointer" }} to="/signin" color="primary">
|
||||
SignIn
|
||||
</Link>
|
||||
</Typography>
|
||||
<Box
|
||||
width={420}
|
||||
height={600}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="space-between"
|
||||
className={classes.verticalSpace}
|
||||
>
|
||||
<BuzzInput
|
||||
validation={validator.isAlpha(String(name).replace(" ", ""))}
|
||||
onChange={(e) => {
|
||||
setName(e.target.value);
|
||||
activateButton();
|
||||
}}
|
||||
value={name}
|
||||
label="Your name"
|
||||
placeholder="Enter Full Name"
|
||||
required
|
||||
/>
|
||||
<BuzzInput
|
||||
validation={validator.isEmail(email)}
|
||||
onChange={(e) => {
|
||||
setEmail(e.target.value);
|
||||
activateButton();
|
||||
}}
|
||||
value={email}
|
||||
autoComplete="off"
|
||||
type="email"
|
||||
label="Work email id"
|
||||
placeholder="Eg. jondoe@workemail.com"
|
||||
required
|
||||
helperText={
|
||||
availability &&
|
||||
availability.email && (
|
||||
<Typography
|
||||
style={{
|
||||
color: palette.palette.primary.main,
|
||||
fontSize: "0.8rem",
|
||||
}}
|
||||
>
|
||||
{`Either we already know the email or it is'nt a valid one`}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<BuzzInput
|
||||
validation={
|
||||
validator.isMobilePhone(phoneNumber) &&
|
||||
validator.isLength(phoneNumber, 10)
|
||||
}
|
||||
onChange={(e) => {
|
||||
setPhoneNumber(e.target.value);
|
||||
activateButton();
|
||||
}}
|
||||
nationalCode
|
||||
maxLength={10}
|
||||
type="number"
|
||||
value={phoneNumber}
|
||||
label="Contact Number"
|
||||
required
|
||||
helperText={
|
||||
availability &&
|
||||
availability.contact && (
|
||||
<Typography
|
||||
style={{
|
||||
color: palette.palette.primary.main,
|
||||
fontSize: "0.8rem",
|
||||
}}
|
||||
>
|
||||
{`Either we already know the phone number or it is'nt a valid
|
||||
one`}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<BuzzInput
|
||||
passwordValidation={validator.isStrongPassword(password)}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
activateButton();
|
||||
}}
|
||||
value={password}
|
||||
autoComplete="new-password"
|
||||
type="password"
|
||||
label="Create Password"
|
||||
placeholder="Eg. Johndoe@123"
|
||||
required
|
||||
helperText={
|
||||
validator.isStrongPassword(password) &&
|
||||
validator.isLength(password, 10) ? (
|
||||
<Typography
|
||||
style={{
|
||||
color: palette.palette.buzzSuccess,
|
||||
fontSize: "0.8rem",
|
||||
}}
|
||||
>
|
||||
Excellent password. Now remember it :P
|
||||
</Typography>
|
||||
) : (
|
||||
validator.isLength(password, 1) && (
|
||||
<Typography
|
||||
style={{
|
||||
color: palette.palette.primary.main,
|
||||
fontSize: "10px",
|
||||
textAlign: "right",
|
||||
}}
|
||||
>
|
||||
Password must be at least 10 characters.
|
||||
</Typography>
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<Box className={classes.verticalSpace}>
|
||||
<Button
|
||||
style={{
|
||||
width: 420,
|
||||
height: 50,
|
||||
backgroundColor: palette.palette.primary.main,
|
||||
color: "white",
|
||||
fontSize: 10,
|
||||
}}
|
||||
disabled={!formFilled}
|
||||
color="primary"
|
||||
onClick={checkForValidity}
|
||||
>
|
||||
Create account
|
||||
</Button>
|
||||
{/* <Typography className={`${classes.greyText} ${classes.smallText}`}>
|
||||
By creating an account you agree to the{" "}
|
||||
<Box
|
||||
sx={{ cursor: "pointer" }}
|
||||
onClick={() => history.push("/terms-and-condition")}
|
||||
color={palette.palette.primary.main}
|
||||
>
|
||||
terms and conditions
|
||||
</Box>
|
||||
</Typography> */}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
display="flex"
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
width="50vw"
|
||||
height="100vh"
|
||||
sx={{
|
||||
background:
|
||||
"transparent linear-gradient(326deg, #441514 0%, #441514 0%, #7553E8 100%, #441514 100%) 0% 0% no-repeat padding-box",
|
||||
}}
|
||||
>
|
||||
{/* <Carousel>
|
||||
|
||||
</Carousel> */}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignUpScreen;
|
||||
8
src/components/Auth/SignUp/SignUpMain.jsx
Normal file
8
src/components/Auth/SignUp/SignUpMain.jsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import { Box } from "@material-ui/core";
|
||||
import React from "react";
|
||||
|
||||
const SignUpMain = ({ children, classes }) => {
|
||||
return <Box className={classes}>{children}</Box>;
|
||||
};
|
||||
|
||||
export default SignUpMain;
|
||||
272
src/components/Auth/SignUp/VerifyOtp.jsx
Normal file
272
src/components/Auth/SignUp/VerifyOtp.jsx
Normal file
@@ -0,0 +1,272 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
IconButton,
|
||||
Typography,
|
||||
makeStyles,
|
||||
} from "@material-ui/core";
|
||||
import { unwrapResult } from "@reduxjs/toolkit";
|
||||
import OTPInput from "otp-input-react";
|
||||
import React from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import validator from "validator";
|
||||
import SvgPencil from "../../../assets/SvgPencil";
|
||||
import BuzzInput from "../../../components/BuzzInput/BuzzInput";
|
||||
import BuzzModal from "../../../components/BuzzModal/BuzzModal";
|
||||
import useToast from "../../../hooks/useToast";
|
||||
import { palette } from "../../../Theme/palette";
|
||||
import {
|
||||
buzzOneOtpAsync,
|
||||
buzzOneUpdatePhoneAsync,
|
||||
buzzOneVerifyOtpAsync,
|
||||
} from "../OnboardingStore/onboardingSlice";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
greyText: {
|
||||
color: theme.palette.buzzGreyColor,
|
||||
},
|
||||
smallText: {
|
||||
...theme.typography.body2,
|
||||
},
|
||||
verticalSpace: {
|
||||
margin: "50px 0",
|
||||
},
|
||||
button: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.buzzContainerColor,
|
||||
// height: 40,
|
||||
},
|
||||
otpInputs: {
|
||||
"& input": {
|
||||
background: theme.palette.buzzGreyBlue,
|
||||
border: "none",
|
||||
height: "55px !important",
|
||||
width: "40px !important",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const VerifyOtp = () => {
|
||||
const { signUpData, availability } = useSelector(({ onboardingReducer }) => {
|
||||
return {
|
||||
signUpData: onboardingReducer.signUpData,
|
||||
availability: onboardingReducer.availability,
|
||||
otpStatus: onboardingReducer.otpStatus,
|
||||
};
|
||||
});
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const { SuccessToast, WarningToast, ErrorToast } = useToast();
|
||||
|
||||
const [OTP, setOTP] = React.useState("");
|
||||
const [phoneNumber, setPhoneNumber] = React.useState("");
|
||||
const [changeNumberModalOpen, setChangeNumberModalOpen] =
|
||||
React.useState(false);
|
||||
|
||||
const classes = useStyles();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (signUpData && signUpData.data && signUpData.data.mobile) {
|
||||
dispatch(buzzOneOtpAsync({ phone: signUpData.data.mobile }));
|
||||
}
|
||||
}, [signUpData]);
|
||||
|
||||
const submitOtp = () => {
|
||||
dispatch(buzzOneVerifyOtpAsync({ otp: OTP }))
|
||||
.then(unwrapResult)
|
||||
.then((res) => {
|
||||
SuccessToast(res.message);
|
||||
})
|
||||
.catch((res) => {
|
||||
ErrorToast(res.message);
|
||||
});
|
||||
};
|
||||
|
||||
const sendOtpToNewNumber = () => {
|
||||
dispatch(buzzOneUpdatePhoneAsync({ contact: phoneNumber }))
|
||||
.then(unwrapResult)
|
||||
.then((updateRes) => {
|
||||
SuccessToast(updateRes.message);
|
||||
})
|
||||
.catch((updateRes) => {
|
||||
ErrorToast(updateRes.message);
|
||||
});
|
||||
// console.log(updateRes);
|
||||
// if (updateRes.status === 200) {
|
||||
// SuccessToast('New number was updated in your profile.');
|
||||
// dispatch(buzzOneOtpAsync())
|
||||
// .then(unwrapResult)
|
||||
// .then((res) => {
|
||||
// if (res.status === 200) {
|
||||
// SuccessToast('OTP was sent to your newly provided number.');
|
||||
// setChangeNumberModalOpen(false);
|
||||
// setPhoneNumber('');
|
||||
// } else {
|
||||
// WarningToast(res.message);
|
||||
// }
|
||||
// });
|
||||
// } else {
|
||||
// WarningToast(updateRes.message);
|
||||
// }
|
||||
|
||||
// });
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
style={{ width: "100vw", height: "100vh", background: "white" }}
|
||||
>
|
||||
<BuzzModal
|
||||
title="Change your phone number"
|
||||
open={changeNumberModalOpen}
|
||||
onClose={() => setChangeNumberModalOpen(false)}
|
||||
>
|
||||
<BuzzInput
|
||||
nationalCode
|
||||
type="number"
|
||||
maxLength={10}
|
||||
onChange={(e) => {
|
||||
setPhoneNumber(e.target.value);
|
||||
}}
|
||||
value={phoneNumber}
|
||||
validation={validator.isMobilePhone(phoneNumber)}
|
||||
label={"Contact Number"}
|
||||
helperText={
|
||||
availability &&
|
||||
availability.contact && (
|
||||
<Typography
|
||||
style={{
|
||||
color: palette.palette.primary.main,
|
||||
fontSize: "0.8rem",
|
||||
}}
|
||||
>
|
||||
{`Either we already know the phone number or it is'nt a valid one`}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Box my={3} />
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
fullWidth
|
||||
onClick={sendOtpToNewNumber}
|
||||
>
|
||||
Send otp
|
||||
</Button>
|
||||
</BuzzModal>
|
||||
<Box width={"50vw"} height={"100vh"}>
|
||||
<Box px={12} mt={5}>
|
||||
<Typography variant="h3" className={classes.greyText}>
|
||||
Verify
|
||||
</Typography>
|
||||
<Typography
|
||||
style={{ width: 400 }}
|
||||
fontSize="medium"
|
||||
className={classes.greyText}
|
||||
>
|
||||
Before we create your account, you must verify your contact number
|
||||
</Typography>
|
||||
<Box
|
||||
width={420}
|
||||
height={400}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="space-between"
|
||||
className={classes.verticalSpace}
|
||||
>
|
||||
<Typography fontSize="medium" className={classes.greyText}>
|
||||
<Box display="flex">
|
||||
OTP sent to
|
||||
<Box mx={1} />
|
||||
<b>{signUpData && signUpData.data && signUpData.data.mobile}</b>
|
||||
<Box mx={1} />
|
||||
<IconButton
|
||||
style={{
|
||||
border: "2px solid",
|
||||
borderRadius: 4,
|
||||
borderColor: palette.palette.primary.main,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: 2,
|
||||
}}
|
||||
onClick={() => setChangeNumberModalOpen(true)}
|
||||
>
|
||||
<SvgPencil
|
||||
width={16}
|
||||
height={16}
|
||||
fill={palette.palette.primary.main}
|
||||
/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Typography>
|
||||
|
||||
<>
|
||||
<OTPInput
|
||||
value={OTP}
|
||||
onChange={setOTP}
|
||||
autoFocus
|
||||
OTPLength={6}
|
||||
otpType="number"
|
||||
disabled={false}
|
||||
// secure
|
||||
className={classes.otpInputs}
|
||||
/>
|
||||
</>
|
||||
|
||||
<Box className={classes.verticalSpace}>
|
||||
<Button
|
||||
style={{
|
||||
width: 420,
|
||||
height: 50,
|
||||
backgroundColor: palette.palette.primary.main,
|
||||
color: palette.palette.buzzContainerColor,
|
||||
fontSize: 10,
|
||||
}}
|
||||
color="primary"
|
||||
onClick={submitOtp}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
<br />
|
||||
<br />
|
||||
<Button
|
||||
style={{
|
||||
width: 420,
|
||||
height: 50,
|
||||
backgroundColor: "transparent",
|
||||
border: `1px solid ${palette.palette.primary.main}`,
|
||||
color: palette.palette.primary.main,
|
||||
fontSize: 10,
|
||||
}}
|
||||
color="secondary"
|
||||
// onClick={() => history.goBack()}
|
||||
>
|
||||
Go back
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
display="flex"
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
width="50vw"
|
||||
height="100vh"
|
||||
sx={{
|
||||
background:
|
||||
"transparent linear-gradient(326deg, #441514 0%, #441514 0%, #7553E8 100%, #441514 100%) 0% 0% no-repeat padding-box",
|
||||
}}
|
||||
>
|
||||
{/* <Carousel>
|
||||
|
||||
</Carousel> */}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default VerifyOtp;
|
||||
3
src/components/Auth/SignUp/package.json
Normal file
3
src/components/Auth/SignUp/package.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"main": "SignUp.jsx"
|
||||
}
|
||||
0
src/components/Auth/SignUpScreen.jsx
Normal file
0
src/components/Auth/SignUpScreen.jsx
Normal file
@@ -0,0 +1,187 @@
|
||||
import Header from "../Header/Header";
|
||||
import ContentWrapper from "../ContentWrapper/ContentWrapper";
|
||||
import style from "./BannerLearningSolutions.module.css";
|
||||
|
||||
const Card = ({ data }) => {
|
||||
return (
|
||||
<div className={style.banner_img_align}>
|
||||
<h6
|
||||
style={{
|
||||
color: "#310B8E",
|
||||
maxWidth: "400px",
|
||||
textAlign: "center",
|
||||
margin: "20px auto 6px auto",
|
||||
}}
|
||||
>
|
||||
{data.content}
|
||||
</h6>
|
||||
<p style={{ color: "#2E0590" }}>{data.subcontent}</p>
|
||||
<a href={"/pricing/akadmy-product-pricing"}>
|
||||
<button
|
||||
style={{
|
||||
background: "#7B3EFF",
|
||||
color: "white",
|
||||
borderRadius: "10px",
|
||||
marginTop: "16px",
|
||||
}}
|
||||
>
|
||||
View Plan
|
||||
<i class="fa fa-arrow-right" />
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function BannerLearningSolutionTab({
|
||||
toggleState,
|
||||
setToggleState,
|
||||
}) {
|
||||
const toggleTab = (index) => {
|
||||
setToggleState(index);
|
||||
};
|
||||
|
||||
const getActiveClass = (index, className) =>
|
||||
toggleState === index ? className : style.tab;
|
||||
return (
|
||||
<>
|
||||
<div className="content-container">
|
||||
<div className={style.header}>
|
||||
<ContentWrapper>
|
||||
<Header color={"white"} />
|
||||
</ContentWrapper>
|
||||
</div>
|
||||
|
||||
{toggleState === 1 ? (
|
||||
<>
|
||||
<div className={style.image_box}></div>
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url("./assets/wave.webp")`,
|
||||
width: "100%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
position: "relative",
|
||||
}}
|
||||
className={style.banner_wave1}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "5%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
color: "#DFE6FF",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<p style={{ marginBottom: "10px" }}>
|
||||
Learning Solutions for Schools
|
||||
</p>
|
||||
<h2
|
||||
style={{
|
||||
textAlign: "center",
|
||||
maxWidth: "430px",
|
||||
margin: "0 auto",
|
||||
}}
|
||||
>
|
||||
Enjoy all platform benefits as a Tutor or as a School
|
||||
Administrator.
|
||||
</h2>
|
||||
<ul className={style.tab_list} style={{ marginTop: "20px" }}>
|
||||
<li
|
||||
className={getActiveClass(1, style.active_content)}
|
||||
onClick={() => toggleTab(1)}
|
||||
>
|
||||
<img src="./assets/menu_book.png" />
|
||||
FOR SCHOOL
|
||||
</li>
|
||||
<li
|
||||
className={getActiveClass(2, style.active_content)}
|
||||
onClick={() => toggleTab(2)}
|
||||
>
|
||||
<img src="./assets/audio_file.png" />
|
||||
FOR TUTORS
|
||||
</li>
|
||||
</ul>
|
||||
<Card
|
||||
data={{
|
||||
content:
|
||||
"Classroom Management and Teaching made easy with our ever so powerful tools",
|
||||
subcontent: "",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.mainBottom1} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className={style.image_box}></div>
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url("./assets/wave-2.webp")`,
|
||||
width: "100%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
position: "relative",
|
||||
}}
|
||||
className={style.banner_wave2}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "38%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
color: "#DFE6FF",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<p style={{ marginBottom: "10px" }}>
|
||||
Learning Solutions for all businesses
|
||||
</p>
|
||||
<h2
|
||||
style={{
|
||||
textAlign: "center",
|
||||
maxWidth: "430px",
|
||||
margin: "0 auto",
|
||||
}}
|
||||
>
|
||||
Enjoy all platform benefits as a Tutor or as a School
|
||||
Administrator.
|
||||
</h2>
|
||||
<ul className={style.tab_list} style={{ marginTop: "36px" }}>
|
||||
<li
|
||||
className={getActiveClass(1, style.active_content)}
|
||||
onClick={() => toggleTab(1)}
|
||||
>
|
||||
<img src="./assets/menu_book-blue.png" />
|
||||
FOR SCHOOL
|
||||
</li>
|
||||
<li
|
||||
className={getActiveClass(2, style.active_content)}
|
||||
onClick={() => toggleTab(2)}
|
||||
>
|
||||
<img src="./assets/audio-book-white.png" />
|
||||
FOR TUTORS
|
||||
</li>
|
||||
</ul>
|
||||
<Card
|
||||
data={{
|
||||
content:
|
||||
"Find innovative resources at your fingertips, so you can deliver effective lessons especially tailored for your students",
|
||||
subcontent:
|
||||
"** Tutors can take a subscription per class with free student access for 5 students.",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
.image_box {
|
||||
background-image: linear-gradient(to bottom, #4400d3 10%, #bed8ff);
|
||||
height: 750px;
|
||||
}
|
||||
|
||||
.mainBottom1 {
|
||||
margin-top: -300px;
|
||||
}
|
||||
|
||||
.header {
|
||||
/* background-color: red; */
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box {
|
||||
text-align: center;
|
||||
color: white;
|
||||
max-width: 440px;
|
||||
margin: 0 auto;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.banner_img_align {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab_list {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
font-size: 15px;
|
||||
padding: 0;
|
||||
color: #4909d6;
|
||||
width: 400px;
|
||||
background-color: white;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 40px;
|
||||
}
|
||||
|
||||
.active_content {
|
||||
background-color: #4909d6;
|
||||
color: white;
|
||||
padding: 4px 40px;
|
||||
border-radius: 30px;
|
||||
border: 6px solid white;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #012e6c;
|
||||
color: white;
|
||||
width: 40%;
|
||||
border-radius: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.banner_wave1 {
|
||||
height: 900px;
|
||||
margin-top: -470px;
|
||||
}
|
||||
|
||||
.banner_wave2 {
|
||||
height: 900px;
|
||||
margin-top: -560px;
|
||||
}
|
||||
|
||||
.banner_tab1 {
|
||||
margin-top: -400px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1920px) {
|
||||
.banner_wave2 {
|
||||
height: 730px;
|
||||
}
|
||||
.banner_wave1 {
|
||||
height: 700px;
|
||||
}
|
||||
.mainBottom1 {
|
||||
margin-top: -170px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1440px) {
|
||||
.banner_wave2 {
|
||||
height: 630px;
|
||||
}
|
||||
.banner_wave1 {
|
||||
height: 580px;
|
||||
margin-top: -380px;
|
||||
}
|
||||
.mainBottom1 {
|
||||
margin-top: -150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1366px) {
|
||||
.banner_wave2 {
|
||||
height: 550px;
|
||||
margin-top: -480px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
.banner_wave2 {
|
||||
height: 500px;
|
||||
margin-top: -440px;
|
||||
}
|
||||
.banner_wave1 {
|
||||
height: 400px;
|
||||
margin-top: -260px;
|
||||
}
|
||||
.mainBottom1 {
|
||||
margin-top: -50px;
|
||||
}
|
||||
.image_box {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.banner_wave2 {
|
||||
height: 500px;
|
||||
/* margin-top: -440px; */
|
||||
}
|
||||
.banner_tab1 {
|
||||
margin-top: -360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.tab_list {
|
||||
width: 285px;
|
||||
/* overflow-x: scroll; */
|
||||
}
|
||||
.tab {
|
||||
padding: 10px 10px;
|
||||
}
|
||||
.active_content {
|
||||
padding: 4px 10px;
|
||||
}
|
||||
}
|
||||
41
src/components/BannerProduct/BannerProduct.jsx
Normal file
41
src/components/BannerProduct/BannerProduct.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import Header from "../Header/Header";
|
||||
import ContentWrapper from "../ContentWrapper/ContentWrapper";
|
||||
import style from "./BannerProduct.module.css";
|
||||
import Calendly from "../Calendly/Calendly";
|
||||
|
||||
export default function BannerProduct() {
|
||||
return (
|
||||
<section className={style.out_box}>
|
||||
<div className={style.shape_box}>
|
||||
<div className={style.image_box}>
|
||||
<div className={style.header}>
|
||||
<ContentWrapper>
|
||||
<Header color={"#015C9F"} />
|
||||
</ContentWrapper>
|
||||
</div>
|
||||
<div className={style.box} style={{ color: "#00548E" }}>
|
||||
<h1>
|
||||
Redefining{" "}
|
||||
<span style={{ color: "#55A451" }}>
|
||||
Preschool Management Solutions
|
||||
</span>{" "}
|
||||
With AI
|
||||
</h1>
|
||||
<p style={{ margin: "10px 0" }}>
|
||||
Transform your preschool classroom with AI-driven personalized
|
||||
learning for every child.
|
||||
</p>
|
||||
<Calendly btnName="Get a Demo" />
|
||||
</div>
|
||||
<div className={style.banner_img_align}>
|
||||
<img
|
||||
src="./assets/home_platform.png"
|
||||
className={style.banner_img}
|
||||
alt="Preschool Management Solutions | Streamline Operations with aKadmy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
54
src/components/BannerProduct/BannerProduct.module.css
Normal file
54
src/components/BannerProduct/BannerProduct.module.css
Normal file
@@ -0,0 +1,54 @@
|
||||
.out_box {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.shape_box {
|
||||
border-bottom-left-radius: 100% 450px;
|
||||
border-bottom-right-radius: 100% 450px;
|
||||
width: calc(100% + 100px);
|
||||
margin-left: -50px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.image_box {
|
||||
height: 620px;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, #ffffff, #b1defc);
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.box {
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.banner_img_align {
|
||||
max-width: 600px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.banner_img {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 901px) {
|
||||
.banner_img_align {
|
||||
max-width: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.image_box {
|
||||
height: 550px;
|
||||
}
|
||||
.box {
|
||||
padding: 60px 60px 0px 60px;
|
||||
}
|
||||
.banner_img_align {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
78
src/components/Blog/Banner.jsx
Normal file
78
src/components/Blog/Banner.jsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import Header from "../Header/Header";
|
||||
import ContentWrapper from "../ContentWrapper/ContentWrapper";
|
||||
import style from "./Banner.module.css";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
|
||||
export default function Banner({ data }) {
|
||||
return (
|
||||
<section className={style.out_box}>
|
||||
<div className={style.shape_box}>
|
||||
<div className={style.image_box}>
|
||||
<div className={style.header}>
|
||||
<ContentWrapper>
|
||||
<Header color={"#015C9F"} />
|
||||
</ContentWrapper>
|
||||
</div>
|
||||
<div className={style.box}>
|
||||
<h2 style={{ color: "#00548E", marginBottom: "10px" }}>
|
||||
Blog Post
|
||||
</h2>
|
||||
<i>Explore our latest preschool Insights and Stories</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ContentWrapper>
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: 480, sm: 460 },
|
||||
marginTop: { xs: "-340px", sm: "-440px" },
|
||||
borderRadius: "12px",
|
||||
backgroundImage: `url(
|
||||
"https://management.beanstalkedu.com/assets/${data?.[0]?.img}"
|
||||
)`,
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
||||
borderRadius: "12px",
|
||||
color: "#ffffff",
|
||||
p: { xs: 2, sm: 4 },
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
m: { xs: 2, sm: 4 },
|
||||
}}
|
||||
>
|
||||
<h2>{data?.[0]?.title}</h2>
|
||||
<p>{data?.[0]?.meta_description}</p>
|
||||
|
||||
<Box textAlign={"right"}>
|
||||
<a href={`/blogs/${data?.[0]?.slug}`}>
|
||||
<button
|
||||
style={{
|
||||
background: "#012E6C",
|
||||
color: "white",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2">
|
||||
Continue Reading
|
||||
<img src="/assets/white_right.png" width={"14px"} />
|
||||
</Typography>
|
||||
</button>
|
||||
</a>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</ContentWrapper>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
38
src/components/Blog/Banner.module.css
Normal file
38
src/components/Blog/Banner.module.css
Normal file
@@ -0,0 +1,38 @@
|
||||
.out_box {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.shape_box {
|
||||
border-bottom-left-radius: 100% 450px;
|
||||
border-bottom-right-radius: 100% 450px;
|
||||
width: calc(100% + 100px);
|
||||
margin-left: -50px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.image_box {
|
||||
height: 700px;
|
||||
width: 100%;
|
||||
background-color: #e6f0ff;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.box {
|
||||
text-align: center;
|
||||
max-width: 440px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.image_box {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-width: 340px;
|
||||
}
|
||||
}
|
||||
44
src/components/Blog/Card.jsx
Normal file
44
src/components/Blog/Card.jsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import * as React from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
|
||||
export default function Card({ data }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
border: "1px solid #C8E1FF",
|
||||
p: 3,
|
||||
borderRadius: 2,
|
||||
color: "#012E6C",
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
{data.img && (
|
||||
<img
|
||||
style={{ marginBottom: "8px" }}
|
||||
height="205"
|
||||
width="100%"
|
||||
src={`https://management.beanstalkedu.com/assets/${data.img}`}
|
||||
alt="aKadmy Blogs | Insights, Tips, and Trends for Early Childhood
|
||||
Education"
|
||||
/>
|
||||
)}
|
||||
<h6>{data.title}</h6>
|
||||
<Typography variant="body2" mb={0.6}>
|
||||
Published On: {data && data.date} | 5 min Read
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ height: "100px" }}>
|
||||
{data.meta_description}
|
||||
</Typography>
|
||||
<a href={`/blogs/${data.slug}`}>
|
||||
<button
|
||||
style={{ background: "#012E6C", color: "white", borderRadius: "8px" }}
|
||||
>
|
||||
<Typography variant="body2">
|
||||
Read More
|
||||
<img src="/assets/white_right.png" width={"14px"} />
|
||||
</Typography>
|
||||
</button>
|
||||
</a>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
98
src/components/Blogs/SingleBlog.jsx
Normal file
98
src/components/Blogs/SingleBlog.jsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Box, Grid, Typography } from "@mui/material";
|
||||
import ContentWrapper from "../ContentWrapper/ContentWrapper";
|
||||
import Header from "../Header/Header";
|
||||
import Footer from "../Footer/Footer";
|
||||
import ThreeFormFields from "../form/ThreeFormFields";
|
||||
import { store } from "../redux/store";
|
||||
import { Provider } from "react-redux";
|
||||
|
||||
const Blog = (props) => {
|
||||
// console.log("props in blog", props.blog);
|
||||
window.scrollTo({ top: 0, behavior: "instant" });
|
||||
// const { pathname } = useLocation();
|
||||
// const slug = pathname.split("/")[2];
|
||||
// const [props.blog, setBlogData] = useState();
|
||||
// const navigate = useNavigate();
|
||||
|
||||
// useEffect(() => {
|
||||
// fetch(
|
||||
// `https://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[property][_eq]=aKadmy&filter[slug][_eq]=${slug}`
|
||||
// )
|
||||
// .then((res) => res.json())
|
||||
// .then((data) => {
|
||||
// setBlogData(data?.data?.[0]);
|
||||
// if (data?.data.length === 0) {
|
||||
// navigate("/404");
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => console.log("err123", err));
|
||||
// }, [slug]);
|
||||
|
||||
// blog
|
||||
const newSchema = props.blog && props.blog.schema && props.blog?.schema.replaceAll("\n", "");
|
||||
const newSchema2 = props.blog && props.blog.schema2 && props.blog?.schema2.replaceAll("\n", "");
|
||||
const newSchema3 = props.blog && props.blog.schema3 && props.blog?.schema3.replaceAll("\n", "");
|
||||
|
||||
// console.log("blogUrl", `https://akadmyapp.com${pathname}`);
|
||||
|
||||
const metaData = {
|
||||
title: props.blog && props.blog.meta,
|
||||
description: props.blog && props.blog.meta_description,
|
||||
// canonical: `https://akadmyapp.com${pathname}`,
|
||||
og_title: props.blog && props.blog.og_title,
|
||||
og_desc: props.blog && props.blog.og_desc,
|
||||
siteName: "aKadmy",
|
||||
type: "website",
|
||||
url: "https://akadmyapp.com",
|
||||
img_url: `https://management.beanstalkedu.com/assets/${
|
||||
props.blog && props.blog.og_img
|
||||
}`,
|
||||
content: "product",
|
||||
creator: "@aKadmy",
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Provider store={store}>
|
||||
<ContentWrapper>
|
||||
<Header color={"#015C9F"} />
|
||||
<Grid container color={"#0348A8"} spacing={2}>
|
||||
<Grid item xs={12} md={8}>
|
||||
{props.blog?.title && <h1>{props.blog?.title}</h1>}
|
||||
<Typography variant="body2" my={0.6}>
|
||||
Published On: {props.blog?.date} | 5 min Read
|
||||
</Typography>
|
||||
{props.blog?.img && (
|
||||
<img
|
||||
src={`https://management.beanstalkedu.com/assets/${props.blog?.img}`}
|
||||
width={"100%"}
|
||||
style={{ borderRadius: "8px" }}
|
||||
alt={props.blog?.meta}
|
||||
/>
|
||||
)}
|
||||
{props.blog?.preview_text && (
|
||||
<Typography my={4}>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: props.blog?.preview_text,
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
)}
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Box sx={{ background: "#DEF0FD", p: 3 }}>
|
||||
<Typography>Get in Touch</Typography>
|
||||
<ThreeFormFields formName="Blogs" />
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ContentWrapper>
|
||||
<Footer page="INTERAKTO_CODING" />
|
||||
</Provider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Blog;
|
||||
61
src/components/Blogs/index.jsx
Normal file
61
src/components/Blogs/index.jsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import { Grid } from "@mui/material";
|
||||
import ContentWrapper from "../ContentWrapper/ContentWrapper";
|
||||
import Card from "../Blog/Card";
|
||||
import { useEffect, useState } from "react";
|
||||
import Header from "../Header/Header";
|
||||
import Banner from "../Blog/Banner";
|
||||
import Footer from "../Footer/Footer";
|
||||
import { store } from "../redux/store";
|
||||
import { Provider } from "react-redux";
|
||||
const Index = () => {
|
||||
window.scrollTo({ top: 0, behavior: "instant" });
|
||||
const [data, setData] = useState([]);
|
||||
const newData = data.reverse();
|
||||
useEffect(() => {
|
||||
fetch(
|
||||
`https://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[property][_eq]=aKadmy`
|
||||
)
|
||||
.then((result) => {
|
||||
result.json().then((res) => {
|
||||
setData(res.data.reverse());
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
// toast.error("Could not process data, please try again later!");
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Provider store={store}>
|
||||
<Banner data={newData} />
|
||||
<ContentWrapper>
|
||||
<h2
|
||||
style={{
|
||||
color: "#00548E",
|
||||
marginBottom: "10px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Trending Blogs
|
||||
</h2>
|
||||
<Grid
|
||||
container
|
||||
spacing={2}
|
||||
alignItems="center"
|
||||
justifyContent={"center"}
|
||||
>
|
||||
{newData.map((Blog) => (
|
||||
<Grid item xs={12} sm={6} md={4} lg={4} xl={4}>
|
||||
<Card data={Blog} />
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</ContentWrapper>
|
||||
<Footer page="INTERAKTO_CODING" />
|
||||
</Provider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
235
src/components/BuzzInput/BuzzInput.jsx
Normal file
235
src/components/BuzzInput/BuzzInput.jsx
Normal file
@@ -0,0 +1,235 @@
|
||||
import {
|
||||
Box,
|
||||
IconButton,
|
||||
InputAdornment,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
import SvgTick from "../../assets/SvgTick";
|
||||
import BuzzLabel from "../BuzzLabel/BuzzLabel";
|
||||
|
||||
import { Search, Verified } from "@mui/icons-material";
|
||||
import { withStyles } from "@mui/styles";
|
||||
import { palette } from "../theme/palette";
|
||||
|
||||
const CustomTextField = withStyles((theme) => ({
|
||||
root: {
|
||||
"& .MuiOutlinedInput-root": {
|
||||
minHeight: 44,
|
||||
maxHeight: 52,
|
||||
"& fieldset": {
|
||||
borderColor: theme.palette.buzzBorder,
|
||||
},
|
||||
"&:hover fieldset": {
|
||||
borderColor: theme.palette.buzzBreadCrumb,
|
||||
},
|
||||
},
|
||||
"& .MuiOutlinedInput-root.Mui-disabled": {
|
||||
"& fieldset": {
|
||||
borderColor: theme.palette.buzzBorder,
|
||||
},
|
||||
"&:hover fieldset": {
|
||||
borderColor: theme.palette.buzzBorder,
|
||||
},
|
||||
},
|
||||
"& .MuiInputBase-root.Mui-disabled": {
|
||||
background: theme.palette.buzzLiteGray,
|
||||
},
|
||||
"& .MuiInputBase-input.Mui-disabled": {
|
||||
color: theme.palette.buzzDisableInputColor,
|
||||
},
|
||||
},
|
||||
}))(TextField);
|
||||
|
||||
const BuzzInput = ({
|
||||
placeholder = "",
|
||||
variant = "outlined",
|
||||
onChange,
|
||||
fullWidth = true,
|
||||
disabled = false,
|
||||
// inputProps,
|
||||
maxLength,
|
||||
classes,
|
||||
value = "",
|
||||
id = new Date().toString() + Math.random() * 10000,
|
||||
required = false,
|
||||
label = "",
|
||||
flex = 1,
|
||||
type = "text",
|
||||
autoFocus = false,
|
||||
autoComplete = "off",
|
||||
name,
|
||||
onBlur,
|
||||
onFocus,
|
||||
error,
|
||||
helperText,
|
||||
size,
|
||||
width,
|
||||
select = false,
|
||||
mr,
|
||||
ml,
|
||||
mb,
|
||||
mt,
|
||||
mx,
|
||||
my,
|
||||
m,
|
||||
p,
|
||||
pl,
|
||||
pr,
|
||||
px,
|
||||
py,
|
||||
pt,
|
||||
pb,
|
||||
bgcolor = "white",
|
||||
forwardRef,
|
||||
search = false,
|
||||
validation = false,
|
||||
nationalCode = false,
|
||||
passwordValidation = false,
|
||||
onSubmitEditing = () => {},
|
||||
alterLink,
|
||||
alterLinkText,
|
||||
isVerified = false,
|
||||
onVerify = null,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<Box
|
||||
flex={flex}
|
||||
m={m}
|
||||
mx={mx}
|
||||
my={my}
|
||||
mr={mr}
|
||||
ml={ml}
|
||||
mb={mb}
|
||||
mt={mt}
|
||||
p={p}
|
||||
px={px}
|
||||
py={py}
|
||||
pt={pt}
|
||||
pb={pb}
|
||||
pl={pl}
|
||||
pr={pr}
|
||||
width={width}
|
||||
// bgcolor={bgcolor}
|
||||
>
|
||||
<Box display="flex" justifyContent="space-between">
|
||||
<BuzzLabel label={label} required={required} id={id} />
|
||||
{isVerified && (
|
||||
<Box display="flex" alignItems="center" sx={{ gap: 2 }}>
|
||||
<Verified sx={{ color: "green", fontSize: "20px" }} />
|
||||
<Typography variant="body2">Verified</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{alterLink && (
|
||||
<Typography
|
||||
style={{ cursor: "pointer" }}
|
||||
color="primary"
|
||||
variant="body2"
|
||||
onClick={alterLink}
|
||||
>
|
||||
{alterLinkText}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Box flex={1} bgcolor={bgcolor} borderRadius={4}>
|
||||
<CustomTextField
|
||||
ref={forwardRef}
|
||||
id={id}
|
||||
name={name}
|
||||
classes={classes}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
variant={variant}
|
||||
fullWidth={fullWidth}
|
||||
disabled={disabled}
|
||||
value={value}
|
||||
maxLength={maxLength}
|
||||
type={type}
|
||||
autoFocus={autoFocus}
|
||||
autoComplete={autoComplete}
|
||||
onBlur={onBlur}
|
||||
onFocus={onFocus}
|
||||
error={error}
|
||||
helperText={helperText}
|
||||
size={size}
|
||||
select={select}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
onSubmitEditing();
|
||||
}
|
||||
}}
|
||||
InputProps={
|
||||
onVerify !== null
|
||||
? {
|
||||
endAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<IconButton
|
||||
aria-label="search icon button"
|
||||
onClick={onVerify}
|
||||
edge="start"
|
||||
>
|
||||
<Typography color="primary">Verify</Typography>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}
|
||||
: search
|
||||
? {
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<IconButton
|
||||
aria-label="search icon button"
|
||||
onClick={onSubmitEditing}
|
||||
edge="start"
|
||||
>
|
||||
<Search />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}
|
||||
: null | validation
|
||||
? {
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="search icon button"
|
||||
onClick={onSubmitEditing}
|
||||
edge="end"
|
||||
>
|
||||
<SvgTick width={20} height={20} />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}
|
||||
: null | nationalCode
|
||||
? {
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Typography color={palette.palette.buzzGreyColor}>+91 </Typography>
|
||||
</InputAdornment>
|
||||
),
|
||||
}
|
||||
: null | passwordValidation
|
||||
? {
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<Typography color={palette.palette.buzzSuccess} fontSize={"0.8rem"}>
|
||||
Excellent
|
||||
</Typography>
|
||||
</InputAdornment>
|
||||
),
|
||||
}
|
||||
: null
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default BuzzInput;
|
||||
35
src/components/BuzzLabel/BuzzLabel.jsx
Normal file
35
src/components/BuzzLabel/BuzzLabel.jsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { InputLabel } from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
// const useStyles = makeStyles(() => ({
|
||||
// labelRoot: {
|
||||
// marginBottom: 8,
|
||||
// color: "#1D1D1D",
|
||||
// },
|
||||
// labelAstrix: {
|
||||
// color: "#FE0053",
|
||||
// },
|
||||
// }));
|
||||
const BuzzLabel = ({ id = Math.random(), required = false, label = "" }) => {
|
||||
// const styles = useStyles();
|
||||
if (label)
|
||||
return (
|
||||
<InputLabel
|
||||
required={required}
|
||||
htmlFor={id}
|
||||
classes={{
|
||||
root: {
|
||||
marginBottom: 8,
|
||||
color: "#1D1D1D",
|
||||
},
|
||||
asterisk: { color: "#FE0053" },
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</InputLabel>
|
||||
);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default BuzzLabel;
|
||||
62
src/components/BuzzMultiSelect/BuzzMultiSelect.jsx
Normal file
62
src/components/BuzzMultiSelect/BuzzMultiSelect.jsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import {
|
||||
Box,
|
||||
FormControl,
|
||||
MenuItem,
|
||||
OutlinedInput,
|
||||
Select,
|
||||
} from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
import style from "./BuzzMultiSelect.module.css";
|
||||
|
||||
const ITEM_HEIGHT = 48;
|
||||
const ITEM_PADDING_TOP = 8;
|
||||
const MenuProps = {
|
||||
PaperProps: {
|
||||
style: {
|
||||
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
||||
width: 250,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default function BuzzMultiSelect({
|
||||
id,
|
||||
label,
|
||||
value = [],
|
||||
menuList = [],
|
||||
onChange,
|
||||
valueKey = "value",
|
||||
labelKey = "label",
|
||||
disabled = false,
|
||||
}) {
|
||||
if (!Array.isArray(menuList)) throw new Error("menuList must be an array");
|
||||
|
||||
return (
|
||||
<div className={style.container}>
|
||||
<Box className={style.labelRow}>
|
||||
<label>{label}</label>
|
||||
</Box>
|
||||
{/* <InputLabel>{label}</InputLabel> */}
|
||||
<FormControl id={id} fullWidth>
|
||||
<Select
|
||||
id={id}
|
||||
size="small"
|
||||
className={style.inputBox}
|
||||
multiple
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
input={<OutlinedInput />}
|
||||
MenuProps={MenuProps}
|
||||
disabled={disabled}
|
||||
>
|
||||
{menuList.map((option, index) => (
|
||||
<MenuItem key={index} value={option[valueKey]}>
|
||||
{option[labelKey]}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
44
src/components/BuzzMultiSelect/BuzzMultiSelect.module.css
Normal file
44
src/components/BuzzMultiSelect/BuzzMultiSelect.module.css
Normal file
@@ -0,0 +1,44 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
/* min-width: 300px; */
|
||||
max-width: 360px;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.labelRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.labelRow label {
|
||||
/* height: ; */
|
||||
padding: 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.labelRow p {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.container .inputBox {
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
|
||||
/* border: 0.1rem solid rgb(187, 186, 186); */
|
||||
border-radius: 5px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.inputBox p {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 100;
|
||||
margin: 0;
|
||||
opacity: 0.5;
|
||||
text-transform: none;
|
||||
}
|
||||
59
src/components/BuzzSelect/BuzzSelect.jsx
Normal file
59
src/components/BuzzSelect/BuzzSelect.jsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import {
|
||||
Box,
|
||||
FormControl,
|
||||
MenuItem,
|
||||
OutlinedInput,
|
||||
Select,
|
||||
} from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
import style from "./BuzzSelect.module.css";
|
||||
|
||||
const ITEM_HEIGHT = 48;
|
||||
const ITEM_PADDING_TOP = 8;
|
||||
const MenuProps = {
|
||||
PaperProps: {
|
||||
style: {
|
||||
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
||||
width: 250,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default function BuzzSelect({
|
||||
id,
|
||||
label,
|
||||
value,
|
||||
menuList = [],
|
||||
onChange,
|
||||
valueKey = "value",
|
||||
labelKey = "label",
|
||||
disabled = false,
|
||||
}) {
|
||||
return (
|
||||
<div className={style.container}>
|
||||
<Box className={style.labelRow}>
|
||||
<label>{label}</label>
|
||||
</Box>
|
||||
{/* <InputLabel>{label}</InputLabel> */}
|
||||
<FormControl id={id} fullWidth>
|
||||
<Select
|
||||
id={id}
|
||||
size="small"
|
||||
className={style.inputBox}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
input={<OutlinedInput />}
|
||||
MenuProps={MenuProps}
|
||||
disabled={disabled}
|
||||
>
|
||||
{menuList.map((option, index) => (
|
||||
<MenuItem key={index} value={option[valueKey]}>
|
||||
{option[labelKey]}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
44
src/components/BuzzSelect/BuzzSelect.module.css
Normal file
44
src/components/BuzzSelect/BuzzSelect.module.css
Normal file
@@ -0,0 +1,44 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
/* min-width: 300px; */
|
||||
max-width: 360px;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.labelRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.labelRow label {
|
||||
/* height: ; */
|
||||
padding: 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.labelRow p {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.container .inputBox {
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
|
||||
/* border: 0.1rem solid rgb(187, 186, 186); */
|
||||
border-radius: 5px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.inputBox p {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 100;
|
||||
margin: 0;
|
||||
opacity: 0.5;
|
||||
text-transform: none;
|
||||
}
|
||||
60
src/components/Calendly/Calendly.jsx
Normal file
60
src/components/Calendly/Calendly.jsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import React from "react";
|
||||
import { Box, Modal } from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
|
||||
const modalStyle = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
bgcolor: "background.paper",
|
||||
boxShadow: 24,
|
||||
p: 2,
|
||||
};
|
||||
|
||||
export default function Calendly({ style, btnName }) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
style={{
|
||||
background: "#015C9F",
|
||||
color: "white",
|
||||
borderRadius: "10px",
|
||||
...style,
|
||||
}}
|
||||
onClick={handleOpen}
|
||||
>
|
||||
{btnName}
|
||||
</button>
|
||||
{open ? (
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box
|
||||
sx={modalStyle}
|
||||
width={{ xs: 300, sm: 600, md: 1200 }}
|
||||
height={{ xs: 480, sm: 400, md: 600 }}
|
||||
zIndex={9}
|
||||
>
|
||||
<Box
|
||||
onClick={handleClose}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: { sm: 20, md: 60 },
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</Box>
|
||||
<iframe
|
||||
src="https://calendly.com/akadmy-app/30min?month=2024-09"
|
||||
width={"100%"}
|
||||
height={"100%"}
|
||||
/>
|
||||
</Box>
|
||||
</Modal>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 0.15rem;
|
||||
background-color: white;
|
||||
background-image: var(--accent-gradient);
|
||||
background-size: 400%;
|
||||
border-radius: 0.5rem;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: 1rem 1.3rem;
|
||||
border-radius: 0.35rem;
|
||||
color: #111;
|
||||
background-color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
color: #444;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
</style>
|
||||
166
src/components/Carousel/PhotoFlipCarousel/PhotoFlipCarousel.jsx
Normal file
166
src/components/Carousel/PhotoFlipCarousel/PhotoFlipCarousel.jsx
Normal file
@@ -0,0 +1,166 @@
|
||||
import React, { useContext, useEffect } from "react";
|
||||
import style from "./PhotoFlipCarousel.module.css";
|
||||
import { GameContext } from "../../context/GameContext";
|
||||
|
||||
function PhotoFlipCarousel({ theme, data, background, color, poster }) {
|
||||
const { setGameLink } = useContext(GameContext);
|
||||
|
||||
useEffect(() => {
|
||||
initialize();
|
||||
}, []);
|
||||
|
||||
const initialize = () => {
|
||||
const card1 = document.getElementById("card1");
|
||||
const card2 = document.getElementById("card2");
|
||||
const card3 = document.getElementById("card3");
|
||||
const card4 = document.getElementById("card4");
|
||||
|
||||
card1.classList.add(style.card1);
|
||||
card2.classList.add(style.card2);
|
||||
card3.classList.add(style.card3);
|
||||
card4.classList.add(style.card4);
|
||||
};
|
||||
|
||||
const handleSlide = (dir) => {
|
||||
console.log("clicked");
|
||||
const card1 = document.getElementsByClassName(style.card1)[0];
|
||||
const card2 = document.getElementsByClassName(style.card2)[0];
|
||||
const card3 = document.getElementsByClassName(style.card3)[0];
|
||||
const card4 = document.getElementsByClassName(style.card4)[0];
|
||||
|
||||
if (dir === "FORWARD") {
|
||||
card4.classList.add(style.slide_forward);
|
||||
|
||||
onKeyframes(card4, {
|
||||
50: () => {
|
||||
card1.classList.remove(style.card1);
|
||||
card2.classList.remove(style.card2);
|
||||
card3.classList.remove(style.card3);
|
||||
card4.classList.remove(style.card4);
|
||||
|
||||
card1.classList.add(style.card2);
|
||||
card2.classList.add(style.card3);
|
||||
card3.classList.add(style.card4);
|
||||
card4.classList.add(style.card1);
|
||||
},
|
||||
100: () => {
|
||||
card4.classList.remove(style.slide_forward);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
card1.classList.add(style.slide_backward);
|
||||
|
||||
onKeyframes(card1, {
|
||||
50: () => {
|
||||
card1.classList.remove(style.card1);
|
||||
card2.classList.remove(style.card2);
|
||||
card3.classList.remove(style.card3);
|
||||
card4.classList.remove(style.card4);
|
||||
|
||||
card1.classList.add(style.card4);
|
||||
card2.classList.add(style.card1);
|
||||
card3.classList.add(style.card2);
|
||||
card4.classList.add(style.card3);
|
||||
},
|
||||
100: () => {
|
||||
card1.classList.remove(style.slide_backward);
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function onKeyframes(element, handlers) {
|
||||
var from = handlers[0] || handlers.from;
|
||||
var to = handlers[100] || handlers.to;
|
||||
delete handlers.from;
|
||||
delete handlers[0];
|
||||
delete handlers.to;
|
||||
delete handlers[100];
|
||||
|
||||
handlers = Object.keys(handlers).map(function (k) {
|
||||
return [k, this[k]];
|
||||
}, handlers);
|
||||
|
||||
element.addEventListener("animationstart", function () {
|
||||
from && from.apply(this, arguments);
|
||||
if (handlers.length) {
|
||||
var match = /(\d+)(m?)s/.exec(
|
||||
window.getComputedStyle(element).animationDuration
|
||||
);
|
||||
var duration = (match[2] ? 1 : 1e3) * match[1];
|
||||
handlers.forEach(function (pair) {
|
||||
setTimeout(pair[1], (pair[0] / 100) * duration);
|
||||
});
|
||||
}
|
||||
});
|
||||
to && element.addEventListener("animationend", to);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${style.container} ${
|
||||
theme === "TEENYBEANS"
|
||||
? style.teenybeans
|
||||
: theme === "INTERAKTO"
|
||||
? style.interakto
|
||||
: style.default
|
||||
} `}
|
||||
>
|
||||
<button
|
||||
className={style.nav_btn}
|
||||
style={{ backgroundColor: background, color: color }}
|
||||
onClick={() => handleSlide("BACKWARD")}
|
||||
>
|
||||
<i class="fa fa-chevron-left" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div className={style.deck}>
|
||||
{data.map((item) => (
|
||||
<div
|
||||
id={item.id}
|
||||
className={style.card}
|
||||
style={{
|
||||
backgroundImage: `url(${item.img})`,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundColor: color,
|
||||
}}
|
||||
>
|
||||
{item.type === "audio" ? (
|
||||
<video
|
||||
width={"100%"}
|
||||
poster={poster}
|
||||
height="auto"
|
||||
controls
|
||||
controlsList="nodownload"
|
||||
>
|
||||
<source src={item.img} type="video/mp4" />
|
||||
</video>
|
||||
) : (
|
||||
<>
|
||||
{item.link && (
|
||||
<a href={"/worksheet"} className={style.btn}>
|
||||
<button onClick={() => setGameLink(item.link)}>
|
||||
Try now
|
||||
</button>
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
className={style.nav_btn}
|
||||
style={{ backgroundColor: background, color: color }}
|
||||
onClick={() => handleSlide("FORWARD")}
|
||||
>
|
||||
<i class="fa fa-chevron-right" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PhotoFlipCarousel;
|
||||
@@ -0,0 +1,154 @@
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.container i {
|
||||
scale: 0.7;
|
||||
}
|
||||
|
||||
.container .nav_btn {
|
||||
color: #dbff00;
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.deck {
|
||||
height: 350px;
|
||||
width: 250px;
|
||||
margin-left: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 250px;
|
||||
height: 300px;
|
||||
padding: 1rem;
|
||||
border: 1px solid black;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
position: absolute;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card button {
|
||||
padding: 0.25rem 1rem;
|
||||
}
|
||||
|
||||
.card1 {
|
||||
/* transform: rotate(-10deg); */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card2 {
|
||||
transform: rotate(-10deg) translateX(-50px) translateY(-10px);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.card3 {
|
||||
transform: rotate(-25deg) translateX(-40px) translateY(-20px);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.card4 {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.slide_forward {
|
||||
animation: slide-forward 2s 1 ease-in-out;
|
||||
}
|
||||
.slide_backward {
|
||||
animation: slide-backward 2s 1 ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes slide-forward {
|
||||
0% {
|
||||
z-index: 4;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(400px) rotate(10deg);
|
||||
z-index: 4;
|
||||
}
|
||||
80% {
|
||||
z-index: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0) rotate(0);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-backward {
|
||||
0% {
|
||||
z-index: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-400px) rotate(-10deg);
|
||||
}
|
||||
80% {
|
||||
z-index: 5;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0) rotate(0);
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.deck {
|
||||
margin-left: 0;
|
||||
scale: 0.8;
|
||||
}
|
||||
|
||||
.nav_btn {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme - INTERAKTO */
|
||||
.default .nav_btn {
|
||||
background-color: #dbffeb;
|
||||
}
|
||||
|
||||
.default .card button {
|
||||
background-color: #00634b;
|
||||
}
|
||||
|
||||
/* Theme - INTERAKTO */
|
||||
.interakto .nav_btn {
|
||||
background-color: #dbffeb;
|
||||
}
|
||||
|
||||
.interakto .card button {
|
||||
background-color: #00634b;
|
||||
}
|
||||
|
||||
/* Theme - INTERAKTO */
|
||||
.teenybeans .nav_btn {
|
||||
background-color: #163c14;
|
||||
}
|
||||
|
||||
.teenybeans .card button {
|
||||
background-color: #434701;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
17
src/components/ContentWrapper/ContentWrapper.jsx
Normal file
17
src/components/ContentWrapper/ContentWrapper.jsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
import style from "./ContentWrapper.module.css";
|
||||
|
||||
////////////////////////////////////////////////////////
|
||||
// The Wrapper keeps the content in CENTER of screen and
|
||||
// also sets a MAX-WIDTH to them
|
||||
////////////////////////////////////////////////////////
|
||||
|
||||
function ContentWrapper({ children }) {
|
||||
return (
|
||||
<div className={style.container}>
|
||||
<div className={style.sub_container}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ContentWrapper;
|
||||
11
src/components/ContentWrapper/ContentWrapper.module.css
Normal file
11
src/components/ContentWrapper/ContentWrapper.module.css
Normal file
@@ -0,0 +1,11 @@
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sub_container {
|
||||
width: 80vw;
|
||||
max-width: 1200px;
|
||||
height: 100%;
|
||||
}
|
||||
94
src/components/FAQ/FAQ.jsx
Normal file
94
src/components/FAQ/FAQ.jsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import ContentWrapper from "../ContentWrapper/ContentWrapper";
|
||||
import style from "./FAQ.module.css";
|
||||
|
||||
const AccordionItem = (props) => {
|
||||
const contentEl = useRef();
|
||||
const { handleToggle, active, faq, textColor } = props;
|
||||
const { question, id, answer } = faq;
|
||||
|
||||
return (
|
||||
<div className={style.rc_accordion_card} style={{ color: textColor }}>
|
||||
<div className={style.rc_accordion_header}>
|
||||
<div
|
||||
className={style.rc_accordion_toggle}
|
||||
onClick={() => handleToggle(id)}
|
||||
>
|
||||
<div>
|
||||
{active === id ? (
|
||||
<i
|
||||
className="fa fa-chevron-up"
|
||||
style={{ paddingRight: "10px" }}
|
||||
/>
|
||||
) : (
|
||||
<i
|
||||
className="fa fa-chevron-right"
|
||||
style={{ paddingRight: "10px" }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ marginTop: "-20px" }}>
|
||||
<h5 className={style.header}>{question}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref={contentEl}
|
||||
style={active === id ? { height: "auto" } : { height: "0px" }}
|
||||
>
|
||||
<div
|
||||
className={style.rc_accordion_body}
|
||||
style={{ color: props.color3 }}
|
||||
>
|
||||
<p>
|
||||
{answer.map((item) => (
|
||||
<div>
|
||||
{item}
|
||||
<br />
|
||||
</div>
|
||||
))}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function FAQ({ color1, color2, color3, data, prefix }) {
|
||||
const [active, setActive] = useState(1);
|
||||
|
||||
const handleToggle = (index) => {
|
||||
if (active === index) {
|
||||
setActive(null);
|
||||
} else {
|
||||
setActive(index);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ContentWrapper>
|
||||
<div style={{ marginBottom: "60px" }}>
|
||||
<p
|
||||
style={{ color: color1, marginBottom: "10px", letterSpacing: "1px" }}
|
||||
>
|
||||
{prefix ? prefix : "Explore Yourself"}
|
||||
</p>
|
||||
<h2 style={{ color: color1, marginBottom: "10px" }}>
|
||||
Frequently Asked <i style={{ color: color2 }}>Questions</i>
|
||||
</h2>
|
||||
{data.map((faq, index) => {
|
||||
return (
|
||||
<AccordionItem
|
||||
textColor={color1}
|
||||
key={index}
|
||||
active={active}
|
||||
handleToggle={handleToggle}
|
||||
faq={faq}
|
||||
color3={color3}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ContentWrapper>
|
||||
);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user