Building a React Landing Page in a TypeScript Monorepo: A Developer's Insight

import { LandingPage } from "../landing/LandingPage"
import { makeWebsitePage } from "../layout/makeWebsitePage"

export default makeWebsitePage(LandingPage)

import type { AppProps } from "next/app"
import { Page } from "@lib/next-ui/Page"

interface MyAppProps extends AppProps {
  Component: Page
}

function MyApp({ Component, pageProps }: MyAppProps) {
  const getLayout = Component.getLayout || ((page: ReactNode) => page)
  const component = getLayout(<Component {...pageProps} />)
  // ...
}

import { IconWrapper } from "@lib/ui/icons/IconWrapper"
import { HStack } from "@lib/ui/layout/Stack"
import { Text } from "@lib/ui/text"
import { productName } from "@increaser/config"
import { ProductIcon } from "./icon/ProductIcon"

export const ProductLogo = () => (
  <HStack alignItems="center" gap={8}>
    <IconWrapper style={{ fontSize: `1.2em` }}>
      <ProductIcon />
    </IconWrapper>
    <Text color="contrast" weight="bold">
      {productName.toLowerCase()}
    </Text>
  </HStack>
)

import { useTheme } from "styled-components"

export const ProductIcon = () => {
  const { colors } = useTheme()

  return (
    <svg
      width="1em"
      height="1em"
      viewBox="0 0 400 400"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M200 400C310.457 400 400 310.457 400 200C400 89.5431 310.457 0 200 0C89.5431 0 0 89.5431 0 200C0 310.457 89.5431 400 200 400Z"
        fill={colors.contrast.toCssValue()}
      />
      <path
        d="M313.411 313.411C343.417 283.405 360.274 242.709 360.274 200.274C360.274 157.84 343.417 117.143 313.412 87.137C283.406 57.1313 242.709 40.2742 200.274 40.2742C157.84 40.2742 117.143 57.1313 87.1372 87.137L200.274 200.274L313.411 313.411Z"
        fill={colors.background.toCssValue()}
      />
    </svg>
  )
}

export enum WebsitePath {
  Home = "/",
  TermsOfService = "/terms-of-service",
  PrivacyPolicy = "/privacy-policy",
}

import {
  ExternalLinkProps,
  ExternalLink,
} from "@lib/ui/navigation/Link/ExternalLink"
import { joinPaths } from "@lib/utils/query/joinPaths"
import { appUrl } from "../config"

export const AppLink = ({
  to,
  openInSameTab = true,
  isReferring = true,
  ...rest
}: ExternalLinkProps) => (
  <ExternalLink
    to={joinPaths(appUrl, to)}
    openInSameTab={openInSameTab}
    isReferring={isReferring}
    {...rest}
  />
)

import { shouldBePresent } from "@lib/utils/assert/shouldBePresent"

export const appUrl = shouldBePresent(process.env.NEXT_PUBLIC_APP_URL)

export const joinPaths = (base: string, path: string): string => {
  if (base.endsWith("/")) {
    base = base.slice(0, -1)
  }

  if (path.startsWith("/")) {
    path = path.substring(1)
  }

  return `${base}/${path}`
}

import { GetLayout, Page } from "@lib/next-ui/Page"
import { WebsiteNavigation } from "@lib/ui/website/navigation/WebsiteNavigation"
import { ProductLogo } from "@increaser/ui/ProductLogo"
import styled from "styled-components"
import { interactive } from "@lib/ui/css/interactive"
import Link from "next/link"
import { HStack } from "@lib/ui/layout/Stack"
import { Button } from "@lib/ui/buttons/Button"
import { OverlayNavigationItem } from "@lib/ui/website/navigation/OverlayNavigationItem"
import { Footer } from "@lib/ui/website/navigation/Footer"
import { Text } from "@lib/ui/text"
import { legalEntity, supportEmail, youTubeChannel } from "@increaser/config"
import { InteractiveText } from "@lib/ui/text/InteractiveText"
import { AppLink } from "../navigation/AppLink"
import { AppPath } from "@increaser/ui/navigation/AppPath"
import { WebsitePath } from "@increaser/ui/navigation/WebsitePath"
import { ExternalLink } from "@lib/ui/navigation/Link/ExternalLink"

const LogoWrapper = styled(Link)`
  ${interactive};
  font-size: 20px;
`

export const getWebsitePageLayout: GetLayout = (page) => (
  <WebsiteNavigation
    logo={
      <LogoWrapper href={WebsitePath.Home}>
        <ProductLogo />
      </LogoWrapper>
    }
    renderTopbarItems={() => (
      <>
        <div />
        <HStack alignItems="center" gap={8}>
          <AppLink to={AppPath.SignIn}>
            <Button kind="ghost" as="div">
              Sign in
            </Button>
          </AppLink>
          <AppLink to={AppPath.SignUp}>
            <Button kind="reversed" as="div">
              Sign up
            </Button>
          </AppLink>
        </HStack>
      </>
    )}
    renderOverlayItems={({ onClose }) => (
      <>
        <AppLink onClick={onClose} to={AppPath.SignUp}>
          <OverlayNavigationItem as="div">Sign up</OverlayNavigationItem>
        </AppLink>
        <AppLink onClick={onClose} to={AppPath.SignIn}>
          <OverlayNavigationItem as="div">Sign in</OverlayNavigationItem>
        </AppLink>
      </>
    )}
    footer={
      <Footer>
        <HStack
          alignItems="center"
          justifyContent="center"
          gap={16}
          fullWidth
          wrap="wrap"
        >
          <Text>
            © {new Date().getFullYear()} {legalEntity}
          </Text>
          <AppLink to={AppPath.Home}>
            <InteractiveText>App</InteractiveText>
          </AppLink>
          <Link href={WebsitePath.PrivacyPolicy}>
            <InteractiveText>Privacy</InteractiveText>
          </Link>
          <Link href={WebsitePath.TermsOfService}>
            <InteractiveText>Terms</InteractiveText>
          </Link>
          <ExternalLink to={`mailto:${supportEmail}`}>
            <InteractiveText>Get in touch</InteractiveText>
          </ExternalLink>
          <ExternalLink to={youTubeChannel}>
            <InteractiveText>YouTube</InteractiveText>
          </ExternalLink>
        </HStack>
      </Footer>
    }
  >
    {page}
  </WebsiteNavigation>
)

