Merge pull request #740 from centrifuge/april-2024-update

New homepage hero + various content updates
centrifuge · Apr 16, 2024 · 49d78e1 · 49d78e1
2 parents 165548f + 12eb06e
commit 49d78e1
Show file tree

Hide file tree

Showing 16 changed files with 175 additions and 165 deletions.
diff --git a/config/footer.ts b/config/footer.ts
@@ -45,19 +45,6 @@ export const columns = [
       },
     ],
   },
-  {
-    title: 'Crowdloan',
-    items: [
-      {
-        label: 'Centrifuge',
-        href: '/parachain/crowdloan',
-      },
-      {
-        label: 'Altair',
-        href: '/altair/crowdloan',
-      },
-    ],
-  },
   {
     title: 'Get in touch',
     items: [

diff --git a/data/about.json b/data/about.json
@@ -78,16 +78,6 @@
           "href": "https://k-f.co/"
         }
       },
-      {
-        "name": "Asad Khan",
-        "role": "DeFi Politician",
-        "social": "https://twitter.com/fintech_khan",
-        "image": "./images/contributors/asad-khan.jpg",
-        "entity": {
-          "name": "k/factory",
-          "href": "https://k-f.co/"
-        }
-      },
       {
         "name": "Cassidy Daly",
         "role": "Token strategy",
@@ -107,16 +97,6 @@
           "href": "https://gov.centrifuge.io/u/tjure07/summary"
         }
       },
-      {
-        "name": "Colin Cunningham",
-        "role": "Business Development",
-        "social": "https://twitter.com/ctcunning",
-        "image": "./images/contributors/colin.jpg",
-        "entity": {
-          "name": "k/factory",
-          "href": "https://k-f.co/"
-        }
-      },
       {
         "name": "Cosmin Damian",
         "role": "Engineer",
@@ -384,16 +364,6 @@
           "href": "https://centrifuge.io/"
         }
       },
-      {
-        "name": "Harvey Li",
-        "role": "Credit Group Facilitator",
-        "social": "https://www.linkedin.com/in/harvey-l-1357a418a/",
-        "image": "./images/contributors/harvey.jpg",
-        "entity": {
-          "name": "Centrifuge DAO",
-          "href": "https://centrifuge.io/"
-        }
-      },
       {
         "name": "Mike Halef",
         "role": "Financial Accountant",

diff --git a/data/home.json b/data/home.json
@@ -2,7 +2,7 @@
   "slug": "/",
   "menuButtonVariant": "secondary",
   "hero_main": {
-    "title": "Real-World",
+    "title": "Better technology for financial products.",
     "ticker": [
       "DeFi",
       "Assets",
@@ -12,10 +12,9 @@
       "Value"
     ],
     "body": [
-      "The platform for onchain finance.",
-      "Transparent. Affordable. Limitless."
+      "Centrifuge is the platform for tokenized real-world assets onchain."
     ],
-    "image": "./images/home/hero-main-shape.svg",
+    "image": "./images/home/thumbnail.png",
     "partners": [
       {
         "image": "./images/partner/maker.svg",
@@ -34,17 +33,18 @@
         "alt": "Base"
       },
       {
-        "image": "./images/partner/arbitrum.svg",
-        "alt": "Arbitrum"
+        "image": "./images/partner/celo.svg",
+        "alt": "Celo"
       },
       {
         "image": "./images/partner/circle.svg",
         "alt": "Circle"
       },
       {
-        "image": "./images/partner/ethereum.svg",
-        "alt": "Ethereum"
+        "image": "./images/partner/arbitrum.svg",
+        "alt": "Arbitrum"
       }
+
     ]
   },
   "testimonials": {

diff --git a/data/images/contributors/asad-khan.jpg b/data/images/contributors/asad-khan.jpg
diff --git a/data/images/contributors/colin.jpg b/data/images/contributors/colin.jpg
diff --git a/data/images/contributors/harvey.jpg b/data/images/contributors/harvey.jpg
diff --git a/data/images/home/thumbnail.png b/data/images/home/thumbnail.png
diff --git a/data/images/partner/celo.svg b/data/images/partner/celo.svg
diff --git a/src/components/chain-stats/styles.tsx b/src/components/chain-stats/styles.tsx
@@ -5,7 +5,7 @@ export const Root = styled(Container)`
   @media (min-width: ${({ theme }) => theme.breakpoints['S']}) {
     display: flex;
     gap: ${({ theme }) => theme.space[3]}px;
-    border-top: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+    // border-top: 1px solid ${({ theme }) => theme.colors.borderPrimary};
   }
 
   @media (min-width: ${({ theme }) => theme.breakpoints['M']}) {

diff --git a/src/components/fullscreen-video-overlay/index.tsx b/src/components/fullscreen-video-overlay/index.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { FullscreenOverlay, CloseIcon, ThumbnailImage } from './style';
+
+type FullscreenVideoOverlayProps = {
+  thumbnail: string;
+  videoId: string;
+};
+
+const FullscreenVideoOverlay: React.FC<FullscreenVideoOverlayProps> = ({ thumbnail, videoId }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  //Close if user clicks outside of vid iframe
+  const overlayRef = React.useRef<HTMLDivElement>(null);
+  const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (overlayRef.current === event.target) {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+  <>
+    <ThumbnailImage src={thumbnail} alt="Play Video" onClick={() => setIsOpen(true)} />
+    {isOpen && (
+      <FullscreenOverlay ref={overlayRef} onClick={handleOverlayClick}>
+        <CloseIcon onClick={() => setIsOpen(false)}>×</CloseIcon>
+        <iframe
+          src={`https://player.vimeo.com/video/${videoId}?autoplay=1&badge=0&autopause=0&player_id=0&app_id=58479`}
+          frameBorder="0"
+          allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
+          title="Introduction to Centrifuge"
+        />
+      </FullscreenOverlay>
+    )}
+  </>
+  );
+};
+
+export default FullscreenVideoOverlay;
diff --git a/src/components/fullscreen-video-overlay/style.tsx b/src/components/fullscreen-video-overlay/style.tsx
@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+export const FullscreenOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  iframe {
+    width: 70%;
+    height: 70%;
+  }
+`;
+
+export const CloseIcon = styled.button`
+  font-family: Inter, sans-serif;
+  position: absolute;
+  top: 1%;
+  right: 3%;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 80px;
+  cursor: pointer;
+`;
+
+export const ThumbnailImage = styled.img`
+  border-radius: 15px;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  aspect-ratio: 4/3;
+`;
diff --git a/src/components/header/styles.tsx b/src/components/header/styles.tsx
@@ -8,6 +8,7 @@ export const Root = styled(Box)<{ isHidden: boolean }>`
   background-color: ${({ theme }) => theme.colors.backgroundPage};
   transition: transform 0.25s;
   transform: ${({ isHidden }) => `translateY(${isHidden ? -100 : 0}%)`};
+  z-index: 2;
 `
 
 export const LogoLink = styled(Link)`

diff --git a/src/components/hero-main/index.tsx b/src/components/hero-main/index.tsx
@@ -1,16 +1,14 @@
-import { Text, Shelf, Box } from '@centrifuge/fabric'
-import { graphql } from 'gatsby'
 import * as React from 'react'
+import { graphql } from 'gatsby'
+import { AnchorButton, Text, Stack, Shelf, Box } from '@centrifuge/fabric'
 import { links } from '../../../config/links'
-import { useVisibilityChecker } from '../../hooks/use-visibility-checker'
+import { ImageProps, Image } from '../Image'
 import { Reveal, RevealWrapper } from '../Reveal'
+import { Root, Inner, Media, Title } from './styles'
+import { PartnerList, PartnerProps } from '../partner-list'
 import { ChainStats } from '../chain-stats/ChainStats'
-import type { PartnerProps } from '../partner-list'
-import { PartnerList } from '../partner-list'
-import { Typewriter } from '../Typewriter'
-import type { ImageProps } from '../Image'
-import { Image } from '../Image'
-import { Root, Inner, Title, Content, Graphic, CTA } from './styles'
+import { useVisibilityChecker } from '../../hooks/use-visibility-checker'
+import FullscreenVideoOverlay from '../fullscreen-video-overlay'
 
 export const query = graphql`
   fragment HeroMainFragment on DataJsonHero_main {
@@ -40,60 +38,55 @@ export type HeroMainProps = {
 }
 
 export function HeroMain({ title, ticker, body, image, partners }: HeroMainProps) {
-  const [animate, setAnimate] = React.useState(false)
-
-  const ref = React.useRef<HTMLElement>(null)
-  useVisibilityChecker({
-    ref,
-    onEnter: () => setAnimate(true),
-    onLeave: () => setAnimate(false),
-  })
-
   return (
     <RevealWrapper>
-      <Root as="section" ref={ref} flexDirection="column">
-        <Shelf px={2} pt={[2, 4, 6]}>
+      <Root as="section" flexDirection="column" px={2} pt={[0, 0, 0, 0]} pb={[10, 10, 10, 10]}>
+        <Shelf px={2} pt={[1, 2, 3]}>
           <Inner maxWidth="container" alignSelf="start">
-            <Reveal gridArea={['none', 'inner']}>
-              <Title>
-                {title}
-                <br />
-                <Typewriter phrases={ticker} paused={!animate} />
-              </Title>
-            </Reveal>
-
-            <Content>
+            <Stack gap={3} maxWidth={['100%', '100%', '60%', '50%']}>
               <Reveal staggerIndex={1}>
-                <Graphic>
-                  <Image data={image} />
-                </Graphic>
+                <Title forwardedAs="h1" variant="heading2b">
+                  {title}
+                </Title>
               </Reveal>
 
-              <Reveal staggerIndex={2}>
-                {body.map((entry, index) => (
-                  <Text key={`${index}`} variant="body1" as="p">
-                    {entry}
-                  </Text>
-                ))}
+              <Reveal staggerIndex={1}>
+                <Text as="p" variant="body1">
+                  {body}
+                </Text>
               </Reveal>
 
-              <Reveal staggerIndex={3}>
-                <CTA href={links.app} target="_blank" small>
+              <Reveal staggerIndex={2}>
+                <AnchorButton href={links.app} rel="noopener noreferrer" target="_blank">
                   Enter App
-                </CTA>
+                </AnchorButton>
               </Reveal>
-            </Content>
+            </Stack>
+
+            {/* This embeds directly onto page vs. fullscreen modal
+            <Media ml="auto" mr={[-2, -2, 0]} width={['90%', '70%', '50%']}>
+                <iframe
+                  src="https://player.vimeo.com/video/935042824?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
+                  frameBorder="0" allow="fullscreen; picture-in-picture; clipboard-write"
+                  title="Introduction to Centrifuge">
+                </iframe>
+                <script src="https://player.vimeo.com/api/player.js"></script>
+              </Media>*/}
+            {/*todo: we want to wrap this in a <Reveal>, but it messes up formatting for video thumbnail + modal - unsure why*/}
+            <Media>
+              {/* @ts-ignore */}
+              {image.publicURL && <FullscreenVideoOverlay thumbnail={image.publicURL} videoId={'935042824'} />}
+            </Media>
           </Inner>
         </Shelf>
-
-        <Reveal px={2} mt="auto" staggerIndex={1}>
+        <Reveal px={3} mt="auto" staggerIndex={3}>
           <ChainStats />
         </Reveal>
-
-        <Reveal staggerIndex={2}>
-          <PartnerList partners={partners} />
-        </Reveal>
       </Root>
+
+      <Reveal staggerIndex={3}>
+        <PartnerList partners={partners} />
+      </Reveal>
     </RevealWrapper>
   )
 }