Newsletter Section - Copy this React, Mui Component to your project

/* Frame 1686556857 */ position: absolute; width: 1360px; height: 286px; left: calc(50% 1360px/2); top: 6284px; /* Foundation /Primary/primary 400 */ background: #F04951; border radius: 20px; /* Frame 1686556856 */ /* Auto layout */ display: flex; flex direction: column; justify content: center; align items: flex start; padding: 0px; gap: 26px; position: absolute; width: 448px; height: 134px; left: calc(50% 448px/2 + 120px); top: calc(50% 134px/2); /* Frame 1686556854 */ /* Auto layout */ display: flex; flex direction: column; align items: flex start; padding: 0px; gap: 12px; width: 343px; height: 60px; /* Inside auto layout */ flex: none; order: 0; flex grow: 0; /* Subscribe Our Newsletter */ width: 343px; height: 32px; font family: 'Red Hat Display'; font style: normal; font weight: 700; font size: 28px; line height: 32px; /* identical to box height, or 114% */ color: #FFFFFF; /* Inside auto layout */ flex: none; order: 0; flex grow: 0; /* Join us in spreading hope */ width: 157px; height: 16px; font family: 'Red Hat Display'; font style: normal; font weight: 400; font size: 14px; line height: 16px; /* identical to box height, or 114% */ color: #FFFFFF; /* Inside auto layout */ flex: none; order: 1; flex grow: 0; /* Frame 1686556855 */ /* Auto layout */ display: flex; flex direction: row; align items: center; padding: 0px; isolation: isolate; width: 448px; height: 48px; /* Inside auto layout */ flex: none; order: 1; flex grow: 0; /* Frame 1686556759 */ width: 448px; height: 48px; background: #FFFFFF; border radius: 10px; /* Inside auto layout */ flex: none; order: 0; flex grow: 0; z index: 0; /* Enter your Email address */ position: absolute; width: 131px; height: 20px; left: 19px; top: calc(50% 20px/2); font family: 'Red Hat Display'; font style: normal; font weight: 400; font size: 12px; line height: 19px; /* identical to box height, or 160% */ display: flex; align items: center; text align: center; /* Foundation /Secondary/secondary 300 */ color: #686866; /* Link */ /* Auto layout */ display: flex; flex direction: row; justify content: center; align items: center; padding: 11px 24px; gap: 10px; position: absolute; width: 88px; height: 36px; right: 6px; top: calc(50% 36px/2); /* Foundation /Secondary/secondary 500 */ background: #1D1D1B; border radius: 6px; /* Inside auto layout */ flex: none; order: 1; flex grow: 0; z index: 1; /* Submit */ width: 40px; height: 14px; font family: 'Red Hat Display'; font style: normal; font weight: 600; font size: 12px; line height: 14px; /* identical to box height, or 117% */ display: flex; align items: center; text align: center; color: #FFFFFF; /* Inside auto layout */ flex: none; order: 0; flex grow: 0; /* Mask group */ position: absolute; left: 1217.73px; right: 90.98px; top: 46.33px; bottom: 187.47px; transform: matrix(0.99, 0.15, 0.41, 0.91, 0, 0); /* Rectangle 326 */ position: absolute; width: 42.09px; height: 50.32px; left: 1226.87px; top: 46.33px; background: url(.png); transform: matrix(0.99, 0.16, 0.24, 0.97, 0, 0); /* Rectangle 327 */ position: absolute; width: 42.09px; height: 50.32px; left: 1227.17px; top: 47.5px; background: #FFD172; transform: matrix(0.99, 0.16, 0.24, 0.97, 0, 0); /* Mask group */ position: absolute; left: 1119px; right: 189.71px; top: 205px; bottom: 28.8px; transform: matrix( 0.99, 0.15, 0.41, 0.91, 0, 0); /* Rectangle 326 */ position: absolute; width: 42.09px; height: 50.32px; left: 1128.14px; top: 205px; background: url(.png); transform: matrix( 0.99, 0.16, 0.24, 0.97, 0, 0); /* Rectangle 327 */ position: absolute; width: 42.09px; height: 50.32px; left: 1127.83px; top: 206.17px; background: #FFFFFF; transform: matrix( 0.99, 0.16, 0.24, 0.97, 0, 0); /* Mask Group */ position: absolute; left: 68px; right: 1270.64px; top: 55px; bottom: 207.79px; transform: rotate( 23.51deg); /* Mask */ position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background: url(.png); transform: rotate( 23.51deg); /* Background */ position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background: #FFFFFF; transform: rotate( 23.51deg); /* Mask Group */ position: absolute; left: 102px; right: 1236.64px; top: 205px; bottom: 57.79px; transform: rotate( 23.51deg); /* Mask */ position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background: url(.png); transform: rotate( 23.51deg); /* Background */ position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; /* Foundation /Primary/primary 50 */ background: #FDE8E9; transform: rotate( 23.51deg); /* img */ position: absolute; width: 95.78px; height: 81.05px; left: 374px; top: 85px; background: url(.png); transform: matrix( 0.9, 0.44, 0.44, 0.9, 0, 0); /* Mask group */ position: absolute; width: 284px; height: 285px; left: 135px; top: 1px; transform: matrix( 1, 0, 0, 1, 0, 0); /* Mask */ position: absolute; width: 284px; height: 285px; left: 135px; top: 1px; background: url(.png); transform: matrix( 1, 0, 0, 1, 0, 0); /* Mask group */ position: absolute; width: 593px; height: 406px; left: 51.18px; top: 99.49px; transform: matrix( 1, 0, 0, 1, 0, 0); /* image 7 */ position: absolute; width: 593px; height: 406px; left: 51.18px; top: 99.49px; background: url(image.png); transform: matrix( 1, 0, 0, 1, 0, 0); /* image 7 */ position: absolute; width: 243px; height: 234px; left: 174.82px; top: 49.49px; background: url(bg_removal [Background removed].png); transform: matrix( 1, 0, 0, 1, 0, 0);