export const makeWebsitePage = (page: Page) => {
  page.getLayout = getWebsitePageLayout

  return page
}

import styled from "styled-components"
import { centeredContentColumn } from "../../css/slice"
import { websiteConfig } from "../config"
import { verticalPadding } from "../../css/verticalPadding"
import { getColor } from "../../theme/getters"

export const Footer = styled.div`
  ${centeredContentColumn({
    contentMaxWidth: websiteConfig.contentMaxWidth,
  })};
  ${verticalPadding(12)};
  color: ${getColor("textSupporting")};
  font-size: 14px;
`

import { css } from "styled-components"
import { toSizeUnit } from "./toSizeUnit"

interface CenteredContentColumnParams {
  contentMaxWidth: number | string
  horizontalMinPadding?: number | string
}

export const centeredContentColumn = ({
  contentMaxWidth,
  horizontalMinPadding = 20,
}: CenteredContentColumnParams) => css`
  display: grid;
  grid-template-columns:
    1fr min(
      ${toSizeUnit(contentMaxWidth)},
      100% - calc(${toSizeUnit(horizontalMinPadding)} * 2)
    )
    1fr;
  grid-column-gap: ${toSizeUnit(horizontalMinPadding)};

  > * {
    grid-column: 2;
  }
`

import styled from "styled-components"
import { ClosableComponentProps, ComponentWithChildrenProps } from "../../props"
import { takeWholeSpace } from "../../css/takeWholeSpace"
import { HStack, VStack } from "../../layout/Stack"
import { ReactNode, useEffect, useState } from "react"
import { useIsScreenWidthLessThan } from "../../hooks/useIsScreenWidthLessThan"
import { centeredContentColumn } from "../../css/centeredContentColumn"
import { websiteConfig } from "../config"
import { getColor } from "../../theme/getters"
import { IconButton } from "../../buttons/IconButton"
import { CloseIcon } from "../../icons/CloseIcon"
import { MenuIcon } from "../../icons/MenuIcon"
import { toSizeUnit } from "../../css/toSizeUnit"
import { verticalPadding } from "../../css/verticalPadding"

type WebsiteNavigationProps = ComponentWithChildrenProps & {
  logo: ReactNode
  renderTopbarItems: () => ReactNode
  renderOverlayItems: (props: ClosableComponentProps) => ReactNode
  footer?: ReactNode
}

const Wrapper = styled(VStack)`
  ${takeWholeSpace};
`

const Container = styled(VStack)`
  max-height: 100%;
  overflow: auto;
  ${takeWholeSpace};
`

const Header = styled.div`
  ${centeredContentColumn({
    contentMaxWidth: websiteConfig.contentMaxWidth,
  })}
  height: ${toSizeUnit(websiteConfig.headerHeight)};
  min-height: ${toSizeUnit(websiteConfig.headerHeight)};
`

const TobbarContent = styled(HStack)`
  flex: 1;
  justify-content: space-between;
`

const Overlay = styled(VStack)`
  position: fixed;
  width: 100%;
  height: calc(100% - ${toSizeUnit(websiteConfig.headerHeight)});
  top: ${toSizeUnit(websiteConfig.headerHeight)};
  background: ${getColor("background")};
  ${verticalPadding(20)};
  gap: 4px;
  z-index: 1;
`

const Content = styled.div`
  flex: 1;
`

export const WebsiteNavigation = ({
  children,
  logo,
  renderOverlayItems,
  renderTopbarItems,
  footer,
}: WebsiteNavigationProps) => {
  const isSmallScreen = useIsScreenWidthLessThan(800)
  const [isOverlayOpen, setIsOverlayOpen] = useState(false)

  useEffect(() => {
    if (!isSmallScreen && isOverlayOpen) {
      setIsOverlayOpen(false)
    }
  }, [isOverlayOpen, isSmallScreen])

  return (
    <>
      <Wrapper>
        <Header>
          <HStack fullWidth alignItems="center" gap={20}>
            {logo}
            <TobbarContent>
              {isSmallScreen ? (
                <>
                  <div />
                  <IconButton
                    size="l"
                    onClick={() => setIsOverlayOpen(!isOverlayOpen)}
                    title={
                      isOverlayOpen ? "Close navigation" : "Open navigation"
                    }
                    icon={isOverlayOpen ? <CloseIcon /> : <MenuIcon />}
                  />
                </>
              ) : (
                <TobbarContent>{renderTopbarItems()}</TobbarContent>
              )}
            </TobbarContent>
          </HStack>
        </Header>
        <Container>
          <Content>{children}</Content>
          {footer}
        </Container>
      </Wrapper>
      {isOverlayOpen && (
        <Overlay>
          {renderOverlayItems({
            onClose: () => setIsOverlayOpen(false),
          })}
        </Overlay>
      )}
    </>
  )
}

export const AuthPageLayout = ({ children }: ComponentWithChildrenProps) => {
  return (
    <UnauthenticatedOnly>
      <WebsiteNavigation
        logo={
          <LogoWrapper to={WebsitePath.Home}>
            <ProductLogo />
          </LogoWrapper>
        }
        renderTopbarItems={() => (
          <>
            <div />
            <HStack alignItems="center" gap={8}>
              <Link href={AppPath.SignIn}>
                <Button kind="ghost" as="div">
                  Sign in
                </Button>
              </Link>
              <Link href={AppPath.SignUp}>
                <Button kind="reversed" as="div">
                  Sign up
                </Button>
              </Link>
            </HStack>
          </>
        )}
        renderOverlayItems={({ onClose }) => (
          <>
            <Link onClick={onClose} href={AppPath.SignUp}>
              <OverlayNavigationItem as="div">Sign up</OverlayNavigationItem>
            </Link>
            <Link onClick={onClose} href={AppPath.SignIn}>
              <OverlayNavigationItem as="div">Sign in</OverlayNavigationItem>
            </Link>
          </>
        )}
      >
        {/* content */}
      </WebsiteNavigation>
    </UnauthenticatedOnly>
  )
}

