Feature/UI modernization (#805)

jeromehardaway · Copilot · web-flow · commit 1d69efc681c9 · 2025-10-28T20:27:01.000-04:00
* updated UI main page

* updated UI main page

* Update src/assets/css/globals.css

Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;

* Update src/layouts/footers/footer-01.tsx

Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;

---------

Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;
diff --git a/public/fallback-Q6wt2k6gdH1r182VpI_6c.js b/public/fallback-Q6wt2k6gdH1r182VpI_6c.js
diff --git a/src/assets/css/globals.css b/src/assets/css/globals.css
@@ -9,6 +9,7 @@
         url("/fonts/gotham/GothamPro-Light.eot?#iefix") format("embedded-opentype");
     font-weight: 100;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -22,6 +23,7 @@
         url("/fonts/gotham/GothamPro-LightItalic.eot?#iefix") format("embedded-opentype");
     font-weight: 100;
     font-style: italic;
+    font-display: swap;
 }
 
 @font-face {
@@ -35,6 +37,7 @@
         url("/fonts/gotham/GothamPro.eot?#iefix") format("embedded-opentype");
     font-weight: 200;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -48,6 +51,7 @@
         url("/fonts/gotham/GothamPro-Italic.eot?#iefix") format("embedded-opentype");
     font-weight: 200;
     font-style: italic;
+    font-display: swap;
 }
 
 @font-face {
@@ -61,6 +65,7 @@
         url("/fonts/gotham/GothamPro-Medium.eot?#iefix") format("embedded-opentype");
     font-weight: 400;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -74,6 +79,7 @@
         url("/fonts/gotham/GothamPro-MediumItalic.eot?#iefix") format("embedded-opentype");
     font-weight: 400;
     font-style: italic;
+    font-display: swap;
 }
 
 @font-face {
@@ -87,6 +93,7 @@
         url("/fonts/gotham/GothamPro-Bold.eot?#iefix") format("embedded-opentype");
     font-weight: 600;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -100,6 +107,7 @@
         url("/fonts/gotham/GothamPro-BoldItalic.eot?#iefix") format("embedded-opentype");
     font-weight: 600;
     font-style: italic;
+    font-display: swap;
 }
 
 @font-face {
@@ -113,6 +121,7 @@
         url("/fonts/gotham/GothamPro-Black.eot?#iefix") format("embedded-opentype");
     font-weight: 800;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -126,6 +135,7 @@
         url("/fonts/gotham/GothamPro-BlackItalic.eot?#iefix") format("embedded-opentype");
     font-weight: 800;
     font-style: italic;
+    font-display: swap;
 }
 
 /* Keyframes and animations */
@@ -143,6 +153,43 @@
 /* Global body styling */
 
 body {
-    font-family: "GothamPro", sans-serif;
-    font-weight: 400; /* Default weight */
+    font-family: "GothamPro", system-ui, -apple-system, sans-serif;
+    font-weight: 400;
+    font-size: 16px; /* Improved from 15px for better readability */
+    line-height: 1.7; /* Increased from 1.74 for better readability */
+}
+
+/* Improved focus states for accessibility */
+*:focus-visible {
+    outline: 3px solid #c5203e;
+    outline-offset: 2px;
+    border-radius: 4px;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    body {
+        color: #000;
+    }
+}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Improved heading scale with fluid typography */
+h1 {
+    font-size: clamp(2.5rem, 5vw, 3.5rem);
+    line-height: 1.2;
+}
+
+h2 {
+    font-size: clamp(2rem, 4vw, 2.75rem);
+    line-height: 1.25;
+}
+
+h3 {
+    font-size: clamp(1.5rem, 3vw, 2rem);
+    line-height: 1.3;
 }
