Logo - Adding SophieBot page (#2295)

* Adding placeholder image if the image is broken

* Logo - Adding SophieBot

Affected Route: `/logo/sophiebot`

Fixed: #2267

Screenshot:TODO

* Updating link on index

* Removing placeholder image

* Removing undefined union with Azure banner

components/blocks/downloadBlock.tsx

@@ -1,5 +1,6 @@
 import classNames from "classnames";
 import Image from "next/image";
+import { useState } from "react";
 import { FaFileDownload } from "react-icons/fa";
 import type { Template } from "tinacms";
 import { tinaField } from "tinacms/dist/react";
@@ -43,6 +44,7 @@ export const DownloadBlock = (data: DownloadBlockProps) => {
 };
 
 const Download = (data: Downloads) => {
+  const [isImgBroken, setIsImgBroken] = useState(false);
   const {
     header,
     img,
@@ -64,7 +66,15 @@ const Download = (data: Downloads) => {
             )}
             data-tina-field={tinaField(data, "img")}
           >
-            <Image src={img} alt={header} height={400} width={210} />
+            {!isImgBroken && (
+              <Image
+                onError={() => setIsImgBroken(true)}
+                src={img}
+                alt={header}
+                height={400}
+                width={210}
+              />
+            )}
           </div>
         )}
         <div className={"bg-gray-300 p-2 font-bold"}>Download</div>

components/layout/footer.tsx

@@ -1,9 +1,11 @@
 import dayjs from "dayjs";
 import dynamic from "next/dynamic";
 import Image from "next/image";
+import { BuiltOnAzure } from "../blocks";
 import { CustomLink } from "../customLink";
 import { SocialIcons } from "../socialIcons/socialIcons";
 import { Container } from "../util/container";
+import { Section } from "../util/section";
 
 export const Footer = () => {
   return (
@@ -102,3 +104,10 @@ const SiteInfo = () => (
     </CustomLink>
   </div>
 );
+export const PreFooter = () => {
+  return (
+    <Section className="w-full flex-none">
+      <BuiltOnAzure data={{ backgroundColor: "lightgray" }} />
+    </Section>
+  );
+};

components/layout/layout.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useLiveStreamProps } from "../../hooks/useLiveStreamProps";
-import { Footer } from "./footer";
+import { Footer, PreFooter } from "./footer";
 import { Theme } from "./theme";
 
 import dayjs from "dayjs";
@@ -57,14 +57,14 @@ interface LayoutProps {
     menuGroups: NavMenuGroup[];
   };
   children: React.ReactNode;
-  mainClassName?: string;
+  showAzureBanner?: boolean;
 }
 
 export const Layout = ({
   children,
   menu,
   className = "",
-  mainClassName = "",
+  showAzureBanner,
 }: LayoutProps) => {
   const liveStreamProps = useLiveStreamProps();
   const router = useRouter();
@@ -153,9 +153,9 @@ export const Layout = ({
               />
             </div>
           </header>
-          <main className={classNames("grow bg-white", mainClassName)}>
-            {children}
-          </main>
+          <main className={classNames("grow bg-white")}>{children}</main>
+
+          {showAzureBanner && <PreFooter />}
           <Footer />
         </div>
       </Theme>

content/logo/index.mdx

@@ -47,7 +47,7 @@ _body:
             linkContent: >
               <UtilityButton buttonText="LOGO OPTIONS" size="small"
               btnIcon="BsArrowRightCircle" removeTopMargin={true}
-              link="https://www.ssw.com.au/ssw/logo/SophieBot" />
+              link="/logo/sophiebot" />
           - title: SophieHub
             image: /images/company-logos/SophieHub_preview.png
             linkContent: >

content/logo/sophiebot.mdx

@@ -0,0 +1,33 @@
+---
+seo:
+  title: SophieBot Logo
+  showBreadcrumb: true
+header: SophieBot Logo
+subHeader: "If you have any queries please\_[contact SSW.](/company/about-us)\n"
+_body:
+  - title: Download
+    downloads:
+      - header: Color Vertical
+        img: /images/company-logos/SophieBot_preview.png
+        firstLink: /images/company-logos/downloads/images/SophieBot.png
+        secondLinkText: SVG
+        secondLink: /images/company-logos/downloads/svgs/SophieBot.svg
+      - header: B&W Vertical
+        img: /images/company-logos/SophieBot_BW_preview.png
+        firstLink: /images/company-logos/downloads/images/SophieBot_BW.png
+        secondLinkText: SVG
+        secondLink: /images/company-logos/downloads/svgs/SophieBot_BW.svg
+      - header: Color Horizontal
+        img: /images/company-logos/SophieBot_horizontal_preview.png
+        firstLink: /images/company-logos/downloads/images/SophieBot_horizontal.png
+        secondLinkText: SVG
+        secondLink: /images/company-logos/downloads/svgs/SophieBot_horizontal.svg
+      - header: B&W Horizontal
+        img: /images/company-logos/SophieBot_horizontal_BW_preview.png
+        firstLink: /images/company-logos/downloads/images/SophieBot_horizontal_BW.png
+        secondLinkText: SVG
+        secondLink: /images/company-logos/downloads/svgs/SophieBot_horizontal_BW.svg
+    _template: DownloadBlock
+footer: ''
+---
+

pages/logo/[[...filename]].tsx

@@ -3,7 +3,6 @@ import { TinaMarkdown } from "tinacms/dist/rich-text";
 
 import { Breadcrumbs } from "@/blocks/breadcrumbs";
 import { componentRenderer } from "@/blocks/mdxComponentRenderer";
-import { BuiltOnAzure } from "@/components/blocks";
 import { Blocks } from "@/components/blocks-renderer";
 import { Layout } from "@/components/layout";
 import { Container } from "@/components/util/container";
@@ -23,7 +22,7 @@ export default function LogosPage(
   });
 
   return (
-    <Layout menu={data?.megamenu} mainClassName="relative">
+    <Layout menu={data?.megamenu} showAzureBanner>
       <SEO seo={props.seo} />
       <Container className="flex-1 pt-2">
         {props?.seo?.showBreadcrumb && (
@@ -56,9 +55,6 @@ export default function LogosPage(
           </Section>
         )}
       </Container>
-      <Section className="!absolute bottom-0 top-auto w-full">
-        <BuiltOnAzure data={{ backgroundColor: "lightgray" }} />
-      </Section>
     </Layout>
   );
 }