Design improvements

components/shared/Content.tsx

@@ -8,6 +8,7 @@ type AcceptedType = AcceptedTypesByCodename[keyof AcceptedTypesByCodename];
 
 type Props = Readonly<{
   item: AcceptedType;
+  index: number;
 }>;
 
 const isSupportedComponentType = (type: string): type is keyof AcceptedTypesByCodename => (
@@ -21,10 +22,15 @@ export const Content: FC<Props> = props => {
   }
   const TargetComponent = componentMap[type];
 
-  return <TargetComponent item={props.item as any} />;
-}
+  return (
+<TargetComponent
+  index={props.index}
+  item={props.item as any}
+/>
+);
+} 
 
-const componentMap: Readonly<{ [key in keyof AcceptedTypesByCodename]: ComponentType<Readonly<{ item: AcceptedTypesByCodename[key] }>> }> = {
+const componentMap: Readonly<{ [key in keyof AcceptedTypesByCodename]: ComponentType<Readonly<{ item: AcceptedTypesByCodename[key], index: number }>> }> = {
   content_chunk: ContentChunk,
   visual_container: VisualContainer,
 };

components/shared/richText/RichTextElement.tsx

@@ -1,39 +1,39 @@
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
-import { Elements } from "@kontent-ai/delivery-sdk";
-import {
-  IPortableTextComponent,
-  IPortableTextImage,
-  IPortableTextInternalLink,
-  IPortableTextItem,
-  IPortableTextTable,
-  nodeParse,
-  transformToPortableText,
-} from "@kontent-ai/rich-text-resolver";
-import {
-  PortableText,
-  PortableTextMarkComponentProps,
-  PortableTextReactComponents,
-  PortableTextTypeComponentProps,
-} from "@portabletext/react";
-import Image from "next/image";
-import { FC } from "react";
-
-import { sanitizeFirstChildText } from "../../../lib/anchors";
-import { mainColorAnchor } from "../../../lib/constants/colors";
-import { siteCodename } from "../../../lib/utils/env";
-import {
-  Action,
-  Block_ContentChunk,
-  Component_Callout,
-  contentTypes,
-  Fact,
-} from "../../../models";
-import { ContentChunk } from "../ContentChunk";
-import { FactComponent } from "../Fact";
-import { CTAButton } from "../internalLinks/CTAButton";
-import { InternalLink } from "../internalLinks/InternalLink";
-import { BuildError } from "../ui/BuildError";
-import { CalloutComponent } from "./Callout";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import { Elements } from "@kontent-ai/delivery-sdk";
+import {
+  IPortableTextComponent,
+  IPortableTextImage,
+  IPortableTextInternalLink,
+  IPortableTextItem,
+  IPortableTextTable,
+  nodeParse,
+  transformToPortableText,
+} from "@kontent-ai/rich-text-resolver";
+import {
+  PortableText,
+  PortableTextMarkComponentProps,
+  PortableTextReactComponents,
+  PortableTextTypeComponentProps,
+} from "@portabletext/react";
+import Image from "next/image";
+import { FC } from "react";
+
+import { sanitizeFirstChildText } from "../../../lib/anchors";
+import { mainColorAnchor } from "../../../lib/constants/colors";
+import { siteCodename } from "../../../lib/utils/env";
+import {
+  Action,
+  Block_ContentChunk,
+  Component_Callout,
+  contentTypes,
+  Fact,
+} from "../../../models";
+import { ContentChunk } from "../ContentChunk";
+import { FactComponent } from "../Fact";
+import { CTAButton } from "../internalLinks/CTAButton";
+import { InternalLink } from "../internalLinks/InternalLink";
+import { BuildError } from "../ui/BuildError";
+import { CalloutComponent } from "./Callout";
 
 type ElementProps = Readonly<{
   element: Elements.RichTextElement;
@@ -43,7 +43,8 @@ type ElementProps = Readonly<{
 export const createDefaultResolvers = (
   element: Elements.RichTextElement,
   isElementInsideTable: boolean = false,
-  siteCodename: keyof typeof mainColorAnchor
+  siteCodename: keyof typeof mainColorAnchor,
+  componentIndex = 0
 ): Partial<PortableTextReactComponents> => ({
   types: {
     image: ({ value }: PortableTextTypeComponentProps<IPortableTextImage>) => {
@@ -116,11 +117,12 @@ export const createDefaultResolvers = (
         case contentTypes.action.codename:
           return <CTAButton reference={componentItem as Action} />;
         case contentTypes.fact.codename:
-          return (
-            <FactComponent
-              item={componentItem as Fact}
-              isReversed={false}
-            />
+          return (
+            // incrementing componentIndex ensures zigzag pattern of facts
+            <FactComponent
+              item={componentItem as Fact}
+              isReversed={componentIndex++ % 2 !== 0}
+            />
           );
         case contentTypes.content_chunk.codename:
           return <ContentChunk item={componentItem as Block_ContentChunk} />;
@@ -270,13 +272,13 @@ type RichTextValueProps = Readonly<{
   isInsideTable: boolean;
 }>;
 
-const RichTextValue: FC<RichTextValueProps> = (props) => (
-  <PortableText
-    value={props.value}
-    components={createDefaultResolvers(
-      props.element,
-      props.isInsideTable,
-      siteCodename
-    )}
-  />
+const RichTextValue: FC<RichTextValueProps> = (props) => (
+  <PortableText
+    value={props.value}
+    components={createDefaultResolvers(
+      props.element,
+      props.isInsideTable,
+      siteCodename
+    )}
+  />
 );

components/shared/ui/appPage.tsx

@@ -39,7 +39,7 @@ export const AppPage: FC<Props> = props => {
           className="grow h-full w-screen bg-slate-50 scroll-smooth"
           {...createItemSmartLink(props.item.system.id, true)}
         >
-          <div className="prose w-full max-w-screen-xl mx-auto mt-16">
+          <div className="prose w-full max-w-screen-xl mx-auto">
             {props.children}
           </div>
         </main>

components/shared/ui/menu.tsx

@@ -2,7 +2,7 @@ import { Bars3Icon, ChevronDownIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import Link from "next/link";
 import { NextRouter, useRouter } from "next/router";
-import { FC, useState } from "react";
+import { FC, useEffect, useState } from "react";
 
 import { mainColorBgClass } from "../../../lib/constants/colors";
 import { perCollectionSiteName } from "../../../lib/constants/labels";
@@ -63,31 +63,33 @@ const MenuList: FC<MenuListProps> = (props) => {
   const router = useRouter();
   return (
     <ul
-      className={`transition ${props.smallMenuActive ? "" : "opacity-0 md:opacity-100"
-        } absolute w-full md:static flex flex-col md:flex md:gap-4 font-medium md:flex-row h-full`}
+      className={`transition ${
+        props.smallMenuActive ? "" : "opacity-0 md:opacity-100"
+      } absolute w-full md:static flex flex-col md:flex md:gap-4 font-medium md:flex-row h-full`}
     >
       {props.items.map((link, i) => (
         <li
           key={i}
-          className={`${isCurrentNavigationItemActive(link, router)
-            ? ""
-            : "border-l-transparent border-t-transparent"
-            }
-        border-gray-500 border-l-8 border-t-0 md:border-t-8 md:border-l-0 min-w-fit h-full w-full group grow`}
+          className={`${
+            isCurrentNavigationItemActive(link, router)
+              ? ""
+              : "border-l-transparent border-t-transparent"
+          }
+        border-gray-500 border-l-8 border-t-0 md:border-t-8 md:border-l-0 min-w-fit h-full w-full ${mainColorBgClass[siteCodename]} md:bg-transparent group grow`}
           onClick={() => props.handleClick(i)}
         >
           {link.elements.subitems.value.length > 0 ? (
             <div className="md:hover:bg-white h-full">
               <DropdownButton item={link} />
               <div // TODO: handle mobile menu behavior
-                className="-translate-y-1/2 opacity-0 pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100 group-hover:translate-y-0 absolute z-40 left-0 shadow-sm bg-white border-gray-200 w-full transition-all duration-200 ease-in-out"
+                className="-translate-y-1/2 opacity-0 pointer-events-none md:group-hover:pointer-events-auto group-hover:opacity-100 group-hover:translate-y-0 absolute z-40 left-0 shadow-sm bg-white border-gray-200 w-full transition-all duration-200 ease-in-out"
               >
                 <DropdownMenuItems links={link.elements.subitems.linkedItems} />
               </div>
             </div>
           ) : (
             <Link
-              className="h-full flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-white border-b border-gray-100 md:w-auto md:bg-transparent md:border-0 md:hover:bg-white md:group-hover:text-gray-900"
+              className="h-full flex items-center justify-between w-full py-2 px-4 font-medium text-white border-b border-gray-100 md:w-auto md:bg-transparent md:border-0 md:hover:bg-white md:group-hover:text-gray-900"
               href={resolveReference(link)}
               title={link.elements.referenceCaption.value}
             >
@@ -121,10 +123,11 @@ const DropdownMenuItems: FC<DropdownMenuProps> = (props) => {
         <li key={link.system.codename}>
           <Link
             href={resolveReference(link)}
-            className={`${isCurrentNavigationItemActive(link, router)
-              ? "border-l-gray-500 cursor-default "
-              : "border-l-transparent hover:border-l-gray-500"
-              }
+            className={`${
+              isCurrentNavigationItemActive(link, router)
+                ? "border-l-gray-500 cursor-default "
+                : "border-l-transparent hover:border-l-gray-500"
+            }
           block p-3 bg-gray-200 border-l-8 h-full`}
           >
             <div className="font-semibold">
@@ -143,14 +146,32 @@ const DropdownMenuItems: FC<DropdownMenuProps> = (props) => {
 export const Menu: FC<Props> = (props) => {
   const [activeMenu, setActiveMenu] = useState<string | number>(-1);
   const [smallMenuActive, setSmallMenuActive] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
 
   const handleMenuClick = (menuId: string | number): void => {
     setActiveMenu(menuId === activeMenu ? -1 : menuId);
   };
 
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 50) {
+        setIsScrolled(true);
+      } else {
+        setIsScrolled(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   return (
     <div
-      className={`w-full fixed z-50 transition-all ease-in-out duration-300 ${mainColorBgClass[siteCodename]}`}
+      className={`w-full fixed z-50 transition-all ease-in-out duration-200 ${
+        (isScrolled || smallMenuActive) ? mainColorBgClass[siteCodename] :  "bg-opacity-0"
+      }`}
     >
       <div className="flex justify-between items-center mx-auto max-w-screen-xl md:h-16 pr-4">
         <div className="w-screen h-full md:flex justify-between z-50 md:pr-24 xl:pr-12 2xl:pr-0">
@@ -162,11 +183,11 @@ export const Menu: FC<Props> = (props) => {
               className="flex items-center"
             >
               <span className="pr-3">
-                <Image
-                  src="/logo.png"
-                  alt="logo"
-                  width={30}
-                  height={30}
+                <Image
+                  src="/logo.png"
+                  alt="logo"
+                  width={30}
+                  height={30}
                 />
               </span>
               <span className="font-bold">Ficto</span>
@@ -181,9 +202,7 @@ export const Menu: FC<Props> = (props) => {
               <Bars3Icon className="w-6 h-6" />
             </button>
           </div>
-          <StandaloneSmartLinkButton
-            itemId={props.item.system.id}
-          />
+          <StandaloneSmartLinkButton itemId={props.item.system.id} />
           <div>
             <MenuList
               smallMenuActive={smallMenuActive}

components/shared/visualContainer/HeroUnit.tsx

@@ -22,7 +22,7 @@ export const HeroUnitComponent: FC<Props> = (props) => {
       url={fact.elements.image.value[0]?.url || ""}
       itemId={props.item.system.id}
     >
-      <div className={`p-5 text-white ${mainColorBgClass[siteCodename]} bg-opacity-70 w-full`}>
+      <div className={`p-5 text-white ${mainColorBgClass[siteCodename]} w-full`}>
         <div
           className="flex md:w-fit"
           {...createItemSmartLink(fact.system.id)}

components/shared/visualContainer/Stack.tsx

@@ -20,6 +20,7 @@ type Props = Readonly<{
   subtitle: string;
   itemId: string;
   codename: string;
+  index: number;
 }>;
 
 export const StackComponent: FC<Props> = (props) => {
@@ -83,7 +84,7 @@ export const StackComponent: FC<Props> = (props) => {
         <div>
           <FactComponent
             item={currentAction}
-            isReversed={!!(actionIndex % 2)}
+            isReversed={props.index % 2 === 0}
           />
         </div>
       </section>

components/shared/visualContainer/VisualContainer.tsx

@@ -10,6 +10,7 @@ import { StackComponent } from "./Stack";
 
 type Props = Readonly<{
   item: Block_VisualContainer;
+  index: number;
 }>;
 
 const VisualRepresentation: FC<Props> = (props) => {
@@ -27,6 +28,7 @@ const VisualRepresentation: FC<Props> = (props) => {
     case stack.codename:
       return (
         <StackComponent
+          index={props.index}
           items={props.item.elements.items.linkedItems}
           subtitle={props.item.elements.subtitle.value}
           title={props.item.elements.title.value}
@@ -65,6 +67,9 @@ const VisualRepresentation: FC<Props> = (props) => {
 export const VisualContainer: FC<Props> = (props) => (
   // wrapper for anchor functionality, works by passing the item codename to Reference -> External link element
   <div id={sanitizeAnchor(props.item.system.codename)}>
-    <VisualRepresentation item={props.item} />
+    <VisualRepresentation
+      index={props.index}
+      item={props.item}
+    />
   </div>
 );

pages/[envId]/[slug].tsx

@@ -82,10 +82,11 @@ const TopLevelPage: FC<Props> = (props) => {
         {...createElementSmartLink(contentTypes.page.elements.content.codename)}
         {...createFixedAddSmartLink("end")}
       >
-        {page.elements.content.linkedItems.map((piece) => (
-          <Content
-            key={piece.system.id}
-            item={piece}
+        {page.elements.content.linkedItems.map((piece, index) => (
+          <Content
+            key={piece.system.id}
+            item={piece}
+            index={index}
           />
         ))}
       </div>

pages/[envId]/articles/category/[category]/page/[page].tsx

@@ -124,10 +124,11 @@ const ArticlesPagingPage: FC<Props> = props => {
       item={page}
       pageType="WebPage"
     >
-      {page.elements.content.linkedItems.map(piece => (
+      {page.elements.content.linkedItems.map((piece, index) => (
         <Content
           key={piece.system.id}
           item={piece as any}
+          index={index}
         />
       ))}
       <div className="md:px-4">

pages/[envId]/index.tsx

@@ -49,10 +49,11 @@ const Home: NextPage<Props> = props => {
       defaultMetadata={props.metaData}
     >
       <div>
-        {homepage.elements.content.linkedItems.map(item => (
+        {homepage.elements.content.linkedItems.map((item,index) => (
           <Content
             key={item.system.id}
             item={item as any}
+            index={index}
           />
         ))}
       </div>