import { PageMetaTags } from "@lib/next-ui/metadata/PageMetaTags"
import { PricingSlice } from "./PricingSlice"
import { PrimarySlice } from "./PrimarySlice"
import { VideoSlice } from "./VideoSlice"
import { FaqSlice } from "./FaqSlice"
import { ClosingArgumentSlice } from "./ClosingArgumentSlice"
import { FoundersNoteSlice } from "./FoundersNoteSlice"
import { ScoreboardSlice } from "./ScoreboardSlice"
import { HabitsSlice } from "./demo/HabitsSlice"
import { DemoUserStateProvider } from "./demo/DemoUserStateProvider"
import { FocusSlice } from "./demo/FocusSlice"
import { ProjectsProvider } from "@increaser/ui/projects/ProjectsProvider"
import { TimeTrackingSlice } from "./demo/TimeTrackingSlice"
import { ScheduleSlice } from "./demo/ScheduleSlice"
import { TestimonialsSlice } from "./testimonials/TestimonialsSlice"

export const LandingPage = () => (
  <>
    <PageMetaTags
      title="Master Remote Work with Increaser – Enhance Focus and Time Management"
      description="Increaser offers a unique solution for remote workers seeking to boost efficiency, track time, and develop positive habits for better career and health outcomes."
    />
    <PrimarySlice />
    <DemoUserStateProvider>
      <ProjectsProvider>
        <FocusSlice />
        <TimeTrackingSlice />
        <HabitsSlice />
        <ScheduleSlice />
      </ProjectsProvider>
    </DemoUserStateProvider>
    <TestimonialsSlice />
    <VideoSlice />
    <ScoreboardSlice />
    <PricingSlice />
    <FoundersNoteSlice />
    <FaqSlice />
    <ClosingArgumentSlice />
  </>
)

import Head from "next/head"

interface PageMetaTags {
  title?: string
  description?: string
  image?: string
  language?: string
}

export const PageMetaTags = ({
  title,
  description,
  image,
  language,
}: PageMetaTags) => (
  <Head>
    {title && (
      <>
        <title>{title}</title>
        <meta name="application-name" content={title} />
        <meta name="apple-mobile-web-app-title" content={title} />
        <meta property="og:title" content={title} />
        <meta name="twitter:title" content={title} />
      </>
    )}

    {description && (
      <>
        <meta name="description" content={description} />
        <meta property="og:description" content={description} />
        <meta name="twitter:description" content={description} />
        <meta property="og:image:alt" content={description} />
        <meta name="twitter:image:alt" content={description} />
      </>
    )}

    {image && (
      <>
        <meta property="og:image" content={image} />
        <meta name="twitter:image:src" content={image} />
      </>
    )}

    {language && <meta httpEquiv="Content-Language" content={language} />}
  </Head>
)

import styled from "styled-components"
import { websiteConfig } from "@lib/ui/website/config"
import { toSizeUnit } from "@lib/ui/css/toSizeUnit"
import { WebsiteSectionHeader } from "@lib/ui/website/WebsiteSectionHeader"
import { WebsiteSlice } from "@lib/ui/website/WebsiteSlice"
import { WebsiteSliceContent } from "@lib/ui/website/WebsiteSliceContent"
import { PrimaryCallToAction } from "./PrimaryCallToAction"

const Container = styled(WebsiteSlice)`
  min-height: calc(100vh - ${toSizeUnit(websiteConfig.headerHeight)});
`

export const PrimarySlice = () => (
  <Container>
    <WebsiteSliceContent>
      <WebsiteSectionHeader
        titleAs="h1"
        title={
          <>
            From Chaos to Clarity
            <br /> Transforms Your Workday
            <br /> into Productive Bliss
          </>
        }
        subtitle="Crafted with Remote Workers' Needs at the Forefront"
      />
      <PrimaryCallToAction />
    </WebsiteSliceContent>
  </Container>
)

import styled from "styled-components"
import { centeredContentColumn } from "../css/centeredContentColumn"
import { websiteConfig } from "./config"
import { verticalPadding } from "../css/verticalPadding"

export const WebsiteSlice = styled.div`
  ${centeredContentColumn({
    contentMaxWidth: websiteConfig.contentMaxWidth,
  })}

  ${verticalPadding(80)}
`

import styled from "styled-components"
import { VStack } from "../layout/Stack"

export const WebsiteSliceContent = styled(VStack)`
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 60px;
`

import { ReactNode } from "react"
import { TitledComponentProps } from "../props"
import { VStack } from "../layout/Stack"
import styled from "styled-components"
import { Text } from "../text"

type WebsiteSectionHeaderProps = TitledComponentProps & {
  subtitle?: ReactNode
  titleAs?: React.ElementType
}

const Title = styled(Text)`
  font-size: 32px;
  @media (max-width: 600px) {
    font-size: 20px;
  }
`

const Container = styled(VStack)`
  gap: 8px;
  align-items: center;
  text-align: center;
  line-height: 1.5;
  max-width: 600px;
`

export const WebsiteSectionHeader = ({
  title,
  subtitle,
  titleAs = "h2",
}: WebsiteSectionHeaderProps) => (
  <Container>
    <Title color="contrast" as={titleAs}>
      {title}
    </Title>
    {subtitle && <Text>{subtitle}</Text>}
  </Container>
)

import { AppPath } from "@increaser/ui/navigation/AppPath"
import { AppLink } from "../navigation/AppLink"
import { Button, ButtonProps } from "@lib/ui/buttons/Button"

type PrimaryCallToActionProps = Partial<ButtonProps>

export const PrimaryCallToAction = ({
  children = "Start now",
  size = "xl",
  kind = "primary",
  ...rest
}: PrimaryCallToActionProps) => (
  <AppLink to={AppPath.SignUp}>
    <Button as="div" kind={kind} size={size} {...rest}>
      {children}
    </Button>
  </AppLink>
)

import { useCallback, useState } from "react"
import { UserStateContext } from "@increaser/ui/user/UserStateContext"

import { User } from "@increaser/entities/User"
import { ComponentWithChildrenProps } from "@lib/ui/props"
import { getDemoUser } from "@increaser/demo/getDemoUser"

export const DemoUserStateProvider = ({
  children,
}: ComponentWithChildrenProps) => {
  const [state, setState] = useState<User>(getDemoUser)

  const updateState = useCallback(
    (pieceOfState: Partial<User>) => {
      setState((state) => ({
        ...(state || {}),
        ...pieceOfState,
      }))
    },
    [setState]
  )

  return (
    <UserStateContext.Provider
      value={{
        state: state,
        updateState,
        pullRemoteState: () => {},
        isLoading: false,
        lastUpdatedAt: Date.now(),
      }}
    >
      {children}
    </UserStateContext.Provider>
  )
}

