From f4c9f89b8db5d15ea7aa52e8adc1e9433b9fc4a1 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 19 May 2024 22:54:44 -0400
Subject: [PATCH 1/2] deprecate: ethos page

---
 components/EthosComponents.tsx | 176 ----------------------------
 components/WipList.tsx         |   2 +-
 components/index.ts            |   1 -
 constants/index.ts             |  10 --
 pages/ethos.tsx                | 202 ---------------------------------
 5 files changed, 1 insertion(+), 390 deletions(-)
 delete mode 100644 components/EthosComponents.tsx
 delete mode 100644 pages/ethos.tsx

diff --git a/components/EthosComponents.tsx b/components/EthosComponents.tsx
deleted file mode 100644
index 6decc91..0000000
--- a/components/EthosComponents.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import { FC } from "react"
-import {
-  BoxProps,
-  Flex,
-  FlexProps,
-  Grid,
-  Link,
-  LinkProps,
-  Text,
-} from "@chakra-ui/react"
-import NextImage from "next/image"
-import { SHADOW_SMALL, SHADOW_LARGE } from "../constants"
-
-const shadowCardProps = (
-  color: string,
-  toLeft: boolean = false
-): 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 {
-  toLeft?: boolean
-}
-const Card: FC<CardProps> = ({
-  color,
-  children,
-  toLeft = false,
-  ...restProps
-}) => (
-  <Flex
-    direction="column"
-    bg="fg"
-    color={color}
-    px={[8, null, 12]}
-    py={8}
-    gap={4}
-    position="relative"
-    justifySelf={toLeft ? "end" : "start"}
-    {...shadowCardProps(color as string, toLeft)}
-    {...restProps}
-  >
-    {children}
-  </Flex>
-)
-
-interface InfoCardProps extends BoxProps {
-  title: string
-  imagePath?: string
-  toLeft?: boolean
-}
-export const InfoCard: FC<InfoCardProps> = ({
-  color,
-  children,
-  title,
-  imagePath,
-  toLeft = false,
-  ...restProps
-}) => (
-  <Card color={color} toLeft={toLeft} {...restProps}>
-    <Flex
-      gap={6}
-      justify="space-between"
-    >
-      <Text
-        as="h2"
-        fontFamily="heading"
-        fontWeight="bold"
-        fontSize={["xl", "2xl", "3xl"]}
-        color="white"
-        lineHeight="1.2"
-      >
-        {title}
-      </Text>
-      {imagePath && <NextImage src={imagePath} width="64px" height="32px" alt="" />}
-    </Flex>
-    <Text fontFamily="body" fontSize={["lg", "xl", "2xl"]} lineHeight="1.2">
-      {children}
-    </Text>
-  </Card>
-)
-
-interface ButtonLinkProps
-  extends Pick<LinkProps, "href" | "color" | "children"> {}
-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={{
-        textDecoration: "none",
-      }}
-      data-group
-    >
-      <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}
-      >
-        <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
-}
-export const CtaCard: FC<CtaCardProps> = ({ prompt, color, children }) => (
-  <Flex
-    bg="fg"
-    color={color}
-    p={[6, null, null, 8]}
-    gap={[4, null, null, 8]}
-    justify="space-between"
-    alignItems="center"
-    position="relative"
-    {...shadowCardProps(color as string)}
-  >
-    <Text
-      fontSize={["lg", "xl", null, "2xl"]}
-      fontFamily="heading"
-      fontWeight="bold"
-      color="white"
-      textAlign="center"
-      lineHeight="1.1"
-    >
-      {prompt}
-    </Text>
-    {children}
-  </Flex>
-)
diff --git a/components/WipList.tsx b/components/WipList.tsx
index 28e1374..371743a 100644
--- a/components/WipList.tsx
+++ b/components/WipList.tsx
@@ -12,7 +12,7 @@ const data = [
     status: "Launched!",
     title: "ETHos Website",
     desc: "Incubator for IRL Ethereum events",
-    url: "/ethos",
+    url: "/#deprecated",
   },
   {
     status: "MEME",
diff --git a/components/index.ts b/components/index.ts
index 40dc26e..a2e8088 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -28,4 +28,3 @@ export * from "./SiteLayout"
 export * from "./TwitterSection"
 export * from "./WipItem"
 export * from "./WipList"
-export * from "./EthosComponents"
diff --git a/constants/index.ts b/constants/index.ts
index 47a8282..5156ecf 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -14,14 +14,12 @@ export const ECOSYSTEM_NAME = "Ecosystem"
 export const GRANTS_NAME = "Grants"
 export const LORE_NAME = "Lore"
 export const MANIFESTO_NAME = "Manifesto"
-export const ETHOS_NAME = "ETHos"
 
 // Internal paths
 export const ECOSYSTEM_PATH = "/ecosystem"
 export const GRANTS_PATH = "/grants"
 export const LORE_PATH = "/lore"
 export const MANIFESTO_PATH = "/manifesto"
-export const ETHOS_PATH = "/ethos"
 
 export const PHOTO_CAROUSEL_IMAGES_PATH = "/images/FamilyPhotos"
 
@@ -34,10 +32,6 @@ export const PAGE_PATHS = [
     name: GRANTS_NAME,
     path: GRANTS_PATH,
   },
-  {
-    name: ETHOS_NAME,
-    path: ETHOS_PATH,
-  },
   {
     name: LORE_NAME,
     path: LORE_PATH,
@@ -111,7 +105,3 @@ export const USER_FIELDS = {
   NAME: "name",
 }
 export const USER_FIELD_CSV = reduceToCsv(USER_FIELDS)
-
-// ETHos constants
-export const SHADOW_SMALL = "1rem"
-export const SHADOW_LARGE = "2rem"
diff --git a/pages/ethos.tsx b/pages/ethos.tsx
deleted file mode 100644
index 9d5db34..0000000
--- a/pages/ethos.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import { FC } from "react"
-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 = () => (
-  <Flex
-    flexDirection="column"
-    alignItems="center"
-    bg="mix.red.400"
-    px={[6, 8, 12]}
-    py={[16, null, null, 24]}
-  >
-    <PageMetadata
-      title="ETHos"
-      description="ETHos is an incubator for Ethereum IRL events"
-      image="/images/ethos/ethos-og.png"
-    />
-    <Flex
-      maxW="calc(var(--chakra-sizes-quarterContainer) * 3)"
-      direction="column"
-      alignItems="center"
-      gap={[12, null, 16]}
-      zIndex={1}
-      position="relative"
-    >
-      {/* Hero */}
-      <Text
-        as="h1"
-        fontSize="min(27vw, 18rem)"
-        color="fg"
-        textAlign="center"
-        fontFamily="MexicanTequila"
-        lineHeight="1"
-      >
-        ETH
-        <Text
-          as="span"
-          bgImage="/images/ethos/globe.svg"
-          color="transparent"
-          bgRepeat="no-repeat"
-          bgSize="contain"
-          bgPosition="center"
-          fontSize="1.25em"
-          lineHeight="0.1"
-        >
-          O
-        </Text>
-        S
-      </Text>
-
-      {/* Sub-hero */}
-      <Box
-        px={[12, null, null, 16]}
-        py={4}
-        color="mix.purp.200"
-        bg="fg"
-        position="relative"
-        alignSelf="start"
-        mb={[6, null, 8]}
-        mt={[-6, null, -10]}
-        ms={8}
-        w={[
-          `calc(100% - 3 * ${SHADOW_SMALL})`,
-          null,
-          `calc(100% - 2 * ${SHADOW_LARGE})`,
-        ]}
-        /* ETH glyph decorator */
-        _after={{
-          content: '""',
-          bgImage: "url('/images/ethos/glyph-pile.svg')",
-          bgRepeat: "no-repeat",
-          bgSize: "contain",
-          backgroundPositionY: "center",
-          position: "absolute",
-          insetInlineStart: "0",
-          transform: "translateX(-58%)",
-          top: 0,
-          height: "min(100%, 10rem)",
-          aspectRatio: "1/1",
-          zIndex: 1,
-        }}
-        /* Shadow */
-        _before={{
-          content: '""',
-          position: "absolute",
-          inset: 0,
-          translate: {
-            base: `${SHADOW_SMALL} ${SHADOW_SMALL}`,
-            md: `${SHADOW_LARGE} ${SHADOW_LARGE}`,
-          },
-          bg: "mix.purp.200",
-          zIndex: -1,
-          border: "3px solid",
-          borderColor: "fg",
-        }}
-      >
-        <Text
-          fontFamily="hero"
-          fontSize={["2xl", "3xl", "4xl", "5xl"]}
-          textAlign="center"
-        >
-          An incubator for IRL Ethereum events
-        </Text>
-      </Box>
-
-      {/* Calls to action */}
-      <Grid
-        gap={[10, null, 4, 8]}
-        templateColumns={{
-          base: "1fr",
-          md: "repeat(2, 1fr)",
-        }}
-        w="full"
-      >
-        <CtaCard color="mix.teal.400" prompt="Receive Support">
-          <ButtonLink
-            color="mix.teal.400"
-            href="https://form.typeform.com/to/tzG1SW15"
-          >
-            Apply
-          </ButtonLink>
-        </CtaCard>
-
-        <CtaCard color="mix.purp.200" prompt="Contribute Support">
-          <ButtonLink
-            color="mix.purp.200"
-            href="https://form.typeform.com/to/M3PIyVhn"
-          >
-            Sponsor
-          </ButtonLink>
-        </CtaCard>
-      </Grid>
-
-      {/* Cards */}
-      <Grid
-        columnGap={8}
-        rowGap={16}
-        templateColumns={["1fr", null, null, "repeat(2, 1fr)"]}
-      >
-        <InfoCard
-          color="brand.taco"
-          title="What we're up to"
-          imagePath="/images/ethos/hardhat.svg"
-          toLeft
-        >
-          Our mission is to identify global events that unite groups of diverse
-          humans, exploring the intersections of Web3 technologies and human
-          reality. ETHos is enabled by a small and focused team of stewards,
-          distributed across four continents, working together to surface and
-          support IRL events, with Ethereum ethos.
-        </InfoCard>
-
-        <InfoCard
-          color="mix.teal.400"
-          title="Who we are"
-          toLeft
-          sx={{
-            p: {
-              fontSize: ["xl", "2xl", "3xl"],
-              lineHeight: [1.2, null, null, 1.4],
-            },
-          }}
-        >
-          An experienced group of global event organizers and community builders
-          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>
-)
-
-export default Ethos

From d049174bafac5b9ee7cda8f0e6c0f316f51deb2e Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 20 May 2024 07:35:09 -0400
Subject: [PATCH 2/2] fix: conditionally show url button

---
 components/WipItem.tsx | 6 +++---
 components/WipList.tsx | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/WipItem.tsx b/components/WipItem.tsx
index d41b039..6e8ed21 100644
--- a/components/WipItem.tsx
+++ b/components/WipItem.tsx
@@ -4,7 +4,7 @@ interface WipItemProps extends BoxProps {
   status: string
   title: string
   desc: string
-  url: string
+  url?: string
   color: string
 }
 
@@ -39,14 +39,14 @@ export const WipItem = ({
       <Text mt={4} mb={8}>
         {desc}
       </Text>
-      <Flex mt="auto" justify="end">
+      {url && <Flex mt="auto" justify="end">
         <IconButtonLink
           icon="spaceship"
           title="Visit"
           color={color}
           href={url}
         />
-      </Flex>
+      </Flex>}
     </Flex>
   )
 }
diff --git a/components/WipList.tsx b/components/WipList.tsx
index 371743a..7b67a07 100644
--- a/components/WipList.tsx
+++ b/components/WipList.tsx
@@ -12,7 +12,6 @@ const data = [
     status: "Launched!",
     title: "ETHos Website",
     desc: "Incubator for IRL Ethereum events",
-    url: "/#deprecated",
   },
   {
     status: "MEME",