Finish prize section layout

apps/www/components/LaunchWeek/LabelBadge.tsx

@@ -7,7 +7,7 @@ interface Props {
 
 export default function LabelBadge({ text, gradientText = true }: Props) {
   return (
-    <span className="bg-[#32313F] rounded-full px-4 py-2 text-xs">
+    <span className="bg-[#32313F] rounded px-1 py-[2px] text-xs">
       <span className={!gradientText ? '' : 'gradient-text-purple-500'}>{text}</span>
     </span>
   )

apps/www/components/LaunchWeek/LaunchSection/LaunchWeekPrizeCard.tsx

@@ -0,0 +1,35 @@
+import Image from 'next/image'
+import React from 'react'
+
+export default function LaunchWeekPrizeCard({
+  imageUrl,
+  imageWrapperClassName,
+  content,
+  className,
+}: {
+  imageUrl: string
+  imageWrapperClassName?: string
+  content: any
+  className?: string
+}) {
+  return (
+    <div
+      className={[
+        'relative p-[1px] bg-gradient-to-b from-[#484848] to-[#1C1C1C] rounded-lg overflow-hidden',
+        className && className,
+      ].join(' ')}
+    >
+      <div className="relative h-full flex flex-col bg-[#1C1C1C] rounded-lg overflow-hidden">
+        <div
+          className={[
+            "relative w-full flex-grow before:content[' '] before:absolute before:inset-0 before:z-10 before:bg-gradient-to-t before:from-[#1C1C1C]",
+            imageWrapperClassName && imageWrapperClassName,
+          ].join(' ')}
+        >
+          <Image src={imageUrl ?? ''} layout="fill" objectFit="cover" />
+        </div>
+        <div className="p-4">{content && content}</div>
+      </div>
+    </div>
+  )
+}

apps/www/components/LaunchWeek/LaunchSection/LaunchWeekPrizeSection.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image'
 import React from 'react'
 import LabelBadge from '../LabelBadge'
+import LaunchWeekPrizeCard from './LaunchWeekPrizeCard'
 
 export default function LaunchWeekPrizeSection() {
   return (
@@ -11,77 +12,77 @@ export default function LaunchWeekPrizeSection() {
         </div>
       </div>
 
-      <div className="text-center -mt-56 relative z-10 text-white">
-        <div className="max-w-[38rem] mx-auto">
-          <Image src="/images/launchweek/seven/lw7-seven.svg" width={40} height={40} />
-          <h2 className="text-4xl mt-2">
-            Get your <span className="gradient-text-purple-500">winning ticket</span>
-          </h2>
-          <p className="mt-4 radial-gradient-text-scale-500" id="lw-7-prizes">
-            Mark your calendars for April 9th and join us on Discord for Launch Week 7's final day
-            to find out if you're one of the lucky winners. Get sharing!
-          </p>
+      <div>
+        <div className="text-center relative z-10 -mt-56 text-white bg-gradient-to-t from-[#1C1C1C] to-transparent">
+          <div className="max-w-[38rem] mx-auto px-4">
+            <Image src="/images/launchweek/seven/lw7-seven.svg" width={40} height={40} />
+            <h2 className="text-4xl mt-2">
+              Get your <span className="gradient-text-purple-500">winning ticket</span>
+            </h2>
+            <p className="mt-4 radial-gradient-text-scale-500" id="lw-7-prizes">
+              Mark your calendars for April 9th and join us on Discord for Launch Week 7's final day
+              to find out if you're one of the lucky winners. Get sharing!
+            </p>
+          </div>
+          <div className="bg-lw7-black-transition h-24"></div>
         </div>
-        <div className="bg-lw7-black-transition h-24"></div>
-      </div>
-      <div className="bg-scale-100 text-white">
-        <div className="lg:flex gap-4 max-w-7xl mx-auto">
-          <div className="lg:w-3/5">
-            <div className="grid gap-4 border border-[#484848]  rounded-tr-xl rounded-tl-xl overflow-hidden">
-              <div className="relative h-[360px]">
-                <div className="glass-tile-gradient w-[150px] h-[420px]  -top-8 -ml-12"></div>
-                <Image
-                  src="/images/launchweek/seven/keyboard.png"
-                  layout="fill"
-                  objectFit="cover"
+        <div className="px-4 bg-scale-100">
+          <div className="grid grid-cols-1 md:grid-cols-2 col-span-2 lg:grid-cols-5 gap-4 max-w-7xl mx-auto text-white">
+            <LaunchWeekPrizeCard
+              imageUrl="/images/launchweek/seven/keyboard.jpg"
+              imageWrapperClassName="h-[40vw] lg:max-h-[360px]"
+              className="col-span-2 lg:col-span-3"
+              content={
+                <>
+                  <h3 className="gradient-text-purple-500 font-mono uppercase font-medium">
+                    Main award
+                  </h3>
+                  <h4 className="flex items-center gap-3 text-[19px] mt-4">
+                    <Image
+                      src="/images/launchweek/seven/icons/compute-upgrade.svg"
+                      width={16}
+                      height={16}
+                    />
+                    Supabase Mechanical Keyboard <LabelBadge text="3 pieces" />
+                  </h4>
+                  <p className="text-[#707070] mt-1">
+                    Increase your chances of winning limited edition 62-Key ISO Custom Mechanical
+                    Keyboard by sharing your ticket on Twitter.
+                  </p>
+                </>
+              }
+            />
+
+            <div className="col-span-2 grid gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <LaunchWeekPrizeCard
+                  imageUrl="/images/launchweek/seven/tshirt.jpg"
+                  imageWrapperClassName="h-[40vw] md:h-[30vw] lg:max-h-[175px] lg:h-auto"
+                  content={
+                    <h3 className="text-sm flex items-center gap-4">
+                      Supa T-shirt <LabelBadge text="10 shirts" />
+                    </h3>
+                  }
+                />
+                <LaunchWeekPrizeCard
+                  imageUrl="/images/launchweek/seven/socks.jpg"
+                  imageWrapperClassName="h-[40vw] md:h-[30vw] lg:max-h-[175px] lg:h-auto"
+                  content={
+                    <h3 className="text-sm flex items-center gap-4">
+                      Supa Socks <LabelBadge text="5 pairs" />
+                    </h3>
+                  }
                 />
               </div>
-              <div className="p-6 mt-3">
-                <h3 className="gradient-text-purple-500 font-mono uppercase font-medium">
-                  Main award
-                </h3>
-                <h4 className="flex items-center gap-3 text-[19px] mt-4">
-                  <Image
-                    src="/images/launchweek/seven/icons/compute-upgrade.svg"
-                    width={16}
-                    height={16}
-                  />
-                  Supabase Mechanical Keyboard <LabelBadge text="5 pieces" />
-                </h4>
-                <p className="text-scale-1100 mt-1">
-                  Increase your chances of winning limited edition 62-Key ISO Custom Mechanical
-                  Keyboard by sharing your ticket on Twitter.
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="grid gap-4 w-2/5">
-            <div className="grid relative border border-[#484848] rounded-2xl overflow-hidden">
-              <Image src="/images/launchweek/seven/lw-7-bg.svg" layout="fill" objectFit="cover" />
-              <div className="absolute inset-0 bg-gradient-to-t from-black bg-opacity-50 flex ">
-                <h3 className="mt-auto mb-4 mx-6 text-lg flex items-center gap-4">
-                  Limited edition sticker pack <LabelBadge text="20 packs" />
-                </h3>
-              </div>
-            </div>
-            <div className="flex gap-4">
-              <div className="grid relative border border-[#484848] rounded-2xl overflow-hidden w-1/2">
-                <Image src="/images/launchweek/seven/lw-7-bg.svg" layout="fill" objectFit="cover" />
-                <div className="absolute inset-0 bg-gradient-to-t from-black bg-opacity-50 flex ">
-                  <h3 className="mt-auto mb-4 mx-6 text-lg flex items-center gap-4">
-                    Supa T-shirt <LabelBadge text="10 shirts" />
+              <LaunchWeekPrizeCard
+                imageUrl="/images/launchweek/seven/stickers.jpg"
+                imageWrapperClassName="h-[40vw] lg:max-h-[175px] lg:h-auto"
+                content={
+                  <h3 className="text-sm flex items-center gap-4">
+                    Launch Week 7 Limited Edition Sticker Pack <LabelBadge text="20 packs" />
                   </h3>
-                </div>
-              </div>
-              <div className="grid relative border border-[#484848] rounded-2xl overflow-hidden w-1/2">
-                <Image src="/images/launchweek/seven/lw-7-bg.svg" layout="fill" objectFit="cover" />
-                <div className="absolute inset-0 bg-gradient-to-t from-black bg-opacity-50 flex ">
-                  <h3 className="mt-auto mb-4 mx-6 text-lg flex items-center gap-4">
-                    Supa socks <LabelBadge text="10 pairs" />
-                  </h3>
-                </div>
-              </div>
+                }
+              />
             </div>
           </div>
         </div>

apps/www/styles/index.css

@@ -695,7 +695,7 @@ launch week
   }
 
   .gradient-text-purple-500 {
-    background-image: -webkit-linear-gradient(45deg, #902dfb 17%, #d87bf5 97%);
+    @apply text-transparent bg-clip-text bg-gradient-to-br from-[#902DFB] to-[#D87BF5];
   }
 
   .gradient-text-gold-500 {