Sim: Alternate copy

src/components/PageHero.tsx

@@ -101,9 +101,8 @@ const PageHero: React.FC<IProps> = ({
               {buttons.map((button, idx) => {
                 if (isButtonLink(button)) {
                   return (
-                    <WrapItem>
+                    <WrapItem key={idx}>
                       <ButtonLink
-                        key={idx}
                         variant={button.variant}
                         to={button.to}
                         onClick={() =>

src/components/Simulator/ClickAnimation.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from "react"
+import { createIcon, Flex, Text, TextProps } from "@chakra-ui/react"
+import { motion, type Transition } from "framer-motion"
+
+const MotionFlex = motion(Flex)
+
+const DownArrowLong = motion(
+  createIcon({
+    displayName: "DownArrowLong",
+    viewBox: "0 0 8 24",
+    defaultProps: { fill: "currentColor" },
+    path: (
+      <path d="M3.64645 23.3536C3.84171 23.5488 4.15829 23.5488 4.35355 23.3536L7.53553 20.1716C7.7308 19.9763 7.7308 19.6597 7.53553 19.4645C7.34027 19.2692 7.02369 19.2692 6.82843 19.4645L4 22.2929L1.17157 19.4645C0.976312 19.2692 0.659729 19.2692 0.464467 19.4645C0.269205 19.6597 0.269205 19.9763 0.464467 20.1716L3.64645 23.3536ZM3.5 2.18557e-08L3.5 23L4.5 23L4.5 -2.18557e-08L3.5 2.18557e-08Z" />
+    ),
+  })
+)
+
+interface IProps extends Pick<TextProps, "children"> {
+  below?: boolean
+  delay?: number
+}
+export const ClickAnimation: React.FC<IProps> = ({
+  below,
+  delay = 5000,
+  children,
+}) => {
+  const [visible, setVisible] = useState(false)
+  useEffect(() => {
+    const timeout = setTimeout(() => setVisible(true), delay)
+    return () => clearTimeout(timeout)
+  }, [])
+  const transition: Transition = {
+    duration: 2.5,
+    times: [0, 0.25, 0.5],
+    repeat: Infinity,
+  }
+  const top = below ? "calc(100% + 0.5rem)" : "auto"
+  const bottom = below ? "auto" : "calc(100% + 1rem)"
+  const y = below ? [0, 20, 0] : [0, -20, 0]
+  const direction = below ? "column-reverse" : "column"
+  const transformOrigin = below ? { bottom: 0 } : { top: 0 }
+  const rotate = below ? 180 : 0
+  return visible ? (
+    <MotionFlex
+      animate={{ opacity: [0, 1] }} // Fade in once
+      position="absolute"
+      top={top}
+      justify="center"
+      bottom={bottom}
+      insetInline={0}
+      color="primary.base"
+    >
+      <MotionFlex
+        direction={direction}
+        alignItems="center"
+        animate={{ y }} // Slide up and down
+        transition={transition}
+      >
+        <Text fontSize="xs" fontStyle="italic" textTransform="lowercase" m={0}>
+          {children}
+        </Text>
+        <DownArrowLong
+          transformOrigin={transformOrigin}
+          initial={{ scaleY: 1, rotate }}
+          animate={{ scaleY: [1, 1.25, 1] }} // Arrow scales up and down
+          transition={transition}
+        />
+      </MotionFlex>
+    </MotionFlex>
+  ) : null
+}

src/components/Simulator/Explanation.tsx

@@ -0,0 +1,152 @@
+import React from "react"
+import { Box, type BoxProps, Flex, Text, Grid, Divider } from "@chakra-ui/react"
+import { MdArrowBack } from "react-icons/md"
+import Button from "../Button"
+import type {
+  LabelHref,
+  SimulatorExplanation,
+  SimulatorPathSummary,
+  SimulatorNavProps,
+} from "./interfaces"
+import type { PathId } from "./types"
+import { MoreInfoPopover } from "./MoreInfoPopover"
+import { PathButton } from "./PathButton"
+import ButtonLink from "../ButtonLink"
+import Link from "../Link"
+import { motion } from "framer-motion"
+import { shareOnTwitter } from "./utils"
+import { FaTwitter } from "react-icons/fa"
+
+interface ExplanationProps extends SimulatorNavProps {
+  explanation: SimulatorExplanation
+  nextPathSummary: SimulatorPathSummary | null
+  nextPathId: PathId | null
+  finalCtaLink: LabelHref
+  openPath?: (pathId: PathId) => void
+  logFinalCta?: () => void
+}
+export const Explanation: React.FC<ExplanationProps> = ({
+  nav,
+  explanation,
+  nextPathSummary,
+  nextPathId,
+  finalCtaLink,
+  openPath,
+  logFinalCta,
+}) => {
+  const { regressStepper, step, totalSteps } = nav
+  const { header, description } = explanation
+
+  const Description: React.FC<BoxProps> = (props) => (
+    <Box {...props}>{description}</Box>
+  )
+  const isLastStep = nav.step + 1 === totalSteps
+
+  const backButtonVariants = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+  }
+  return (
+    <Flex direction="column" flex={1} zIndex={1}>
+      {/* Back button */}
+      <Button
+        as={motion.button}
+        variant="ghost"
+        leftIcon={<MdArrowBack size="18px" />}
+        sx={{ paddingInlineStart: 0 }}
+        mt={{ base: -6, md: 0 }}
+        mb={{ base: 2, md: 8 }}
+        onClick={regressStepper}
+        pointerEvents={step === 0 ? "none" : "all"}
+        variants={backButtonVariants}
+        initial="hidden"
+        animate={step === 0 ? "hidden" : "visible"}
+        transitionDuration="10ms"
+        w="fit-content"
+      >
+        Back
+      </Button>
+      <Flex direction={{ base: "row", md: "column" }} gap={{ base: 3, md: 2 }}>
+        {/* Step counter */}
+        <Grid
+          placeItems="center"
+          bg="body.light"
+          borderRadius="lg"
+          p={2}
+          w={9}
+          h={8}
+          fontSize="xs"
+        >
+          <Text as="span" lineHeight={1} fontWeight="bold" m={0}>
+            {step + 1}/{totalSteps}
+          </Text>
+        </Grid>
+        {/* Header and description */}
+        <Box>
+          <Text
+            fontSize={{ base: "xl", sm: "2xl", md: "3xl", lg: "4xl" }}
+            lineHeight={{ base: 8, md: 10 }}
+            fontWeight="bold"
+            mb={{ base: 4, md: 8 }}
+          >
+            {header}
+          </Text>
+          {description && (
+            <Box display={{ base: "block", md: "none" }} position="relative">
+              <MoreInfoPopover isFirstStep={nav.step === 0}>
+                <Description />
+              </MoreInfoPopover>
+            </Box>
+          )}
+        </Box>
+      </Flex>
+      {description && <Description display={{ base: "none", md: "block" }} />}
+      {/* Last step navigation buttons */}
+      {isLastStep && (
+        <Flex
+          direction="column"
+          gap={4}
+          maxW="300px"
+          w="full"
+          mx={{ base: "auto", md: 0 }}
+          mt={4}
+          zIndex={-1}
+        >
+          {nextPathSummary && openPath && nextPathId && (
+            <PathButton
+              pathSummary={nextPathSummary}
+              handleClick={() => openPath(nextPathId)}
+            />
+          )}
+          {/* TODO: Decide on button/link approach and remove unused */}
+          {/* <ButtonLink
+            variant={finalCtaLink.isPrimary ? "solid" : "outline"}
+            href={finalCtaLink.href}
+            onClick={logFinalCta}
+          >
+            {finalCtaLink.label}
+          </ButtonLink> */}
+          <Flex alignItems="center" gap={6}>
+            <Divider borderColor="body.medium" />
+            <Text textTransform="uppercase" m={0} color="body.medium">
+              or
+            </Text>
+            <Divider borderColor="body.medium" />
+          </Flex>
+          <Link href={finalCtaLink.href} isExternal onClick={logFinalCta}>
+            {finalCtaLink.label}
+          </Link>
+          <Button
+            variant="outline-color"
+            leftIcon={<FaTwitter />}
+            onClick={shareOnTwitter}
+            w={{ base: "full", lg: "auto" }}
+            mt={{ base: 2, lg: 0 }}
+          >
+            Share on Twitter
+          </Button>
+        </Flex>
+      )}
+    </Flex>
+  )
+}

src/components/Simulator/MoreInfoPopover.tsx

@@ -0,0 +1,64 @@
+import {
+  Popover,
+  PopoverTrigger,
+  Button,
+  Icon,
+  PopoverContent,
+  PopoverArrow,
+  PopoverBody,
+  type PopoverBodyProps,
+  PopoverCloseButton,
+  PopoverHeader,
+} from "@chakra-ui/react"
+import { motion } from "framer-motion"
+import React, { useState } from "react"
+import { MdInfoOutline } from "react-icons/md"
+import { PulseAnimation } from "./PulseAnimation"
+
+const MotionButton = motion(Button)
+
+interface IProps extends Pick<PopoverBodyProps, "children"> {
+  isFirstStep: boolean
+}
+export const MoreInfoPopover: React.FC<IProps> = ({
+  isFirstStep,
+  children,
+}) => {
+  const [clicked, setClicked] = useState(false)
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <MotionButton
+          rightIcon={<Icon as={MdInfoOutline} size={24} />}
+          variant="ghost"
+          sx={{ paddingInlineStart: 0 }}
+          color="body.medium"
+          fontSize="sm"
+          p={0}
+          onClick={() => setClicked(true)}
+          position="relative"
+        >
+          More info
+          {isFirstStep && !clicked && <PulseAnimation type="narrow-button" />}
+        </MotionButton>
+      </PopoverTrigger>
+      <PopoverContent
+        bg="background.highlight"
+        px={4}
+        py={6}
+        insetStart={{ base: 4, sm: 8 }}
+        maxW={{ base: "calc(100vw - 3rem)", sm: "calc(100vw - 5rem)" }}
+        borderRadius="base"
+        boxShadow="tooltip"
+      >
+        <PopoverArrow bg="background.highlight" boxShadow="2xl" />
+        <PopoverHeader mb={2}>
+          <PopoverCloseButton ms="auto" />
+        </PopoverHeader>
+        <PopoverBody sx={{ "p:last-of-type": { mb: 2 } }}>
+          {children}
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  )
+}

src/components/Simulator/PathButton.tsx

@@ -0,0 +1,46 @@
+import React from "react"
+import { Button, Flex, Text } from "@chakra-ui/react"
+import type { SimulatorPathSummary } from "./interfaces"
+
+interface IProps {
+  pathSummary: SimulatorPathSummary
+  handleClick: () => void
+}
+export const PathButton: React.FC<IProps> = ({ pathSummary, handleClick }) => {
+  const { primaryText, secondaryText, Icon } = pathSummary
+  return (
+    <Button
+      variant="outline"
+      leftIcon={<Icon />}
+      justifyContent="start"
+      gap={3}
+      textAlign="start"
+      w="full"
+      py={6}
+      onClick={handleClick}
+    >
+      <Flex direction="column" as="span">
+        <Text
+          as="span"
+          fontWeight="bold"
+          m={0}
+          lineHeight={6}
+          letterSpacing="-1.1%"
+        >
+          {primaryText}
+        </Text>
+        {secondaryText && (
+          <Text
+            as="span"
+            m={0}
+            color="body.medium"
+            fontSize="xs"
+            lineHeight={5}
+          >
+            {secondaryText}
+          </Text>
+        )}
+      </Flex>
+    </Button>
+  )
+}

src/components/Simulator/Phone.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+import { Box, type BoxProps } from "@chakra-ui/react"
+
+interface IProps extends Pick<BoxProps, "children"> {}
+export const Phone: React.FC<IProps> = ({ children }) => (
+  <Box as="figure" minW="min(100%, 322px)" maxW="min(100%, 322px)" mx="auto">
+    {/* Phone frame */}
+    <Box
+      h={{ base: 480, md: 600 }}
+      maxH="full"
+      w="full"
+      border="5px solid"
+      borderColor="body.medium"
+      borderRadius="3xl"
+      bg="background.base"
+      position="relative"
+      zIndex={0}
+      overflow="hidden"
+    >
+      {children}
+    </Box>
+    {/* Phone drop shadow */}
+    <Box
+      h={6}
+      mb={-6}
+      w="full"
+      borderRadius="100%"
+      position="relative"
+      filter="blur(14px)"
+      bg="black"
+      opacity={0.4}
+      zIndex={-1}
+    />
+  </Box>
+)