diff --git a/components/EthosComponents.tsx b/components/EthosComponents.tsx index bd7e067..6decc91 100644 --- a/components/EthosComponents.tsx +++ b/components/EthosComponents.tsx @@ -4,18 +4,31 @@ import { Flex, FlexProps, Grid, - Image, Link, LinkProps, Text, } from "@chakra-ui/react" +import NextImage from "next/image" import { SHADOW_SMALL, SHADOW_LARGE } from "../constants" -const shadowTranslate = ( +const shadowCardProps = ( + color: string, toLeft: boolean = false -): { base: string; md: string } => ({ - base: `${toLeft ? "-" : ""}${SHADOW_SMALL} ${SHADOW_SMALL}`, - md: `${toLeft ? "-" : ""}${SHADOW_LARGE} ${SHADOW_LARGE}`, +): FlexProps => ({ + w: [`calc(100% - ${SHADOW_SMALL})`, null, `calc(100% - ${SHADOW_LARGE})`], + _before: { + content: '""', + position: "absolute", + inset: 0, + translate: { + base: `${toLeft ? "-" : ""}${SHADOW_SMALL} ${SHADOW_SMALL}`, + md: `${toLeft ? "-" : ""}${SHADOW_LARGE} ${SHADOW_LARGE}`, + }, + bg: color, + zIndex: -1, + border: "3px solid", + borderColor: "fg", + } }) interface CardProps extends BoxProps { @@ -36,17 +49,7 @@ const Card: FC = ({ gap={4} position="relative" justifySelf={toLeft ? "end" : "start"} - w={[`calc(100% - ${SHADOW_SMALL})`, null, `calc(100% - ${SHADOW_LARGE})`]} - _before={{ - content: '""', - position: "absolute", - inset: 0, - translate: shadowTranslate(toLeft), - bg: color, - zIndex: -1, - border: "3px solid", - borderColor: "fg", - }} + {...shadowCardProps(color as string, toLeft)} {...restProps} > {children} @@ -55,9 +58,8 @@ const Card: FC = ({ interface InfoCardProps extends BoxProps { title: string - imagePath: string + imagePath?: string toLeft?: boolean - flipHeader?: boolean } export const InfoCard: FC = ({ color, @@ -65,14 +67,12 @@ export const InfoCard: FC = ({ title, imagePath, toLeft = false, - flipHeader = false, ...restProps }) => ( = ({ fontWeight="bold" fontSize={["xl", "2xl", "3xl"]} color="white" + lineHeight="1.2" > {title} - + {imagePath && } {children} @@ -93,43 +94,58 @@ export const InfoCard: FC = ({ interface ButtonLinkProps extends Pick {} -export const ButtonLink: FC = ({ color, href, children }) => ( - - = ({ color, href, children }) => { + const hoverStyles = { + boxShadow: "inset 0 0 0 2px var(--chakra-colors-mix-red-400)", + bg: "fg", + p: { color: "mix.red.400" }, + _after: { + position: "absolute", + content: '""', + bgImage: "url('/images/ethos/chili-decorator.png')", + bgSize: "contain", + bgRepeat: "no-repeat", + insetInlineEnd: [`calc(-0.5 * ${SHADOW_SMALL})`, null, `calc(-0.5 * ${SHADOW_LARGE})`], + bottom: [`calc(-0.5 * ${SHADOW_SMALL})`, null, `calc(-0.5 * ${SHADOW_LARGE})`], + w: ["2rem", null, "3rem", null], + h: ["2rem", null, "3rem", null], + zIndex: 1, + } + } + + return ( + - - {children} - - - -) + + {children} + + + + ) +} interface CtaCardProps extends Pick { prompt: string @@ -143,6 +159,7 @@ export const CtaCard: FC = ({ prompt, color, children }) => ( justify="space-between" alignItems="center" position="relative" + {...shadowCardProps(color as string)} > ( @@ -48,6 +48,8 @@ const Ethos: FC = () => ( S + + {/* Sub-hero */} ( alignSelf="start" mb={[6, null, 8]} mt={[-6, null, -10]} + ms={8} w={[ - `calc(100% - ${SHADOW_SMALL})`, + `calc(100% - 3 * ${SHADOW_SMALL})`, null, - `calc(100% - ${SHADOW_LARGE})`, + `calc(100% - 2 * ${SHADOW_LARGE})`, ]} /* ETH glyph decorator */ _after={{ @@ -103,7 +106,7 @@ const Ethos: FC = () => ( {/* Calls to action */} ( > Our mission is to identify global events that unite groups of diverse humans, exploring the intersections of Web3 technologies and human @@ -163,10 +153,8 @@ const Ethos: FC = () => ( ( funding experiments in physical gathering spaces. + + {/* Substack email subscription callout */} + + + + + Subscribe to our newsletter + + + ) diff --git a/public/images/ethos/chili-decorator.png b/public/images/ethos/chili-decorator.png new file mode 100644 index 0000000..e5338fa Binary files /dev/null and b/public/images/ethos/chili-decorator.png differ diff --git a/public/images/ethos/chili-decorator.svg b/public/images/ethos/chili-decorator.svg deleted file mode 100644 index df09cf9..0000000 --- a/public/images/ethos/chili-decorator.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/ethos/globe.svg b/public/images/ethos/globe.svg index 0f7c972..45e2294 100644 --- a/public/images/ethos/globe.svg +++ b/public/images/ethos/globe.svg @@ -1,28 +1,28 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/yarn.lock b/yarn.lock index 4466c3d..ff12fac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7757,9 +7757,9 @@ typedarray-to-buffer@3.1.5: is-typedarray "^1.0.0" typescript@^4.6.2: - version "4.8.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.2.tgz#e3b33d5ccfb5914e4eeab6699cf208adee3fd790" - integrity sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw== + version "4.9.5" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" + integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== unbox-primitive@^1.0.2: version "1.0.2"