feat: optional properties on hero and features sections

deco-sites · Jan 5, 2024 · 7faaf83 · 7faaf83
1 parent c567a98
commit 7faaf83
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 56 deletions.
diff --git a/islands/NRF/Editor.tsx b/islands/NRF/Editor.tsx
@@ -135,7 +135,7 @@ export default function Editor({ features }: Props) {
         <div class="relative w-full right-container ml-auto flex gap-20">
           <div class="hidden sticky h-screen top-0 lg:flex items-center justify-center">
             <ul class="text-[#52525B] whitespace-nowrap space-y-2">
-              <li class="text-[#02F67C]">How it Works</li>
+              <li class="text-[#02F67C] ">How it Works</li>
               {features.map(({ key: section }, idx) => (
                 <li id={`feature-title-${idx}`} key={idx}>
                   {section}

diff --git a/islands/NRF/Header.tsx b/islands/NRF/Header.tsx
@@ -55,7 +55,9 @@ function MobileMenuLink({
           {label}
         </a>
         <ul class="pl-[24px]">
-          {nested.map((item) => <MobileMenuLink {...item} />)}
+          {nested.map((item) => (
+            <MobileMenuLink {...item} />
+          ))}
         </ul>
       </li>
     );
@@ -166,7 +168,7 @@ export default function Header(props: Props) {
   const alerts = props.alerts;
 
   return (
-    <section class="lg:container rounded-full bg-white/5 backdrop-blur fixed top-6 z-50 w-[calc(100vw-64px)] lg:w-full left-1/2 transform -translate-x-1/2 shadow-[0px_4px_16px_0px_rgba(0,0,0,0.10)]">
+    <section class="lg:container rounded-full bg-white/5 backdrop-blur-xl fixed top-6 z-50 w-[calc(100vw-64px)] lg:w-full left-1/2 transform -translate-x-1/2 shadow-[0px_4px_16px_0px_rgba(0,0,0,0.10)]">
       <nav class="flex flex-row justify-between items-center h-[63px] pb-[2px] max-w-screen-2xl m-auto relative">
         <ul class="h-full flex items-center">
           <li class="h-full">
@@ -228,8 +230,7 @@ export default function Header(props: Props) {
                         ? "block cursor-default w-[110vw] h-[110vh] absolute left-[-100px] top-[-20px]"
                         : "hidden"
                     }`}
-                  >
-                  </div>
+                  ></div>
                   <div
                     class={`${
                       openSwitcher.value ? "block" : "hidden"
@@ -244,7 +245,7 @@ export default function Header(props: Props) {
                             window.history.pushState(
                               {},
                               "",
-                              urlMarketers.value,
+                              urlMarketers.value
                             );
                             location.reload();
                           }}
@@ -278,7 +279,7 @@ export default function Header(props: Props) {
                             window.history.pushState(
                               {},
                               "",
-                              urlDevelopers.value,
+                              urlDevelopers.value
                             );
                             location.reload();
                           }}
@@ -371,9 +372,11 @@ export default function Header(props: Props) {
             </button>
           </li>
           <div
-            class={open
-              ? "flex flex-col justify-between w-screen h-screen gap-[40px] fixed bg-[#0A2121] left-0 top-[107px] pt-[24px] pb-[100px] z-50 px-3 md:hidden"
-              : "hidden"}
+            class={
+              open
+                ? "flex flex-col justify-between w-screen h-screen gap-[40px] fixed bg-[#0A2121] left-0 top-[107px] pt-[24px] pb-[100px] z-50 px-3 md:hidden"
+                : "hidden"
+            }
           >
             <ul class="flex flex-col divide-y divide-semi-white-13">
               {props.menuLinks.map((link) => {

diff --git a/islands/NRF/TextLines.tsx b/islands/NRF/TextLines.tsx
@@ -3,34 +3,41 @@ import { animate, AnimationControls, scroll } from "motion";
 
 export interface Props {
   lines: string[];
+  animateOnScroll?: boolean;
 }
 
-function TextLines({ lines }: Props) {
+function TextLines({ lines, animateOnScroll }: Props) {
   useEffect(() => {
-    const section = document.querySelector("#section")!;
-    const paragraphs = document.querySelectorAll("#section p");
-    let selectedParagraphIndex: number | null = null;
-    scroll(
-      ({ y }: { y: { progress: number } }) => {
-        const index = Math.floor(y.progress * paragraphs.length);
-        if (index !== selectedParagraphIndex && y.progress !== 0) {
-          animate(paragraphs[selectedParagraphIndex!], { color: "#131313" });
-          animate(paragraphs[index], { color: "white" });
-          selectedParagraphIndex = index;
-        } else if (y.progress === 0) {
-          animate(paragraphs[selectedParagraphIndex!], { color: "#131313" });
-          selectedParagraphIndex = null;
+    if (animateOnScroll) {
+      const section = document.querySelector("#section")!;
+      const paragraphs = document.querySelectorAll("#section p");
+      let selectedParagraphIndex: number | null = null;
+
+      scroll(
+        ({ y }: { y: { progress: number } }) => {
+          const index = Math.floor(y.progress * paragraphs.length);
+          if (index !== selectedParagraphIndex && y.progress !== 0) {
+            animate(paragraphs[selectedParagraphIndex!], { color: "#131313" });
+            animate(paragraphs[index], { color: "white" });
+            selectedParagraphIndex = index;
+          } else if (y.progress === 0) {
+            animate(paragraphs[selectedParagraphIndex!], { color: "#131313" });
+            selectedParagraphIndex = null;
+          }
+        },
+        {
+          target: section,
+          offset: ["0 0", "end end"],
         }
-      },
-      {
-        target: section,
-        offset: ["0 0", "end end"],
-      }
-    );
+      );
+    }
   }, []);
 
   return (
-    <div id="section" class="bg-black h-[2000px] relative">
+    <div
+      id="section"
+      class={`bg-black relative ${animateOnScroll ? "h-[2000px]" : "h-screen"}`}
+    >
       <div
         id="inner"
         class="sticky h-screen top-0 flex items-center justify-center mx-[24px] lg:mx-auto
@@ -39,7 +46,13 @@ function TextLines({ lines }: Props) {
         <div>
           {lines.map((line) => (
             <>
-              <p class="inline text-zinc-900">{line}</p>{" "}
+              <p
+                class={`inline ${
+                  animateOnScroll ? "text-zinc-900" : "text-white"
+                }`}
+              >
+                {line}
+              </p>{" "}
             </>
           ))}
         </div>

diff --git a/sections/NRF/HeroFlat.tsx b/sections/NRF/HeroFlat.tsx
@@ -12,14 +12,14 @@ export interface Props {
    */
   title: string;
   description: string;
-  image: ImageWidget;
+  image?: ImageWidget;
   placement: "left" | "right";
   cta: CTA[];
 }
 
 const PLACEMENT = {
-  left: "flex-col lg:flex-row-reverse",
-  right: "flex-col lg:flex-row",
+  left: "flex-col text-left lg:flex-row-reverse",
+  right: "flex-col text-left lg:flex-row",
 };
 
 export default function HeroFlats({
@@ -33,26 +33,33 @@ export default function HeroFlats({
     <div class="bg-black min-h-screen">
       <div class="mx-auto flex flex-col items-center gap-8">
         <div
-          class={`flex w-full max-h-screen xl:container xl:mx-auto py-12 lg:py-28 mx-5 md:mx-10 ${
-            PLACEMENT[placement]
-          } gap-12 md:gap-20 text-left items-center`}
+          class={`flex w-full h-screen xl:container xl:mx-auto py-12 lg:py-28 mx-5 md:mx-10 ${
+            image ? PLACEMENT[placement] : "flex-col items-center justify-center text-center"
+          } gap-12 md:gap-20  items-center`}
         >
-          <img
-            class="w-full lg:w-1/2 object-fit"
-            sizes="(max-width: 640px) 100vw, 30vw"
-            src={image}
-            alt={image}
-            decoding="async"
-            loading="lazy"
-          />
-          <div class="w-full lg:w-1/2 space-y-2 lg:space-y-4 lg:max-w-xl gap-4">
+          {image && (
+            <img
+              class="w-full lg:w-1/2 object-fit"
+              sizes="(max-width: 640px) 100vw, 30vw"
+              src={image}
+              alt={image}
+              decoding="async"
+              loading="lazy"
+            />
+          )}
+          <div
+            class={`w-full space-y-2 lg:space-y-4 gap-4 ${
+              image
+                ? "lg:w-1/2 lg:max-w-xl"
+                : "flex flex-col items-center justify-center lg:max-w-3xl"
+            }`}
+          >
             <div
-              class="inline-block text-[80px] text-left leading-[100%] font-medium text-white"
+              class="inline-block text-[80px] leading-[100%] font-medium text-white"
               dangerouslySetInnerHTML={{
                 __html: title,
               }}
-            >
-            </div>
+            ></div>
             <p class="text-zinc-400 text-[16px] md:text-[18px] leading-[150%]">
               {description}
             </p>

diff --git a/sections/NRF/ImageSection.tsx b/sections/NRF/ImageSection.tsx
@@ -9,9 +9,9 @@ export interface Props {
   description: string;
   image: ImageWidget;
   placement: "left" | "right";
-  cta: {
-    href: string;
-    text: string;
+  cta?: {
+    href?: string;
+    text?: string;
   };
 }
 
@@ -30,7 +30,7 @@ export default function ImageSection({
   return (
     <div class="bg-black w-full">
       <div
-        class={`flex xl:container xl:mx-auto py-12 lg:py-28 mx-5 md:mx-10 ${PLACEMENT[placement]} gap-12 md:gap-20 text-left items-center`}
+        class={`flex lg:container lg:max-w-6xl lg:mx-auto py-12 lg:py-28 mx-5 md:mx-10 ${PLACEMENT[placement]} gap-12 md:gap-20 text-left items-center`}
       >
         <img
           class="w-full lg:w-1/2 object-fit"
@@ -47,7 +47,7 @@ export default function ImageSection({
           <p class="text-zinc-400 text-[16px] md:text-[18px] leading-[150%]">
             {description}
           </p>
-          {cta && (
+          {cta?.href && cta?.text && (
             <a
               class="pt-4 flex gap-2 border-none text-[#02F67C] transition-colors duration-200 cursor-pointer"
               href={cta.href}

diff --git a/static/tailwind.css b/static/tailwind.css