Improve styling for images and sponsor section presentation

Update CSS to fix image display issues, adjust the sponsors section layout, and resolve minor styling inconsistencies.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 8702cea6-5379-4542-9446-7e71f9f057ab
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 8201fba5-a9b5-45f9-8405-e7872874ad43
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/705de26f-a3c1-41e6-845d-88f96627134c/8702cea6-5379-4542-9446-7e71f9f057ab/ejKynqE
Replit-Helium-Checkpoint-Created: true

css/custom.css

@@ -4534,6 +4534,74 @@ header.main-header .header-sticky.active{
         color: var(--accent-color);
 }
 
+/************************************/
+/***     35b. Sponsors Section    ***/
+/************************************/
+
+.our-sponsors-section{
+        padding: 70px 0 60px;
+        background-color: var(--white-color);
+}
+
+.sponsors-logo-grid{
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: 40px;
+        margin-bottom: 40px;
+}
+
+.sponsor-logo-item{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #fff;
+        border: 1px solid var(--dark-divider-color);
+        border-radius: 12px;
+        padding: 20px 30px;
+        transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
+        min-width: 200px;
+        max-width: 260px;
+        width: 100%;
+}
+
+.sponsor-logo-item:hover{
+        box-shadow: 0 8px 30px rgba(0,0,0,0.10);
+        transform: translateY(-3px);
+}
+
+.sponsor-logo-item img{
+        max-width: 100%;
+        max-height: 100px;
+        width: auto;
+        height: auto;
+        object-fit: contain;
+        display: block;
+}
+
+.sponsors-footer{
+        text-align: center;
+        max-width: 600px;
+        margin: 0 auto;
+}
+
+.sponsors-footer p{
+        margin: 0;
+        color: var(--text-color);
+}
+
+.sponsors-footer p a{
+        font-weight: 700;
+        color: var(--accent-color);
+        text-decoration: underline;
+        transition: all 0.3s ease-in-out;
+}
+
+.sponsors-footer p a:hover{
+        color: var(--primary-color);
+}
+
 /************************************/
 /***     36. responsive css       ***/
 /************************************/
@@ -5542,6 +5610,24 @@ header.main-header .header-sticky.active{
         margin-bottom: 10px;
     }
 
+        .our-sponsors-section{
+                padding: 40px 0;
+        }
+
+        .sponsors-logo-grid{
+                gap: 20px;
+        }
+
+        .sponsor-logo-item{
+                min-width: 140px;
+                max-width: 180px;
+                padding: 15px 20px;
+        }
+
+        .sponsor-logo-item img{
+                max-height: 70px;
+        }
+
         .mission-img{
         padding: 0 0 60px 60px;
     }

index.html

@@ -337,7 +337,7 @@
                         <!-- Mission Image Start -->
                         <div class="mission-img">
                             <figure class="image-anime reveal">
-                                <img src="images/about.gif" style="width: 450px; height: 750px;" alt="">
+                                <img src="images/about.gif" alt="">
                             </figure>
                         </div>
                         <!-- Mission Image End -->
@@ -451,73 +451,36 @@
     </div>
     <!-- Service Ticker End -->
 
-    <p></p>
+    <!-- Sponsors Section Start -->
-    <p></p>
+    <div class="our-sponsors-section">
-
-    <!-- Our Ministries Section Start -->
-    <div class="our-ministries">
         <div class="container">
             <div class="row section-row">
-                <!-- Section Title Start -->
                 <div class="section-title">
                     <h3 class="wow fadeInUp">Our Sponsors</h3>
                     <h2 class="text-anime-style-2" data-cursor="-opaque">Our Proud <span>Sponsors</span></h2>
                 </div>
-                <!-- Section Title End -->
             </div>
 
-            <div class="service-single-slider">
+            <div class="sponsors-logo-grid wow fadeInUp" data-wow-delay="0.25s">
-                <div class="swiper">
+                <div class="sponsor-logo-item">
-                    <div class="swiper-wrapper">
+                    <img src="images/ncca.jpg" alt="NCCA">
-                        <!-- Service Image Slide Start -->
-                        <div class="swiper-slide">
-                            <div class="service-slider-image">
-                                <figure>
-                                    <img src="images/ncca.jpg"" alt="">
-                                </figure>
                 </div>
+                <div class="sponsor-logo-item">
+                    <img src="images/hit-fantasy.jpg" alt="Hit Fantasy">
                 </div>
-                        <!-- Service Image Slide End -->
+                <div class="sponsor-logo-item">
-
+                    <img src="images/srisports.png" alt="Sri Sports">
-                        <!-- Service Image Slide Start -->
-                        <div class=" swiper-slide">
-                                    <div class="service-slider-image">
-                                        <figure>
-                                            <img src="images/hit-fantasy.jpg" alt="">
-                                        </figure>
-                                    </div>
-                            </div>
-                            <!-- Service Image Slide End -->
-
-                            <!-- Service Image Slide Start -->
-                            <div class="swiper-slide">
-                                <div class="service-slider-image">
-                                    <figure>
-                                        <img src="images/srisports.png" style="width: 1200px; height: 1200px;" alt="">
-                                    </figure>
-                                </div>
-                            </div>
-                            <!-- Service Image Slide End -->
-                        </div>
-                        <div class="service-single-btn">
-                            <div class="service-single-button-prev"></div>
-                            <div class="service-single-button-next"></div>
-                        </div>
                 </div>
             </div>
 
-                <div class="col-lg-12">
+            <div class="sponsors-footer wow fadeInUp" data-wow-delay="0.5s">
-                    <div class="our-ministries-footer wow fadeInUp" data-wow-delay="0.75s">
                 <p>We sincerely thank all of our sponsors who have allowed our community to function.
-                            Their support enables teams to join with no barrier to entry. <a href="/sponsors.html">View
+                    Their support enables teams to join with no barrier to entry.
-                                All
+                    <a href="/sponsors.html">View All Our Sponsors</a></p>
-                                Our Sponsors</a></p>
             </div>
         </div>
     </div>
-        </div>
+    <!-- Sponsors Section End -->
-    </div>
-    <!-- Our Ministries Section End -->
 
 
 

server/index.ts

@@ -2,6 +2,7 @@ import express, { type Request, Response, NextFunction } from "express";
 import { registerRoutes } from "./routes";
 import { serveStatic } from "./static";
 import { createServer } from "http";
+import path from "path";
 
 const app = express();
 const httpServer = createServer(app);
@@ -22,6 +23,10 @@ app.use(
 
 app.use(express.urlencoded({ extended: false }));
 
+// Serve static HTML files and assets from the project root directory
+// This enables index.html, about.html, css/, images/, js/ etc. to be accessible
+app.use(express.static(path.resolve(import.meta.dirname, "..")));
+
 export function log(message: string, source = "express") {
   const formattedTime = new Date().toLocaleTimeString("en-US", {
     hour: "numeric",