import { createContext } from "react"
import { createContextHook } from "@lib/ui/state/createContextHook"
import { User } from "@increaser/entities/User"

interface UserStateContextValue {
  state: User | null
  updateState: (state: Partial<User>) => void
  pullRemoteState: () => void
  isLoading: boolean
  lastUpdatedAt: number
}

export const UserStateContext = createContext<
  UserStateContextValue | undefined
>(undefined)

export const useUserState = createContextHook(
  UserStateContext,
  "UserStateContext"
)

export const useAssertUserState = () => {
  const { state } = useUserState()

  if (state === null) {
    throw new Error("UserState is not provided")
  }

  return state
}

import { User, userDefaultFields } from "@increaser/entities/User"
import { convertDuration } from "@lib/utils/time/convertDuration"
import { getCurrentTimezoneOffset } from "@lib/utils/time/getCurrentTimezoneOffset"
import { getDemoHabits } from "./habits"
import { getDemoProjects } from "./projects"
import { getDemoSets } from "./sets"
import { getDemoTasks } from "./tasks"

export const getDemoUser = (): User => {
  return {
    ...userDefaultFields,
    id: "demo",
    email: "john@mail.com",
    name: "John",
    registrationDate: Date.now(),
    freeTrialEnd: Date.now() + convertDuration(100, "d", "ms"),
    updatedAt: Date.now(),
    timeZone: getCurrentTimezoneOffset(),
    habits: getDemoHabits(),
    projects: getDemoProjects(),
    sets: getDemoSets(),
    tasks: getDemoTasks(),
  }
}

import { createContext, useMemo } from "react"
import { useStartOfWeek } from "@lib/ui/hooks/useStartOfWeek"
import { ComponentWithChildrenProps } from "@lib/ui/props"
import { areSameWeek } from "@lib/utils/time/areSameWeek"
import { getRecord } from "@lib/utils/record/getRecord"
import { range } from "@lib/utils/array/range"
import { splitBy } from "@lib/utils/array/splitBy"
import { toWeek } from "@lib/utils/time/toWeek"
import { useTheme } from "styled-components"
import { useAssertUserState } from "@increaser/ui/user/UserStateContext"
import { MS_IN_WEEK } from "@lib/utils/time"
import { createContextHook } from "@lib/ui/state/createContextHook"
import { EnhancedProject } from "./EnhancedProject"
import { useCurrentWeekSets } from "../sets/hooks/useCurrentWeekSets"
import { enhanceProject } from "./utils/enhanceProject"

export const weeksToDisplay = 4

export interface WeekSummaryProject {
  seconds: number
  id: string
}
export interface WeekSummary {
  year: number
  week: number
  projects: WeekSummaryProject[]
}

interface ProjectsState {
  projects: EnhancedProject[]
  activeProjects: EnhancedProject[]
  inactiveProjects: EnhancedProject[]
  allocatedProjects: EnhancedProject[]
  projectsRecord: Record<string, EnhancedProject>
  weeks: WeekSummary[]
}

const getProjectSortingNumber = ({
  allocatedMinutesPerWeek,
  doneMinutesThisWeek,
  status,
}: EnhancedProject) => {
  if (status !== "ACTIVE") return 100000000000
  if (!allocatedMinutesPerWeek && !doneMinutesThisWeek) return 1000000000
  if (!allocatedMinutesPerWeek) return doneMinutesThisWeek

  return doneMinutesThisWeek / allocatedMinutesPerWeek
}

export const ProjectsContext = createContext<ProjectsState | undefined>(
  undefined
)

export const ProjectsProvider = ({ children }: ComponentWithChildrenProps) => {
  const state = useAssertUserState()

  const sets = useCurrentWeekSets()

  const theme = useTheme()

  const projects = useMemo(
    () =>
      state.projects
        .map((project) => enhanceProject(project, sets, theme))
        .sort(
          (one, another) =>
            getProjectSortingNumber(one) - getProjectSortingNumber(another)
        ),
    [sets, state.projects, theme]
  )

  console.log(projects)

  const [activeProjects, inactiveProjects] = useMemo(
    () => splitBy(projects, ({ status }) => (status === "ACTIVE" ? 0 : 1)),
    [projects]
  )

  const allocatedProjects = useMemo(
    () =>
      projects.filter(
        ({ allocatedMinutesPerWeek }) => allocatedMinutesPerWeek > 0
      ),
    [projects]
  )

  const projectsRecord = useMemo(
    () => getRecord(projects, (project) => project.id),
    [projects]
  )

  const startOfWeek = useStartOfWeek()

  const weeks: WeekSummary[] = useMemo(() => {
    return range(weeksToDisplay).map((index) => {
      const week = toWeek(startOfWeek - (weeksToDisplay - index) * MS_IN_WEEK)
      const projectsWithWeek = [] as WeekSummaryProject[]
      projects.forEach((project) => {
        const projectWeek = project.weeks.find((partialWeek) =>
          areSameWeek(partialWeek, week)
        )
        if (projectWeek) {
          projectsWithWeek.push({
            seconds: projectWeek.seconds,
            id: project.id,
          })
        }
      })

      return {
        ...week,
        projects: projectsWithWeek.sort((a, b) => a.seconds - b.seconds),
      }
    })
  }, [projects, startOfWeek])

  return (
    <ProjectsContext.Provider
      value={{
        projects,
        activeProjects,
        inactiveProjects,
        allocatedProjects,
        projectsRecord,
        weeks,
      }}
    >
      {children}
    </ProjectsContext.Provider>
  )
}

export const useProjects = createContextHook(ProjectsContext, "ProjectsContext")

import { WebsiteSectionHeader } from "@lib/ui/website/WebsiteSectionHeader"
import { WebsiteSlice } from "@lib/ui/website/WebsiteSlice"
import { WebsiteSliceContent } from "@lib/ui/website/WebsiteSliceContent"
import { productName } from "@increaser/config"
import { ClientOnly } from "@lib/ui/base/ClientOnly"
import styled from "styled-components"
import { centerContent } from "@lib/ui/css/centerContent"
import { SessionProgress } from "@increaser/ui/focus/SessionProgress"
import { DemoFocusProvider } from "./DemoFocusProvider"
import { Text } from "@lib/ui/text"
import { FocusPassedTime } from "@increaser/ui/focus/FocusPassedTime"
import { FocusSessionInfo } from "@increaser/ui/focus/FocusSessionInfo"

