components#Container TypeScript Examples
The following examples show how to use
components#Container.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Partners.tsx From vignette-web with MIT License | 5 votes |
|
Partners = () => {
const { t } = useTranslation(`home`)
return (
<Container className="mt-28 pt-16" id="partners">
<h2 className="text-center text-2xl font-bold lg:text-3xl">
{t(`partners-title`)}
</h2>
<div className=" mx-auto grid max-w-7xl grid-cols-2 gap-0.5 px-2 py-4 sm:px-6 md:grid-cols-4 lg:py-8 lg:px-8">
{partners.map((partner, i) => (
<a href={partner.href} key={i}>
<div
className={`group col-partners.n-1 flex justify-center bg-gray-50 py-8 px-2 dark:bg-zinc-900 dark:hover:bg-zinc-800 dark:hover:grayscale-0 sm:px-8`}
>
<div
className={`flex h-8 items-center justify-center lg:h-12 ${
partner.darkImg && `dark:hidden`
}`}
>
<Image
className="max-h-8"
quality={90}
src={partner.img}
alt={partner.name}
width={partner.imgWidth}
height={partner.imgHeight}
/>
</div>
{partner.darkImg && (
<div className={`${partner.noContrast && `brightness-90`}`}>
<div
className={`hidden h-8 items-center justify-center dark:block lg:h-12 ${
partner.noContrast && ` brightness-0 invert`
}`}
>
<Image
className="max-h-12"
quality={90}
src={partner.darkImg}
alt={partner.name}
width={partner.imgWidth}
height={partner.imgHeight}
/>
{` `}
</div>
</div>
)}
</div>
</a>
))}
</div>
<Container className="max-w-7xl">
{/*Temporarilly use email until contacts page is finished*/}
<Link href="mailto:[email protected]" passHref>
<a className="text-sm font-semibold xs:text-base lg:px-8">
{t(`become-partner`)}
{` `}
<span className="tracking-[0]" style={{ fontFamily: `Inter var` }}>
->
</span>
</a>
</Link>
</Container>
</Container>
)
}
Example #2
| Source File: [slug].tsx From vignette-web with MIT License | 5 votes |
|
Custom404: NextPage = () => {
const router = useRouter()
const { t } = useTranslation(`404`)
const { slug } = router.query
const inConstruction = [`features`, `plugins`].includes(slug as string)
return (
<>
<SEO
title={
inConstruction
? `This page is currently being developed.`
: `You hit a dead end.`
}
/>
<Nav />
<Container className=" max-w-7xl " id="content">
<div className="z-20 mx-auto text-center ">
{!inConstruction ? (
<>
<div className="animation-flicker mt-4">
<Image src={text404} alt="404" width={207} height={45} />
</div>
<h1 className="text-6xl font-semibold lg:text-7xl">
{t(`dead-end`)}
</h1>
<p className="my-5 mt-6 text-xl lg:text-2xl">{t(`guide-back`)}</p>
</>
) : (
<>
<h1 className="mt-8 text-3xl font-semibold lg:text-4xl">
{t(`in-construction`)}
</h1>
<p className="mt-4 text-lg">{t(`check-later`)}</p>
<p className="my-2 mb-4 text-sm lg:text-lg">
{t(`blahaj-while-waiting`)}
</p>
</>
)}
<div className="my-2 mx-auto inline-flex overflow-clip rounded-xl drop-shadow-lg">
<Image src={Blahaj} alt="" width="712" height="450" />
</div>
<div className="mx-auto mt-8 mb-8 flex justify-center">
<button
onClick={() => router.back()}
className="mx-3 w-44 items-center rounded-full bg-pinkRed px-8 py-1 text-lg font-semibold text-white "
>
{t(`go-back`)}
</button>
<Link
passHref
href="https://www.ikea.com/us/en/p/blahaj-soft-toy-shark-90373590/"
>
<a className="mx-3 inline-flex w-44 items-center rounded-full bg-yellow-500 px-8 py-1 font-semibold text-white ">
<span className="mx-auto">{t(`get-blahaj`)}</span>
</a>
</Link>
</div>
<a
href="https://twitter.com/niichi021"
className="pt-4 text-sm text-gray-700 dark:text-gray-300"
>
{t(`image-sauce`)}
</a>
</div>
</Container>
<Footer />
</>
)
}
Example #3
| Source File: MenuComp.tsx From vignette-web with MIT License | 4 votes |
|
MenuComp = () => {
const size = useWindowSize()
const mobile = size.width < 1024
return (
<motion.div
transition={{ duration: 0.2 }}
initial={{ opacity: 0.2 }}
animate={{ opacity: 1 }}
className=""
>
<div className="z-40 py-8 sm:relative sm:mt-4 sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 lg:pt-8">
<div className=" hidden sm:block">
<Parallax
offset={20}
className="absolute inset-y-0 left-1/2 z-40 mt-3 w-screen rounded-l-3xl bg-gray-100 dark:bg-zinc-800 lg:left-80 lg:right-0 lg:w-full"
/>
<Parallax offset={30} className="relative z-50">
<svg
className="absolute right-1/2 top-4 -mr-3 lg:left-0 lg:m-0"
width="404"
height="392"
fill="none"
viewBox="0 0 404 392"
>
<defs>
<pattern
id="837c3e70-6c3a-44e6-8854-cc48c737b659"
x="0"
y="0"
width="20"
height="20"
patternUnits="userSpaceOnUse"
>
<rect
x="0"
y="0"
width="4"
height="4"
className="text-gray-200 transition duration-100 dark:text-neutral-600"
fill="currentColor"
></rect>
</pattern>
</defs>
<rect
width="404"
height="392"
fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
></rect>
</svg>
</Parallax>
</div>
<Container
parallax
noMargin
offset={mobile ? 20 : 50}
className="relative z-50 -mr-40 mt-6 px-12 pb-8 sm:mx-auto lg:mt-14"
>
<div className="hidden w-full rounded-[2em] shadow-xl ring-opacity-5 lg:inline-flex lg:h-full lg:w-auto lg:max-w-none lg:shadow-2xl">
<Image
className=""
priority
src={menucomp}
alt=""
layout="fixed"
width={1386}
height={686}
quality={90}
/>
</div>
<div className=" inline-flex w-full rounded-[1em] shadow-xl ring-opacity-5 lg:hidden lg:shadow-2xl">
<Image
className=""
priority
src={menucomp}
alt=""
width={1386}
height={686}
quality={90}
/>
</div>
</Container>
</div>
</motion.div>
)
}
Example #4
| Source File: about.tsx From vignette-web with MIT License | 4 votes |
|
OpenSource: NextPage<pageProps> = ({
contributors,
commits,
netReceived,
pullRequests,
openIssues,
totalPaid,
balance,
}) => {
const { t } = useTranslation(`about`)
const [isOpen, setIsOpen] = useState(false)
return (
<>
<SEO title={t(`page-title`)} />
<Nav />
<Container className="pt-8 lg:pt-16" id="content">
<div className="z-20 mx-auto px-2 pb-8 lg:max-w-7xl ">
<h1 className="lg:text-0xl bg-gradient-to-br from-[#005BEA] to-[#00C6FB] bg-clip-text text-4xl font-bold text-transparent xxs:text-5xl lg:text-9xl">
{t(`title1`)} <br />
{t(`title2`)}
</h1>
<p className="my-4 mb-8 mt-8 text-lg sm:px-2 sm:text-xl lg:mb-20 lg:text-2xl">
{t(`hero-p`)}
</p>
<Container offset={10} noMargin fadeIn>
<div className="mx-auto flex flex-wrap gap-8 pb-16 text-center">
<div className="mx-auto text-xl">
<div className="mb-1 text-6xl font-bold">{commits}</div>
{t(`commits`)}
<BiGitPullRequest
className="mx-auto mt-2 fill-pinkRed"
size={40}
/>
</div>
<div className="mx-auto text-xl">
<div className="mb-1 text-6xl font-bold">{pullRequests}</div>
{t(`pull-requests`)}
<BiGitPullRequest
className="mx-auto mt-2 fill-pinkRed"
size={40}
/>
</div>
<div className="mx-auto text-xl">
<div className="mb-1 text-6xl font-bold">{openIssues}</div>
{t(`open-issues`)}
<BiGitPullRequest
className="mx-auto mt-2 fill-pinkRed"
size={40}
/>
</div>
</div>
<div className="w-full text-center">
<a
href="https://github.com/vignetteapp"
className="button mx-auto "
>
{t(`visit-github-button`)}
</a>
</div>
</Container>
</div>
<Container fadeIn noMargin className="mt-32 text-center ">
<Image src={repoIcon} alt="" quality={100} width={72} height={72} />
<h2 className="mt-8 text-2xl font-bold lg:text-3xl">
{t(`section1-title`)}
</h2>
<div className=" mx-auto mt-6 flex max-w-6xl flex-wrap justify-center gap-4 px-0 lg:p-8 ">
{contributors.map((user) => (
<Link
passHref
key={user.login}
href={`https://github.com/${user.login}`}
>
<a className="p-4">
<div className="mx-auto">
<Image
width={64}
height={64}
className="rounded-full"
src={user.profile}
alt=""
/>
</div>
</a>
</Link>
))}
</div>
<p className="mx-auto mt-8 text-xs leading-snug text-gray-700 dark:text-gray-300 sm:max-w-md sm:text-sm">
{t(`section1-p`)}
</p>
<p className="mt-4 text-xs text-gray-800 dark:text-gray-200 ">
{t(`updates-daily-text`)}
</p>
</Container>
<Container>
<div className="mt-14 text-center lg:mt-28">
<div className="inline-flex overflow-hidden rounded-2xl drop-shadow-xl">
<Image
alt=""
src={VignettePadding}
width={64}
height={64}
quality={100}
/>
</div>
<h2 className="mt-3 text-2xl font-semibold">
{t(`section2-title`)}
</h2>
<p className="mx-auto mt-2 max-w-md">{t(`section2-p`)}</p>
</div>
<div className="mx-auto mt-10 flex flex-wrap justify-center gap-4 lg:max-w-5xl ">
{teamMembers.map((m: Member) => (
<a
href={m.url}
key={m.name}
className=" my-2 mx-2 text-center lg:mx-8"
>
<div className="inline-flex overflow-hidden rounded-full ">
<Image
alt=""
className=""
src={m.avatar}
width={64}
height={64}
/>
</div>
<h4 className=" my-1 font-medium capitalize">{m.name}</h4>
<p className="max-w-[9em] text-xs">{m.role}</p>
</a>
))}
</div>
</Container>
<Container className="mt-12 text-center">
<Image src={donationImage} width={400} height={400} alt="" />
<h1 className="text-3xl font-bold"> {t(`section3-title`)}</h1>
<p className="mx-auto mt-2 mb-2 max-w-[34em]">{t(`section3-p`)}</p>
<button
onClick={() => setIsOpen(true)}
className="font-semibold text-pinkRed hover:underline"
>
{t(`gives-back-button`)}
</button>
<Transition appear show={isOpen} as={Fragment}>
<Dialog
as="div"
className="fixed inset-0 z-10 overflow-y-auto"
onClose={() => setIsOpen(false)}
>
<div className="min-h-screen px-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0" />
</Transition.Child>
<Dialog.Overlay className="fixed inset-0 bg-black/20 backdrop-blur-sm dark:bg-neutral-900/80 " />
{/* This element is to trick the browser into centering the modal contents. */}
<span
className="inline-block h-screen align-middle"
aria-hidden="true"
>
​
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div className="prose-md prose my-8 inline-block w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white px-6 py-4 text-left align-middle shadow-xl transition-all dark:prose-invert dark:bg-black">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 "
>
{t(`gives-back-button`)}
</Dialog.Title>
<div className="mt-2">
<ReactMarkdown>{t(`gives-back-p`)}</ReactMarkdown>
</div>
<div className="mt-6">
<button
type="button"
className="button-small inline-flex justify-center border border-transparent bg-pinkRed px-4 py-2 text-sm font-medium text-white hover:bg-[#ff2277] focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:bg-pinkRed"
onClick={() => setIsOpen(false)}
>
{t(`got-it-button`)}
</button>
</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition>
<div className="mx-auto my-10 flex w-full max-w-5xl flex-wrap justify-center gap-6 text-lg lg:gap-20 lg:text-xl ">
<div className="w-40 md:w-52">
<h3 className="mb-1 text-3xl font-bold lg:text-5xl">
${netReceived}
</h3>
{t(`earned`)}
</div>
<div className="w-40 md:w-52">
<h3 className="mb-1 text-3xl font-bold lg:text-5xl">
${balance}
</h3>
{t(`balance`)}
</div>
<div className="w-52">
<h3 className="mb-1 text-3xl font-bold lg:text-5xl">
${totalPaid}
</h3>
{t(`paid`)}
</div>
</div>
<a className="button">{t(`support-us-button`)}</a>
</Container>
</Container>
<Footer />
</>
)
}
Example #5
| Source File: index.tsx From vignette-web with MIT License | 4 votes |
|
Blog: NextPage<{ posts: Post[] }> = ({ posts }) => {
const { t } = useTranslation(`blog`)
const [featuredPost] = posts.slice(0)
return (
<>
<SEO title={t(`title`)} desc={t(`hero-p`)} template={false} />
<Container noMargin id="content">
<div className="prose-invert relative z-20 w-full pb-14 text-white md:pb-28 ">
<Image
src={publicationCover}
layout="fill"
objectFit="cover"
objectPosition="center"
priority
alt=""
/>
<BlogNav />
<div className="relative z-20 px-4">
<h1 className="pt-4 pb-4 text-center text-4xl font-bold text-white md:pt-16 lg:text-5xl">
{t(`hero-title`)}
</h1>
<p className="text-center text-lg lg:text-xl ">{t(`hero-p`)}</p>
</div>
</div>
<div
className="mx-auto grid max-w-7xl gap-8 px-6 pt-8 sm:grid-cols-2 md:grid-cols-3"
id="blog-feed"
>
<div className="mx-0 mb-6 flex flex-wrap md:max-w-full md:flex-nowrap">
<Link href={featuredPost.url} passHref>
<a className="inline-flex h-44 overflow-hidden rounded xs:h-64 md:h-[28rem]">
<Image
src={featuredPost.image}
width="1080"
height="540"
quality={100}
className="rounded object-cover object-center"
alt=""
priority
/>
</a>
</Link>
<div className="py-4 md:px-8 md:py-8 lg:w-[32rem]">
<h3 className="my-1 text-xs font-bold uppercase text-pinkRed">
{featuredPost.category}
</h3>
<Link href={featuredPost.url} passHref>
<a>
<h2 className="text-2xl font-bold lg:text-4xl">
{featuredPost.title}
</h2>
<p className="mt-4">{featuredPost.summary}</p>
</a>
</Link>
<div className="mt-4 flex items-center">
<Link
href={
members.filter(
(item) => item.name == featuredPost.author,
)[0].url
}
>
<a>
<Image
src={
members.filter(
(item) => item.name == featuredPost.author,
)[0].avatar
}
width={40}
height={40}
alt=""
className="rounded-full"
/>
</a>
</Link>
<div className="pl-2 text-sm">
<Link
href={
members.filter(
(item) => item.name == featuredPost.author,
)[0].url
}
>
<a>
<span className="font-semibold">
{featuredPost.author}
</span>
</a>
</Link>
<time
dateTime={featuredPost.date}
className="block text-gray-600 dark:text-gray-200"
>
{format(parseISO(featuredPost.date), `LLLL d, yyyy`)}
</time>
</div>
</div>
</div>
</div>
{posts.slice(1, posts.length).map((post, idx) => (
<PostCard key={idx} {...post} />
))}
</div>
<div className="mx-auto mt-8 max-w-7xl px-6">
<Link href="/" passHref>
<a><- {t(`back-to-home`)}</a>
</Link>
</div>
</Container>
<Footer />
</>
)
}
Example #6
| Source File: contact.tsx From vignette-web with MIT License | 4 votes |
|
Home: NextPage<cache> = () => {
const { t } = useTranslation(`contact`)
return (
<>
<SEO title={t(`page-title`)} />
<Nav />
<Container
id="content"
className="z-20 mx-auto max-w-7xl overflow-hidden pt-8 text-center lg:relative lg:pt-20"
>
<div className=" flex justify-center">
<h1
style={{
paddingLeft: `0.2em`,
marginLeft: `-0.2em`,
paddingBottom: `0.2em`,
marginBottom: `-0.2em`,
}}
className="gradient-primary max-w-2xl bg-clip-text text-4xl font-bold text-transparent xxs:text-5xl lg:text-7xl"
>
{t(`title`)}
</h1>
</div>
<p className="mx-auto mt-8 max-w-md text-lg lg:mt-16">
{t(`hero-p-1`)} {` `}
<span className="font-bold">{t(`hero-p-2`, { members: 89 })}</span>
{` `}
{t(`hero-p-3`)}
</p>
<div className="mx-auto mt-10 flex flex-wrap justify-center gap-8 p-4 ">
<div className="flex h-96 w-full max-w-[16rem] flex-col justify-between rounded-xl border p-8 px-10 text-center shadow dark:border-neutral-700">
<div className="item-center dark:border-none-neutral-700 mx-auto flex h-24 w-24 items-center justify-center rounded-xl border bg-[#2732cc] dark:border dark:border-none ">
<SiDiscord size={48} color="white" className=" " />
</div>
<h3 className=" mt-4 text-xl font-bold">Discord</h3>
<p className="mx-auto mt-2 mb-10 max-w-[16rem] text-center text-sm">
{t(`discord-p`)}
</p>
<a
className="button-small w-full"
href="https://go.vignetteapp.org/discord"
>
{t(`join-button`)}
</a>
</div>
<div className="flex h-96 w-[16rem] flex-col justify-between rounded-xl border p-8 px-10 text-center shadow dark:border-neutral-700">
<div>
<div className=" item-center mx-auto flex h-24 w-24 items-center justify-center rounded-xl border bg-white dark:border-none dark:border-neutral-700">
<SiGithub size={48} color="black" className=" " />
</div>
<h3 className=" mt-4 text-xl font-bold">GitHub</h3>
<p className="mx-auto mt-2 mb-10 max-w-[10rem] text-center text-sm">
{t(`github-p`)}
</p>
</div>
<a
className="button-small w-full"
href="https://github.com/vignetteapp"
>
{t(`visit-button`)}
</a>
</div>
<div className="flex h-96 w-[16rem] flex-col justify-between rounded-xl border p-8 px-10 text-center shadow dark:border-neutral-700">
<div>
<div className="item-center mx-auto flex h-24 w-24 items-center justify-center rounded-xl border bg-white dark:border-none dark:border-neutral-700">
<SiTwitter size={48} className="fill-[#59adff] " />
</div>
<h3 className=" mt-4 text-xl font-bold">Twitter</h3>
<p className="mx-auto mt-2 max-w-[10rem] text-center text-sm">
{t(`twitter-p`)}
</p>
</div>
<a
className="button-small w-full"
href="https://twitter.com/vignette_org"
>
{t(`visit-button`)}
</a>
</div>
<div className="flex h-96 w-[16rem] flex-col justify-between rounded-xl border p-8 px-10 text-center shadow dark:border-neutral-700">
<div>
<div className="item-center mx-auto flex h-24 w-24 items-center justify-center rounded-xl border bg-pinkRed dark:border-none dark:border-neutral-700">
<Image src={envelope} width={48} height={48} alt="" />
</div>
<h3 className=" mt-4 text-xl font-bold">{t(`anything-else`)}</h3>
<p className="mx-auto mt-2 max-w-[18rem] text-center text-sm">
{t(`email-p`)}
</p>
</div>
<a
className="button-small w-full"
href="mailto:[email protected]"
>
{t(`email-us-button`)}
</a>
</div>
</div>
</Container>
<Footer />
</>
)
}
Example #7
| Source File: index.tsx From vignette-web with MIT License | 4 votes |
|
Home: NextPage<cache> = ({ contributors }) => {
const { t } = useTranslation(`home`)
const { locale } = useRouter()
return (
<>
<SEO />
<Nav />
<Container className="z-20 overflow-hidden pt-8 lg:relative" id="content">
<div className="mx-auto grid-cols-1 pb-8 sm:px-2 lg:max-w-7xl lg:grid-cols-2 lg:gap-24 lg:px-4 lg:pt-32 lg:pb-72 xl:grid">
<div className="lg:max-w-3xl">
<h1
style={{
paddingLeft: `0.2em`,
marginLeft: `-0.2em`,
paddingBottom: `0.2em`,
marginBottom: `-0.2em`,
}}
className={
`gradient-primary bg-clip-text text-4xl font-bold text-transparent ` +
([`en`, `ko`, `fil`, `de`].includes(locale as string)
? `xxs:text-6xl lg:text-8xl `
: `xxs:text-5xl lg:text-7xl `)
}
>
{t(`title1`)}
<br /> {t(`title2`)}
</h1>
<p className="my-4 mb-8 max-w-[22rem] xxs:text-xl lg:mb-16 lg:max-w-[30rem] lg:text-2xl">
{t(`hero-p`)}
</p>
<a
href="https://go.vignetteapp.org/discord"
className="button inline-block sm:hidden"
>
{t(`join-discord-short`)}
</a>
<a
href="https://go.vignetteapp.org/discord"
className="button hidden sm:inline-block"
>
{t(`join-discord-long`)}
</a>
</div>
</div>
<MenuComp />
</Container>
<Container
offset={10}
fadeIn
id="design"
className="mx-auto mt-20 max-w-6xl px-4 pt-16 lg:mt-28"
>
<div className="flex flex-wrap justify-between ">
<Container noMargin>
<div className="flex items-center">
<Image src={sparkle} width={64} height={64} alt="" />
<h2 className="ml-2 max-w-[14rem] text-2xl font-bold xxs:text-3xl">
{t(`design-title-line1`)}
<br /> {t(`design-title-line2`)}
</h2>
</div>
<p className="max-w-sm py-8 xxs:text-lg lg:max-w-sm">
{t(`design-p`)}
</p>
</Container>
<Container noMargin offset={10}>
<Image
src={section1comp}
alt=""
width={544}
height={270.5}
quality={90}
/>
</Container>
</div>
</Container>
<Container fadeIn noMargin offset={10}>
<Container
id="plugins"
className="mt-20 max-w-6xl px-4 pt-16 text-center lg:mt-28"
>
<Image src={puzzle} quality={95} alt="" width={60} height={60} />
<h2 className="text-2xl font-bold xxs:text-3xl">
{t(`plugins-title`)}
</h2>
<p className="mx-auto max-w-[34rem] pt-4 pb-8 xxs:text-lg lg:pb-12">
{t(`plugins-p`)}
</p>
<Link href="/plugins" passHref>
<a className="button"> {t(`explore-plugins-button`)}</a>
</Link>
</Container>
<Container noMargin offset={10} className=" pt-16">
<Marquee speed={50} gradientWidth={0}>
{extensions.map((ext, index) => (
<ExtensionCard key={index} name={ext.name} />
))}
</Marquee>
<Marquee speed={40} delay={0.3} className="pb-8" gradientWidth={0}>
{extensions.map((ext, index) => (
<ExtensionCard key={index} name={ext.name} />
))}
</Marquee>
</Container>
</Container>
<Container
fadeIn
offset={10}
id="transparency"
className="mt-20 max-w-5xl gap-8 pt-16 lg:mt-28 "
>
<div className="mx-auto mt-auto mb-6 text-center lg:mb-8">
<Image quality={95} src={shipwheel} alt="" width={60} height={60} />
<h2 className="text-3xl font-bold xxs:text-3xl">
{t(`transparency-title-line1`)}
<br /> {t(`transparency-title-line2`)}
</h2>
<p className="mx-auto max-w-[22rem] pb-8 pt-4 xxs:text-lg">
{t(`transparency-p`)}
</p>
<div className="mx-auto mb-8 flex flex-wrap justify-center gap-4 sm:max-w-7xl sm:gap-8">
{contributors.map((c) => (
<div
key={c.login}
className="relative h-11 w-11 lg:h-16 lg:w-16"
>
<Image
src={c.profile}
layout="fill"
className="rounded-full"
alt=""
/>
</div>
))}
</div>
<Link href="/about" passHref>
<a className="button">{t(`about-button`)}</a>
</Link>
</div>
</Container>
<Container offset={10} fadeIn>
<Partners />
</Container>
<Footer />
</>
)
}
