From 9916093cb10d1cb37364a17c02bc28362501d03c Mon Sep 17 00:00:00 2001
From: abhiramtx <7253115-abhiramtx@users.noreply.replit.com>
Date: Sat, 8 Nov 2025 22:46:35 +0000
Subject: [PATCH] Enhance website visuals with improved image transitions and
 button styling

Add a gradient overlay to the hero image section for smoother transitions. Modify button styles to adopt the blue button appearance, adjust hover effects to include a subtle shadow and opacity change, and remove the wavy animation from sponsor cards. Additionally, the navigation bar's clickability issue is addressed by ensuring correct pointer events. The dark overlay on the full team image is also deepened for better text contrast.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: e6505caf-f55c-4cd8-acca-e892af468f4a
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/LO5wnCQ
---
 .replit               |  4 ----
 static/css/styles.css | 49 +++++++++++++++++++++++++++++--------------
 static/js/scripts.js  | 13 ------------
 3 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/.replit b/.replit
index 26767e0..f942c2e 100644
--- a/.replit
+++ b/.replit
@@ -12,10 +12,6 @@ deploymentTarget = "cloudrun"
 localPort = 5000
 externalPort = 80
 
-[[ports]]
-localPort = 37899
-externalPort = 3000
-
 [agent]
 expertMode = true
 
diff --git a/static/css/styles.css b/static/css/styles.css
index f4fae21..a7fc12c 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -355,6 +355,18 @@ hr {
     margin-left: calc(-50vw + 50%);
 }
 
+.hero-image-section::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 150px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
+    z-index: 2;
+    pointer-events: none;
+}
+
 .hero-team-image {
     width: 100%;
     height: 100%;
@@ -371,7 +383,7 @@ hr {
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 100%);
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%);
     z-index: 1;
 }
 
@@ -459,18 +471,19 @@ hr {
     font-family: var(--font-body);
     font-weight: 500;
     border-radius: 12px;
-    padding: 16px 48px;
-    border: 1px solid #3b82f6;
-    background: transparent;
+    padding: 16px 32px;
+    background: rgba(59, 130, 246, 0.1);
+    border: 1px solid rgba(59, 130, 246, 0.3);
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     margin: 32px auto;
     display: block;
 }
 
 .stats-button:hover {
-    background: #3b82f6;
+    background: rgba(59, 130, 246, 0.2);
     transform: translateY(-2px);
+    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
 }
 
 .about-section-imgp {
@@ -543,18 +556,19 @@ hr {
     font-weight: 500;
     border-radius: 12px;
     color: var(--white);
-    padding: 16px 48px;
-    border: 1px solid #3b82f6;
-    background: transparent;
+    padding: 16px 32px;
+    background: rgba(59, 130, 246, 0.1);
+    border: 1px solid rgba(59, 130, 246, 0.3);
     z-index: 2;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .bottom-center-button:hover {
-    background: #3b82f6;
+    background: rgba(59, 130, 246, 0.2);
     color: var(--white);
     transform: translateX(-50%) translateY(-2px);
+    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
 }
 
 .values-grid {
@@ -733,22 +747,23 @@ hr {
 
 #sponsors-more-button {
     margin: 48px auto;
-    padding: 16px 48px;
+    padding: 16px 32px;
     font-size: 16px;
     font-family: var(--font-body);
     font-weight: 500;
     border-radius: 12px;
-    border: 1px solid #3b82f6;
+    background: rgba(59, 130, 246, 0.1);
+    border: 1px solid rgba(59, 130, 246, 0.3);
     color: var(--white);
-    background: transparent;
     display: block;
-    transition: all 0.2s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
 }
 
 #sponsors-more-button:hover {
-    background: #3b82f6;
+    background: rgba(59, 130, 246, 0.2);
     transform: translateY(-2px);
+    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
 }
 
 .card-container,
@@ -1724,6 +1739,7 @@ body {
     border-radius: 50%;
     position: fixed;
     pointer-events: none;
+    pointer-events: none;
     z-index: 10000;
     transition: all 0.15s ease;
     transform: translate(-50%, -50%);
@@ -1737,6 +1753,7 @@ body {
     border-radius: 50%;
     position: fixed;
     pointer-events: none;
+    pointer-events: none;
     z-index: 9999;
     transition: all 0.3s ease;
     transform: translate(-50%, -50%);
diff --git a/static/js/scripts.js b/static/js/scripts.js
index 27c29a8..16cae60 100644
--- a/static/js/scripts.js
+++ b/static/js/scripts.js
@@ -141,19 +141,6 @@ function initParallaxEffects() {
         });
     }
 
-    const sponsorCards = document.querySelectorAll('.sponsors-card');
-    sponsorCards.forEach((card, index) => {
-        gsap.to(card, {
-            y: -30 * (index % 2 === 0 ? 1 : -1),
-            ease: "none",
-            scrollTrigger: {
-                trigger: card,
-                start: "top bottom",
-                end: "bottom top",
-                scrub: 1
-            }
-        });
-    });
 }
 
 function initScrollAnimations() {