Merge pull request #119 from ethersphere/doors-animation

Doors animation, grants subpage
ethersphere · Mar 21, 2024 · 6d8c86b · 6d8c86b
2 parents 743c489 + eb3ff21
commit 6d8c86b
Show file tree

Hide file tree

Showing 13 changed files with 731 additions and 270 deletions.
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
@@ -60,7 +60,7 @@ const Navigation: React.FC<NavigationProps> = ({
       <Container className="w-full">
         <GridContainer>
           <NavigationMenu.Root
-            delayDuration={50}
+            delayDuration={0}
             onValueChange={setValue}
             className="relative flex items-center w-full col-span-12"
           >

diff --git a/components/common/Header.tsx b/components/common/Header.tsx
@@ -9,7 +9,7 @@ type HeaderProps = {
   id?: string;
   content?: string;
   ctas?: Array<CtaType>;
-  size?: "small" | "medium" | "large";
+  size?: "small" | "medium" | "medium-large" | "large";
   className?: string;
 };
 
@@ -30,9 +30,11 @@ const Header: React.FC<HeaderProps> = ({
         className={cx(
           "inline-flex flex-wrap font-bold gap-3 items-center",
           {
-            small: " text-3xl md:text-3xl ",
+            small: "text-3xl md:text-3xl",
             medium:
-              " text-[44px] leading-[49px] md:text-5xl md:leading-[1.2] tracking-[-0.48px] ",
+              "text-[44px] leading-[49px] md:text-5xl md:leading-[1.2] tracking-[-0.48px]",
+            "medium-large":
+              "text-[48px] leading-[49px] md:text-[64px] md:leading-[1.2] tracking-[-1%]",
             large:
               "text-[56px] leading-[64px] md:text-[88px] md:leading-[97px] tracking-[-0.88px]",
           }[size]
@@ -47,6 +49,7 @@ const Header: React.FC<HeaderProps> = ({
             {
               small: "md:text-[17px] md:leading-[24px] mt-4 md:mr-8",
               medium: "md:text-[17px] md:leading-[24px] mt-4 md:mr-8",
+              "medium-large": "md:text-[17px] md:leading-[24px] mt-4 md:mr-8",
               large:
                 "text-base md:text-[19px] md:leading-[26px] mt-8 md:mt-6 md:mr-[72px]",
             }[size]
@@ -62,6 +65,7 @@ const Header: React.FC<HeaderProps> = ({
             {
               small: "mt-4",
               medium: "mt-6",
+              "medium-large": "mt-8",
               large: " mt-8",
             }[size]
           )}

diff --git a/components/common/SectionContent.tsx b/components/common/SectionContent.tsx
@@ -4,22 +4,32 @@ import markdownToHtml from "lib/markdownToHtml";
 import { useEffect, useRef, useState } from "react";
 import { cx } from "utils";
 import { AnimatePresence, motion } from "framer-motion";
+import { CtaType } from "types";
+import ButtonGroup from "./ButtonGroup";
 
 type SectionContentProps = {
   content?: string;
   className?: string;
   fullWidth?: boolean;
+  ctas?: Array<CtaType>;
   markdown?: boolean;
+  box?: {
+    title: string;
+    content: string;
+  };
 };
 
 const SectionContent: React.FC<SectionContentProps> = ({
   content = "",
   className = "",
   fullWidth = false,
   markdown = true,
+  ctas = [],
+  box = undefined,
 }) => {
   const container = useRef<HTMLDivElement>(null);
   const [md, setMd] = useState(content);
+  const [boxContent, setBoxContent] = useState<string>(box?.content || "");
   const [tooltipX, setTooltipX] = useState<number | null>(null);
   const [tooltipY, setTooltipY] = useState<number | null>(null);
   const [tooltipVisible, setTooltipVisible] = useState(false);
@@ -36,6 +46,16 @@ const SectionContent: React.FC<SectionContentProps> = ({
     });
   }, [content, markdown]);
 
+  useEffect(() => {
+    if (!box || !box.content) {
+      return;
+    }
+
+    markdownToHtml(box.content).then((html) => {
+      setBoxContent(html);
+    });
+  }, [box]);
+
   useEffect(() => {
     if (!container.current) {
       return;
@@ -89,17 +109,38 @@ const SectionContent: React.FC<SectionContentProps> = ({
 
   return (
     <div className="relative">
+      {box && (
+        <div className="px-5 py-8 mb-8 max-w-[22rem] rounded-xl border border-[#2D3843] bg-[#1F2831B2]">
+          {box.title && (
+            <h3 className="font-bold text-[#FF6B26] text-3xl">{box.title}</h3>
+          )}
+          {box.content && (
+            <div
+              className={cx("text-sm", box.title ? "mt-4" : "")}
+              dangerouslySetInnerHTML={{
+                __html: boxContent,
+              }}
+            />
+          )}
+        </div>
+      )}
+
       <div
         ref={container}
         className={cx(
-          "prose prose-sm leading-[20px] md:leading-[26px] md:prose-lg ",
+          "prose prose-sm leading-[20px] md:leading-[26px] md:prose-lg",
           className,
           fullWidth ? "w-full max-w-none" : "max-w-xl"
         )}
         dangerouslySetInnerHTML={{
           __html: md,
         }}
       />
+
+      {ctas && ctas.length > 0 && (
+        <ButtonGroup ctas={ctas} className="mt-6 md:mt-10" />
+      )}
+
       {tooltipX !== null && tooltipY !== null && (
         <AnimatePresence>
           {tooltipVisible && (

diff --git a/components/sections/ContentContainer.tsx b/components/sections/ContentContainer.tsx
@@ -18,6 +18,7 @@ import GridContainer from "../common/GridContainer";
 type ContentContainerProps = {
   title: string;
   content: string;
+  contentCtas?: Array<CtaType>;
   contentWidth?: "full" | "half";
   titleSize?: "small" | "medium" | "large";
   ctas?: Array<CtaType>;
@@ -27,23 +28,29 @@ type ContentContainerProps = {
   blocks?: any;
   features?: FeatureListType;
   markdown?: boolean;
+  box?: {
+    title: string;
+    content: string;
+  };
 };
 
 const ContentContainer: React.FC<ContentContainerProps> = ({
   title,
   id = "",
   content,
   ctas,
+  contentCtas = [],
   code,
   blocks,
   contentWidth = "half",
   markdown,
   titleSize,
   features,
   image,
+  box = undefined,
 }) => {
   return (
-    <Container className="relative z-10  w-full text-[#F6F7F9]">
+    <Container className="relative z-10 w-full text-[#F6F7F9]">
       <GridContainer className={cx(code && "items-center")}>
         <Header
           title={title}
@@ -60,14 +67,16 @@ const ContentContainer: React.FC<ContentContainerProps> = ({
           <div
             className={cx(
               contentWidth === "half"
-                ? " md:col-start-7 col-span-12 md:col-span-6 md:pr-5"
-                : "  col-span-12 md:col-span-8 "
+                ? "md:col-start-7 col-span-12 md:col-span-6 md:pr-5"
+                : "col-span-12 md:col-span-8 "
             )}
           >
             <SectionContent
               fullWidth={contentWidth === "full"}
               markdown={markdown}
               content={content}
+              box={box}
+              ctas={contentCtas}
             />
           </div>
         )}

diff --git a/components/sections/Hero.tsx b/components/sections/Hero.tsx
@@ -9,9 +9,16 @@ type HeroProps = {
   content?: string;
   ctas?: Array<CtaType>;
   cta?: CtaType;
+  titleSize?: "small" | "medium" | "large";
 };
 
-const Hero: React.FC<HeroProps> = ({ title, background, content, ctas }) => {
+const Hero: React.FC<HeroProps> = ({
+  title,
+  background,
+  content,
+  ctas,
+  titleSize = "large",
+}) => {
   return (
     <section className="relative flex flex-col items-center min-h-full text-gray-100 ">
       <div
@@ -21,14 +28,18 @@ const Hero: React.FC<HeroProps> = ({ title, background, content, ctas }) => {
           backgroundSize: "contain",
         }}
       />
-      <Container className="relative">
+      <Container className="relative w-full">
         <GridContainer className="items-center pt-32">
           <Header
             title={title}
             content={content}
             ctas={ctas}
-            size="large"
-            className="col-span-12 md:col-span-6 md:py-40"
+            size={titleSize}
+            className={
+              background
+                ? "col-span-12 md:col-span-6 md:py-24"
+                : "col-span-12 md:col-span-11 md:py-24"
+            }
           />
           {background && (
             <img

diff --git a/components/sections/LandingHero.tsx b/components/sections/LandingHero.tsx
@@ -24,7 +24,14 @@ const LandingHero: React.FC<LandingHero> = ({ title, content = "", ctas }) => {
         </GridContainer>
       </Container>
 
-      <img
+      <video
+        autoPlay
+        muted
+        className="absolute z-0 top-0 right-0 object-contain object-top pointer-events-none h-[90vh] md:h-[150vh]"
+      >
+        <source src="/assets/doors_v2.mp4" type="video/mp4" />
+      </video>
+      {/* <img
         src="/assets/hero/door.png"
         alt="Hero cover image"
         className="absolute z-0 top-0 right-0 object-contain object-top pointer-events-none h-[90vh] md:h-[150vh]"
@@ -33,7 +40,7 @@ const LandingHero: React.FC<LandingHero> = ({ title, content = "", ctas }) => {
         src="/assets/hero/blending.png"
         alt="Hero cover image"
         className="absolute z-0 top-0 right-0 object-contain object-top pointer-events-none h-[90vh] md:h-[150vh] mix-blend-color"
-      />
+      /> */}
     </section>
   );
 };

diff --git a/components/sections/Section.tsx b/components/sections/Section.tsx
@@ -21,7 +21,7 @@ const Section: React.FC<SectionProps> = ({
       {hero ? <Hero index={index} {...hero} /> : ""}
 
       {items && items.length > 0 && (
-        <div className="mt-32 space-y-24 md:space-y-48 md:mt-40">
+        <div className="mt-32 space-y-24 md:space-y-48 md:mt-24">
           {items.map((item: any, index: number) => (
             <ContentContainer key={index} {...item} />
           ))}

diff --git a/content/events/swarm-summit-2024.md b/content/events/swarm-summit-2024.md
@@ -0,0 +1,6 @@
+---
+title: "Swarm Summit 2024, Slovenia, June 20-21"
+href: "https://summit.ethswarm.org/swarm-summit-2024/cfp"
+add_to_calendar: ""
+start_date: 2024-06-20T23:00:00.000Z
+---
diff --git a/content/pages/grants.md b/content/pages/grants.md
@@ -13,7 +13,7 @@ sections:
           ecosystem with tooling and infrastructure.
         ctas:
           - title: Apply for a grant ->
-            href: "https://grants.ethswarm.org/"
+            href: "/grants/swarm-grants-programme"
             arrow: true
             background: orange
             type: default