mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Ivan VasilovandJordi Enric
56de26fe22
This PR migrates the whole monorepo to use Tailwind v4: - Removed `@tailwindcss/container-queries` plugin since it's included by default in v4, - Bump all instances of Tailwind to v4. Made minimal changes to the shared config to remove non-supported features (`alpha` mentions), - Migrate all apps to be compatible with v4 configs, - Fix the `typography.css` import in 3 apps, - Add missing rules which were included by default in v3, - Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot of classes - Rename all misnamed classes according to https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all apps. --------- Co-authored-by: Jordi Enric <jordi.err@gmail.com>
95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
import React from 'react'
|
|
import LabelBadge from './LabelBadge'
|
|
import LaunchWeekPrizeCard from './LaunchWeekPrizeCard'
|
|
import Image from 'next/image'
|
|
|
|
export default function LaunchWeekPrizeSection({
|
|
className,
|
|
ticket,
|
|
}: {
|
|
className?: string
|
|
ticket?: any
|
|
}) {
|
|
const Ticket = ticket
|
|
|
|
return (
|
|
<div id="lw8-prizes" className={['relative scroll-mt-[66px]', className].join(' ')}>
|
|
<div className="absolute z-0 w-full aspect-1.75/1 top-0 items-center justify-center">
|
|
<Image
|
|
src="/images/launchweek/8/swag-bg.png"
|
|
alt="prizes background"
|
|
fill
|
|
sizes="100%"
|
|
className="object-cover object-top"
|
|
quality={100}
|
|
/>
|
|
</div>
|
|
<div className="max-w-[100vw]!">
|
|
<div className="w-full container mx-auto h-px bg-linear-to-r from-transparent via-border-control to-transparent" />
|
|
<div className="text-center relative z-10 text-white">
|
|
<div className="max-w-152 mx-auto flex flex-col items-center gap-4 px-4">
|
|
<div className="relative z-10 w-full h-[100px] md:h-[130px] rounded-xs flex mt-16 items-center justify-center">
|
|
<Image
|
|
src="/images/launchweek/8/swag-illustration.png"
|
|
alt="prizes"
|
|
fill
|
|
sizes="100%"
|
|
className="object-contain"
|
|
quality={100}
|
|
/>
|
|
</div>
|
|
<h2 className="text-4xl">Swag has been delivered</h2>
|
|
</div>
|
|
</div>
|
|
{ticket && <Ticket />}
|
|
<div className="pt-8 lg:pt-16 px-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto h-auto text-white">
|
|
<LaunchWeekPrizeCard
|
|
className="col-span-full"
|
|
imageUrl="/images/launchweek/8/swag/deskmat-lg.jpg"
|
|
imageWrapperClassName="w-full aspect-[1.9/1] md:h-[300px]"
|
|
content={
|
|
<h3 className="w-full text-sm md:text-center flex md:justify-center items-center gap-4">
|
|
Supabase Desk Mat <LabelBadge text="10 mats" />
|
|
</h3>
|
|
}
|
|
animateFrom="down"
|
|
/>
|
|
<LaunchWeekPrizeCard
|
|
imageUrl="/images/launchweek/8/swag/shirt.jpg"
|
|
imageWrapperClassName="w-full aspect-[1.9/1]"
|
|
imgObjectPosition="right"
|
|
content={
|
|
<h3 className="text-sm flex items-center gap-4">
|
|
Supabase T-Shirt <LabelBadge text="20 t-shirts" />
|
|
</h3>
|
|
}
|
|
animateFrom="down"
|
|
/>
|
|
<LaunchWeekPrizeCard
|
|
imageUrl="/images/launchweek/8/swag/cap.jpg"
|
|
imageWrapperClassName="w-full aspect-[1.9/1]"
|
|
animateFrom="down"
|
|
content={
|
|
<h3 className="text-sm flex items-center gap-4">
|
|
Supabase Cap <LabelBadge text="25 caps" />
|
|
</h3>
|
|
}
|
|
/>
|
|
<LaunchWeekPrizeCard
|
|
imageUrl="/images/launchweek/8/swag/stickers.jpg"
|
|
imageWrapperClassName="w-full aspect-[1.9/1]"
|
|
animateFrom="down"
|
|
content={
|
|
<h3 className="text-sm flex items-center gap-4">
|
|
Supabase Sticker Pack <LabelBadge text="50 packs" />
|
|
</h3>
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|