const BlockWrapper = styled.div`
  height: 540px;
  width: 320px;
  position: relative;
  ${centerContent};

  @media (max-width: 800px) {
    height: 400px;
    width: 280px;
  }
`

const PositionSessionInfo = styled.div`
  position: absolute;
  top: 12px;
`

export const FocusSlice = () => {
  return (
    <WebsiteSlice>
      <WebsiteSliceContent>
        <WebsiteSectionHeader
          title="Sharper Focus, Better Results"
          subtitle={`${productName}'s tools are designed to help you achieve maximum productivity`}
        />
        <ClientOnly>
          <DemoFocusProvider>
            <BlockWrapper>
              <SessionProgress />
              <PositionSessionInfo>
                <FocusSessionInfo />
              </PositionSessionInfo>
              <Text
                style={{ position: "absolute" }}
                as="div"
                weight="bold"
                size={64}
                height="small"
              >
                <FocusPassedTime />
              </Text>
            </BlockWrapper>
          </DemoFocusProvider>
        </ClientOnly>
      </WebsiteSliceContent>
    </WebsiteSlice>
  )
}

import { ReactNode, useCallback, useState } from "react"

import { FocusDuration } from "@increaser/entities/FocusDuration"
import { CurrentSet, FocusContext } from "@increaser/ui/focus/FocusContext"
import { convertDuration } from "@lib/utils/time/convertDuration"
import { DemoProject } from "@increaser/demo/projects"
import { CurrentFocusGuard } from "@increaser/ui/focus/CurrentFocusProvider"

interface Props {
  children: ReactNode
}

export const DemoFocusProvider = ({ children }: Props) => {
  const [focusDuration, setFocusDuration] = useState<FocusDuration>(90)

  const [currentSet, setCurrentSet] = useState<CurrentSet>({
    startedAt: Date.now() - convertDuration(45, "min", "ms"),
    projectId: DemoProject.Content,
  })

  const updateStartTime = useCallback((startedAt: number) => {
    setCurrentSet((set) => (set ? { ...set, startedAt } : set))
  }, [])

  const updateProject = useCallback((projectId: string) => {
    setCurrentSet((set) => (set ? { ...set, projectId } : set))
  }, [])

  return (
    <FocusContext.Provider
      value={{
        start: () => {},
        updateStartTime,
        updateProject,
        stop,
        cancel: () => {},
        currentSet,
        focusDuration,
        setFocusDuration,
        setHasTimerSoundNotification: () => {},
        hasTimerBrowserNotification: false,
        setHasTimerBrowserNotification: () => {},
        hasTimerSoundNotification: false,
      }}
    >
      <CurrentFocusGuard>{children}</CurrentFocusGuard>
    </FocusContext.Provider>
  )
}

import { WebsiteSectionHeader } from "@lib/ui/website/WebsiteSectionHeader"
import { WebsiteSlice } from "@lib/ui/website/WebsiteSlice"
import { WebsiteSliceContent } from "@lib/ui/website/WebsiteSliceContent"
import { productName } from "@increaser/config"
import styled from "styled-components"
import { testimonials } from "./testimonials"
import { TestimonialItem } from "@lib/ui/website/testimonials/TestimonialItem"
import { TestimonialsContainer } from "@lib/ui/website/testimonials/TestimonialsContainer"
import { centeredContentColumn } from "@lib/ui/css/centeredContentColumn"
import { useIsScreenWidthLessThan } from "@lib/ui/hooks/useIsScreenWidthLessThan"

const Slice = styled(WebsiteSlice)`
  ${centeredContentColumn({
    contentMaxWidth: "100%",
  })}
`

export const TestimonialsSlice = () => {
  const isSmallScreen = useIsScreenWidthLessThan(600)
  const items = isSmallScreen ? testimonials.slice(0, 6) : testimonials

  return (
    <Slice>
      <WebsiteSliceContent>
        <WebsiteSectionHeader
          title={`${productName} in Action`}
          subtitle={`See how our tool helps people master their time and boost productivity`}
        />
        <TestimonialsContainer>
          {items.map((testimonial, index) => (
            <TestimonialItem key={index} testimonial={testimonial} />
          ))}
        </TestimonialsContainer>
      </WebsiteSliceContent>
    </Slice>
  )
}

import styled from "styled-components"

const testimonialsGap = "20px"

export const TestimonialsContainer = styled.div`
  column-gap: ${testimonialsGap};
  column-width: 320px;

  > * {
    margin-bottom: ${testimonialsGap};
  }
`

export type ProfileType = "linkedin" | "website" | "x"

export const profileTypeName: Record<string, string> = {
  linkedin: "LinkedIn",
  website: "Website",
  x: "X",
}

export type Testimonial = {
  content: string
  name: string
  profileUrl: string
  profileType: ProfileType
  imageUrl: string
  position: string
}

import { ReactNode } from "react"
import { useBoolean } from "../hooks/useBoolean"

interface RenderParams {
  src: string
  onError: () => void
}

interface Props {
  src?: string
  fallback?: ReactNode
  render: (params: RenderParams) => void
}

export const SafeImage = ({ fallback = null, src, render }: Props) => {
  const [isFailedToLoad, { set: failedToLoad }] = useBoolean(false)

  return (
    <>
      {isFailedToLoad || !src
        ? fallback
        : render({ onError: failedToLoad, src })}
    </>
  )
}

import styled from "styled-components"
import { takeWholeSpace } from "../css/takeWholeSpace"

export const CoverImage = styled.img`
  ${takeWholeSpace};
  object-fit: cover;
`

import { HStack, VStack } from "../../layout/Stack"
import { Testimonial, profileTypeName } from "./Testimonial"
import { Panel } from "../../panel/Panel"
import styled from "styled-components"
import { CoverImage } from "../../images/CoverImage"
import { sameDimensions } from "../../css/sameDimensions"
import { round } from "../../css/round"
import { SafeImage } from "../../images/SafeImage"
import { Text } from "../../text"
import { HStackSeparatedBy, dotSeparator } from "../../layout/StackSeparatedBy"
import { InteractiveText } from "../../text/InteractiveText"
import { ExternalLink } from "../../navigation/Link/ExternalLink"

type TestimonialItemProps = {
  testimonial: Testimonial
}

const Avatar = styled(CoverImage)`
  ${sameDimensions(48)};
  ${round};
`

export const TestimonialItem = ({ testimonial }: TestimonialItemProps) => {
  const { content, name, profileType, profileUrl, imageUrl, position } =
    testimonial

  return (
    <Panel>
      <VStack gap={20}>
        <HStack alignItems="center" gap={16}>
          <SafeImage
            src={imageUrl}
            render={(props) => <Avatar alt={name} {...props} />}
          />
          <VStack gap={4}>
            <Text color="contrast" weight="semibold">
              {name}
            </Text>
            <Text as="div" color="supporting" size={14}>
              <HStackSeparatedBy separator={dotSeparator}>
                <Text>{position}</Text>
                <ExternalLink to={profileUrl}>
                  <InteractiveText>
                    {profileTypeName[profileType]}
                  </InteractiveText>
                </ExternalLink>
              </HStackSeparatedBy>
            </Text>
          </VStack>
        </HStack>
        <Text color="contrast" height="large">
          {content}
        </Text>
      </VStack>
    </Panel>
  )
}

import YouTubePlayer from "react-player/lazy"
import styled, { css } from "styled-components"
import { demoVideoUrl, productName } from "@increaser/config"
import { borderRadius } from "@lib/ui/css/borderRadius"
import { VStack } from "@lib/ui/layout/Stack"
import { IntersectionAware } from "@lib/ui/base/IntersectionAware"
import { useBoolean } from "@lib/ui/hooks/useBoolean"
import { ElementSizeAware } from "@lib/ui/base/ElementSizeAware"
import { WebsiteSectionHeader } from "@lib/ui/website/WebsiteSectionHeader"
import { WebsiteSliceContent } from "@lib/ui/website/WebsiteSliceContent"
import { getColor } from "@lib/ui/theme/getters"
import { transition } from "@lib/ui/css/transition"
import { WebsiteSlice } from "@lib/ui/website/WebsiteSlice"

const youTubeVideoRatio = 9 / 16

const PlayerWrapper = styled.div<{ isActive: boolean }>`
  ${borderRadius.m};
  overflow: hidden;
  ${transition}
  border: 1px solid transparent;
  ${({ isActive, theme }) =>
    !isActive &&
    css`
      border-color: ${getColor("primary")};
      box-shadow: 0 0 20px 5px ${theme.colors.primary
          .getVariant({ a: () => 0.8 })
          .toCssValue()};
    `}
`

export const VideoSlice = () => {
  const [isPlaying, { set: play, unset: pause }] = useBoolean(false)

  return (
    <WebsiteSlice>
      <WebsiteSliceContent>
        <WebsiteSectionHeader
          title={`Unveiling the Power of ${productName}`}
          subtitle="Dive into an insightful demonstration and see how our app transforms your workday efficiency"
        />
        <IntersectionAware<HTMLDivElement>
          render={({ ref, wasIntersected }) => {
            return (
              <VStack fullWidth ref={ref}>
                {wasIntersected && (
                  <ElementSizeAware
                    render={({ setElement, size }) => {
                      return (
                        <PlayerWrapper isActive={isPlaying} ref={setElement}>
                          {size && (
                            <YouTubePlayer
                              isActive
                              width={size.width}
                              height={size.width * youTubeVideoRatio}
                              url={demoVideoUrl}
                              playing={isPlaying}
                              onPause={pause}
                              onPlay={play}
                              config={{
                                youtube: {
                                  playerVars: { autoplay: 0, controls: 1 },
                                },
                              }}
                            />
                          )}
                        </PlayerWrapper>
                      )
                    }}
                  />
                )}
              </VStack>
            )
          }}
        />
      </WebsiteSliceContent>
    </WebsiteSlice>
  )
}

import styled, { css } from "styled-components"
import { borderRadius } from "@lib/ui/css/borderRadius"
import { getColor } from "@lib/ui/theme/getters"
import { transition } from "@lib/ui/css/transition"

export const VideoHighlight = styled.div<{ isActive: boolean }>`
  ${borderRadius.m};
  overflow: hidden;
  ${transition}
  border: 1px solid transparent;
  ${({ isActive, theme }) =>
    !isActive &&
    css`
      border-color: ${getColor("primary")};
      box-shadow: 0 0 20px 5px ${theme.colors.primary
          .getVariant({ a: () => 0.8 })
          .toCssValue()};
    `}
`

import { WebsiteSectionHeader } from "@lib/ui/website/WebsiteSectionHeader"
import { WebsiteSlice } from "@lib/ui/website/WebsiteSlice"
import { WebsiteSliceContent } from "@lib/ui/website/WebsiteSliceContent"
import { Scoreboard } from "@increaser/ui/scoreboard/Scoreboard"
import { productName } from "@increaser/config"

export const ScoreboardSlice = () => {
  return (
    <WebsiteSlice>
      <WebsiteSliceContent>
        <WebsiteSectionHeader
          title="Join the Productivity Elite"
          subtitle={`Claim your spot among the ${productName} high achievers`}
        />
        <Scoreboard />
      </WebsiteSliceContent>
    </WebsiteSlice>
  )
}

import { freeTrialDays } from "@increaser/config"
import { VStack } from "@lib/ui/layout/Stack"
import { Panel } from "@lib/ui/panel/Panel"
import { SubscriptionOffer } from "@increaser/ui/subscription/SubscriptionOffer"
import { SubscriptionBillingCycleProvider } from "@lib/subscription-ui/SubscriptionBillingCycleProvider"
import { WebsiteSectionHeader } from "@lib/ui/website/WebsiteSectionHeader"
import { WebsiteSlice } from "@lib/ui/website/WebsiteSlice"
import { WebsiteSliceContent } from "@lib/ui/website/WebsiteSliceContent"
import { PrimaryCallToAction } from "./PrimaryCallToAction"

export const PricingSlice = () => {
  return (
    <WebsiteSlice>
      <WebsiteSliceContent>
        <WebsiteSectionHeader
          title="Affordable Plans for Unmatched Productivity Gains"
          subtitle={`Start your journey risk-free with a ${freeTrialDays}-day free trial,
          no card required`}
        />
        <SubscriptionBillingCycleProvider>
          <Panel>
            <VStack gap={20}>
              <SubscriptionOffer />
              <PrimaryCallToAction size="l">
                Start free trial
              </PrimaryCallToAction>
            </VStack>
          </Panel>
        </SubscriptionBillingCycleProvider>
      </WebsiteSliceContent>
    </WebsiteSlice>
  )
}

