-
Notifications
You must be signed in to change notification settings - Fork 468
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7209c0b
commit 4eb9506
Showing
2 changed files
with
59 additions
and
53 deletions.
There are no files selected for viewing
Binary file modified
BIN
+400 KB
(550%)
apps/web/src/components/base-org/root/BuildAndRewardSection/assets/cubes.webm
Binary file not shown.
112 changes: 59 additions & 53 deletions
112
apps/web/src/components/base-org/root/BuildAndRewardSection/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,60 +1,66 @@ | ||
| 'use client'; | ||
| import { useErrors } from 'apps/web/contexts/Errors'; | ||
| import Title from 'apps/web/src/components/base-org/typography/Title'; | ||
| import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/types'; | ||
|
|
||
| import Text from 'apps/web/src/components/base-org/typography/Text'; | ||
| import Button from 'apps/web/src/components/base-org/Button'; | ||
| import { ButtonVariants } from 'apps/web/src/components/base-org/Button/types'; | ||
| import { useCallback, useRef } from 'react'; | ||
| import cubes from './assets/cubes.webm'; | ||
| import Link from 'apps/web/src/components/Link'; | ||
| "use client"; | ||
| import { useErrors } from "apps/web/contexts/Errors"; | ||
| import Title from "apps/web/src/components/base-org/typography/Title"; | ||
| import { TitleLevel } from "apps/web/src/components/base-org/typography/Title/types"; | ||
| import Text from "apps/web/src/components/base-org/typography/Text"; | ||
| import Button from "apps/web/src/components/base-org/Button"; | ||
| import { ButtonVariants } from "apps/web/src/components/base-org/Button/types"; | ||
| import { useCallback, useRef } from "react"; | ||
| import cubes from "./assets/cubes.webm"; | ||
| import Link from "apps/web/src/components/Link"; | ||
|
|
||
| export default function BuildAndRewardSection() { | ||
| const videoRef = useRef<HTMLVideoElement>(null); | ||
| const { logError } = useErrors(); | ||
| const playVideo = useCallback(() => { | ||
| if (!videoRef.current) return; | ||
| const videoRef = useRef<HTMLVideoElement>(null); | ||
| const { logError } = useErrors(); | ||
| const playVideo = useCallback(() => { | ||
| if (!videoRef.current) return; | ||
|
|
||
| videoRef.current.play().catch((error) => { | ||
| logError(error, 'failed to play video'); | ||
| }); | ||
| }, [logError]); | ||
| videoRef.current.play().catch((error) => { | ||
| logError(error, "failed to play video"); | ||
| }); | ||
| }, [logError]); | ||
|
|
||
| return ( | ||
| <section> | ||
| <div className="mb-12 mt-8 flex w-full flex-col items-center gap-4 md:flex-row"> | ||
| <div className="relative flex w-full flex-row gap-4" onMouseEnter={playVideo}> | ||
| <video | ||
| src={cubes} | ||
| muted | ||
| playsInline | ||
| className="mx-auto p-2 motion-reduce:hidden" | ||
| autoPlay={false} | ||
| ref={videoRef} | ||
| preload="auto" | ||
| /> | ||
| </div> | ||
| return ( | ||
| <section> | ||
| <div className="mb-12 mt-8 flex w-full flex-col items-center gap-4 md:flex-row"> | ||
| <div | ||
| className="relative flex w-full flex-row gap-4" | ||
| onMouseEnter={playVideo} | ||
| > | ||
| <video | ||
| src={cubes} | ||
| muted | ||
| playsInline | ||
| className="mx-auto p-2 motion-reduce:hidden" | ||
| autoPlay={false} | ||
| ref={videoRef} | ||
| preload="auto" | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="flex w-full flex-col gap-4 md:pl-20"> | ||
| <Title level={TitleLevel.Display2} className="text-[#E3E7E9]"> | ||
| Build and you will be rewarded | ||
| </Title> | ||
| <Text> | ||
| Base supports passionate builders making apps for everyday life with grants, marketing, | ||
| and as part of the Superchain, Base builders are eligible for consideration in | ||
| Optimism's retroactive public goods funding. | ||
| </Text> | ||
| <div className="flex w-full flex-col gap-4 md:pl-20"> | ||
| <Title level={TitleLevel.Display2} className="text-[#E3E7E9]"> | ||
| Build and you will be rewarded | ||
| </Title> | ||
| <Text> | ||
| Base supports passionate builders making apps for everyday life with | ||
| grants, marketing, and as part of the Superchain, Base builders are | ||
| eligible for consideration in Optimism's retroactive public | ||
| goods funding. | ||
| </Text> | ||
|
|
||
| <div> | ||
| <Link href="https://rounds.wtf/base-builds" target="_blank"> | ||
| <Button variant={ButtonVariants.Primary} iconName="baseOrgDiagonalUpArrow"> | ||
| Get rewarded | ||
| </Button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| <div> | ||
| <Link href="https://rounds.wtf/base-builds" target="_blank"> | ||
| <Button | ||
| variant={ButtonVariants.Primary} | ||
| iconName="baseOrgDiagonalUpArrow" | ||
| > | ||
| Get rewarded | ||
| </Button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } |