Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate Translatathon/TranslatathonInANutshell.tsx to shadcs/tailwind #14072

Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 36 additions & 70 deletions src/components/Translatathon/TranslatathonInANutshell.tsx
Original file line number Diff line number Diff line change
@@ -1,77 +1,49 @@
import { Flex, Heading, Text } from "@chakra-ui/react"

import { ButtonLink } from "@/components/Buttons"
import { Image } from "@/components/Image"

import Link from "../Link"
import { TwImage } from "@/components/Image"
import { ButtonLink } from "@/components/ui/buttons/Button"
import { Flex } from "@/components/ui/flex"
import Link from "@/components/ui/Link"

import dogeImage from "@/public/images/doge-computer.png"
import futureImage from "@/public/images/future_transparent.png"
import settlementImage from "@/public/images/translatathon/settlement.png"

export const TranslatathonInANutshell = () => {
return (
<Flex
direction="column"
py={16}
px={8}
bgGradient="linear-gradient(
49.21deg,
rgba(127, 127, 213, 0.2) 19.87%,
rgba(134, 168, 231, 0.2) 58.46%,
rgba(145, 234, 228, 0.2) 97.05%
)"
>
<Flex m="auto">
<Heading as="h2" fontSize="3xl" mb={8}>
Translatathon essentials
</Heading>
<Flex className="flex-col bg-gradient-to-r from-[#7f7fd5]/20 via-[#86a8e7]/20 to-[#91eae4]/20 px-8 py-16">
<Flex className="m-auto">
<h2 className="mb-8 text-3xl">Translatathon essentials</h2>
</Flex>
<Flex
w="full"
direction={{ base: "column", md: "row" }}
align="flex-start"
p={8}
gap={8}
>
<Flex w="full" direction="column" gap={2} alignSelf="center">
<Heading as="h3" fontSize="2xl">
Earn points
</Heading>
<Text>

<Flex className="w-full flex-col items-start gap-8 p-8 md:flex-row">
<Flex className="w-full flex-col justify-center gap-2">
pettinarip marked this conversation as resolved.
Show resolved Hide resolved
<h3 className="text-2xl">Earn points</h3>
<p>
Translate ethereum.org and ecosystem content to earn points and
compete with other participants. 1 translated word = 1 point
</Text>
</p>
</Flex>
<Flex w="full" justifyContent="center">
<Image
<Flex className="w-full justify-center">
<TwImage
src={settlementImage}
alt=""
w="327"
width={327}
style={{ objectFit: "contain" }}
/>
</Flex>
</Flex>
<Flex
w="full"
direction={{ base: "column-reverse", md: "row" }}
align="flex-start"
p={8}
gap={8}
>
<Flex w="full" justifyContent="center">
<Image

<Flex className="w-full flex-col-reverse items-start gap-8 p-8 md:flex-row">
<Flex className="w-full justify-center">
<TwImage
src={futureImage}
alt=""
w="327"
width={327}
style={{ objectFit: "contain" }}
/>
</Flex>
<Flex w="full" direction="column" gap={2} alignSelf="center">
<Heading as="h3" fontSize="2xl">
Human translations only
</Heading>
<Text>
<Flex className="w-full flex-col justify-center gap-2">
<h3 className="text-2xl">Human translations only</h3>
<p>
Using machine translation is forbidden! All translations will be
reviewed and evaluated, and participants using machine translation
will be automatically disqualified and not be eligible to claim
Expand All @@ -80,36 +52,30 @@ export const TranslatathonInANutshell = () => {
terms and conditions
</Link>
)
</Text>
</p>
</Flex>
</Flex>
<Flex
w="full"
direction={{ base: "column", md: "row" }}
align="flex-start"
p={8}
gap={8}
>
<Flex w="full" direction="column" gap={2} alignSelf="center">
<Heading as="h3" fontSize="2xl">
Focus on untranslated lines only
</Heading>
<Text>

<Flex className="w-full flex-col items-start gap-8 p-8 md:flex-row">
<Flex className="w-full flex-col justify-center gap-2">
<h3 className="text-2xl">Focus on untranslated lines only</h3>
<p>
Translate strings that do not have any suggested translations yet.
Do not translate strings that have already been translated and
approved
</Text>
</p>
</Flex>
<Flex w="full" justifyContent="center">
<Image
<Flex className="w-full justify-center">
<TwImage
src={dogeImage}
alt=""
w="327"
width={327}
style={{ objectFit: "contain" }}
/>
</Flex>
</Flex>
<Flex width="full" justifyContent="center">

<Flex className="w-full justify-center">
<ButtonLink href="/contributing/translation-program/translatathon/details">
Details and rules
</ButtonLink>
Expand Down
Loading