From 91a5960622af26ddf0c88f327a584894f4b5bdec Mon Sep 17 00:00:00 2001
From: Arky Asmal <arkyasmal@gmail.com>
Date: Sun, 11 Jun 2023 21:37:04 -0400
Subject: [PATCH] adjusted home page image banner styles and rendering of
 headers for client site to be more in tune with customer taste

---
 .../utilities/HomePageImageBanner.tsx         | 39 ++++++++++++-------
 .../_homePageImageBannerBreakpoints.scss      | 33 ++++++++++++----
 2 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/src/homePage/utilities/HomePageImageBanner.tsx b/src/homePage/utilities/HomePageImageBanner.tsx
index 8da7ee1..5bac8a6 100644
--- a/src/homePage/utilities/HomePageImageBanner.tsx
+++ b/src/homePage/utilities/HomePageImageBanner.tsx
@@ -4,9 +4,10 @@ import { Link } from "react-router-dom";
 import { useRef } from "react";
 import useIntersectionObserver from "../../hooks/use-intersection-observer";
 import "react-lazy-load-image-component/src/effects/blur.css";
+import useWindowWidth from "../../hooks/use-window-width";
 const namespace = "home-page-img-banner";
 export type HomePageImageBannerContentProps = {
-  title: string;
+  title?: string;
   children: string | JSX.Element | JSX.Element[];
   btnData: {
     text: string;
@@ -18,25 +19,28 @@ export type HomePageImageBannerContentProps = {
     ) => void;
   };
 };
+const HomePageHeader = ({ title }: { title?: string }) => {
+  const titleRef = useRef<HTMLHeadingElement | null>(null);
+  const titleEntry = useIntersectionObserver(titleRef, {});
+  const isTitleVisible = !!titleEntry?.isIntersecting;
+  return (
+    <h3
+      ref={titleRef}
+      className={`${namespace}-content-title${isTitleVisible ? " show" : ""}`}
+    >
+      {title}
+    </h3>
+  );
+};
 const HomePageImageBannerContent = ({
   title,
   children,
   btnData,
 }: HomePageImageBannerContentProps) => {
-  const titleRef = useRef<HTMLHeadingElement | null>(null);
-  const titleEntry = useIntersectionObserver(titleRef, {});
-  const isTitleVisible = !!titleEntry?.isIntersecting;
   return (
     <div className={`${namespace}-content-container`}>
       <div className={`${namespace}-content`}>
-        <h3
-          ref={titleRef}
-          className={`${namespace}-content-title${
-            isTitleVisible ? " show" : ""
-          }`}
-        >
-          {title}
-        </h3>
+        {title ? <HomePageHeader title={title} /> : null}
         <div className={`${namespace}-content-inner-container`}>{children}</div>
         {btnData.url ? (
           <Link
@@ -87,23 +91,28 @@ const HomePageImageBanner = ({
   contentDirection?: "left" | "right";
 } & ImageProps &
   HomePageImageBannerContentProps) => {
+  const mediumWindowWidth = useWindowWidth(768);
   return (
     <div
       className={`${namespace}-container${
         customClass ? " " + customClass : ""
       }`}
     >
-      {contentDirection === "left" && (
+      {!mediumWindowWidth && <HomePageHeader title={title} />}
+      {(!mediumWindowWidth || contentDirection === "left") && (
         <HomePageImageBannerImage
           imgUrl={imgUrl}
           imgDescription={imgDescription}
           imgPlaceholderUrl={imgPlaceholderUrl}
         />
       )}
-      <HomePageImageBannerContent title={title} btnData={btnData}>
+      <HomePageImageBannerContent
+        title={mediumWindowWidth ? title : ""}
+        btnData={btnData}
+      >
         {children}
       </HomePageImageBannerContent>
-      {contentDirection === "right" && (
+      {mediumWindowWidth && contentDirection === "right" && (
         <HomePageImageBannerImage
           imgUrl={imgUrl}
           imgDescription={imgDescription}
diff --git a/src/homePage/utilities/_homePageImageBannerBreakpoints.scss b/src/homePage/utilities/_homePageImageBannerBreakpoints.scss
index 2448741..17d1b82 100644
--- a/src/homePage/utilities/_homePageImageBannerBreakpoints.scss
+++ b/src/homePage/utilities/_homePageImageBannerBreakpoints.scss
@@ -31,7 +31,7 @@
     font-size: $font-size;
   }
   .#{$namespace}-content-inner-container {
-    font-size: $font-size * 0.6;
+    font-size: $font-size * 0.75;
   }
   .#{$namespace}-content-btn {
     @include action-btn-styles(
@@ -55,23 +55,32 @@
   .#{$namespace}-container {
     position: relative;
     flex-direction: column;
+    display: block;
   }
   .#{$namespace}-content-container {
-    padding: 10% 0;
+    //padding: 10% 0;
+        & > * {
+      width: 100%;
+    }
   }
   .#{$namespace}-content-title {
     color: $black;
+    margin-bottom: 1.5em;
     &::after {
       background-color: $black;
     }
-  };
+  }
   .#{$namespace}-content-inner-container {
     color: $black;
-  };
+  }
+
   .#{$namespace}-img-container {
-    position: absolute;
+    aspect-ratio: 16/10;
+    width: 100%;
+    height: auto;
+    //position: absolute;
     &::after {
-      position: absolute;
+      //position: absolute;
       top: 0;
       left: 0;
       z-index: 0;
@@ -90,6 +99,7 @@
   $namespace: "home-pg-img-banner-full";
   .#{$namespace}-img-container {
     position: relative;
+    aspect-ratio: 16/10;
     &::after {
       position: absolute;
       width: 100%;
@@ -97,10 +107,19 @@
       left: 0;
       height: 100%;
       content: "";
-      background-color: rgba(255, 255, 255, 0.75);
+      //background-color: rgba(0, 0, 0, 0.1);
+      background-color: rgba(255, 255, 255, 0.15);
       z-index: 0;
     }
   }
+  // .#{$namespace}-content-title {
+  //   // font-size: 1.8rem !important;
+  //   // letter-spacing: 2%;
+  //   // color: $white !important;
+  //   // font-weight: 600 !important;
+  //   // padding: 4em;
+  //   // background-color: rgba(255, 255, 255, 0.4);
+  // }
   .#{$namespace}-content-container {
     min-width: unset;
     $width: 60%;