Merge pull request Jaishree2310#312 from Gauravtb2253/glassmorphism-d…

…onation Added glassmorphism theme in donate page
jainaryan04 · Oct 26, 2024 · 801b88f · 801b88f
2 parents 57420a9 + 7bc309c
commit 801b88f
Showing 1 changed file with 17 additions and 17 deletions.
diff --git a/src/components/DonationPage.tsx b/src/components/DonationPage.tsx
@@ -32,29 +32,28 @@ 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",
     color: '#ffffff',
   };
 
   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,35 +77,36 @@ 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)',
   };
 
   const buttonStyle: React.CSSProperties = {
     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 (
     <div style={containerStyle}>
-      <h1 style={headingStyle}>Liked our glassmorphic components!</h1>
+      <h1 style={headingStyle}>Support Us!</h1>
       <p style={paragraphStyle}>
         Your contributions help us continue our work.
       </p>