Merge pull request #119 from metacartel/develop

Deploy develop to main

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<CardProps> = ({
     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,35 +58,33 @@ const Card: FC<CardProps> = ({
 
 interface InfoCardProps extends BoxProps {
   title: string
-  imagePath: string
+  imagePath?: string
   toLeft?: boolean
-  flipHeader?: boolean
 }
 export const InfoCard: FC<InfoCardProps> = ({
   color,
   children,
   title,
   imagePath,
   toLeft = false,
-  flipHeader = false,
   ...restProps
 }) => (
   <Card color={color} toLeft={toLeft} {...restProps}>
     <Flex
       gap={6}
-      direction={flipHeader ? "row-reverse" : "row"}
-      justify="start"
+      justify="space-between"
     >
       <Text
         as="h2"
         fontFamily="heading"
         fontWeight="bold"
         fontSize={["xl", "2xl", "3xl"]}
         color="white"
+        lineHeight="1.2"
       >
         {title}
       </Text>
-      <Image src={imagePath} width="auto" height="100%" alt="" />
+      {imagePath && <NextImage src={imagePath} width="64px" height="32px" alt="" />}
     </Flex>
     <Text fontFamily="body" fontSize={["lg", "xl", "2xl"]} lineHeight="1.2">
       {children}
@@ -93,43 +94,58 @@ export const InfoCard: FC<InfoCardProps> = ({
 
 interface ButtonLinkProps
   extends Pick<LinkProps, "href" | "color" | "children"> {}
-export const ButtonLink: FC<ButtonLinkProps> = ({ color, href, children }) => (
-  <Link
-    href={href}
-    isExternal={href.startsWith("http")}
-    _hover={{
-      textDecoration: "none",
-    }}
-  >
-    <Grid
-      position="relative"
-      border="3px solid"
-      borderColor="fg"
-      bg={color}
-      px={[6, null, null, 8]}
-      py={[3, 4]}
-      placeItems="center"
+export const ButtonLink: FC<ButtonLinkProps> = ({ 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 (
+    <Link
+      href={href}
+      isExternal={href.startsWith("http")}
       _hover={{
-        _after: {
-          content: '""',
-          position: "absolute",
-          inset: 2,
-          bg: "blackAlpha.400",
-          zIndex: 1,
-        },
+        textDecoration: "none",
       }}
+      data-group
     >
-      <Text
-        fontSize={["sm", "md", "md", "xl"]}
-        color="fg"
-        fontFamily="a"
-        textTransform="lowercase"
+      <Grid
+        position="relative"
+        borderColor="fg"
+        bg={color}
+        px={[6, null, null, 8]}
+        py={[3, 4]}
+        placeItems="center"
+        boxShadow="inset 0 0 0 8px var(--chakra-colors-blackAlpha-400)"
+        _groupHover={hoverStyles}
+        _groupFocus={hoverStyles}
       >
-        {children}
-      </Text>
-    </Grid>
-  </Link>
-)
+        <Text
+          fontSize={["lg", null, null, "2xl"]}
+          fontWeight="bold"
+          color="fg"
+          fontFamily="a"
+          textTransform="lowercase"
+        >
+          {children}
+        </Text>
+      </Grid>
+    </Link>
+  )
+}
 
 interface CtaCardProps extends Pick<FlexProps, "children" | "color"> {
   prompt: string
@@ -143,6 +159,7 @@ export const CtaCard: FC<CtaCardProps> = ({ prompt, color, children }) => (
     justify="space-between"
     alignItems="center"
     position="relative"
+    {...shadowCardProps(color as string)}
   >
     <Text
       fontSize={["lg", "xl", null, "2xl"]}

pages/ethos.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react"
-import { Box, Flex, Grid, Text } from "@chakra-ui/react"
-import { PageMetadata, InfoCard, ButtonLink, CtaCard } from "../components"
+import { Box, Flex, Grid, Link, Text } from "@chakra-ui/react"
+import { PageMetadata, InfoCard, ButtonLink, CtaCard, Icon, IconName } from "../components"
 import { SHADOW_SMALL, SHADOW_LARGE } from "../constants"
 
 const Ethos: FC = () => (
@@ -48,6 +48,8 @@ const Ethos: FC = () => (
         </Text>
         S
       </Text>
+
+      {/* Sub-hero */}
       <Box
         px={[12, null, null, 16]}
         py={4}
@@ -57,10 +59,11 @@ const Ethos: FC = () => (
         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 */}
       <Grid
-        gap={6}
+        gap={[10, null, 4, 8]}
         templateColumns={{
           base: "1fr",
           md: "repeat(2, 1fr)",
@@ -137,22 +140,9 @@ const Ethos: FC = () => (
       >
         <InfoCard
           color="brand.taco"
-          title="What are we up to?"
-          imagePath="/images/ethos/ethos-test-tube.svg"
+          title="What we're up to"
+          imagePath="/images/ethos/hardhat.svg"
           toLeft
-          _after={{
-            content: "''",
-            position: "absolute",
-            insetInlineEnd: "-2rem",
-            insetBlockStart: "-1rem",
-            width: "5rem",
-            height: "5rem",
-            zIndex: 5,
-            bgImage: "url('/images/ethos/hardhat.svg')",
-            bgRepeat: "no-repeat",
-            objectFit: "contain",
-            transform: "rotate(30deg)",
-          }}
         >
           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 = () => (
 
         <InfoCard
           color="mix.teal.400"
-          title="Who are we?"
-          imagePath="/images/ethos/ethos-smile.svg"
+          title="Who we are"
           toLeft
-          flipHeader
           sx={{
             p: {
               fontSize: ["xl", "2xl", "3xl"],
@@ -178,6 +166,35 @@ const Ethos: FC = () => (
           funding experiments in physical gathering spaces.
         </InfoCard>
       </Grid>
+
+      {/* Substack email subscription callout */}
+      <Link
+        href="https://dapp.substack.com/"
+        isExternal
+        mt={8}
+      >
+        <Flex
+          gap={1}
+          color="fg"
+          transition="transform 0.2s ease-in-out"
+          _hover={{
+            transform: "scale(1.03)",
+            transition: "transform 0.2s ease-in-out"
+          }}
+          fontSize={['md', 'lg', 'xl']}
+          alignItems="center"
+        >
+          <Icon name={'letter-mail' as IconName} />
+          <Text
+            fontFamily="heading"
+            fontWeight="bold"
+            textDecoration="underline"
+            textAlign="center"
+          >
+            Subscribe to our newsletter
+          </Text>
+        </Flex>
+      </Link>
     </Flex>
   </Flex>
 )