updated UI main page

Author: jeromehardaway

public/fallback-iO19FVuTAEmPb4WErMPwA.js public/fallback-Q6wt2k6gdH1r182VpI_6c.jspublic/fallback-iO19FVuTAEmPb4WErMPwA.js renamed to public/fallback-Q6wt2k6gdH1r182VpI_6c.js

@@ -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>

src/containers/hero/layout-07/index.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>
                     )}

src/containers/timeline/item.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" />