From 109f71f792561b2fa17bccbbd1fcab2a23ba9a65 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Mon, 6 Mar 2023 09:19:32 +0100
Subject: [PATCH] LW7: Add lw7 graphic to ticket username page

---
 .../components/LaunchWeek/LW7BgGraphic.tsx    | 41 +++++++++++++++++++
 .../LaunchSection/LaunchWeekPrizeSection.tsx  |  6 +--
 apps/www/pages/launch-week/index.tsx          | 21 ++--------
 .../pages/launch-week/tickets/[username].tsx  | 41 +++++++++++--------
 4 files changed, 71 insertions(+), 38 deletions(-)
 create mode 100644 apps/www/components/LaunchWeek/LW7BgGraphic.tsx

diff --git a/apps/www/components/LaunchWeek/LW7BgGraphic.tsx b/apps/www/components/LaunchWeek/LW7BgGraphic.tsx
new file mode 100644
index 00000000000..b64650763d4
--- /dev/null
+++ b/apps/www/components/LaunchWeek/LW7BgGraphic.tsx
@@ -0,0 +1,41 @@
+import { motion, useScroll, useTransform } from 'framer-motion'
+import Image from 'next/image'
+
+export default function LW7BgGraphic() {
+  const { scrollYProgress } = useScroll()
+
+  const graphicsScale = useTransform(
+    scrollYProgress,
+    // Map scrollYProgress from these values:
+    [0, 0.5],
+    // Into these scale values:
+    [1, 1.8]
+  )
+  const graphicsY = useTransform(
+    scrollYProgress,
+    // Map scrollYProgress from these values:
+    [0, 0.5],
+    // Into these values:
+    [0, 120]
+  )
+
+  return (
+    <div className="mt-8 relative h-[640px] overflow-hidden before:content[' '] before:absolute before:bottom-0 before:h-[400px] before:z-20 before:w-full before:bg-gradient-to-t before:from-[#1C1C1C] before:via-[#1C1C1C40] before:to-transparent">
+      <motion.div
+        className="absolute bottom-0 w-full h-full mt-40"
+        style={{
+          scale: graphicsScale,
+          y: graphicsY,
+          willChange: 'transform',
+        }}
+      >
+        <Image
+          src="/images/launchweek/seven/lw-7-bg.png"
+          loading="eager"
+          layout="fill"
+          objectFit="cover"
+        />
+      </motion.div>
+    </div>
+  )
+}
diff --git a/apps/www/components/LaunchWeek/LaunchSection/LaunchWeekPrizeSection.tsx b/apps/www/components/LaunchWeek/LaunchSection/LaunchWeekPrizeSection.tsx
index 8328caaac7d..13f1281d2ef 100644
--- a/apps/www/components/LaunchWeek/LaunchSection/LaunchWeekPrizeSection.tsx
+++ b/apps/www/components/LaunchWeek/LaunchSection/LaunchWeekPrizeSection.tsx
@@ -4,13 +4,13 @@ import LabelBadge from '../LabelBadge'
 import LaunchWeekPrizeCard from './LaunchWeekPrizeCard'
 import { motion } from 'framer-motion'
 