import { WebsiteSectionHeader } from "@lib/ui/website/WebsiteSectionHeader"
import { WebsiteSlice } from "@lib/ui/website/WebsiteSlice"
import { WebsiteSliceContent } from "@lib/ui/website/WebsiteSliceContent"
import { Text } from "@lib/ui/text"
import { FounderSignature } from "./FounderSignature"
import { FoundersNote } from "@lib/ui/website/FoundersNote"

export const FoundersNoteSlice = () => {
  return (
    <WebsiteSlice>
      <WebsiteSliceContent>
        <WebsiteSectionHeader title="Welcome to Your Productivity Partner Increaser" />
        <FoundersNote
          avatarUrl="/images/founder-avatar.webp"
          signature={<FounderSignature />}
        >
          <Text>
            I'm Radzion, the creator of Increaser. This project started as my
            own quest to tackle the productivity challenges that knowledge
            workers and students face in today's digital age. As a software
            engineer, I too struggled to find that perfect balance between work
            and life, which led me to develop Increaser.
          </Text>
          <Text>
            Increaser is built on a straightforward yet effective concept: using
            structured time to enhance focus and productivity. It's not just
            about managing your tasks; it's about optimizing the way you work
            and live. This tool is my solution to the common pitfalls of remote
            work and the distractions of a hyper-connected world.
          </Text>
          <Text>
            As a web app accessible on any device, Increaser is a personal
            assistant for your work life. It's an extension of my own practices,
            refined over years of balancing a full-time job with the development
            of this app.
          </Text>
          <Text>
            As a web app accessible on any device, Increaser is a personal
            assistant for your work life. It's an extension of my own practices,
            refined over years of balancing a full-time job with the development
            of this app.
          </Text>
          <Text>
            I invite you to try Increaser, not just as a tool but as a new
            approach to productivity. Your feedback is invaluable, helping shape
            Increaser's future and ensuring it continues to meet your needs.
          </Text>
          <Text>
            Join us in this journey to smarter, more efficient work habits.
            Together, let's make every minute productive.
          </Text>
        </FoundersNote>
      </WebsiteSliceContent>
    </WebsiteSlice>
  )
}

import { HStack, VStack } from "@lib/ui/layout/Stack"
import styled from "styled-components"
import { getColor } from "@lib/ui/theme/getters"
import { CoverImage } from "@lib/ui/images/CoverImage"
import { sameDimensions } from "@lib/ui/css/sameDimensions"
import { SafeImage } from "@lib/ui/images/SafeImage"
import { round } from "@lib/ui/css/round"
import { IconWrapper } from "@lib/ui/icons/IconWrapper"
import { ComponentWithChildrenProps } from "../props"
import { ReactNode } from "react"

const Container = styled(VStack)`
  gap: 16px;
  max-width: 620px;
  line-height: 1.5;
`

const Image = styled(CoverImage)`
  ${sameDimensions(64)}
  ${round};
  border: 2px solid ${getColor("primary")};
  @media (max-width: 600px) {
    ${sameDimensions(36)}
  }
`

const SignutureWrapper = styled(IconWrapper)`
  color: ${getColor("contrast")};
  font-size: 32px;
  @media (max-width: 600px) {
    font-size: 24px;
  }
`

type FoundersNoteProps = ComponentWithChildrenProps & {
  avatarUrl: string
  signature: ReactNode
}

export const FoundersNote = ({
  children,
  avatarUrl,
  signature,
}: FoundersNoteProps) => {
  return (
    <Container>
      {children}
      <HStack gap={20} alignItems="center">
        <SafeImage
          fallback={null}
          src={avatarUrl}
          render={(props) => <Image alt="Founder" {...props} />}
        />
        <SignutureWrapper>{signature}</SignutureWrapper>
      </HStack>
    </Container>
  )
}

import { WebsiteSectionHeader } from "@lib/ui/website/WebsiteSectionHeader"
import { WebsiteSlice } from "@lib/ui/website/WebsiteSlice"
import { WebsiteSliceContent } from "@lib/ui/website/WebsiteSliceContent"
import { productName } from "@increaser/config"
import { TextButton } from "@lib/ui/buttons/TextButton"
import { FaqItem } from "@lib/ui/website/faq/FaqItem"
import { FaqContainer } from "@lib/ui/website/faq/FaqContainer"
import { AppLink } from "../navigation/AppLink"
import { AppPath } from "@increaser/ui/navigation/AppPath"

export const FaqSlice = () => {
  return (
    <WebsiteSlice>
      <WebsiteSliceContent>
        <WebsiteSectionHeader
          title="Questions? We're Here to Help"
          subtitle="Explore our FAQs and feel free to reach out directly to the founder for personalized answers."
        />
        <FaqContainer>
          <FaqItem title={`Will there be a mobile app for ${productName}?`}>
            At {productName}, we've optimized our platform to function
            seamlessly on all devices, so a separate mobile app isn't necessary.{" "}
            {productName} is available as a Progressive Web App (PWA), allowing
            you to 'install' it directly on your device for an app-like
            experience. To do this, simply navigate to{" "}
            <AppLink to={AppPath.Home}>
              <TextButton text={productName} />
            </AppLink>{" "}
            on your mobile browser, and select 'Add to Home Screen' from your
            browser's menu. This will add {productName} to your device, making
            it accessible just like a regular app, but without the need to
            download it from an app store.
          </FaqItem>
          <FaqItem
            title={`Is there a desktop app available for ${productName}?`}
          >
            We currently do not offer a separate desktop application for
            {productName} as our web platform is fully optimized for desktop usage.
            By accessing {productName} through your preferred web browser, you can
            enjoy all the functionalities and features without the need for a separate
            download. This approach ensures you always have access to the latest
            updates and features without any additional installation.
          </FaqItem>
          <FaqItem
            title={`What makes ${productName} different from other time management tools?`}
          >
            {productName} stands out from other time management tools through
            its unique focus on enhancing the productivity of remote workers.
            Unlike generic time trackers, {productName} is specifically tailored
            to the needs and challenges of remote work environments, offering
            features that help manage distractions, track time spent on various
            projects, and establish a balanced work-life integration. Its
            user-friendly interface is designed for simplicity and
            effectiveness, enabling users to easily set and track personal
            goals. Moreover, {productName}'s emphasis on developing healthy work
            habits and providing insights into time allocation makes it more
            than just a tool; it's a comprehensive system for personal and
            professional growth, offering a customized approach to productivity
            that resonates with the evolving dynamics of modern remote work.
          </FaqItem>
          <FaqItem title="How does the time tracking feature work?">
            {productName}'s time tracking feature is centered around 'focus
            sessions' where you start a timer and select a project, seamlessly
            recording your work in the system. This method not only tracks your
            time but aligns it with specific project objectives. For times when
            you might forget to start a timer, {productName} allows the addition
            of sessions manually, ensuring all your efforts are accounted for.
            To provide comprehensive insights into your productivity,{" "}
            {productName} offers detailed session reports for the last 30 days
            and project-based reports for previous weeks and months, allowing
            you to analyze and optimize your time management effectively.
          </FaqItem>
          <FaqItem title={`Who is ${productName} ideal for?`}>
            {productName} is designed to cater to a wide range of knowledge
            workers, particularly those who spend a significant portion of their
            workday on a computer. It's an especially valuable tool for remote
            workers, who often have more flexibility and control over their
            time, allowing them to optimize their schedules more effectively.
            However, Increaser is not just for remote professionals;
            office-based employees will also find it beneficial for managing
            their time and tasks efficiently. Additionally, Increaser is an
            excellent resource for students who are looking to improve their
            time organization and focus. Whether you're working from home, the
            office, or studying, Increaser provides the tools and insights
            needed to enhance productivity and focus across various work
            environments
          </FaqItem>
        </FaqContainer>
      </WebsiteSliceContent>
    </WebsiteSlice>
  )
}

