Merge branch 'main' into update-docker-setup

.tina/collections/company.tsx

@@ -9,6 +9,7 @@ import {
   tableBlockSchema,
   customDownloadButtonSchema,
   colorBlockSchema,
+  colorPaletteSchema,
   carouselBlockSchema,
 } from "../../components/blocks";
 import { videoEmbedBlockSchema } from "../../components/blocks/videoEmbed";
@@ -66,6 +67,7 @@ export const companySchema: Collection = {
         tableBlockSchema,
         customDownloadButtonSchema,
         colorBlockSchema,
+        colorPaletteSchema,
         carouselBlockSchema,
         Schemas.utilityButtonSchema,
       ],
@@ -77,6 +79,11 @@ export const companySchema: Collection = {
       required: false,
       templates: [microsoftPanelSchema],
     },
+    {
+      type: "boolean",
+      name: "hideSidebarOnMobile",
+      label: "Hide sidebar on mobile"
+    },
     {
       type: "boolean",
       name: "fixedWidthSidebar",

components/blocks/colorPalette.tsx

@@ -0,0 +1,62 @@
+import { Template } from "tinacms";
+import { productColors } from "../util/constants";
+import classNames from "classnames";
+
+export type ColorPaletteProps = {
+  colorBlocks: Block[];
+};
+
+type Block = {
+  color: keyof typeof productColors;
+  text: string;
+};
+
+export const ColorPalette = (props: ColorPaletteProps) => {
+  const { colorBlocks } = props;
+  return (
+    <div className="flex min-h-24 w-full flex-wrap">
+      {colorBlocks?.map((block, i) => (
+        <div
+          className={classNames(
+            block.color,
+            "flex flex-grow flex-col items-center justify-center text-white"
+          )}
+          key={i}
+        >
+          <div>{block.text}</div>
+          <div>{productColors[block.color]}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const colorPaletteSchema: Template = {
+  name: "ColorPalette",
+  label: "Color Palette",
+  fields: [
+    {
+      type: "object",
+      label: "Color Blocks",
+      name: "colorBlocks",
+      list: true,
+      ui: {
+        itemProps: (props) => ({ label: props?.text }),
+      },
+      fields: [
+        {
+          type: "string",
+          label: "Color",
+          name: "color",
+          options: Object.keys(productColors).map((color) => color),
+          // options: productColors.map((color) => color),
+        },
+        {
+          type: "string",
+          label: "Text",
+          name: "text",
+        },
+      ],
+    },
+  ],
+};

components/blocks/index.ts

@@ -23,6 +23,7 @@ import { carouselBlockSchema } from "./carousel";
 import { citationBlockSchema } from "./citation";
 import { clientLogosBlockSchema } from "./clientLogos";
 import { colorBlockSchema } from "./colorBlock";
+import { colorPaletteSchema } from "./colorPalette";
 import { contentBlockSchema } from "./content";
 import { contentCardBlockSchema } from "./contentCard";
 import { customImageBlockSchema } from "./customImage";
@@ -40,14 +41,14 @@ import { jotFormEmbedSchema } from "./jotFormEmbed";
 import { newslettersTableBlockSchema } from "./newslettersTable";
 import { paymentBlockSchema } from "./payment-block";
 import { recurringEventSchema } from "./recurringEvent";
+import { sectionHeaderSchema } from "./sectionHeader";
 import { serviceCardsBlockSchema } from "./serviceCards";
 import { tableBlockSchema } from "./tableLayout";
 import { testimonialsListSchema } from "./testimonialsList";
 import { upcomingEventsBlockSchema } from "./upcomingEvents";
 import { verticalImageLayoutBlockSchema } from "./verticalImageLayout";
 import { verticalListItemSchema } from "./verticalListItem";
 import { videoEmbedBlockSchema } from "./videoEmbed";
-import { sectionHeaderSchema } from "./sectionHeader";
 
 export const pageBlocks: Template[] = [
   aboutUsBlockSchema,
@@ -98,6 +99,7 @@ export const pageBlocks: Template[] = [
   downloadBlockSchema,
   gridLayoutSchema,
   sectionHeaderSchema,
+  colorPaletteSchema,
 ];
 
 export * from "../bookingButton/bookingButton";
@@ -119,6 +121,7 @@ export * from "./carousel";
 export * from "./citation";
 export * from "./clientLogos";
 export * from "./colorBlock";
+export * from "./colorPalette";
 export * from "./content";
 export * from "./contentCard";
 export * from "./customImage";

components/blocks/mdxComponentRenderer.tsx

@@ -13,6 +13,7 @@ import type { TripleColumnImageBlockProps } from "./tripleColumnImageBlock";
 import type { YoutubePlaylistProps } from "./youtubePlaylist";
 
 import { BookingButton } from "../bookingButton/bookingButton";
+import { ColorPaletteProps } from "./colorPalette";
 import { SectionHeaderProps } from "./sectionHeader";
 
 const UtilityButton = dynamic(() =>
@@ -79,6 +80,9 @@ const FixedTabsLayout = dynamic(() =>
   import("./fixedTabsLayout").then((mod) => mod.FixedTabsLayout)
 );
 const Flag = dynamic(() => import("./flag").then((mod) => mod.Flag));
+const ColorPalette = dynamic<ColorPaletteProps>(() =>
+  import("./colorPalette").then((mod) => mod.ColorPalette)
+);
 const GoogleMapsWrapper = dynamic(() =>
   import("./googleMapsWrapper").then((mod) => mod.GoogleMapsWrapper)
 );
@@ -247,6 +251,7 @@ export const componentRenderer: Components<{
   };
   JotFormEmbed: JotFormEmbedProps;
   ColorBlock: ColorBlockProps;
+  ColorPalette: ColorPaletteProps;
   SectionHeader: SectionHeaderProps;
 }> = {
   AgreementForm: (props) => <AgreementForm data={props} />,
@@ -285,5 +290,6 @@ export const componentRenderer: Components<{
   ),
   JotFormEmbed: (props) => <JotFormEmbed {...props} />,
   ColorBlock: (props) => <ColorBlock {...props} />,
+  ColorPalette: (props) => <ColorPalette {...props} />,
   SectionHeader: (props) => <SectionHeader {...props} />,
 };

components/util/constants.tsx

@@ -170,6 +170,17 @@ export const sswColors = {
   "#797979": "bg-ssw-gray",
 };
 
+export const productColors = {
+  "bg-platform-angular": "#DD0031",
+  "bg-platform-dotnet": "#5C2D91",
+  "bg-platform-visualstudio": "#9455CE",
+  "bg-platform-blazor": "#5C2D91",
+  "bg-platform-xamarin": "#3498DB",
+  "bg-platform-azure": "#0088D5",
+  "bg-platform-sharepoint": "#038185",
+  "bg-platform-powerbi": "#F2C811",
+};
+
 export const customClasses = {
   none: "",
   "Only mobile top margin (mt-6)": "mt-6 md:mt-0",

content/consulting/index/index.json

@@ -72,9 +72,6 @@
             {
               "tag": "content/consulting/tag/platform-development.json"
             },
-            {
-              "tag": "content/consulting/tag/cloud-and-infrastructure.json"
-            },
             {
               "tag": "content/consulting/tag/web-development.json"
             },
@@ -310,6 +307,9 @@
           "logo": "/images/thumbs/thumb-azure-2023.png",
           "page": "content/consulting/azure.mdx",
           "tags": [
+            {
+              "tag": "content/consulting/tag/cloud-and-infrastructure.json"
+            },
             {
               "tag": "content/consulting/tag/platform-development.json"
             }
@@ -952,4 +952,4 @@
       ]
     }
   ]
-}
+}

content/consulting/mobile-application-development.mdx

@@ -1,10 +1,23 @@
 ---
 type: consulting
 description: null
+seo:
+  title: Enterprise Development and Consulting for Mobile Apps
+  description: >-
+    SSW builds enterprise mobile apps that drive productivity and enhance user
+    engagement and experience. Talk to us about your mobile app needs today.
+  images:
+    - url: /images/consulting/open-graph/mobile.jpg
+      width: 1200
+      height: 629
+      alt: SSW Mobile Apps Consulting - Enterprise Software Development
 booking:
   title: Want to build a <span class="text-sswRed">mobile application</span>?
   subTitle: Australia's leading mobile developers and consultants
   videoBackground: /images/videos/MVC_background.mp4
+solution:
+  project: mobile
+callToAction: 'Talk to us about your {{TITLE}} project'
 benefits:
   benefitList:
     - image: /images/benefits/crm-integration.png
@@ -33,30 +46,15 @@ technologies:
   header: Technologies
   technologyCards:
     - technologyCard: content/technologies/dotnet-maui.mdx
-    - technologyCard: content/technologies/native-app.mdx
-    - technologyCard: content/technologies/native-angular.mdx
-    - technologyCard: content/technologies/native-ionic.mdx
-    - technologyCard: content/technologies/native-react.mdx
     - technologyCard: content/technologies/flutter.mdx
-    - technologyCard: content/technologies/pwa.mdx
+    - technologyCard: content/technologies/native-react.mdx
     - technologyCard: content/technologies/responsive-websites.mdx
+    - technologyCard: content/technologies/pwa.mdx
+    - technologyCard: content/technologies/electron.mdx
+    - technologyCard: content/technologies/native-angular.mdx
+    - technologyCard: content/technologies/native-app.mdx
     - technologyCard: content/technologies/hardware-integration.mdx
     - technologyCard: content/technologies/ai.mdx
-    - technologyCard: content/technologies/cordova.mdx
-    - technologyCard: content/technologies/electron.mdx
-solution:
-  project: mobile
-callToAction: 'Talk to us about your {{TITLE}} project'
-seo:
-  title: Enterprise Development and Consulting for Mobile Apps
-  description: >-
-    SSW builds enterprise mobile apps that drive productivity and enhance user
-    engagement and experience. Talk to us about your mobile app needs today.
-  images:
-    - url: /images/consulting/open-graph/mobile.jpg
-      width: 1200
-      height: 629
-      alt: SSW Mobile Apps Consulting - Enterprise Software Development
 ---
 
 # The benefits of **Mobile Apps**

pages/company/[filename].tsx

@@ -75,16 +75,19 @@ export default function CompanyPage(
               {(data.company.sidebar ||
                 data.company.sidebarTestimonial ||
                 data.company.showRdPanel) && (
-                <div
-                  className={classNames("max-w-sm shrink pl-16", {
-                    "min-w-96": data.company.fixedWidthSidebar,
-                  })}
-                >
+                <div className="max-w-sm shrink pl-16">
                   {data.company.sidebar && (
-                    <TinaMarkdown
-                      content={data.company.sidebar}
-                      components={componentRenderer}
-                    />
+                    <div
+                      className={classNames("md:block lg:min-w-96", {
+                        hidden: data.company.hideSidebarOnMobile,
+                        "min-w-fit": data.company.fixedWidthSidebar,
+                      })}
+                    >
+                      <TinaMarkdown
+                        content={data.company.sidebar}
+                        components={componentRenderer}
+                      />
+                    </div>
                   )}
                   {data.company.sidebarTestimonial && (
                     <TestimonialPanel

tailwind.config.js

@@ -216,6 +216,16 @@ module.exports = {
           900: "#333333",
           1000: "#1c1b2e",
         },
+        platform: {
+          angular: "#DD0031",
+          dotnet: "#5C2D91",
+          visualstudio: "#9455CE",
+          blazor: "#5C2D91",
+          xamarin: "#3498DB",
+          azure: "#0088D5",
+          sharepoint: "#038185",
+          powerbi: "#F2C811",
+        },
         social: {
           phone: "#b31217",
           youtube: "#b31217",