-export default function LaunchWeekPrizeSection() {
+export default function LaunchWeekPrizeSection({ className }: { className?: string }) {
   const finalAnimationState = { y: 0, opacity: 1 }
 
   return (
-    <div>
+    <div className={[className].join(' ')}>
       <div className="">
-        <div className="text-center relative z-10 text-white -mt-60">
+        <div className="text-center relative z-10 text-white">
           <motion.div
             className="max-w-[38rem] mx-auto px-4 flex flex-col items-center gap-4"
             initial={{ y: -20, opacity: 0 }}
diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index 1522a58de42..e047af8c40d 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -15,6 +15,7 @@ import { LaunchWeekLogoHeader } from '~/components/LaunchWeek/LaunchSection/Laun
 import { UserData } from '~/components/LaunchWeek/Ticket/hooks/use-conf-data'
 import TicketBrickWall from '~/components/LaunchWeek/LaunchSection/TicketBrickWall'
 import Image from 'next/image'
+import LW7BgGraphic from '../../components/LaunchWeek/LW7BgGraphic'
 
 interface Props {
   users: UserData[]
@@ -127,29 +128,13 @@ export default function TicketHome({ users }: Props) {
                   </a>
                 </div>
               </SectionContainer>
-              <div className="mt-8 relative h-[640px] overflow-hidden before:content[' '] before:absolute before:bottom-0 before:h-[400px] before:z-20 before:w-full before:bg-gradient-to-t before:from-[#1C1C1C] before:via-[#1C1C1C40] before:to-transparent">
-                <motion.div
-                  className="absolute bottom-0 w-full h-full mt-40"
-                  style={{
-                    scale: graphicsScale,
-                    y: graphicsY,
-                    willChange: 'transform',
-                  }}
-                >
-                  <Image
-                    src="/images/launchweek/seven/lw-7-bg.png"
-                    loading="eager"
-                    layout="fill"
-                    objectFit="cover"
-                  />
-                </motion.div>
-              </div>
+              <LW7BgGraphic />
             </div>
             {/* TODO: set gold gradient if ticket is gold */}
             <div className="bg-lw7-gradient absolute inset-0 z-0" />
           </div>
 
-          <LaunchWeekPrizeSection />
+          <LaunchWeekPrizeSection className="-mt-60" />
 
           {users && <TicketBrickWall users={users} />}
         </div>
diff --git a/apps/www/pages/launch-week/tickets/[username].tsx b/apps/www/pages/launch-week/tickets/[username].tsx
index c33475359a8..425129cc3e6 100644
--- a/apps/www/pages/launch-week/tickets/[username].tsx
+++ b/apps/www/pages/launch-week/tickets/[username].tsx
@@ -13,6 +13,7 @@ import LaunchWeekPrizeSection from '~/components/LaunchWeek/LaunchSection/Launch
 import { LaunchWeekLogoHeader } from '~/components/LaunchWeek/LaunchSection/LaunchWeekLogoHeader'
 import TicketBrickWall from '~/components/LaunchWeek/LaunchSection/TicketBrickWall'
 import { UserData } from '~/components/LaunchWeek/Ticket/hooks/use-conf-data'
+import LW7BgGraphic from '../../../components/LaunchWeek/LW7BgGraphic'
 
 interface Props {
   user: UserData
@@ -62,23 +63,29 @@ export default function TicketShare({ user, users }: Props) {
         }}
       />
       <DefaultLayout>
-        <div className="bg-lw7 -mt-20 pt-12">
-          <SectionContainer className="flex flex-col !pb-1 items-center lg:pt-32 gap-24">
-            <LaunchWeekLogoHeader />
-            <TicketContainer
-              supabase={supabase}
-              session={null}
-              defaultUserData={{
-                username: username || undefined,
-                name: name || '',
-                ticketNumber,
-                golden,
-                referrals,
-              }}
-              sharePage
-            />
-          </SectionContainer>
-          <LaunchWeekPrizeSection />
+        <div className="bg-[#1C1C1C] -mt-20">
+          <div className="relative bg-lw7 pt-20">
+            <div className="relative z-10">
+              <SectionContainer className="flex flex-col !pb-1 items-center lg:pt-32 gap-24">
+                <LaunchWeekLogoHeader />
+                <TicketContainer
+                  supabase={supabase}
+                  session={null}
+                  defaultUserData={{
+                    username: username || undefined,
+                    name: name || '',
+                    ticketNumber,
+                    golden,
+                    referrals,
+                  }}
+                  sharePage
+                />
+              </SectionContainer>
+              <LW7BgGraphic />
+            </div>
+            <div className="bg-lw7-gradient absolute inset-0 z-0" />
+          </div>
+          <LaunchWeekPrizeSection className="-mt-60" />
           <TicketBrickWall users={users} />
         </div>
       </DefaultLayout>