Website redesign for launch and coming soon

Author: cgjohn

components/BridgeDropdown/BridgeDropdown.tsx

@@ -0,0 +1,140 @@
+import { ReactNode } from "react";
+import { Box, BoxProps, Button, Flex, Text } from "@chakra-ui/react";
+import { useToggle } from "usehooks-ts";
+import { IoChevronDown, IoChevronUp } from "react-icons/io5";
+import { FancyArrowUpRight } from "@/lib/ui";
+import { defineMessages, useIntl } from "react-intl";
+
+const messages = defineMessages({
+  bridge: {
+    id: "BridgeDropdown.bridge",
+    defaultMessage: "Bridge",
+  },
+  comingSoon: {
+    id: "BridgeDropdown.comingSoon",
+    defaultMessage: "Coming soon!",
+  },
+  bridgeOut: {
+    id: "BridgeDropdown.bridgeOut",
+    defaultMessage: "Bridge out",
+  },
+  bridgeIn: {
+    id: "BridgeDropdown.bridgeIn",
+    defaultMessage: "Bridge in",
+  },
+});
+
+export function BridgeDropdown() {
+  return (
+    <Box position="relative">
+      <ButtonContents hidden />
+      <ButtonContents
+        disabled
+        position="absolute"
+        top={0}
+        left={0}
+        zIndex={1}
+      />
+    </Box>
+  );
+}
+
+function ButtonContents({
+  hidden,
+  children,
+  disabled,
+  ...rest
+}: BoxProps & {
+  hidden?: boolean;
+  children?: ReactNode;
+  disabled?: boolean;
+}) {
+  const { formatMessage } = useIntl();
+  const [isOpen, toggleIsOpen] = useToggle(false);
+  return (
+    <Box
+      aria-hidden={hidden}
+      bg={hidden ? "pink" : "white"}
+      as="button"
+      border="1.5px solid"
+      boxShadow="2px 3px 0px black"
+      borderRadius={28}
+      onClick={toggleIsOpen}
+      w="100%"
+      disabled={disabled}
+      _disabled={{
+        cursor: "not-allowed",
+        bg: "#F3F3F4",
+      }}
+      {...rest}
+    >
+      <Flex
+        flexDir="column"
+        px={10}
+        h={14}
+        alignItems="center"
+        gap={disabled ? 0 : 2}
+        justifyContent="center"
+      >
+        {disabled ? (
+          <>
+            <Text lineHeight="1.2" fontSize="sm" color="#686868">
+              {formatMessage(messages.bridge)}
+            </Text>
+            <Text whiteSpace="nowrap" fontSize="xs" color="#686868">
+              {formatMessage(messages.comingSoon)}
+            </Text>
+          </>
+        ) : (
+          <>
+            <Text fontSize="xl">Bridge</Text>
+            {isOpen ? <IoChevronUp size={20} /> : <IoChevronDown size={20} />}
+          </>
+        )}
+      </Flex>
+      {!hidden && isOpen && (
+        <>
+          <BridgeLink direction="in" />
+          <BridgeLink direction="out" />
+        </>
+      )}
+    </Box>
+  );
+}
+
+function BridgeLink({ direction }: { direction: "out" | "in" }) {
+  const { formatMessage } = useIntl();
+  return (
+    <Flex
+      as="a"
+      h="64px"
+      alignItems="center"
+      borderTop="1px solid black"
+      px={5}
+      justifyContent="space-between"
+      href={
+        direction === "out"
+          ? "https://bridge.ironfish.network/"
+          : "https://app.chainport.io/?from=ETHEREUM&to=IRONFISH"
+      }
+      target="_blank"
+      rel="noreferrer"
+      _hover={{
+        textDecoration: "underline",
+      }}
+    >
+      <Text>
+        {direction === "out"
+          ? formatMessage(messages.bridgeOut)
+          : formatMessage(messages.bridgeIn)}
+      </Text>
+      <Box
+        transform={
+          direction === "out" ? "scale(0.9)" : "scale(0.9) rotate(180deg)"
+        }
+      >
+        <FancyArrowUpRight />
+      </Box>
+    </Flex>
+  );
+}

components/Company/Backers/Backers.tsx

@@ -1,12 +1,4 @@
-import {
-  Box,
-  Text,
-  Container,
-  ArrowButton,
-  Flex,
-  Grid,
-  GridItem,
-} from "@/lib/ui";
+import { Box, Text, Container, Grid, GridItem } from "@/lib/ui";
 import { defineMessages, useIntl } from "react-intl";
 import Image from "next/image";
 import ImgA16z from "./assets/backer-a16z.png";
@@ -38,7 +30,7 @@ export function Backers() {
         base: 4,
       }}
     >
-      <Container mb={8} textAlign="center" w="100%" maxW="container.xl">
+      <Container textAlign="center" w="100%" maxW="container.xl">
         <Text as="h2" textStyle="h3" maxW="20ch" mx="auto">
           {formatMessage(messages.heading)}
         </Text>

components/Footer/Footer.tsx

@@ -199,6 +199,24 @@ export function Footer() {
             >
               |
             </Text>
+            <Text
+              as={Link}
+              href="/media-kit"
+              _hover={{
+                textDecoration: "underline",
+              }}
+            >
+              Media Kit
+            </Text>
+            <Text
+              mx={2}
+              display={{
+                base: "none",
+                md: "block",
+              }}
+            >
+              |
+            </Text>
             <Text>Copyright {new Date().getFullYear()} Iron Fish.</Text>
           </Flex>
         </Flex>

components/HomePage/Backers/Backers.tsx

@@ -0,0 +1,53 @@
+import { Box, Text, useBreakpointValue } from "@/lib/ui";
+import Marquee from "react-fast-marquee";
+import Image from "next/image";
+import { defineMessages, useIntl } from "react-intl";
+import ImgA16z from "./assets/backer-a16z.png";
+import ImgElad from "./assets/backer-elad.png";
+import ImgSequoia from "./assets/backer-sequoia.png";
+import ImgElectric from "./assets/backer-electric.png";
+import ImgLinda from "./assets/backer-linda.png";
+import ImgDragonfly from "./assets/backer-dragonfly.png";
+
+const messages = defineMessages({
+  heading: {
+    id: "Backers.heading",
+    defaultMessage: "Founded by veterans and top investors",
+  },
+});
+
+export function Backers() {
+  const { formatMessage } = useIntl();
+
+  const height = useBreakpointValue({
+    base: 20,
+    lg: 30,
+  });
+
+  const margin = useBreakpointValue({
+    base: 10,
+    lg: 16,
+  });
+
+  return (
+    <Box mb={20}>
+      <Text fontSize="md" textAlign="center" textTransform="uppercase" mb={8}>
+        {formatMessage(messages.heading)}
+      </Text>
+      <Marquee autoFill>
+        {[
+          ImgLinda,
+          ImgElad,
+          ImgSequoia,
+          ImgElectric,
+          ImgA16z,
+          ImgDragonfly,
+        ].map((img, i) => (
+          <Box key={i} mx={margin} filter="grayscale(1)">
+            <Image src={img} height={height} alt="" />
+          </Box>
+        ))}
+      </Marquee>
+    </Box>
+  );
+}