Ilgeldi
/
turkmentv_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wheel

This commit is contained in:
Kakabay 2024-11-20 21:02:06 +05:00
parent 8ae7b08a44
commit 9fc16722e7
4 changed files with 277 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/(main)/(lottery)/lottery/page.tsx
View File

@ -1,7 +1,7 @@
import CountDown from "@/components/lottery/countDown/CountDown"; import CountDown from '@/components/lottery/countDown/CountDown';
import SpinWheel from "@/components/lottery/spinWheel/SpinWheel"; import SpinWheel from '@/components/lottery/spinWheel/SpinWheel';
import Image from "next/image"; import Image from 'next/image';
import React from "react"; import React from 'react';
const page = () => { const page = () => {
return ( return (
@ -32,19 +32,15 @@ const page = () => {
<div className="flex flex-col w-full p-8 gap-4"> <div className="flex flex-col w-full p-8 gap-4">
<div className="flex flex-col gap-2 pb-4 border-b border-lightOutlineVariant"> <div className="flex flex-col gap-2 pb-4 border-b border-lightOutlineVariant">
<h4 className="font-heading-3-regular">Results</h4> <h4 className="font-heading-3-regular">Results</h4>
<p className="font-base-medium"> <p className="font-base-medium">The results after each stage will be shown here.</p>
The results after each stage will be shown here.
</p>
</div> </div>
{[...Array(5)].map((item, index) => ( {/* {[...Array(5)].map((item, index) => (
<div className="flex flex-col gap-2 pb-4 last:border-none border-b border-lightOutlineVariant"> <div className="flex flex-col gap-2 pb-4 last:border-none border-b border-lightOutlineVariant">
<h4 className="font-heading-5-regular"> <h4 className="font-heading-5-regular">The winner of the {index + 1} stage:</h4>
The winner of the {index + 1} stage:
</h4>
<p className="font-base-medium">8 XX XX-XX-XX</p> <p className="font-base-medium">8 XX XX-XX-XX</p>
</div> </div>
))} ))} */}
</div> </div>
{/* Sping the wheel */} {/* Sping the wheel */}
@ -64,11 +60,10 @@ const page = () => {
<h3 className="font-heading-5-regular">Umumy düzgünler:</h3> <h3 className="font-heading-5-regular">Umumy düzgünler:</h3>
<ul className="list-disc flex flex-col gap-4 pl-[16px]"> <ul className="list-disc flex flex-col gap-4 pl-[16px]">
{Array(5) {Array(5)
.fill(" ") .fill(' ')
.map((item) => ( .map((item) => (
<li className="font-small-regular"> <li className="font-small-regular">
Ilkinji we dogry jogap beren sanawda ilkinji ýeri Ilkinji we dogry jogap beren sanawda ilkinji ýeri eýelýär
eýelýär
</li> </li>
))} ))}
</ul> </ul>
@ -78,7 +73,7 @@ const page = () => {
<h3 className="font-heading-5-regular">Üns beriň:</h3> <h3 className="font-heading-5-regular">Üns beriň:</h3>
<ul className="list-disc flex flex-col gap-4 pl-[16px]"> <ul className="list-disc flex flex-col gap-4 pl-[16px]">
{Array(1) {Array(1)
.fill(" ") .fill(' ')
.map((item) => ( .map((item) => (
<li className="font-small-regular">SMS = 1 manat</li> <li className="font-small-regular">SMS = 1 manat</li>
))} ))}

24
app/globals.css
View File

@ -93,8 +93,7 @@ html {
} }
.text-stroke { .text-stroke {
text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
1px 1px 0 white;
} }
.big-swiper .swiper-pagination-bullet { .big-swiper .swiper-pagination-bullet {
@ -122,20 +121,20 @@ html {
.small-swiper .swiper-button-next:after { .small-swiper .swiper-button-next:after {
color: white; color: white;
content: url("/arrow-right-small.svg"); content: url('/arrow-right-small.svg');
} }
.small-swiper .swiper-button-prev:after { .small-swiper .swiper-button-prev:after {
color: white; color: white;
content: url("/arrow-left-small.svg"); content: url('/arrow-left-small.svg');
} }
.big-swiper .swiper-button-next:after { .big-swiper .swiper-button-next:after {
color: white; color: white;
content: url("/arrow-right-big.svg"); content: url('/arrow-right-big.svg');
} }
.big-swiper .swiper-button-prev:after { .big-swiper .swiper-button-prev:after {
color: white; color: white;
content: url("/arrow-left-big.svg"); content: url('/arrow-left-big.svg');
} }
video { video {
@ -188,15 +187,15 @@ big {
@apply bg-[#E6E6FA] rounded-xl py-3 px-4 placeholder:text-[#BCBCD6] outline-none; @apply bg-[#E6E6FA] rounded-xl py-3 px-4 placeholder:text-[#BCBCD6] outline-none;
} }
.calendar [aria-label="Go to next month"] { .calendar [aria-label='Go to next month'] {
@apply shadow-sm transition-all; @apply shadow-sm transition-all;
} }
.calendar [aria-label="Go to previous month"] { .calendar [aria-label='Go to previous month'] {
@apply shadow-sm transition-all; @apply shadow-sm transition-all;
} }
.day-styles [name="day"] { .day-styles [name='day'] {
@apply p-4 text-textDarkt leading-[140%] bg-purple-600 rounded-full; @apply p-4 text-textDarkt leading-[140%] bg-purple-600 rounded-full;
} }
@ -239,3 +238,10 @@ big {
.text-countdown { .text-countdown {
@apply font-roboto text-[60px] leading-[70px] -tracking-[1%]; @apply font-roboto text-[60px] leading-[70px] -tracking-[1%];
} }
.wheel-circle {
background: url('/wheel-circle.svg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

63
components/lottery/spinWheel/SpinWheel.tsx
View File

@ -1,5 +1,6 @@
"use client"; 'use client';
import Image from 'next/image';
// import React, { useRef, useState, useEffect } from "react"; // import React, { useRef, useState, useEffect } from "react";
// const SpinWheel: React.FC = () => { // const SpinWheel: React.FC = () => {
@ -160,7 +161,7 @@
// export default SpinWheel; // export default SpinWheel;
import { useState } from "react"; import { useState } from 'react';
const SpinWheel: React.FC = () => { const SpinWheel: React.FC = () => {
const [isSpinning, setIsSpinning] = useState(false); const [isSpinning, setIsSpinning] = useState(false);
@ -178,7 +179,7 @@ const SpinWheel: React.FC = () => {
// Countdown logic // Countdown logic
const countdownInterval = setInterval(() => { const countdownInterval = setInterval(() => {
setCountdown((prev) => { setCountdown((prev) => {
if (prev === 1) { if (prev === 0) {
clearInterval(countdownInterval); clearInterval(countdownInterval);
return 0; return 0;
} }
@ -191,7 +192,7 @@ const SpinWheel: React.FC = () => {
setIsSpinning(false); setIsSpinning(false);
setRotation((prev) => prev % 360); // Normalize the rotation setRotation((prev) => prev % 360); // Normalize the rotation
setCountdown(5); // Reset countdown for the next spin setCountdown(5); // Reset countdown for the next spin
}, 5000); // Spin duration }, 6000); // Spin duration
}; };
return ( return (
@ -203,41 +204,18 @@ const SpinWheel: React.FC = () => {
className="relative w-[530px] h-[530px] rounded-full border-[15px] border-[#8589DE] overflow-hidden" className="relative w-[530px] h-[530px] rounded-full border-[15px] border-[#8589DE] overflow-hidden"
style={{ style={{
transform: `rotate(${rotation}deg)`, transform: `rotate(${rotation}deg)`,
transition: isSpinning ? "transform 5s ease-out" : "", transition: isSpinning ? 'transform 5s ease-out' : '',
}} }}>
>
{/* Wheel Segments */} {/* Wheel Segments */}
<div <div className="absolute inset-0 rounded-full bg-white w-[500px] h-[500px]">
className="absolute inset-0 rounded-full bg-white" <Image
style={{ src={'/wheel-circle.svg'}
background: `conic-gradient( alt="wheel"
#E1E0FF 0% 4.166%, height={500}
#575992 4.166% 8.333%, width={500}
#E1E0FF 8.333% 12.5%, className="w-full h-full object-cover"
#575992 12.5% 16.666%, />
#E1E0FF 16.666% 20.833%, </div>
#575992 20.833% 25%,
#E1E0FF 25% 29.166%,
#575992 29.166% 33.333%,
#E1E0FF 33.333% 37.5%,
#575992 37.5% 41.666%,
#E1E0FF 41.666% 45.833%,
#575992 45.833% 50%,
#E1E0FF 50% 54.166%,
#575992 54.166% 58.333%,
#E1E0FF 58.333% 62.5%,
#575992 62.5% 66.666%,
#E1E0FF 66.666% 70.833%,
#575992 70.833% 75%,
#E1E0FF 75% 79.166%,
#575992 79.166% 83.333%,
#E1E0FF 83.333% 87.5%,
#575992 87.5% 91.666%,
#E1E0FF 91.666% 95.833%,
#575992 95.833% 100%
)`,
}}
></div>
</div> </div>
{/* Countdown Display */} {/* Countdown Display */}
@ -253,12 +231,9 @@ const SpinWheel: React.FC = () => {
onClick={spinWheel} onClick={spinWheel}
disabled={isSpinning} disabled={isSpinning}
className={`mt-6 px-6 py-3 rounded-full text-white font-bold ${ className={`mt-6 px-6 py-3 rounded-full text-white font-bold ${
isSpinning isSpinning ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-700'
? "bg-gray-400 cursor-not-allowed" }`}>
: "bg-blue-500 hover:bg-blue-700" {isSpinning ? 'Spinning...' : 'Spin the Wheel'}
}`}
>
{isSpinning ? "Spinning..." : "Spin the Wheel"}
</button> </button>
</div> </div>
); );

232
public/wheel-circle.svg Normal file
View File

@ -0,0 +1,232 @@
<svg width="508" height="508" viewBox="0 0 508 508" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M77.2962 76.2968C92.7385 60.8544 110.138 47.5029 129.051 36.5836L229.01 209.717C225.227 211.901 221.747 214.571 218.659 217.659L77.2962 76.2968Z" fill="#575992"/>
<g filter="url(#filter0_dd_2908_1669)">
<path d="M129.052 36.5835C147.965 25.6641 168.227 17.271 189.322 11.6187L241.064 204.724C236.845 205.854 232.793 207.533 229.01 209.717L129.052 36.5835Z" fill="#E1E0FF"/>
</g>
<path d="M189.322 11.6188C210.417 5.96647 232.161 3.10375 254 3.10376L254 203.021C249.632 203.021 245.283 203.593 241.064 204.724L189.322 11.6188Z" fill="#575992"/>
<g filter="url(#filter1_dd_2908_1669)">
<path d="M254 3.10376C275.839 3.10376 297.583 5.96649 318.678 11.6188L266.935 204.724C262.716 203.593 258.368 203.021 254 203.021V3.10376Z" fill="#E1E0FF"/>
</g>
<path d="M318.678 11.6188C339.772 17.2711 360.035 25.6642 378.948 36.5836L278.989 209.717C275.207 207.533 271.154 205.854 266.935 204.724L318.678 11.6188Z" fill="#575992"/>
<g filter="url(#filter2_dd_2908_1669)">
<path d="M378.948 36.5835C397.861 47.5029 415.261 60.8544 430.703 76.2967L289.34 217.659C286.252 214.571 282.772 211.901 278.989 209.717L378.948 36.5835Z" fill="#E1E0FF"/>
</g>
<path d="M430.703 76.2967C446.145 91.739 459.497 109.139 470.416 128.052L297.283 228.01C295.099 224.228 292.429 220.748 289.34 217.659L430.703 76.2967Z" fill="#575992"/>
<g filter="url(#filter3_dd_2908_1669)">
<path d="M470.416 128.052C481.336 146.965 489.729 167.228 495.381 188.322L302.276 240.064C301.146 235.846 299.467 231.793 297.283 228.01L470.416 128.052Z" fill="#E1E0FF"/>
</g>
<path d="M495.381 188.322C501.033 209.417 503.896 231.161 503.896 253L303.979 253C303.979 248.632 303.406 244.283 302.276 240.064L495.381 188.322Z" fill="#575992"/>
<g filter="url(#filter4_dd_2908_1669)">
<path d="M470.416 377.948C459.497 396.861 446.145 414.261 430.703 429.703L289.34 288.341C292.429 285.252 295.099 281.772 297.283 277.99L470.416 377.948Z" fill="#E1E0FF"/>
</g>
<path d="M430.703 429.703C415.261 445.146 397.861 458.497 378.948 469.417L278.989 296.283C282.772 294.099 286.252 291.429 289.34 288.341L430.703 429.703Z" fill="#575992"/>
<g filter="url(#filter5_dd_2908_1669)">
<path d="M378.948 469.417C360.035 480.336 339.772 488.729 318.678 494.381L266.935 301.276C271.154 300.146 275.207 298.467 278.989 296.283L378.948 469.417Z" fill="#E1E0FF"/>
</g>
<path d="M318.678 494.381C297.583 500.034 275.838 502.896 254 502.896L254 302.979C258.368 302.979 262.716 302.407 266.935 301.276L318.678 494.381Z" fill="#575992"/>
<path d="M189.322 494.381C168.227 488.729 147.964 480.336 129.052 469.416L229.01 296.283C232.793 298.467 236.845 300.146 241.064 301.276L189.322 494.381Z" fill="#575992"/>
<g filter="url(#filter6_dd_2908_1669)">
<path d="M254 502.896C232.161 502.896 210.416 500.034 189.322 494.381L241.064 301.276C245.283 302.407 249.632 302.979 254 302.979L254 502.896Z" fill="#E1E0FF"/>
</g>
<g filter="url(#filter7_dd_2908_1669)">
<path d="M129.052 469.417C110.139 458.497 92.7387 445.146 77.2964 429.703L218.659 288.341C221.748 291.429 225.228 294.099 229.01 296.283L129.052 469.417Z" fill="#E1E0FF"/>
</g>
<path d="M77.2964 429.703C61.8541 414.261 48.5026 396.861 37.5832 377.948L210.716 277.99C212.9 281.772 215.571 285.252 218.659 288.341L77.2964 429.703Z" fill="#575992"/>
<g filter="url(#filter8_dd_2908_1669)">
<path d="M37.5833 377.948C26.6639 359.035 18.2708 338.773 12.6185 317.678L205.724 265.936C206.854 270.155 208.533 274.207 210.716 277.99L37.5833 377.948Z" fill="#E1E0FF"/>
</g>
<path d="M12.6185 317.678C6.96623 296.583 4.10351 274.839 4.10352 253L204.021 253C204.021 257.368 204.593 261.717 205.724 265.936L12.6185 317.678Z" fill="#575992"/>
<g filter="url(#filter9_dd_2908_1669)">
<path d="M4.10352 253C4.10352 231.161 6.96625 209.417 12.6186 188.322L205.724 240.064C204.593 244.283 204.021 248.632 204.021 253L4.10352 253Z" fill="#E1E0FF"/>
</g>
<path d="M12.6185 188.322C18.2708 167.227 26.6639 146.965 37.5833 128.052L210.716 228.01C208.533 231.793 206.854 235.846 205.724 240.064L12.6185 188.322Z" fill="#575992"/>
<g filter="url(#filter10_dd_2908_1669)">
<path d="M37.5833 128.052C48.5027 109.139 61.8541 91.739 77.2965 76.2966L218.659 217.659C215.571 220.748 212.9 224.228 210.716 228.01L37.5833 128.052Z" fill="#E1E0FF"/>
</g>
<path d="M495.381 317.678C489.729 338.773 481.336 359.035 470.416 377.948L297.283 277.99C299.467 274.207 301.146 270.155 302.276 265.936L495.381 317.678Z" fill="#575992"/>
<g filter="url(#filter11_dd_2908_1669)">
<path d="M503.896 253C503.896 274.839 501.033 296.583 495.381 317.678L302.276 265.936C303.406 261.717 303.979 257.368 303.979 253H503.896Z" fill="#E1E0FF"/>
</g>
<defs>
<filter id="filter0_dd_2908_1669" x="125.052" y="8.61874" width="120.012" height="206.098" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2908_1669"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2908_1669"/>
<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 dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_2908_1669" result="effect2_dropShadow_2908_1669"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2908_1669" result="shape"/>
</filter>
<filter id="filter1_dd_2908_1669" x="250" y="0.10376" width="72.678" height="209.62" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2908_1669"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2908_1669"/>
<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 dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_2908_1669" result="effect2_dropShadow_2908_1669"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2908_1669" result="shape"/>
</filter>
<filter id="filter2_dd_2908_1669" x="274.99" y="33.5835" width="159.714" height="189.076" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2908_1669"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2908_1669"/>
<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 dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_2908_1669" result="effect2_dropShadow_2908_1669"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2908_1669" result="shape"/>
</filter>
<filter id="filter3_dd_2908_1669" x="293.283" y="125.052" width="206.098" height="120.013" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2908_1669"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2908_1669"/>
<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 dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_2908_1669" result="effect2_dropShadow_2908_1669"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2908_1669" result="shape"/>
</filter>
<filter id="filter4_dd_2908_1669" x="285.34" y="274.99" width="189.076" height="159.714" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2908_1669"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2908_1669"/>
<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 dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_2908_1669" result="effect2_dropShadow_2908_1669"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2908_1669" result="shape"/>
</filter>
<filter id="filter5_dd_2908_1669" x="262.935" y="293.283" width="120.013" height="206.098" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2908_1669"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2908_1669"/>
<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 dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_2908_1669" result="effect2_dropShadow_2908_1669"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2908_1669" result="shape"/>
</filter>
<filter id="filter6_dd_2908_1669" x="185.322" y="298.276" width="72.678" height="209.62" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2908_1669"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2908_1669"/>
<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 dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_2908_1669" result="effect2_dropShadow_2908_1669"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2908_1669" result="shape"/>
</filter>
<filter id="filter7_dd_2908_1669" x="73.2964" y="285.341" width="159.714" height="189.076" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2908_1669"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2908_1669"/>
<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 dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_2908_1669" result="effect2_dropShadow_2908_1669"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2908_1669" result="shape"/>
</filter>
<filter id="filter8_dd_2908_1669" x="8.61841" y="262.936" width="206.098" height="120.013" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2908_1669"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2908_1669"/>
<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 dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_2908_1669" result="effect2_dropShadow_2908_1669"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2908_1669" result="shape"/>
</filter>
<filter id="filter9_dd_2908_1669" x="0.103516" y="185.322" width="209.62" height="72.678" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2908_1669"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2908_1669"/>
<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 dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_2908_1669" result="effect2_dropShadow_2908_1669"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2908_1669" result="shape"/>
</filter>
<filter id="filter10_dd_2908_1669" x="33.5833" y="73.2966" width="189.076" height="159.714" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2908_1669"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2908_1669"/>
<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 dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_2908_1669" result="effect2_dropShadow_2908_1669"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2908_1669" result="shape"/>
</filter>
<filter id="filter11_dd_2908_1669" x="298.276" y="250" width="209.62" height="72.678" 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"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2908_1669"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2908_1669"/>
<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 dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_2908_1669" result="effect2_dropShadow_2908_1669"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2908_1669" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB