diff --git a/config/footer.ts b/config/footer.ts
index 9c859a7a..309ddc98 100644
--- 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
index 88f97132..53327285 100644
--- 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
index ba12a26c..6084e206 100644
--- 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
deleted file mode 100644
index fc315861..00000000
Binary files a/data/images/contributors/asad-khan.jpg and /dev/null differ
diff --git a/data/images/contributors/colin.jpg b/data/images/contributors/colin.jpg
deleted file mode 100644
index 907c39bc..00000000
Binary files a/data/images/contributors/colin.jpg and /dev/null differ
diff --git a/data/images/contributors/harvey.jpg b/data/images/contributors/harvey.jpg
deleted file mode 100644
index 0b2f9d06..00000000
Binary files a/data/images/contributors/harvey.jpg and /dev/null differ
diff --git a/data/images/home/thumbnail.png b/data/images/home/thumbnail.png
new file mode 100644
index 00000000..ec7a8e63
Binary files /dev/null and b/data/images/home/thumbnail.png differ
diff --git a/data/images/partner/celo.svg b/data/images/partner/celo.svg
new file mode 100644
index 00000000..c68eff77
--- /dev/null
+++ b/data/images/partner/celo.svg
@@ -0,0 +1,19 @@
+
+
+
diff --git a/src/components/chain-stats/styles.tsx b/src/components/chain-stats/styles.tsx
index 22716738..05d9b412 100644
--- 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
new file mode 100644
index 00000000..b734bd6d
--- /dev/null
+++ 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 = ({ thumbnail, videoId }) => {
+ const [isOpen, setIsOpen] = React.useState(false);
+
+ //Close if user clicks outside of vid iframe
+ const overlayRef = React.useRef(null);
+ const handleOverlayClick = (event: React.MouseEvent) => {
+ if (overlayRef.current === event.target) {
+ setIsOpen(false);
+ }
+ };
+
+ return (
+ <>
+ setIsOpen(true)} />
+ {isOpen && (
+
+ setIsOpen(false)}>×
+
+
+ )}
+
+ );
+};
+
+export default FullscreenVideoOverlay;
diff --git a/src/components/fullscreen-video-overlay/style.tsx b/src/components/fullscreen-video-overlay/style.tsx
new file mode 100644
index 00000000..507507ee
--- /dev/null
+++ 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
index 36eff962..860cfa45 100644
--- 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
index 5d4d19de..cf0ae82b 100644
--- 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(null)
- useVisibilityChecker({
- ref,
- onEnter: () => setAnimate(true),
- onLeave: () => setAnimate(false),
- })
-
return (
-
-
+
+
-
-
- {title}
- <br />
- <Typewriter phrases={ticker} paused={!animate} />
-
-
-
-
+
-
-
-
+
+ {title}
+
-
- {body.map((entry, index) => (
-
- {entry}
-
- ))}
+
+
+ {body}
+
-
-
+
+
Enter App
-
+
-
+
+
+ {/* This embeds directly onto page vs. fullscreen modal
+
+
+
+ */}
+ {/*todo: we want to wrap this in a , but it messes up formatting for video thumbnail + modal - unsure why*/}
+
+ {/* @ts-ignore */}
+ {image.publicURL && }
+
-
-
+
-
-
-
-
+
+
+
+
)
}
diff --git a/src/components/hero-main/styles.tsx b/src/components/hero-main/styles.tsx
index eb87db4c..948b3d13 100644
--- a/src/components/hero-main/styles.tsx
+++ b/src/components/hero-main/styles.tsx
@@ -1,21 +1,13 @@
import styled from 'styled-components'
-import { AnchorButton, Container, Shelf } from '@centrifuge/fabric'
+import { Box, Container, Text } from '@centrifuge/fabric'
-export const Root = styled(Shelf)`
+export const Root = styled(Box)`
--header-height: ${({ theme }) => theme.sizes.headerHeight[0]}px;
- min-height: calc(100vh - var(--header-height));
+ min-height: calc(70vh - var(--header-height));
+ position: relative;
- @supports (min-height: 100dvh) {
- min-height: calc(100dvh - var(--header-height));
- }
-
- > * {
- min-width: 100%;
- max-width: 100%;
- }
-
- @media screen and (min-height: 1200px) {
- min-height: calc(1200px - var(--header-height));
+ @media screen and (min-height: 1000px) {
+ min-height: calc(700px - var(--header-height));
}
@media screen and (min-width: ${({ theme }) => theme.breakpoints['S']}) {
@@ -24,71 +16,42 @@ export const Root = styled(Shelf)`
`
export const Inner = styled(Container)`
+ position: relative;
+ z-index: 2;
+
@media screen and (min-width: ${({ theme }) => theme.breakpoints['S']}) {
display: grid;
grid-template-areas: 'inner';
}
`
-
-export const Title = styled.h1`
- margin: 0;
- font-size: 15vw;
- font-weight: 400;
- line-height: 1;
-
- @media screen and (min-width: ${({ theme }) => theme.breakpoints['S']}) {
- font-size: 10vw;
- font-size: min(10vw, 9rem);
- }
-`
-
-export const Content = styled.div`
- margin-top: 2rem;
- margin-bottom: 2rem;
-
- @media screen and (min-width: ${({ theme }) => theme.breakpoints['S']}) {
- margin-top: 3vw;
- grid-area: inner;
- width: 50%;
- max-width: 500px;
- justify-self: end;
- text-align: center;
- }
-
+/*
+export const Media = styled(Box)`
@media screen and (min-width: ${({ theme }) => theme.breakpoints['M']}) {
- margin-top: 0;
+ z-index: 1;
+ position: absolute;
+ right: 0;
+ top: 0;
}
+`*/
- p + p {
- margin-top: 0.5em;
- }
-`
-
-export const Graphic = styled.div`
- display: none;
- width: 100%;
- max-width: 100%;
- aspect-ratio: 1 / 1;
- margin-bottom: 1rem;
+export const Media = styled.div`
+ display:none;
+ max-width: 33%;
+ position: absolute;
+ right: 0;
+ top: 0;
- @media screen and (min-width: ${({ theme }) => theme.breakpoints['S']}) {
+ @media screen and (min-width: ${({ theme }) => theme.breakpoints['M']}) {
display: block;
}
@media screen and (max-height: 1000px) {
- width: 40vh;
+ width: 60vh;
min-width: 280px;
margin-inline: auto;
}
-
- img {
- display: block;
- width: 100%;
- height: 100%;
- object-fit: contain;
- }
`
-export const CTA = styled(AnchorButton)`
- margin-top: 1.5rem;
+export const Title = styled(Text)`
+ max-width: 15ch;
`
diff --git a/src/components/partner-list/index.tsx b/src/components/partner-list/index.tsx
index bcc83a47..9ff35e98 100644
--- a/src/components/partner-list/index.tsx
+++ b/src/components/partner-list/index.tsx
@@ -37,7 +37,7 @@ export function PartnerList({ partners }: PartnerListProps) {
{isOverflow && (
-