diff --git a/src/components/blog-card/blog-01.tsx b/src/components/blog-card/blog-01.tsx
@@ -11,7 +11,7 @@ const BlogCard = forwardRef<HTMLDivElement, TProps>(
     ({ title, path, category, postedAt, image, className }, ref) => (
         <div
             className={clsx(
-                "blog-card tw-group tw-relative tw-overflow-hidden tw-rounded tw-bg-white tw-shadow-xl tw-shadow-black/5 tw-transition-all",
+                "blog-card tw-group tw-relative tw-overflow-hidden tw-rounded-2xl tw-bg-white tw-border tw-border-gray-200/50 tw-shadow-md tw-shadow-black/5 tw-transition-all tw-duration-500 hover:tw-shadow-2xl hover:tw-shadow-primary/10 hover:-tw-translate-y-2",
                 className
             )}
             ref={ref}
diff --git a/src/components/course-card/course-01.tsx b/src/components/course-card/course-01.tsx
@@ -14,7 +14,7 @@ const CourseCard = forwardRef<HTMLDivElement, TProps>(
         return (
             <div
                 className={clsx(
-                    "group tw-h-full tw-overflow-hidden tw-rounded tw-bg-gray-100 tw-transition-all hover:tw-bg-white hover:tw-shadow-4xl hover:tw-shadow-black/[0.12]",
+                    "group tw-h-full tw-overflow-hidden tw-rounded-2xl tw-bg-white tw-border tw-border-gray-200/50 tw-transition-all tw-duration-500 hover:tw-bg-white hover:tw-shadow-2xl hover:tw-shadow-primary/10 hover:-tw-translate-y-2",
                     className
                 )}
                 ref={ref}
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
@@ -83,40 +83,40 @@ const Button = ({
     hover,
 }: ButtonProps) => {
     const baseClass =
-        "tw-font-bold tw-justify-center tw-items-center tw-border tw-border-solid tw-rounded-md tw-transition-colors tw-min-w-max";
+        "tw-font-bold tw-justify-center tw-items-center tw-border tw-border-solid tw-rounded-lg tw-transition-all tw-duration-300 tw-ease-out tw-min-w-max";
     const baseNotFullWidthClass = !fullwidth && "tw-inline-flex";
     const lightHoverClass =
         !disabled &&
         !active &&
         hover === "light" &&
-        "hover:tw-bg-white hover:tw-border-white hover:tw-text-primary";
+        "hover:tw-bg-white hover:tw-border-white hover:tw-text-primary hover:tw-shadow-lg hover:tw-shadow-white/25 hover:tw-scale-105 active:tw-scale-95";
 
     // Primary Button
-    const containedPrimaryClass = "tw-bg-primary tw-border-primary tw-text-white";
+    const containedPrimaryClass = "tw-bg-primary tw-border-primary tw-text-white tw-shadow-md tw-shadow-primary/20";
     const containedPrimaryHoverClass =
         !disabled &&
         !active &&
         hover === "default" &&
-        "hover:tw-bg-secondary hover:tw-border-secondary hover:tw-text-white";
+        "hover:tw-bg-secondary hover:tw-border-secondary hover:tw-text-white hover:tw-shadow-lg hover:tw-shadow-primary/30 hover:tw-scale-105 active:tw-scale-95";
     const containedPrimaryActiveClass =
         !disabled &&
         active &&
-        "tw-bg-secondary tw-border-secondary active:tw-bg-secondary active:tw-border-secondary";
+        "tw-bg-secondary tw-border-secondary active:tw-bg-secondary active:tw-border-secondary tw-shadow-xl tw-shadow-primary/40";
     const containedPrimaryBtn = color === "primary" && [
         containedPrimaryClass,
         containedPrimaryHoverClass,
         containedPrimaryActiveClass,
         lightHoverClass,
     ];
 
-    const outlinedPrimaryClass = "tw-bg-transparent tw-border-primary tw-text-primary";
+    const outlinedPrimaryClass = "tw-bg-transparent tw-border-primary tw-text-primary tw-border-2";
     const outlinedPrimaryHoverClass =
-        !disabled && !active && hover === "default" && "hover:tw-bg-primary hover:tw-text-white";
+        !disabled && !active && hover === "default" && "hover:tw-bg-primary hover:tw-text-white hover:tw-shadow-lg hover:tw-shadow-primary/20 hover:tw-scale-105 active:tw-scale-95";
     const outlinedPrimaryActiveClass =
         !disabled &&
         active &&
         hover === "default" &&
-        "tw-bg-primary tw-border-primary tw-text-white active:tw-bg-primary active:tw-bg-primary";
+        "tw-bg-primary tw-border-primary tw-text-white active:tw-bg-primary active:tw-bg-primary tw-shadow-lg tw-shadow-primary/30";
     const outlinedPrimaryBtn = color === "primary" && [
         outlinedPrimaryClass,
         outlinedPrimaryHoverClass,
@@ -125,16 +125,16 @@ const Button = ({
     ];
 
     // Light Button
-    const containedLightClass = "tw-bg-light tw-border-light tw-text-heading";
+    const containedLightClass = "tw-bg-light tw-border-light tw-text-heading tw-shadow-sm";
     const containedLightHoverClass =
         !disabled &&
         !active &&
         hover === "default" &&
-        "hover:tw-bg-primary hover:tw-border-primary hover:tw-text-white";
+        "hover:tw-bg-primary hover:tw-border-primary hover:tw-text-white hover:tw-shadow-lg hover:tw-shadow-primary/20 hover:tw-scale-105 active:tw-scale-95";
     const containedLightActiveClass =
         !disabled &&
         active &&
-        "tw-bg-primary tw-border-primary active:tw-bg-primary active:tw-border-primary";
+        "tw-bg-primary tw-border-primary active:tw-bg-primary active:tw-border-primary tw-shadow-lg tw-shadow-primary/30";
     const containedLightBtn = color === "light" && [
         containedLightClass,
         containedLightHoverClass,
@@ -163,6 +163,7 @@ const Button = ({
     const mdBtn =
         size === "md" &&
         "tw-text-md tw-px-7 tw-py-1 tw-min-h-[48px] md:tw-min-h-[52px] md:tw-px-10";
+    const smBtn = size === "sm" && "tw-text-sm tw-px-6 tw-py-1 tw-min-h-[40px] md:tw-min-h-[44px]";
     const xsBtn = size === "xs" && "tw-text-[13px] tw-px-5 tw-leading-[30px] tw-min-h-8";
 
     // Button Shapes
@@ -175,7 +176,7 @@ const Button = ({
         variant !== "texted" && baseNotFullWidthClass,
         variant === "contained" && [containedPrimaryBtn, containedLightBtn],
         variant === "outlined" && [outlinedPrimaryBtn, outlinedLightBtn],
-        !iconButton && variant !== "texted" && [mdBtn, xsBtn],
+        !iconButton && variant !== "texted" && [mdBtn, smBtn, xsBtn],
         roundedBtn,
         ellipseBtn,
         fullBtn,
diff --git a/src/containers/hero/layout-04/index.tsx b/src/containers/hero/layout-04/index.tsx
@@ -48,7 +48,7 @@ const HeroArea = ({ data: { images, headings, texts, buttons, video } }: TProps)
                                 left: 0,
                                 width: "100%",
                                 height: "100%",
-                                backgroundColor: "rgba(9, 31, 64, 0.5)",
+                                background: "linear-gradient(135deg, rgba(9, 31, 64, 0.85) 0%, rgba(197, 32, 62, 0.75) 100%)",
                             }}
                         />
                     </div>
diff --git a/src/containers/hero/layout-07/index.tsx b/src/containers/hero/layout-07/index.tsx
@@ -57,7 +57,8 @@ const HeroArea = ({ data: { items } }: TProps) => {
                                 <div
                                     className="tw-absolute tw-inset-0"
                                     style={{
-                                        backgroundColor: "rgba(9, 31, 64, 0.5)",
+                                        background:
+                                            "linear-gradient(135deg, rgba(9, 31, 64, 0.85) 0%, rgba(197, 32, 62, 0.75) 100%)",
                                     }}
                                 />
                             </div>
diff --git a/src/containers/timeline/item.tsx b/src/containers/timeline/item.tsx
@@ -14,8 +14,8 @@ type TProps = {
 const TimelineItem = ({ isEven, title, image, heading, texts }: TProps) => {
     return (
         <li className="tw-relative tw-mb-10 tw-grid tw-w-full tw-grid-cols-1 tw-pl-[45px] last:tw-mb-0 md:tw-grid-cols-2 md:tw-pl-0 lg:tw-mb-[68px]">
-            <div className="tw-absolute tw-left-0 tw-top-0.5 tw-h-7.5 tw-w-7.5 tw-text-primary before:tw-absolute before:tw-inset-0 before:tw-rounded-full before:tw-border before:tw-border-current before:tw-opacity-20 before:tw-content-[''] md:tw-left-1/2 md:-tw-translate-x-1/2">
-                <div className="tw-absolute tw-left-1/2 tw-right-1/2 tw-z-10 tw-h-[14px] tw-w-[14px] -tw-translate-x-1/2 tw-translate-y-1/2 tw-rounded-full tw-border-[3px] tw-border-current tw-bg-white" />
+            <div className="tw-absolute tw-left-0 tw-top-0.5 tw-h-7.5 tw-w-7.5 tw-text-primary before:tw-absolute before:tw-inset-0 before:tw-animate-pulse-soft before:tw-rounded-full before:tw-border-2 before:tw-border-current before:tw-opacity-30 before:tw-shadow-lg before:tw-shadow-primary/20 before:tw-content-[''] md:tw-left-1/2 md:-tw-translate-x-1/2">
+                <div className="tw-absolute tw-left-1/2 tw-right-1/2 tw-z-10 tw-h-[16px] tw-w-[16px] -tw-translate-x-1/2 tw-translate-y-1/2 tw-rounded-full tw-border-[3px] tw-border-current tw-bg-white tw-shadow-md tw-shadow-primary/30" />
             </div>
             <motion.div
                 className={clsx(
@@ -35,11 +35,11 @@ const TimelineItem = ({ isEven, title, image, heading, texts }: TProps) => {
                         </h3>
                     )}
                     {image?.src && (
-                        <figure>
+                        <figure className="tw-group/img tw-overflow-hidden tw-rounded-2xl tw-border tw-border-gray-200/50 tw-shadow-lg tw-shadow-black/5 tw-transition-all tw-duration-500 hover:tw-shadow-2xl hover:tw-shadow-primary/10">
                             <img
                                 src={image.src}
                                 alt={image?.alt || ""}
-                                className="tw-h-full tw-w-full tw-rounded tw-object-cover"
+                                className="tw-h-full tw-w-full tw-object-cover tw-transition-transform tw-duration-700 group-hover/img:tw-scale-110"
                             />
                         </figure>
                     )}
diff --git a/src/layouts/footers/footer-01.tsx b/src/layouts/footers/footer-01.tsx
@@ -11,11 +11,14 @@ const Footer01 = ({ mode }: TProps) => {
     return (
         <footer
             className={clsx(
-                "tw-pb-[50px] tw-pt-[70px]",
-                mode === "dark" && "tw-bg-dark-100",
+                "tw-pb-[50px] tw-pt-[70px] tw-relative",
+                mode === "dark" && "tw-bg-gradient-to-b tw-from-gray-900 tw-to-gray-950 tw-text-gray-300",
                 mode === "light" && "tw-bg-light-100"
             )}
         >
+            {mode === "dark" && (
+                <div className="tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-h-px tw-bg-gradient-to-r tw-from-transparent tw-via-primary tw-to-transparent tw-opacity-50" />
+            )}
             <h2 className="tw-sr-only">Footer</h2>
             <div className="tw-container">
                 <div className="tw-grid tw-grid-cols-12">
@@ -46,13 +49,18 @@ const Footer01 = ({ mode }: TProps) => {
                         </a>
                     </div>
                 </div>
-                <p className="copyright tw-mt-5 tw-text-center tw-text-md tw-text-gray-400">
+                <p className="copyright tw-mt-5 tw-text-center tw-text-base tw-text-gray-400">
                     &copy; {new Date().getFullYear()} Vets Who Code{" "}
-                    <a target="_blank" rel="noopener noreferrer" href="https://www.vetswhocode.io/">
+                    <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href="https://www.vetswhocode.io/"
+                        className="tw-transition-colors hover:tw-text-primary"
+                    >
                         All Rights Reserved
                     </a>
                 </p>
-                <p className="copyright mt-n5 tw-text-center tw-text-md tw-text-gray-400">
+                <p className="copyright tw-mt-2 tw-text-center tw-text-base tw-text-gray-400">
                     Vets Who Code is a registered 501(c)(3) nonprofit under EIN 86-2122804.
                     Donations are tax-deductible to the fullest extent allowable under the law.
                 </p>
diff --git a/src/layouts/headers/header.tsx b/src/layouts/headers/header.tsx
@@ -41,7 +41,7 @@ const Header = ({ shadow, fluid }: TProps) => {
                             <i className="far fa-clock tw-mr-[5px] tw-text-lg tw-text-secondary" />
                             <CountdownTimer targetDate="2025/11/11" />
                         </div>
-                        <Button size="xs" path="/donate">
+                        <Button size="sm" path="/donate" className="tw-shadow-lg tw-shadow-primary/25">
                             Donate
                         </Button>
                     </div>
@@ -50,10 +50,10 @@ const Header = ({ shadow, fluid }: TProps) => {
                     <div
                         ref={measuredRef}
                         className={clsx(
-                            "header-inner tw-left-0 tw-top-0 tw-z-50 tw-h-auto tw-w-full tw-bg-white tw-py-[25px] tw-transition-all xl:tw-py-0",
-                            !sticky && "tw-absolute",
+                            "header-inner tw-left-0 tw-top-0 tw-z-50 tw-h-auto tw-w-full tw-py-[25px] tw-transition-all xl:tw-py-0",
+                            !sticky && "tw-absolute tw-bg-white",
                             sticky &&
-                                "tw-fixed tw-animate-headerSlideDown tw-shadow-3md tw-shadow-black/10",
+                                "tw-fixed tw-animate-headerSlideDown tw-backdrop-blur-lg tw-bg-white/90 tw-border-b tw-border-gray-200/50 tw-shadow-lg tw-shadow-black/5",
                             shadow && "tw-shadow-sm tw-shadow-black/5"
                         )}
                     >
diff --git a/src/pages/about-us.tsx b/src/pages/about-us.tsx
@@ -55,15 +55,39 @@ const AboutUs: PageWithLayout = ({ data }) => {
             <HeroArea data={content?.["hero-area"]} />
             <TimelineArea data={content?.["timeline-area"]} />
 
-            {/* Theory of Change Link */}
-            <div className="tw-container tw-my-10 tw-text-center">
-                <p className="tw-mb-4 tw-text-lg">Want to understand our methodology in depth?</p>
-                <Link
-                    href="/theory-of-change"
-                    className="tw-inline-block tw-rounded-md tw-bg-primary tw-px-6 tw-py-3 tw-font-medium tw-text-white tw-transition-colors hover:tw-bg-secondary"
-                >
-                    View Our Theory of Change
-                </Link>
+            {/* Theory of Change Link - Enhanced */}
+            <div className="tw-container tw-my-16">
+                <div className="tw-mx-auto tw-max-w-4xl tw-rounded-2xl tw-border tw-border-gray-200 tw-bg-gradient-to-br tw-from-white tw-to-gray-50 tw-p-8 tw-shadow-xl tw-shadow-primary/5 md:tw-p-12">
+                    <div className="tw-text-center">
+                        <h2 className="tw-mb-4 tw-text-3xl tw-font-bold tw-text-secondary md:tw-text-4xl">
+                            Our Methodology
+                        </h2>
+                        <p className="tw-mb-8 tw-text-lg tw-text-body md:tw-text-xl">
+                            Want to understand how we transform veterans into web developers?
+                            <br />
+                            Explore our comprehensive Theory of Change.
+                        </p>
+                        <Link
+                            href="/theory-of-change"
+                            className="tw-group tw-inline-flex tw-items-center tw-gap-3 tw-rounded-lg tw-bg-primary tw-px-8 tw-py-4 tw-font-bold tw-text-white tw-shadow-lg tw-shadow-primary/25 tw-transition-all tw-duration-300 hover:tw-scale-105 hover:tw-bg-secondary hover:tw-shadow-xl hover:tw-shadow-primary/35 active:tw-scale-95"
+                        >
+                            View Our Theory of Change
+                            <svg
+                                className="tw-h-5 tw-w-5 tw-transition-transform tw-duration-300 group-hover:tw-translate-x-1"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M17 8l4 4m0 0l-4 4m4-4H3"
+                                />
+                            </svg>
+                        </Link>
+                    </div>
+                </div>
             </div>
 
             <CtaArea data={content?.["cta-area"]} space="bottom" />
diff --git a/tailwind.config.js b/tailwind.config.js