import styled from "styled-components"
import { VStack } from "../../layout/Stack"

export const FaqContainer = styled(VStack)`
  gap: 16px;
  max-width: 800px;
  width: 100%;
`

import { ExpandableSection } from "../../layout/ExpandableSection"
import { ComponentWithChildrenProps, TitledComponentProps } from "../../props"
import { Text } from "../../text"

type FaqItemProps = ComponentWithChildrenProps & TitledComponentProps

export const FaqItem = ({ children, title }: FaqItemProps) => (
  <ExpandableSection title={title}>
    <Text height="large">{children}</Text>
  </ExpandableSection>
)

import { ComponentWithChildrenProps, TitledComponentProps } from "../props"
import { HStack, VStack } from "./Stack"
import styled, { css } from "styled-components"
import { interactive } from "../css/interactive"
import { getColor } from "../theme/getters"
import { useBoolean } from "../hooks/useBoolean"
import { transition } from "../css/transition"
import { ChevronDownIcon } from "../icons/ChevronDownIcon"
import { verticalPadding } from "../css/verticalPadding"
import { IconWrapper } from "../icons/IconWrapper"
import { Text } from "../text"
import { ElementSizeAware } from "../base/ElementSizeAware"

type ExpandableSectionProps = TitledComponentProps & ComponentWithChildrenProps

const Container = styled(VStack)`
  gap: 4px;
`

const Icon = styled(IconWrapper)<{ isOpen: boolean }>`
  font-size: 20px;
  ${transition};
  transform: rotateZ(${({ isOpen }) => (isOpen ? "-180deg" : "0deg")});
  color: ${getColor("textSupporting")};
`

const Header = styled(HStack)`
  gap: 20px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  ${verticalPadding(8)};
  ${interactive};
  font-weight: 500;
  &:hover ${Icon} {
    color: ${getColor("contrast")};
  }
`

const Content = styled.div<{ isOpen: boolean }>`
  ${transition};
  ${({ isOpen }) =>
    isOpen
      ? css`
          opacity: 1;
        `
      : css`
          opacity: 0;
          overflow: hidden;
          transform: translateY(-8px);
          visibility: hidden;
        `}
`

export const ExpandableSection = ({
  title,
  children,
}: ExpandableSectionProps) => {
  const [isExpanded, { toggle }] = useBoolean(false)
  return (
    <Container>
      <Header onClick={toggle}>
        <Text weight="semibold" color="contrast">
          {title}
        </Text>
        <Icon isOpen={isExpanded}>
          <ChevronDownIcon />
        </Icon>
      </Header>
      <ElementSizeAware
        render={({ setElement, size }) => {
          return (
            <Content
              style={{ height: isExpanded ? size?.height : 0 }}
              isOpen={isExpanded}
              aria-hidden={!isExpanded}
            >
              <div ref={setElement}>{children}</div>
            </Content>
          )
        }}
      />
    </Container>
  )
}

import { darkTheme } from "@lib/ui/theme/darkTheme"
import { WebsiteSectionHeader } from "@lib/ui/website/WebsiteSectionHeader"
import { WebsiteSliceContent } from "@lib/ui/website/WebsiteSliceContent"
import { ThemeProvider } from "styled-components"
import { PrimaryCallToAction } from "./PrimaryCallToAction"
import { ClosingArgumentBackground } from "@lib/ui/website/ClosingArgumentBackground"

export const ClosingArgumentSlice = () => {
  return (
    <ThemeProvider theme={darkTheme}>
      <ClosingArgumentBackground imageUrl="images/closing-argument.webp">
        <WebsiteSliceContent style={{ gap: 28, paddingBottom: 200 }}>
          <WebsiteSectionHeader title="Unleash Your Potential" />
          <PrimaryCallToAction kind="reversed" />
        </WebsiteSliceContent>
      </ClosingArgumentBackground>
    </ThemeProvider>
  )
}

import { centerContent } from "@lib/ui/css/centerContent"
import { toSizeUnit } from "@lib/ui/css/toSizeUnit"
import { websiteConfig } from "@lib/ui/website/config"
import styled from "styled-components"
import { getColor } from "@lib/ui/theme/getters"

export const ClosingArgumentBackground = styled.div<{ imageUrl: string }>`
  width: 100%;
  min-height: calc(100vh - ${toSizeUnit(websiteConfig.headerHeight)});
  ${centerContent}
  position: relative;
  overflow: hidden;
  background-image: url(${(props) => props.imageUrl});
  background-size: cover;
  background-position: center;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      ${getColor("background")} 0%,
      ${getColor("transparent")} 25%,
      ${getColor("transparent")} 80%,
      ${getColor("background")} 100%
    );
    pointer-events: none;
  }
`