First Commit

2026-03-21 11:55:27 +01:00
commit 2e8a29b4d0
1757 changed files with 166084 additions and 0 deletions
@@ -0,0 +1,22 @@
+'use client';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+
+/***************************  IMAGE - ARROW  ***************************/
+
+export default function Arrow() {
+  const theme = useTheme();
+
+  return (
+    <Box sx={{ '& svg': { width: { xs: 60, sm: 76 }, height: { xs: 76, sm: 81 } } }}>
+      <svg viewBox="0 0 76 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M74.8957 2.49454C75.4449 2.55216 75.9369 2.15359 75.9945 1.60432C76.0522 1.05505 75.6536 0.563072 75.1043 0.505456L74.8957 2.49454ZM7.33081 80.7431C7.74121 81.1127 8.37351 81.0796 8.74309 80.6692L14.7658 73.9814C15.1354 73.571 15.1023 72.9387 14.6919 72.5691C14.2815 72.1995 13.6492 72.2326 13.2796 72.643L7.9261 78.5877L1.98138 73.2342C1.57098 72.8646 0.938684 72.8977 0.5691 73.3081C0.199516 73.7185 0.232601 74.3508 0.642999 74.7204L7.33081 80.7431ZM6.25803 65.8463L7.00137 80.0523L8.99863 79.9477L8.2553 65.7418L6.25803 65.8463ZM75.1043 0.505456C36.953 -3.49643 4.25353 27.5381 6.25803 65.8463L8.2553 65.7418C6.31503 28.6611 37.9668 -1.37911 74.8957 2.49454L75.1043 0.505456Z"
+          fill={theme.vars.palette.primary.main}
+        />
+      </svg>
+    </Box>
+  );
+}
@@ -0,0 +1,36 @@
+'use client';
+
+import { useId } from 'react';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+/***************************  IMAGE - BACKGROUND  ***************************/
+
+export default function Background() {
+  const theme = useTheme();
+  const uniqueId = useId(); // Generate a unique ID
+
+  return (
+    <svg viewBox="0 0 368 380" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath={`url(#${uniqueId})`}>
+        <rect width="368" height="380" fill={theme.vars.palette.grey[100]} />
+        <rect x="-227.643" y="-144.5" width="260.429" height="182" rx="11.5" fill={theme.vars.palette.grey[200]} />
+        <rect x="-227.643" y="-144.5" width="260.429" height="182" rx="11.5" stroke={theme.vars.palette.grey[300]} />
+        <rect x="53.7852" y="-144.5" width="260.429" height="182" rx="11.5" fill={theme.vars.palette.grey[200]} />
+        <rect x="53.7852" y="-144.5" width="260.429" height="182" rx="11.5" stroke={theme.vars.palette.grey[300]} />
+        <rect x="335.215" y="-144.5" width="260.429" height="182" rx="11.5" fill={theme.vars.palette.grey[200]} />
+        <rect x="335.215" y="-144.5" width="260.429" height="182" rx="11.5" stroke={theme.vars.palette.grey[300]} />
+        <rect x="-227.5" y="58.5" width="260" height="225" rx="11.5" fill={theme.vars.palette.grey[200]} />
+        <rect x="-227.5" y="58.5" width="260" height="225" rx="11.5" stroke={theme.vars.palette.grey[300]} />
+        <rect x="335.5" y="58.5" width="260" height="225" rx="11.5" fill={theme.vars.palette.grey[200]} />
+        <rect x="335.5" y="58.5" width="260" height="225" rx="11.5" stroke={theme.vars.palette.grey[300]} />
+      </g>
+      <defs>
+        <clipPath id={uniqueId}>
+          <rect width="368" height="380" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,33 @@
+'use client';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+/***************************  IMAGE - DRAWN ARROW  ***************************/
+
+export default function DrawnArrow() {
+  const theme = useTheme();
+
+  return (
+    <svg width="30" height="21" viewBox="0 0 30 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M24.8936 1.85913C24.8936 4.97291 26.3909 7.91338 28 10.4879"
+        stroke={theme.vars.palette.primary.main}
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+      <path
+        d="M24.4023 14.8591C23.0717 13.8412 21.639 13.0273 20.2525 12.1793C17.563 10.5343 14.8602 8.9136 12.1233 7.42679C8.93329 5.69387 5.68273 4.21606 2.40234 2.85913"
+        stroke={theme.vars.palette.primary.main}
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+      <path
+        d="M19.5312 17.7869C17.195 17.7869 14.8892 17.8994 12.5741 18.2406C10.8123 18.5003 9.04694 18.9714 7.28067 19.148"
+        stroke={theme.vars.palette.primary.main}
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,33 @@
+'use client';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+/***************************  IMAGE - GRAPHIC1  ***************************/
+
+export default function Graphic1() {
+  const theme = useTheme();
+
+  return (
+    <svg width="552" height="498" viewBox="0 0 552 498" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M-10 375.234H131.848C153.939 375.234 171.848 393.143 171.848 415.234V507C171.848 529.091 189.756 547 211.848 547H372.796C394.887 547 412.796 529.091 412.796 507V329.352C412.796 307.26 430.704 289.352 452.796 289.352H511C533.091 289.352 551 307.26 551 329.352V396.125C551 418.216 533.091 436.125 511 436.125H297.682C275.591 436.125 257.682 418.216 257.682 396.125V351.605V244.062C257.682 221.971 239.774 204.062 217.682 204.062H192.754C170.662 204.062 152.754 221.971 152.754 244.062V259.531C152.754 281.623 170.662 299.531 192.754 299.531H334.785C356.876 299.531 374.785 281.623 374.785 259.531V107.512C374.785 85.421 392.693 67.5124 414.785 67.5124H458.264C480.356 67.5124 498.264 85.421 498.264 107.512V143.233C498.264 165.324 480.356 183.233 458.264 183.233H340.581C318.49 183.233 300.581 165.324 300.581 143.233V31.7158C300.581 9.62438 282.673 -8.28429 260.581 -8.28429H63.1872C41.0958 -8.28429 23.1872 9.62432 23.1872 31.7157V124.39C23.1872 146.481 41.0958 164.39 63.1872 164.39H131.848C153.939 164.39 171.848 146.481 171.848 124.39V-46"
+        stroke="url(#paint0_radial_1043_75803)"
+        strokeOpacity="0.1"
+      />
+      <defs>
+        <radialGradient
+          id="paint0_radial_1043_75803"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(316.233 200.591) rotate(90) scale(675.854 648.851)"
+        >
+          <stop stopColor={theme.vars.palette.primary.main} />
+          <stop offset="1" stopColor={theme.vars.palette.primary.main} stopOpacity="0" />
+        </radialGradient>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,58 @@
+'use client';
+
+// @mui
+import { keyframes } from '@mui/material/styles';
+import Avatar from '@mui/material/Avatar';
+import CircularProgress from '@mui/material/CircularProgress';
+import Stack from '@mui/material/Stack';
+
+//@project
+import LogoSection from '@/components/logo';
+
+const rotateAnimation = keyframes`
+  0% { transform: rotate(0deg) }
+  100% { transform: rotate(-360deg) }
+`;
+
+const dotAnimation = keyframes`
+  0% { transform: rotate(-360deg) }
+  100% { transform: rotate(0deg) }
+`;
+
+/***************************  PAGE LOADER  ***************************/
+
+export default function PageLoader() {
+  const commonProps = { disableShrink: true, size: 100, variant: 'determinate', thickness: 4, color: 'primary' };
+
+  return (
+    <Stack direction="row" sx={{ position: 'relative', justifyContent: 'center', alignItems: 'center' }}>
+      <Avatar sx={{ width: 65, height: 65, bgcolor: 'primary.lighter', '& .MuiBox-root': { height: 'fit-content', width: 28 } }}>
+        <LogoSection isIcon />
+      </Avatar>
+      <CircularProgress
+        {...commonProps}
+        value={100}
+        rel="noopener noreferrer"
+        aria-label="loading"
+        sx={{
+          position: 'absolute',
+          zIndex: 1,
+          '& .MuiCircularProgress-circle': { strokeLinecap: 'round', strokeDasharray: '6 9.5 !important' },
+          animation: `${dotAnimation} 6s linear infinite`
+        }}
+      />
+      <CircularProgress
+        {...commonProps}
+        value={60}
+        rel="noopener noreferrer"
+        aria-label="loading"
+        sx={{
+          position: 'absolute',
+          zIndex: 1,
+          '& .MuiCircularProgress-circle': { strokeLinecap: 'round' },
+          animation: `${rotateAnimation} 35s linear infinite`
+        }}
+      />
+    </Stack>
+  );
+}
@@ -0,0 +1,39 @@
+'use client';
+import PropTypes from 'prop-types';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+/***************************  IMAGE - PATTERN 1  ***************************/
+
+export default function Pattern1({ fill }) {
+  const theme = useTheme();
+
+  return (
+    <svg viewBox="0 0 336 144" fill={fill || 'none'} xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M335.5 72C335.5 81.772 330.881 91.1233 322.442 99.6744C314.001 108.228 301.761 115.953 286.597 122.452C256.271 135.449 214.341 143.5 168 143.5C121.659 143.5 79.7292 135.449 49.403 122.452C34.2391 115.953 21.9995 108.228 13.5581 99.6744C5.11894 91.1233 0.5 81.772 0.5 72C0.5 62.228 5.11894 52.8767 13.5581 44.3256C21.9995 35.7723 34.2391 28.0467 49.403 21.5479C79.7292 8.55097 121.659 0.5 168 0.5C214.341 0.5 256.271 8.55097 286.597 21.5479C301.761 28.0467 314.001 35.7723 322.442 44.3256C330.881 52.8767 335.5 62.228 335.5 72Z"
+        stroke={theme.vars.palette.primary.lighter}
+      />
+      <path
+        d="M292.5 72C292.5 91.6274 278.684 109.492 256.139 122.478C233.607 135.457 202.446 143.5 168 143.5C133.554 143.5 102.393 135.457 79.8612 122.478C57.316 109.492 43.5 91.6274 43.5 72C43.5 52.3726 57.316 34.5076 79.8612 21.5216C102.393 8.54323 133.554 0.5 168 0.5C202.446 0.5 233.607 8.54323 256.139 21.5216C278.684 34.5076 292.5 52.3726 292.5 72Z"
+        stroke={theme.vars.palette.primary.lighter}
+      />
+      <path
+        d="M244.5 72C244.5 111.457 210.282 143.5 168 143.5C125.718 143.5 91.5 111.457 91.5 72C91.5 32.5427 125.718 0.5 168 0.5C210.282 0.5 244.5 32.5427 244.5 72Z"
+        stroke={theme.vars.palette.primary.lighter}
+      />
+      <path
+        d="M204.5 72C204.5 91.8195 200.371 109.738 193.718 122.683C187.052 135.654 177.933 143.5 168 143.5C158.067 143.5 148.948 135.654 142.282 122.683C135.629 109.738 131.5 91.8195 131.5 72C131.5 52.1805 135.629 34.262 142.282 21.3168C148.948 8.3455 158.067 0.5 168 0.5C177.933 0.5 187.052 8.3455 193.718 21.3168C200.371 34.262 204.5 52.1805 204.5 72Z"
+        stroke={theme.vars.palette.primary.lighter}
+      />
+      <path
+        d="M171.5 72C171.5 91.8761 171.052 109.866 170.329 122.884C169.967 129.395 169.537 134.652 169.061 138.277C168.823 140.092 168.575 141.48 168.324 142.406C168.209 142.83 168.099 143.134 168 143.331C167.901 143.134 167.791 142.83 167.676 142.406C167.425 141.48 167.177 140.092 166.939 138.277C166.463 134.652 166.033 129.395 165.671 122.884C164.948 109.866 164.5 91.8761 164.5 72C164.5 52.1239 164.948 34.1336 165.671 21.116C166.033 14.6054 166.463 9.34801 166.939 5.72323C167.177 3.9076 167.425 2.51978 167.676 1.59379C167.791 1.16985 167.901 0.866172 168 0.668538C168.099 0.866172 168.209 1.16985 168.324 1.59379C168.575 2.51978 168.823 3.9076 169.061 5.72323C169.537 9.34801 169.967 14.6054 170.329 21.116C171.052 34.1336 171.5 52.1239 171.5 72Z"
+        stroke={theme.vars.palette.primary.lighter}
+      />
+      <line y1="71.5" x2="336" y2="71.5" stroke={theme.vars.palette.primary.lighter} />
+    </svg>
+  );
+}
+
+Pattern1.propTypes = { fill: PropTypes.string };
@@ -0,0 +1,31 @@
+'use client';
+import PropTypes from 'prop-types';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+/***************************  IMAGE - PATTERN 2  ***************************/
+
+export default function Pattern2({ fill }) {
+  const theme = useTheme();
+
+  return (
+    <svg viewBox="0 0 326 227" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M275.5 113.5C275.5 175.91 225.13 226.5 163 226.5C100.87 226.5 50.5 175.91 50.5 113.5C50.5 51.0897 100.87 0.5 163 0.5C225.13 0.5 275.5 51.0897 275.5 113.5Z"
+        fill={fill || 'none'}
+        stroke={theme.vars.palette.primary.lighter}
+      />
+      <path
+        d="M320.251 138.518C319.95 140.371 318.648 142.083 316.296 143.628C313.946 145.173 310.603 146.512 306.35 147.629C297.848 149.863 285.824 151.177 271.132 151.54C241.755 152.266 201.814 149.184 158.275 142.119C114.736 135.054 75.8695 125.346 48.2301 115.368C34.4064 110.378 23.4153 105.329 16.0553 100.521C12.3738 98.1168 9.62626 95.789 7.88508 93.5803C6.14314 91.3706 5.44895 89.3348 5.74963 87.4819C6.05031 85.629 7.35267 83.9172 9.70397 82.3717C12.0543 80.827 15.3968 79.4875 19.6499 78.3705C28.1524 76.1374 40.1762 74.8228 54.8685 74.4599C84.2449 73.7344 124.187 76.8156 167.725 83.8809C211.264 90.9462 250.131 100.654 277.77 110.632C291.594 115.622 302.585 120.671 309.945 125.479C313.626 127.883 316.374 130.211 318.115 132.42C319.857 134.629 320.551 136.665 320.251 138.518Z"
+        stroke={theme.vars.palette.primary.lighter}
+      />
+      <path
+        d="M321.693 99.0223C321.858 100.892 321.017 102.872 319.119 104.949C317.221 107.024 314.311 109.146 310.464 111.275C302.773 115.533 291.442 119.767 277.292 123.735C248.998 131.67 209.527 138.516 165.588 142.386C121.65 146.256 81.5901 146.415 52.345 143.548C37.7183 142.115 25.8224 139.926 17.5055 137.079C13.3453 135.655 10.1093 134.075 7.87802 132.363C5.64573 130.65 4.47173 128.847 4.30703 126.978C4.14234 125.108 4.98321 123.128 6.88171 121.051C8.77939 118.975 11.6894 116.854 15.5366 114.725C23.2277 110.467 34.5579 106.233 48.7087 102.265C77.0025 94.33 116.474 87.4838 160.412 83.6137C204.35 79.7437 244.41 79.5847 273.655 82.4515C288.282 83.8853 300.178 86.0736 308.495 88.921C312.655 90.3454 315.891 91.9251 318.122 93.6372C320.355 95.3501 321.529 97.1524 321.693 99.0223Z"
+        stroke={theme.vars.palette.primary.lighter}
+      />
+    </svg>
+  );
+}
+
+Pattern2.propTypes = { fill: PropTypes.string };
@@ -0,0 +1,26 @@
+'use client';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+/***************************  IMAGE - PATTERN 3  ***************************/
+
+export default function Pattern3() {
+  const theme = useTheme();
+
+  return (
+    <svg viewBox="0 0 408 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        opacity="0.5"
+        d="M408 50H334.5H220.16C206.629 50 195.66 39.031 195.66 25.5V25.5C195.66 11.969 184.691 1 171.16 1H0"
+        stroke="url(#paint0_linear_1357_81746)"
+      />
+      <defs>
+        <linearGradient id="paint0_linear_1357_81746" x1="55.9999" y1="168.5" x2="478" y2="130" gradientUnits="userSpaceOnUse">
+          <stop stopColor={theme.vars.palette.primary.main} />
+          <stop offset="1" stopColor={theme.vars.palette.primary.main} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,26 @@
+'use client';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+/***************************  IMAGE - PATTERN 4  ***************************/
+
+export default function Pattern4() {
+  const theme = useTheme();
+
+  return (
+    <svg viewBox="0 0 156 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        opacity="0.5"
+        d="M0 1H56.3396C72.9082 1 86.3396 14.4315 86.3396 31V54C86.3396 70.5685 99.7711 84 116.34 84H156"
+        stroke="url(#paint0_linear_1357_81745)"
+      />
+      <defs>
+        <linearGradient id="paint0_linear_1357_81745" x1="-63.7736" y1="84" x2="178.075" y2="84" gradientUnits="userSpaceOnUse">
+          <stop stopColor={theme.vars.palette.primary.main} />
+          <stop offset="1" stopColor={theme.vars.palette.primary.main} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,26 @@
+'use client';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+/***************************  IMAGE - PATTERN 5  ***************************/
+
+export default function Pattern5() {
+  const theme = useTheme();
+
+  return (
+    <svg viewBox="0 0 280 227" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        opacity="0.5"
+        d="M1 0V64.5C1 81.0685 14.4315 94.5 31 94.5H109.84C126.408 94.5 139.84 107.931 139.84 124.5V147.5C139.84 164.069 153.271 177.5 169.84 177.5H249.5C266.069 177.5 279.5 190.931 279.5 207.5V227"
+        stroke="url(#paint0_linear_1357_81744)"
+      />
+      <defs>
+        <linearGradient id="paint0_linear_1357_81744" x1="-10.2736" y1="177.5" x2="331.5" y2="177.5" gradientUnits="userSpaceOnUse">
+          <stop stopColor={theme.vars.palette.primary.main} />
+          <stop offset="1" stopColor={theme.vars.palette.primary.main} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,26 @@
+'use client';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+/***************************  IMAGE - PATTERN 6  ***************************/
+
+export default function Pattern6() {
+  const theme = useTheme();
+
+  return (
+    <svg viewBox="0 0 439 232" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        opacity="0.5"
+        d="M439 58.4569H239.815H131.244C115.378 58.4569 102.516 45.5947 102.516 29.7284V29.7284C102.516 13.8621 89.6538 1 73.7875 1H30.5C13.9315 1 0.5 14.4315 0.5 31V232"
+        stroke="url(#paint0_linear_1357_81747)"
+      />
+      <defs>
+        <linearGradient id="paint0_linear_1357_81747" x1="-35.5951" y1="197.409" x2="382.721" y2="165.223" gradientUnits="userSpaceOnUse">
+          <stop stopColor={theme.vars.palette.primary.main} />
+          <stop offset="1" stopColor={theme.vars.palette.primary.main} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,26 @@
+'use client';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+/***************************  IMAGE - PATTERN 7  ***************************/
+
+export default function Pattern7() {
+  const theme = useTheme();
+
+  return (
+    <svg viewBox="0 0 470 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        opacity="0.5"
+        d="M469.5 0.517578H390.84C377.309 0.517578 366.34 11.4866 366.34 25.0176V25.0176C366.34 38.5486 355.371 49.5176 341.84 49.5176H246.885C236.179 49.5176 227.5 40.8387 227.5 30.1328V30.1328C227.5 19.4269 218.821 10.748 208.115 10.748H0"
+        stroke="url(#paint0_linear_1357_81741)"
+      />
+      <defs>
+        <linearGradient id="paint0_linear_1357_81741" x1="506" y1="168.018" x2="84" y2="129.518" gradientUnits="userSpaceOnUse">
+          <stop stopColor={theme.vars.palette.primary.main} />
+          <stop offset="1" stopColor={theme.vars.palette.primary.main} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,26 @@
+'use client';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+/***************************  IMAGE - PATTERN 8  ***************************/
+
+export default function Pattern8() {
+  const theme = useTheme();
+
+  return (
+    <svg viewBox="0 0 197 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        opacity="0.5"
+        d="M196 100.5V11C196 5.47715 191.523 1 186 1H118.589C113.066 1 108.589 5.47715 108.589 11V43C108.589 48.5228 104.111 53 98.5885 53H0"
+        stroke="url(#paint0_linear_1357_81760)"
+      />
+      <defs>
+        <linearGradient id="paint0_linear_1357_81760" x1="320.359" y1="96.2523" x2="-28.9671" y2="79.5362" gradientUnits="userSpaceOnUse">
+          <stop stopColor={theme.vars.palette.primary.main} />
+          <stop offset="1" stopColor={theme.vars.palette.primary.main} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,22 @@
+'use client';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+/***************************  IMAGE - PATTERN 9  ***************************/
+
+export default function Pattern9() {
+  const theme = useTheme();
+
+  return (
+    <svg viewBox="0 0 300 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path opacity="0.5" d="M300 1L30.5001 1C13.9316 1 0.500153 14.4315 0.500153 31V53" stroke="url(#paint0_linear_1357_81739)" />
+      <defs>
+        <linearGradient id="paint0_linear_1357_81739" x1="106.5" y1="53" x2="336.498" y2="52.2721" gradientUnits="userSpaceOnUse">
+          <stop stopColor={theme.vars.palette.primary.main} />
+          <stop offset="1" stopColor={theme.vars.palette.primary.main} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,37 @@
+'use client';
+import PropTypes from 'prop-types';
+
+import { useId } from 'react';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+
+/***************************  IMAGE - ROUND FAB  ***************************/
+
+export default function RoundFab({ size }) {
+  const theme = useTheme();
+  const uniqueId1 = useId();
+  const uniqueId2 = useId();
+
+  return (
+    <Box className="gradient-fab" sx={{ '& svg': { width: size || { xs: 48, sm: 60 }, height: size || { xs: 48, sm: 60 } } }}>
+      <svg viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="1" y="1" width="58" height="58" rx="29" fill={`url(#${uniqueId1})`} />
+        <rect x="1" y="1" width="58" height="58" rx="29" stroke={`url(#${uniqueId2})`} strokeWidth="2" />
+        <defs>
+          <linearGradient id={uniqueId1} x1="58" y1="30" x2="2" y2="30" gradientUnits="userSpaceOnUse">
+            <stop stopColor={theme.vars.palette.secondary.lighter} />
+            <stop offset="1" stopColor={theme.vars.palette.grey[100]} />
+          </linearGradient>
+          <linearGradient id={uniqueId2} x1="60" y1="30.5" x2="-1.5" y2="30.5" gradientUnits="userSpaceOnUse">
+            <stop stopColor={theme.vars.palette.grey[50]} />
+            <stop offset="1" stopColor={theme.vars.palette.secondary.lighter} />
+          </linearGradient>
+        </defs>
+      </svg>
+    </Box>
+  );
+}
+
+RoundFab.propTypes = { size: PropTypes.number };
@@ -0,0 +1,19 @@
+'use client';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+/***************************  IMAGE - STAR  ***************************/
+
+export default function Star() {
+  const theme = useTheme();
+
+  return (
+    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.5 0C9.95718 3.93797 13.062 7.04282 17 8.5C13.062 9.95718 9.95718 13.062 8.5 17C7.04282 13.062 3.93797 9.95718 0 8.5C3.93797 7.04282 7.04282 3.93797 8.5 0Z"
+        fill={theme.vars.palette.grey[300]}
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,40 @@
+'use client';
+import PropTypes from 'prop-types';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+
+/***************************  IMAGE - STAR FAB  ***************************/
+
+export default function StarFab({ size }) {
+  const theme = useTheme();
+
+  return (
+    <Box
+      className="gradient-fab"
+      sx={{ '& svg': { width: size || { xs: 60, sm: 70, md: 80 }, height: size || { xs: 60, sm: 70, md: 80 } } }}
+    >
+      <svg viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M47.552 4.67508L45.6912 3.14787C43.5455 1.38675 40.4545 1.38675 38.3088 3.14787L36.448 4.67509C35.6785 5.30667 34.6395 5.50091 33.6937 5.18995L31.407 4.43804C28.7699 3.57097 25.8877 4.68757 24.523 7.10489L23.3396 9.20116C22.8502 10.0681 21.9515 10.6245 20.9573 10.6762L18.5533 10.8012C15.7812 10.9452 13.4969 13.0276 13.0976 15.7747L12.7514 18.1569C12.6082 19.1421 11.9712 19.9856 11.0628 20.3929L8.86631 21.3779C6.33339 22.5136 4.95561 25.2806 5.57567 27.9864L6.11338 30.3328C6.33575 31.3031 6.04647 32.3198 5.34657 33.0278L3.65418 34.7397C1.70259 36.7138 1.41739 39.7916 2.97302 42.0907L4.32203 44.0844C4.87993 44.9089 4.97746 45.9614 4.58057 46.8744L3.62087 49.0821C2.51418 51.6278 3.36008 54.6008 5.64117 56.1827L7.61931 57.5545C8.43737 58.1218 8.90854 59.068 8.86826 60.0627L8.77086 62.468C8.65855 65.2416 10.5213 67.7083 13.2198 68.3593L15.5599 68.9239C16.5276 69.1573 17.3088 69.8695 17.6306 70.8115L18.4086 73.0896C19.3059 75.7165 21.9339 77.3437 24.6853 76.9759L27.0713 76.657C28.0581 76.5251 29.0438 76.907 29.6841 77.6692L31.2326 79.5123C33.0181 81.6377 36.0565 82.2057 38.4893 80.8689L40.599 79.7096C41.4715 79.2301 42.5285 79.2301 43.401 79.7096L45.5107 80.8689C47.9435 82.2057 50.9818 81.6377 52.7674 79.5123L54.3159 77.6692C54.9562 76.907 55.9419 76.5251 56.9286 76.657L59.3147 76.9759C62.0661 77.3437 64.6941 75.7165 65.5914 73.0896L66.3694 70.8115C66.6912 69.8695 67.4724 69.1573 68.4401 68.9239L70.7802 68.3593C73.4787 67.7083 75.3414 65.2416 75.2291 62.468L75.1317 60.0627C75.0915 59.068 75.5626 58.1218 76.3807 57.5545L78.3588 56.1827C80.6399 54.6008 81.4858 51.6278 80.3791 49.0821L79.4194 46.8744C79.0225 45.9614 79.1201 44.9089 79.678 44.0844L81.027 42.0907C82.5826 39.7916 82.2974 36.7138 80.3458 34.7397L78.6534 33.0278C77.9535 32.3198 77.6642 31.3031 77.8866 30.3328L78.4243 27.9864C79.0444 25.2806 77.6666 22.5136 75.1337 21.3779L72.9372 20.3929C72.0288 19.9856 71.3918 19.1421 71.2486 18.1569L70.9024 15.7747C70.5031 13.0276 68.2188 10.9452 65.4467 10.8012L63.0427 10.6762C62.0485 10.6245 61.1498 10.0681 60.6604 9.20115L59.477 7.10489C58.1123 4.68757 55.2301 3.57097 52.593 4.43804L50.3062 5.18995C49.3605 5.50091 48.3215 5.30667 47.552 4.67508Z"
+          fill="url(#paint0_linear_5005_3474)"
+          stroke="url(#paint1_linear_5005_3474)"
+          strokeWidth="2.90909"
+        />
+        <defs>
+          <linearGradient id="paint0_linear_5005_3474" x1="82" y1="42" x2="2" y2="42" gradientUnits="userSpaceOnUse">
+            <stop stopColor={theme.vars.palette.secondary.lighter} />
+            <stop offset="1" stopColor={theme.vars.palette.grey[100]} />
+          </linearGradient>
+          <linearGradient id="paint1_linear_5005_3474" x1="84.8571" y1="42.7143" x2="-3" y2="42.7143" gradientUnits="userSpaceOnUse">
+            <stop stopColor={theme.vars.palette.grey[50]} />
+            <stop offset="1" stopColor={theme.vars.palette.secondary.lighter} />
+          </linearGradient>
+        </defs>
+      </svg>
+    </Box>
+  );
+}
+
+StarFab.propTypes = { size: PropTypes.number };
@@ -0,0 +1,27 @@
+'use client';
+import PropTypes from 'prop-types';
+
+// @mui
+import { useTheme } from '@mui/material/styles';
+import Stack from '@mui/material/Stack';
+
+/***************************  IMAGE - WAVE  ***************************/
+
+export default function Wave({ size }) {
+  const theme = useTheme();
+
+  return (
+    <Stack className="wave" sx={{ '& svg': { width: size || { xs: 92, sm: 122 }, height: 10 } }} role="presentation">
+      <svg viewBox="0 0 122 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          opacity="0.4"
+          d="M1.46484 6.83613L4.45387 3.7103C7.74598 0.267505 13.38 0.760513 16.0241 4.72277L16.5428 5.50001C19.2423 9.54539 25.1877 9.54539 27.8873 5.5V5.5C30.5869 1.45461 36.5322 1.45461 39.2318 5.5V5.5C41.9314 9.54539 47.8768 9.54539 50.5764 5.5V5.5C53.2759 1.45461 59.2213 1.45461 61.9209 5.5V5.5C64.6205 9.54539 70.5658 9.54539 73.2654 5.5V5.5C75.965 1.45461 81.9104 1.45461 84.61 5.5V5.5C87.3096 9.54539 93.2549 9.54539 95.9545 5.5V5.5C98.6541 1.45461 104.599 1.45461 107.299 5.5V5.5C109.999 9.54539 115.944 9.54539 118.644 5.5L120.534 2.66667"
+          stroke={theme.vars.palette.primary.main}
+          strokeLinecap="round"
+        />
+      </svg>
+    </Stack>
+  );
+}
+
+Wave.propTypes = { size: PropTypes.number };