mirror of
https://github.com/supabase/supabase.git
synced 2026-10-15 14:19:11 +03:00
chore: small ui update
Update icon background color & section border & Update header text & badge rounded corners
This commit is contained in:
Isaiah Hamilton committed
1 parent
b5055acc24
commit
2894eb0fdd
1 file changed
+219
-219
+219
-219
@@ -78,12 +78,11 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
|
||||
<div className="text-scale-1200">
|
||||
<div className="container relative mx-auto px-6 py-10 lg:pt-12 lg:px-16 xl:px-20 text-center space-y-4">
|
||||
<span className="text-sm text-brand-900 md:text-base">Careers</span>
|
||||
<h1 className="text-3xl md:text-4xl xl:text-5xl lg:max-w-3xl lg:mx-auto">
|
||||
Help us build the best developer platform in the world
|
||||
<h1 className="text-3xl md:text-4xl xl:text-5xl lg:max-w-2xl xl:max-w-3xl lg:mx-auto">
|
||||
We’re on a mission to build the best developer platform
|
||||
</h1>
|
||||
<p className="text-sm md:text-base text-scale-1000 max-w-sm sm:max-w-md md:max-w-lg mx-auto">
|
||||
Explore remote opportunities and join our mission to become the world's most
|
||||
productive developer platform.
|
||||
Explore remote possibilities and join our team to help us achieve it.
|
||||
</p>
|
||||
<Button
|
||||
as="a"
|
||||
@@ -114,229 +113,230 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
|
||||
</div>
|
||||
</SectionContainer>
|
||||
|
||||
<div className="h-[2px] bg-gradient-to-r from-scale-100 via-scale-700 to-scale-100"></div>
|
||||
<div className="bg-scale-100 overflow-clip">
|
||||
<SectionContainer className="!py-0 !pb-16 lg:!pt-16">
|
||||
<div className="lg:flex lg:h-[500px]">
|
||||
<div className="relative aspect-square -top-[110px] -left-[200px] w-[575px] sm:-top-[150px] sm:-left-[300px] sm:w-[850px] lg:-top-[225px] lg:-left-[330px] lg:w-[800px] lg:h-[800px] xl:-left-[200px] xl:-top-[210px] xl:w-[1000px]">
|
||||
<Globe />
|
||||
</div>
|
||||
<div className="relative -top-[75px] lg:top-0 lg:-left-[325px] xl:-top-[45px] xl:-left-[150px] 2xl:-left-[50px] lg:min-w-[400px] lg:h-fit xl:mt-10">
|
||||
<h1 className="text-2xl sm:text-3xl xl:text-4xl max-w-[300px] lg:max-w-xs">
|
||||
We work together, wherever we are
|
||||
</h1>
|
||||
<p className="text-scale-1100 mt-4 text-xs sm:text-sm lg:text-base md:w-5/6 lg:w-full">
|
||||
Working in a globally distributed team is rewarding but has its challenges. We
|
||||
are across many different timezones, so we use tools like Notion, Slack, and
|
||||
Discord to stay connected to our team, and our community.
|
||||
</p>
|
||||
<div className="max-w-[300px] sm:max-w-md lg:max-w-md mt-20">
|
||||
<div className="border-t-2 border-brand-900 w-4/12"></div>
|
||||
<h1 className="text-2xl sm:text-3xl lg:text-4xl pt-2">
|
||||
We deeply believe in the efficacy of collaborative open source
|
||||
<div className="py-[1.25px] bg-gradient-to-r from-scale-100 via-scale-700 to-scale-100">
|
||||
<div className="bg-scale-100 overflow-clip">
|
||||
<SectionContainer className="!py-0 !pb-16 lg:!pt-16">
|
||||
<div className="lg:flex lg:h-[500px]">
|
||||
<div className="relative aspect-square -top-[110px] -left-[200px] w-[575px] sm:-top-[150px] sm:-left-[300px] sm:w-[850px] lg:-top-[225px] lg:-left-[330px] lg:w-[800px] lg:h-[800px] xl:-left-[200px] xl:-top-[210px] xl:w-[1000px]">
|
||||
<Globe />
|
||||
</div>
|
||||
<div className="relative -top-[75px] lg:top-0 lg:-left-[325px] xl:-top-[45px] xl:-left-[150px] 2xl:-left-[50px] lg:min-w-[400px] lg:h-fit xl:mt-10">
|
||||
<h1 className="text-2xl sm:text-3xl xl:text-4xl max-w-[300px] lg:max-w-xs">
|
||||
We work together, wherever we are
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SectionContainer>
|
||||
|
||||
<SectionContainer>
|
||||
<div className="md:flex md:gap-6">
|
||||
<div className="md:w-1/2">
|
||||
<div>
|
||||
<h1 className="text-2xl sm:text-3xl xl:text-4xl">What is Supabase</h1>
|
||||
<p className="text-scale-1100 text-xs sm:text-sm lg:text-base pt-2 sm:max-w-md xl:max-w-lg">
|
||||
Supabase is an open source Firebase alternative, built by developers for
|
||||
developers. Supabase adds auth, realtime, storage, restful APIs, and edge
|
||||
functions to Postgres without a single line of code. Supabase was born-remote.
|
||||
Having a globally distributed, open source company is our secret weapon to
|
||||
hiring top-tier talent.
|
||||
<p className="text-scale-1100 mt-4 text-xs sm:text-sm lg:text-base md:w-5/6 lg:w-full">
|
||||
Working in a globally distributed team is rewarding but has its challenges. We
|
||||
are across many different timezones, so we use tools like Notion, Slack, and
|
||||
Discord to stay connected to our team, and our community.
|
||||
</p>
|
||||
</div>
|
||||
<div className="md:w-full rounded-md mt-10 md:mt-36 lg:mt-40">
|
||||
<div className="relative w-full aspect-[148/125]">
|
||||
<Image
|
||||
src="/images/career/1.jpg"
|
||||
alt="team photo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid justify-items-end">
|
||||
<div className="w-5/6 rounded-md mt-6">
|
||||
<div className="relative w-full aspect-[29/22]">
|
||||
<Image
|
||||
src="/images/career/2.jpg"
|
||||
alt="team photo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded-md"
|
||||
/>
|
||||
</div>
|
||||
<div className="max-w-[300px] sm:max-w-md lg:max-w-md mt-20">
|
||||
<div className="border-t-2 border-brand-900 w-4/12"></div>
|
||||
<h1 className="text-2xl sm:text-3xl lg:text-4xl pt-2">
|
||||
We deeply believe in the efficacy of collaborative open source
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 md:mt-0 md:w-1/2">
|
||||
<div className="w-full rounded-md">
|
||||
<div className="relative w-full aspect-[137/110]">
|
||||
<Image
|
||||
src="/images/career/3.jpg"
|
||||
alt="team photo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-6 mt-6">
|
||||
<div className="w-full rounded-md">
|
||||
<div className="relative w-full aspect-[142/189]">
|
||||
<Image
|
||||
src="/images/career/4.jpg"
|
||||
alt="team photo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full rounded-md">
|
||||
<div className="relative w-full aspect-[142/189]">
|
||||
<Image
|
||||
src="/images/career/5.jpg"
|
||||
alt="team photo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-5/6 rounded-md mt-6">
|
||||
<div className="relative w-full aspect-[41/43]">
|
||||
<Image
|
||||
src="/images/career/6.jpg"
|
||||
alt="team photo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SectionContainer>
|
||||
</SectionContainer>
|
||||
|
||||
<SectionContainer>
|
||||
<h1 className="text-2xl sm:text-3xl xl:text-4xl">Human powered</h1>
|
||||
<p className="text-scale-1100 text-xs sm:text-sm lg:text-base pt-3 sm:w-3/5 lg:max-w-sm">
|
||||
As a completely remote and asynchronous team, we focus on these five traits to keep
|
||||
our team effective:
|
||||
</p>
|
||||
<div className="sm:flex items-start justify-between pt-10 space-y-6 sm:space-y-0 md:space-x-4">
|
||||
{career.humanPowered.map(
|
||||
(human: { icon: string; title: string; text: string }, i: number) => {
|
||||
<SectionContainer>
|
||||
<div className="md:flex md:gap-6">
|
||||
<div className="md:w-1/2">
|
||||
<div>
|
||||
<h1 className="text-2xl sm:text-3xl xl:text-4xl">What is Supabase</h1>
|
||||
<p className="text-scale-1100 text-xs sm:text-sm lg:text-base pt-2 sm:max-w-md xl:max-w-lg">
|
||||
Supabase is an open source Firebase alternative, built by developers for
|
||||
developers. Supabase adds auth, realtime, storage, restful APIs, and edge
|
||||
functions to Postgres without a single line of code. Supabase was
|
||||
born-remote. Having a globally distributed, open source company is our
|
||||
secret weapon to hiring top-tier talent.
|
||||
</p>
|
||||
</div>
|
||||
<div className="md:w-full rounded-md mt-10 md:mt-36 lg:mt-40">
|
||||
<div className="relative w-full aspect-[148/125]">
|
||||
<Image
|
||||
src="/images/career/1.jpg"
|
||||
alt="team photo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid justify-items-end">
|
||||
<div className="w-5/6 rounded-md mt-6">
|
||||
<div className="relative w-full aspect-[29/22]">
|
||||
<Image
|
||||
src="/images/career/2.jpg"
|
||||
alt="team photo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 md:mt-0 md:w-1/2">
|
||||
<div className="w-full rounded-md">
|
||||
<div className="relative w-full aspect-[137/110]">
|
||||
<Image
|
||||
src="/images/career/3.jpg"
|
||||
alt="team photo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-6 mt-6">
|
||||
<div className="w-full rounded-md">
|
||||
<div className="relative w-full aspect-[142/189]">
|
||||
<Image
|
||||
src="/images/career/4.jpg"
|
||||
alt="team photo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full rounded-md">
|
||||
<div className="relative w-full aspect-[142/189]">
|
||||
<Image
|
||||
src="/images/career/5.jpg"
|
||||
alt="team photo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-5/6 rounded-md mt-6">
|
||||
<div className="relative w-full aspect-[41/43]">
|
||||
<Image
|
||||
src="/images/career/6.jpg"
|
||||
alt="team photo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SectionContainer>
|
||||
|
||||
<SectionContainer>
|
||||
<h1 className="text-2xl sm:text-3xl xl:text-4xl">Human powered</h1>
|
||||
<p className="text-scale-1100 text-xs sm:text-sm lg:text-base pt-3 sm:w-3/5 lg:max-w-sm">
|
||||
As a completely remote and asynchronous team, we focus on these five traits to
|
||||
keep our team effective:
|
||||
</p>
|
||||
<div className="sm:flex items-start justify-between pt-10 space-y-6 sm:space-y-0 md:space-x-4">
|
||||
{career.humanPowered.map(
|
||||
(human: { icon: string; title: string; text: string }, i: number) => {
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="flex sm:block items-center space-x-6 sm:space-x-0 sm:space-y-4 md:w-full"
|
||||
>
|
||||
<div className="w-12 h-12 sm:w-10 sm:h-10 lg:w-12 lg:h-12 bg-brand-500 dark:bg-brand-600 rounded-lg flex items-center">
|
||||
<div className="relative w-[80%] h-[80%] mx-auto">
|
||||
<Image
|
||||
src={`/images/career/icons/${human.icon}${
|
||||
isDarkMode ? '-dark' : '-light'
|
||||
}.svg`}
|
||||
alt={`${human.icon} icon`}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sm:max-w-[120px] md:max-w-[150px] lg:max-w-[230px]">
|
||||
<h2 className="text-sm md:text-md xl:text-lg md:pt-4 lg:pt-0">
|
||||
{human.title}
|
||||
</h2>
|
||||
<p className="text-scale-1100 text-xs lg:text-sm">{human.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</SectionContainer>
|
||||
|
||||
<SectionContainer className="!pb-0">
|
||||
<div className="w-14 h-14 bg-brand-500 dark:bg-brand-600 rounded-lg flex items-center mx-auto mb-6">
|
||||
<div className="relative w-[80%] h-[80%] mx-auto">
|
||||
<Image
|
||||
src={`/images/career/icons/open_source${isDarkMode ? '-dark' : '-light'}.svg`}
|
||||
alt="open source icon"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl sm:text-3xl xl:text-4xl max-w-[300px] xl:max-w-none mx-auto">
|
||||
1,000 + Contributors building Supabase
|
||||
</h1>
|
||||
<p className="text-scale-1100 text-xs sm:text-sm lg:text-base sm:max-w-lg lg:max-w-2xl mx-auto pt-3">
|
||||
We're building a community of communities, bringing together developers from
|
||||
many different backgrounds, as well as new developers looking to get involved
|
||||
with open source. We love celebrating everyone who contributes their time to the
|
||||
Supabase mission.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[1080px] h-[370px] mx-auto sm:mt-10 md:mt-16 lg:mt-28 2xl:mt-60">
|
||||
{contributors.map((contributor: any, i: number) => {
|
||||
return (
|
||||
<div
|
||||
className={`${
|
||||
Styles[`contributors-${i}`]
|
||||
} absolute w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 rounded-full border-[1.5px] border-scale-600 z-10`}
|
||||
key={i}
|
||||
className="flex sm:block items-center space-x-6 sm:space-x-0 sm:space-y-4 md:w-full"
|
||||
>
|
||||
<div className="w-12 h-12 sm:w-10 sm:h-10 lg:w-12 lg:h-12 bg-brand-500 dark:bg-brand-700 rounded-lg flex items-center">
|
||||
<div className="relative w-[80%] h-[80%] mx-auto">
|
||||
<Image
|
||||
src={`/images/career/icons/${human.icon}${
|
||||
isDarkMode ? '-dark' : '-light'
|
||||
}.svg`}
|
||||
alt={`${human.icon} icon`}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sm:max-w-[120px] md:max-w-[150px] lg:max-w-[230px]">
|
||||
<h2 className="text-sm md:text-md xl:text-lg md:pt-4 lg:pt-0">
|
||||
{human.title}
|
||||
</h2>
|
||||
<p className="text-scale-1100 text-xs lg:text-sm">{human.text}</p>
|
||||
</div>
|
||||
<Link href={contributor.html_url}>
|
||||
<a target="_blank">
|
||||
<div className="relative w-full h-full">
|
||||
<Image
|
||||
src={contributor.avatar_url}
|
||||
alt={`${contributor.login} github avatar`}
|
||||
className="rounded-full"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</SectionContainer>
|
||||
|
||||
<SectionContainer className="!pb-0">
|
||||
<div className="w-14 h-14 bg-brand-500 dark:bg-brand-700 rounded-lg flex items-center mx-auto mb-6">
|
||||
<div className="relative w-[80%] h-[80%] mx-auto">
|
||||
<Image
|
||||
src={`/images/career/icons/open_source${isDarkMode ? '-dark' : '-light'}.svg`}
|
||||
alt="open source icon"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
})}
|
||||
<div
|
||||
className={`${Styles['contributors-bg-circle']} w-[100%] lg:w-[80%] left-[0%] lg:left-[10%] -bottom-[30%] xs:-bottom-[36%] sm:-bottom-[52%] md:-bottom-[64%] lg:-bottom-[80%] xl:-bottom-[100%]`}
|
||||
>
|
||||
<div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
|
||||
</div>
|
||||
<div
|
||||
className={`${Styles['contributors-bg-circle']} w-[80%] lg:w-[60%] left-[10%] lg:left-[20%] -bottom-[25%] xs:-bottom-[30%] sm:-bottom-[44%] md:-bottom-[54%] lg:-bottom-[60%] xl:-bottom-[75%]`}
|
||||
>
|
||||
<div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
|
||||
</div>
|
||||
<div
|
||||
className={`${Styles['contributors-bg-circle']} w-[60%] lg:w-[40%] left-[20%] lg:left-[30%] -bottom-[20%] xs:-bottom-[25%] sm:-bottom-[38%] md:-bottom-[44%] lg:-bottom-[40%] xl:-bottom-[50%]`}
|
||||
>
|
||||
<div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
|
||||
</div>
|
||||
<div
|
||||
className={`${Styles['contributors-bg-circle']} w-[40%] lg:w-[20%] left-[30%] lg:left-[40%] -bottom-[15%] xs:-bottom-[19%] sm:-bottom-[30%] md:-bottom-[34%] lg:-bottom-[20%] xl:-bottom-[25%]`}
|
||||
>
|
||||
<div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl sm:text-3xl xl:text-4xl max-w-[300px] xl:max-w-none mx-auto">
|
||||
1,000 + Contributors building Supabase
|
||||
</h1>
|
||||
<p className="text-scale-1100 text-xs sm:text-sm lg:text-base sm:max-w-lg lg:max-w-2xl mx-auto pt-3">
|
||||
We're building a community of communities, bringing together developers from many
|
||||
different backgrounds, as well as new developers looking to get involved with open
|
||||
source. We love celebrating everyone who contributes their time to the Supabase
|
||||
mission.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[1080px] h-[370px] mx-auto sm:mt-10 md:mt-16 lg:mt-28 2xl:mt-60">
|
||||
{contributors.map((contributor: any, i: number) => {
|
||||
return (
|
||||
<div
|
||||
className={`${
|
||||
Styles[`contributors-${i}`]
|
||||
} absolute w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 rounded-full border-[1.5px] border-scale-600 z-10`}
|
||||
key={i}
|
||||
>
|
||||
<Link href={contributor.html_url}>
|
||||
<a target="_blank">
|
||||
<div className="relative w-full h-full">
|
||||
<Image
|
||||
src={contributor.avatar_url}
|
||||
alt={`${contributor.login} github avatar`}
|
||||
className="rounded-full"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<div
|
||||
className={`${Styles['contributors-bg-circle']} w-[100%] lg:w-[80%] left-[0%] lg:left-[10%] -bottom-[30%] xs:-bottom-[36%] sm:-bottom-[52%] md:-bottom-[64%] lg:-bottom-[80%] xl:-bottom-[100%]`}
|
||||
>
|
||||
<div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
|
||||
</div>
|
||||
<div
|
||||
className={`${Styles['contributors-bg-circle']} w-[80%] lg:w-[60%] left-[10%] lg:left-[20%] -bottom-[25%] xs:-bottom-[30%] sm:-bottom-[44%] md:-bottom-[54%] lg:-bottom-[60%] xl:-bottom-[75%]`}
|
||||
>
|
||||
<div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
|
||||
</div>
|
||||
<div
|
||||
className={`${Styles['contributors-bg-circle']} w-[60%] lg:w-[40%] left-[20%] lg:left-[30%] -bottom-[20%] xs:-bottom-[25%] sm:-bottom-[38%] md:-bottom-[44%] lg:-bottom-[40%] xl:-bottom-[50%]`}
|
||||
>
|
||||
<div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
|
||||
</div>
|
||||
<div
|
||||
className={`${Styles['contributors-bg-circle']} w-[40%] lg:w-[20%] left-[30%] lg:left-[40%] -bottom-[15%] xs:-bottom-[19%] sm:-bottom-[30%] md:-bottom-[34%] lg:-bottom-[20%] xl:-bottom-[25%]`}
|
||||
>
|
||||
<div className="flex flex-col justify-between h-full bg-scale-100 rounded-full p-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</SectionContainer>
|
||||
</SectionContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionContainer>
|
||||
@@ -354,7 +354,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
|
||||
className="h-full bg-scale-300 border-scale-400 border-[1px] p-6 rounded-lg flex items-start space-x-6 w-full"
|
||||
key={i}
|
||||
>
|
||||
<div className="w-12 h-12 sm:w-10 sm:h-10 lg:w-12 lg:h-12 aspect-square bg-brand-500 dark:bg-brand-700 rounded-lg flex items-center">
|
||||
<div className="w-12 h-12 sm:w-10 sm:h-10 lg:w-12 lg:h-12 aspect-square bg-brand-500 dark:bg-brand-600 rounded-lg flex items-center">
|
||||
<div className="relative w-[80%] h-[80%] mx-auto">
|
||||
<Image
|
||||
src={`/images/career/icons/${benefits.icon}${
|
||||
@@ -381,7 +381,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
|
||||
</SectionContainer>
|
||||
|
||||
<SectionContainer>
|
||||
<div className="w-14 h-14 bg-brand-500 dark:bg-brand-700 rounded-lg flex items-center mx-auto mb-6">
|
||||
<div className="w-14 h-14 bg-brand-500 dark:bg-brand-600 rounded-lg flex items-center mx-auto mb-6">
|
||||
<div className="relative w-[80%] h-[80%] mx-auto">
|
||||
<Image
|
||||
src={`/images/career/icons/jobs${isDarkMode ? '-dark' : '-light'}.svg`}
|
||||
@@ -408,7 +408,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
|
||||
className="flex lg:block items-start space-x-6 lg:space-x-0 lg:w-full"
|
||||
>
|
||||
<div className="lg:flex items-center">
|
||||
<h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-800 text-md text-center w-[44px] px-2 py-1.5 rounded-md">
|
||||
<h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-900 text-md text-center w-[44px] px-2 py-1.5 rounded-md">
|
||||
{i + 1}
|
||||
</h3>
|
||||
<div className="h-[100px] w-[1px] sm:h-[100px] mx-auto lg:h-[1px] lg:w-full bg-brand-800 lg:pr-6"></div>
|
||||
@@ -424,7 +424,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-800 text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
|
||||
<h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-900 text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
|
||||
<IconCheck />
|
||||
</h3>
|
||||
</div>
|
||||
@@ -454,7 +454,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
|
||||
</h2>
|
||||
<div className="flex items-center justify-between justify-[normal] pt-2 sm:pt-0 sm:w-full">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Badge className="rounded-md flex items-center lg:text-sm">
|
||||
<Badge className="rounded-full flex items-center lg:text-sm">
|
||||
<div className="relative w-3 h-3 mx-auto">
|
||||
<Image
|
||||
src="/images/career/icons/globe-dark.svg"
|
||||
|
||||
Reference in new issue
Block a user