diff --git a/src/components/DonationPage.tsx b/src/components/DonationPage.tsx index ca54206..fc9abbb 100644 --- a/src/components/DonationPage.tsx +++ b/src/components/DonationPage.tsx @@ -32,12 +32,11 @@ const DonationPage: React.FC = () => { const containerStyle: React.CSSProperties = { maxWidth: '500px', - margin: '50px auto', + margin: '70px auto', padding: '40px', - background: 'rgba(255, 255, 255, 0.15)', + background: + 'linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.1)', borderRadius: '20px', - boxShadow: '0 8px 32px rgba(0, 0, 0, 0.25)', - backdropFilter: 'blur(15px)', border: '1px solid rgba(255, 255, 255, 0.2)', textAlign: 'center', fontFamily: "'Poppins', sans-serif", @@ -45,16 +44,16 @@ const DonationPage: React.FC = () => { }; const headingStyle: React.CSSProperties = { - fontSize: '2rem', + fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '20px', - background: 'linear-gradient(90deg, #ff8a00, #e52e71)', + background: 'linear-gradient(90deg, #00c6ff, #0072ff)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', }; const paragraphStyle: React.CSSProperties = { - fontSize: '1.1rem', + fontSize: '1.2rem', marginBottom: '30px', color: '#e0e0e0', }; @@ -78,15 +77,16 @@ const DonationPage: React.FC = () => { padding: '14px', marginBottom: '20px', borderRadius: '12px', - border: '1px solid rgba(255, 255, 255, 0.2)', - background: 'rgba(255, 255, 255, 0.1)', + border: '1px solid rgba(255, 255, 255, 0.4)', + background: 'rgba(255, 255, 255, 0.2)', color: '#ffffff', - boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', + boxShadow: '0 4px 15px rgba(0, 0, 0, 0.2)', transition: 'border-color 0.4s ease, transform 0.3s ease', + backdropFilter: 'blur(5px)', }; const inputFocusStyle: React.CSSProperties = { - borderColor: '#e52e71', + borderColor: '#00c6ff', transform: 'scale(1.02)', }; @@ -94,19 +94,19 @@ const DonationPage: React.FC = () => { marginTop: '10px', padding: '14px 24px', background: isHovering - ? 'linear-gradient(90deg, #ff8a00, #e52e71)' - : 'linear-gradient(90deg, #e52e71, #ff8a00)', + ? 'linear-gradient(90deg, #00c6ff, #0072ff)' + : 'linear-gradient(90deg, #0072ff, #00c6ff)', color: '#ffffff', border: 'none', borderRadius: '25px', - fontSize: '1.1rem', + fontSize: '1.2rem', cursor: 'pointer', transition: 'background 0.4s ease, transform 0.3s ease', - boxShadow: '0 4px 15px rgba(229, 46, 113, 0.4)', + boxShadow: '0 4px 15px rgba(0, 198, 255, 0.4)', }; const buttonHoverStyle: React.CSSProperties = { - transform: 'scale(1.08)', + transform: 'scale(1.05)', }; const errorStyle: React.CSSProperties = { @@ -144,7 +144,7 @@ const DonationPage: React.FC = () => { return (
-

Liked our glassmorphic components!

+

Support Us!

Your contributions help us continue our work.