Removed gradients and other small graphic changes.

src/components/Layout.jsx

@@ -25,11 +25,11 @@ const Layout = ({ children }) => {
   const sponsorItem = { path: "/sponsorship", label: "Looking to Sponsor?" };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
+    <div className="min-h-screen">
       {/* Navigation */}
       {!showHeader && (
         <button
-          className="fixed top-4 left-4 z-[100] bg-yellow-500 text-black rounded-full p-3 shadow-lg md:hidden animate-bounce"
+          className="fixed top-4 left-4 z-[100] text-black rounded-full p-3 shadow-lg md:hidden animate-bounce"
           style={{ fontSize: 22, lineHeight: 1 }}
           onClick={() => setShowHeader(true)}
           aria-label="Open header"
@@ -51,7 +51,7 @@ const Layout = ({ children }) => {
         </button>
       )}
       {showHeader && (
-        <nav className="fixed top-0 left-0 right-0 z-50 bg-gray-900/80 backdrop-blur-xl border-b border-gray-700/50 shadow-sm">
+        <nav className="fixed top-0 left-0 right-0 z-50 bg-gray-900/80 backdrop-blur-xl shadow-sm">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
             <div className="flex flex-col sm:flex-row w-full items-center sm:items-center justify-between min-h-20 gap-2 sm:gap-0">
               <Link

src/components/SponsorTicker-darkside-safeBackup-0001.jsx

@@ -0,0 +1,149 @@
+import { motion } from "framer-motion";
+import "./ProjectTicker.css";
+
+const SponsorTicker = () => {
+  // Actual sponsor logos from public/assets/sponsors
+  const logos = [
+    {
+      id: 1,
+      name: "14 & Elm",
+      url: "/assets/sponsors/14elmtlogo.jpeg",
+      alt: "14 & Elm Logo",
+      link: "https://14elmt.com",
+    },
+    {
+      id: 2,
+      name: "L3 Harris",
+      url: "/assets/sponsors/l3harrislogo.png",
+      alt: "L3 Harris Logo",
+      link: "https://www.l3harris.com/",
+    },
+    {
+      id: 3,
+      name: "Phillips 66",
+      url: "/assets/sponsors/phillips66logo.png",
+      alt: "Phillips 66 Logo",
+      link: "https://www.phillips66.com/",
+    },
+    {
+      id: 4,
+      name: "Polymaker",
+      url: "/assets/sponsors/polymaker-full-logo.svg",
+      alt: "Polymaker Logo",
+      link: "https://www.polymaker.com/",
+    },
+    {
+      id: 5,
+      name: "TC Energy",
+      url: "/assets/sponsors/tcenergylogo.png",
+      alt: "TC Energy Logo",
+      link: "https://www.tcenergy.com/",
+    },
+    {
+      id: 6,
+      name: "Williams Energy Partners",
+      url: "/assets/sponsors/williams-energy-partners-logo-png-transparent.png",
+      alt: "Williams Energy Partners Logo",
+      link: "https://www.williams.com/",
+    },
+  ];
+
+  // smotoh lop
+  const duplicatedLogos = [...logos, ...logos, ...logos, ...logos];
+
+  return (
+    <div
+      className="project-ticker-wrapper"
+      style={{
+        pointerEvents: "auto",
+        position: "relative",
+        zIndex: 10,
+        marginBottom: 0,
+      }}
+    >
+      <div className="project-ticker-container">
+        <div
+          className="project-ticker-track"
+          style={{ animationDuration: "90s" }}
+        >
+          {duplicatedLogos.map((logo, index) => {
+            // Custom scaling and rectangle size for specific logos
+            let customImgStyle = {
+              maxHeight: 40,
+              maxWidth: 120,
+              width: "auto",
+              height: "auto",
+              objectFit: "contain",
+              background: "#fff",
+              borderRadius: "999px",
+              padding: 2,
+              margin: "0 auto",
+              display: "block",
+            };
+            if (logo.name === "14 & Elm") {
+              customImgStyle.maxHeight = 48 * 1.5;
+              customImgStyle.maxWidth = 140 * 1.5;
+            }
+            if (logo.name === "L3 Harris") {
+              customImgStyle.maxHeight = 90 * 1.3;
+              customImgStyle.maxWidth = 220 * 1.3;
+            }
+            if (logo.name === "Williams Energy Partners") {
+              customImgStyle.maxHeight = 90 * 1.2;
+              customImgStyle.maxWidth = 220 * 1.2;
+            }
+            if (logo.name === "Phillips 66") {
+              customImgStyle.maxHeight = 60 * 0.9;
+              customImgStyle.maxWidth = 120 * 0.9;
+            }
+            if (logo.name === "Polymaker") {
+              customImgStyle.maxHeight = 60 * 0.9;
+              customImgStyle.maxWidth = 120 * 0.9;
+            }
+            if (logo.name === "TC Energy") {
+              customImgStyle.maxHeight = 60 * 0.9;
+              customImgStyle.maxWidth = 120 * 0.9;
+            }
+            return (
+              <a
+                key={`${logo.id}-${index}`}
+                className="project-ticker-block glass-effect flex items-center justify-center"
+                style={{
+                  width: 120,
+                  height: 60,
+                  background: "#fff",
+                  borderRadius: "999px",
+                  padding: 0,
+                  boxShadow: "0 8px 32px 0 rgba(31, 38, 135, 0.10)",
+                  border: "1.5px solid #e5e7eb",
+                  margin: "0 0.25rem",
+                  transition:
+                    "transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  backgroundClip: "padding-box",
+                  overflow: "hidden",
+                }}
+                href={logo.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                tabIndex={0}
+                aria-label={`Visit ${logo.name} website`}
+              >
+                <img
+                  src={logo.url}
+                  alt={logo.alt}
+                  style={customImgStyle}
+                  className="sponsor-logo"
+                />
+              </a>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SponsorTicker;

src/components/SponsorTicker.jsx

@@ -81,16 +81,28 @@ const SponsorTicker = () => {
               display: "block",
             };
             if (logo.name === "14 & Elm") {
-              customImgStyle.maxHeight = 48;
-              customImgStyle.maxWidth = 140;
+              customImgStyle.maxHeight = 48 * 1.5;
+              customImgStyle.maxWidth = 140 * 2;
             }
             if (logo.name === "L3 Harris") {
-              customImgStyle.maxHeight = 90;
-              customImgStyle.maxWidth = 220;
+              customImgStyle.maxHeight = 90 * 1.3;
+              customImgStyle.maxWidth = 220 * 1.3;
             }
             if (logo.name === "Williams Energy Partners") {
-              customImgStyle.maxHeight = 90;
-              customImgStyle.maxWidth = 220;
+              customImgStyle.maxHeight = 90 * 1.2;
+              customImgStyle.maxWidth = 220 * 1.2;
+            }
+            if (logo.name === "Phillips 66") {
+              customImgStyle.maxHeight = 60 * 0.9;
+              customImgStyle.maxWidth = 120 * 0.9;
+            }
+            if (logo.name === "Polymaker") {
+              customImgStyle.maxHeight = 60 * 0.9;
+              customImgStyle.maxWidth = 120 * 0.9;
+            }
+            if (logo.name === "TC Energy") {
+              customImgStyle.maxHeight = 60 * 0.9;
+              customImgStyle.maxWidth = 120 * 0.9;
             }
             return (
               <a

src/main.css

@@ -9,37 +9,45 @@
   scrollbar-width: thin;
   scrollbar-color: #fff #18181b;
 }
+
 .custom-scrollbar ::-webkit-scrollbar {
   width: 12px;
   height: 12px;
 }
+
 .custom-scrollbar ::-webkit-scrollbar-track {
   background: #18181b;
 }
+
 .custom-scrollbar ::-webkit-scrollbar-thumb {
   background: #fff;
   border: 2px solid #18181b;
   border-radius: 6px;
 }
+
 .custom-scrollbar ::-webkit-scrollbar-thumb:hover {
   background: #e5e5e5;
 }
+
 html,
 body {
   overflow-x: hidden !important;
 }
+
 /* Custom Scrollbar Styles */
 ::-webkit-scrollbar {
   width: 12px;
   height: 12px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #222222; /* site bg color, adjust as needed */
+  background: #222222;
+  /* site bg color, adjust as needed */
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #fff; /* white slider */
+  background: #ffffff;
+  /* white slider */
   border-radius: 6px;
   border: 2px solid #222222;
 }
@@ -52,23 +60,28 @@ body {
   scrollbar-color: #fff #222222;
   scrollbar-width: thin;
 }
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   :root {
-    --color-bg: #111218;
-    --color-text: #e5e7eb;
+    --color-bg: #1b2538;
+    --color-text: #f2f2f2;
 
-    --color-accent: #ffd700; /* yellow */
+    --color-accent: #f3d127;
+    /* yellow */
     --color-secondary: #ffd700;
-    --color-gradient-start: #f59e0b; /* amber-500 */
-    --color-gradient-end: #fbbf24; /* amber-400 */
+    --color-gradient-start: #f59e0b;
+    /* amber-500 */
+    --color-gradient-end: #fbbf24;
+    /* amber-400 */
   }
 
   * {
     margin: 0;
+
     padding: 0;
     box-sizing: border-box;
   }
@@ -81,9 +94,9 @@ body {
     font-family: "Inter", sans-serif;
     background-color: var(--color-bg);
     color: var(--color-text);
-    transition:
+    /*transition:
       background-color 0.3s ease,
-      color 0.3s ease;
+      color 0.3s ease;*/
   }
 }
 
@@ -117,27 +130,6 @@ body {
   .text-accent {
     color: var(--color-accent) !important;
   }
-
-  .bg-gradient-turtle {
-    background: linear-gradient(
-      135deg,
-      var(--color-gradient-start),
-      var(--color-gradient-end)
-    );
-  }
-
-  .bg-gradient-premium {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  }
-
-  .hero-gradient {
-    background: linear-gradient(
-      135deg,
-      rgba(17, 18, 24, 0.1) 0%,
-      rgba(17, 18, 24, 0.05) 100%
-    );
-    backdrop-filter: blur(10px);
-  }
 }
 
 @layer utilities {

src/pages/About.jsx

@@ -188,7 +188,7 @@ const About = () => {
       </section>
 
       {/* Statistics Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
+      <section className="py-24">
         <div className="max-w-7xl mx-auto">
           <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
             OUR <span className="text-yellow-400">IMPACT</span>
@@ -202,7 +202,7 @@ const About = () => {
       </section>
 
       {/* Leadership Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
+      <section className="py-24 px-4">
         <div className="max-w-7xl mx-auto">
           <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-20 text-gray-200">
             OUR <span className="text-yellow-400">TEAM</span>

src/pages/Apply.jsx

@@ -143,7 +143,7 @@ const Apply = () => {
       </section>
 
       {/* What We Look For Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
+      <section className="py-24 px-4">
         <div className="max-w-6xl mx-auto">
           {/* Main Heading */}
           <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-16 text-gray-200">

src/pages/DevelopmentPrograms.jsx

@@ -70,7 +70,7 @@ const DevelopmentPrograms = () => {
         ref={heroRef}
         className="relative min-h-screen flex items-center justify-center px-4 pt-20"
       >
-        <div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900"></div>
+        <div className="absolute inset-0"></div>
         <div className="relative text-center max-w-6xl mx-auto z-10">
           <h1 className="text-6xl md:text-8xl lg:text-9xl tracking-tight text-gray-200 mb-8">
             <span className="block">DEVELOPMENT</span>
@@ -86,10 +86,7 @@ const DevelopmentPrograms = () => {
 
       {/* Program Sections */}
       {programs.map((program, index) => (
-        <section
-          key={program.id}
-          className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900"
-        >
+        <section key={program.id} className="py-24 px-4">
           <div className="max-w-7xl mx-auto">
             {/* Section Title */}
             <h2 className="text-4xl md:text-5xl lg:text-6xl text-center mb-12 text-gray-200">
@@ -133,7 +130,7 @@ const DevelopmentPrograms = () => {
       ))}
 
       {/* Call to Action Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
+      <section className="py-24 px-4">
         <div className="max-w-4xl mx-auto text-center">
           <h2 className="text-5xl md:text-7xl text-gray-200 mb-6">
             Ready to Start Your{" "}