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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 3 commits into from
Oct 31, 2024
Merged

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

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a425955
Migrate Translatathon/TranslatathonInANutshell.tsx to shadcs/tailwind
Sambit03 Oct 5, 2024
f25e176
align items
pettinarip Oct 31, 2024
131342c
Update src/components/Translatathon/TranslatathonInANutshell.tsx
pettinarip Oct 31, 2024
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
109 changes: 39 additions & 70 deletions src/components/Translatathon/TranslatathonInANutshell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,51 @@
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-center gap-8 p-8 md:flex-row">
<Flex className="w-full flex-col gap-2 self-center">
<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}
className="w-[327px]"
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}
className="w-[327px]"
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 gap-2 self-center">
<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 +54,31 @@ 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 gap-2 self-center">
<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}
className="w-[327px]"
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