Move lw6 to subdir

apps/www/components/Nav/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 import { Button, Badge, IconStar, IconChevronDown } from 'ui'
 import FlyOut from '~/components/UI/FlyOut'
@@ -19,6 +20,8 @@ import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-w
 
 const Nav = () => {
   const { isDarkMode } = useTheme()
+  const { pathname } = useRouter()
+  const isLauchWeekPage = pathname.includes('launch-week')
   const [open, setOpen] = useState(false)
 
   const [openProduct, setOpenProduct] = useState(false)
@@ -160,6 +163,7 @@ const Nav = () => {
         px-1
         text-sm font-medium
         transition-colors
+        ${isLauchWeekPage ? '!text-white' : ''}
                 ` + props.active
       }
       onClick={props.onClick}
@@ -172,7 +176,11 @@ const Nav = () => {
             (props.active && ' rotate-180 transform transition-all duration-100')
           }
         >
-          <IconChevronDown size={14} strokeWidth={2} />
+          <IconChevronDown
+            size={14}
+            strokeWidth={2}
+            className={isLauchWeekPage ? 'text-white' : ''}
+          />
         </div>
       </>
     </div>
@@ -182,8 +190,16 @@ const Nav = () => {
     <>
       {/* <Announcement /> */}
       <div className="sticky top-0 z-50">
-        <div className="bg-scale-200 absolute top-0 h-full w-full opacity-80"></div>
-        <nav className="border-scale-400 border-b backdrop-blur-sm">
+        <div
+          className={`${
+            isLauchWeekPage ? '' : 'bg-scale-200'
+          } absolute top-0 h-full w-full opacity-80`}
+        ></div>
+        <nav
+          className={`border-scale-400 backdrop-blur-sm border-b ${
+            isLauchWeekPage ? 'border-[#be9eea]' : ''
+          }`}
+        >
           {/* <div className="lg:container mx-auto relative flex justify-between h-16 lg:px-10 xl:px-0"> */}
           <div className="relative mx-auto flex h-16 justify-between lg:container lg:px-16 xl:px-20">
             <HamburgerButton toggleFlyOut={() => setOpen(true)} />
@@ -193,7 +209,13 @@ const Nav = () => {
                   <Link href="/" as="/">
                     <a className="block h-6 w-auto">
                       <Image
-                        src={isDarkMode ? supabaseLogoWordmarkDark : supabaseLogoWordmarkLight}
+                        src={
+                          isLauchWeekPage
+                            ? supabaseLogoWordmarkDark
+                            : isDarkMode
+                            ? supabaseLogoWordmarkDark
+                            : supabaseLogoWordmarkLight
+                        }
                         width={124}
                         height={24}
                         alt="Supabase Logo"
@@ -218,6 +240,7 @@ const Nav = () => {
                         text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
                         border-b-2 border-transparent p-5 px-1
                         text-sm font-medium
+                        ${isLauchWeekPage ? '!text-white' : ''}
                       `}
                     >
                       Pricing
@@ -229,6 +252,7 @@ const Nav = () => {
                         text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
                         border-b-2 border-transparent p-5 px-1
                         text-sm font-medium
+                        ${isLauchWeekPage ? '!text-white' : ''}
                       `}
                     >
                       Blog
@@ -247,7 +271,7 @@ const Nav = () => {
                   icon={
                     <div className="text-brand-800 flex h-4  w-4 items-center justify-center">
                       <div
-                        className="text-scale-900 flex h-3 w-3 items-center justify-center
+                        className={`text-scale-900 flex h-3 w-3 items-center justify-center
 
                       transition-all
                       group-hover:h-4
@@ -257,13 +281,15 @@ const Nav = () => {
                       group-focus:w-4
 
                       group-focus:text-yellow-900"
+                      ${isLauchWeekPage ? '!text-white' : ''}
+                      `}
                       >
                         <IconStar strokeWidth={2} />
                       </div>
                     </div>
                   }
                 >
-                  Star us on GitHub
+                  <span className={isLauchWeekPage ? '!text-white' : ''}>Star us on GitHub</span>
                 </Button>
 
                 <Link href="https://app.supabase.com/">

apps/www/pages/launch-week/6/styles/launchWeek6.module.css

@@ -0,0 +1,25 @@
+.mask {
+  mask-image: radial-gradient(black, transparent);
+}
+
+.dark_community {
+  background-image: radial-gradient(closest-side at 50% 50%, #132121, #132121db, #121212);
+}
+
+.community {
+  background-image: radial-gradient(closest-side at 50% 50%, #d9eeef, #dbeef0, white);
+}
+
+.wrappers > span {
+  left: -200px !important;
+}
+
+.community_wrappers > span {
+  left: -400px !important;
+}
+
+@media (max-width: 768px) {
+  .community_wrappers > span > img {
+    object-fit: contain !important;
+  }
+}

apps/www/pages/launch-week/6/styles/utils6.module.css

@@ -0,0 +1,76 @@
+.appear {
+  opacity: 0;
+  animation: appear 0.8s cubic-bezier(0.1, 0, 0.175, 1) forwards;
+}
+
+.appear-first {
+  animation-delay: 0.4s;
+}
+
+.appear-second {
+  animation-delay: 0.8s;
+}
+
+.appear-third {
+  animation-delay: 1.2s;
+}
+
+.appear-fourth {
+  animation-delay: 1.6s;
+}
+
+.appear-fifth {
+  animation-delay: 2s;
+}
+
+.appear-sixth {
+  animation-delay: 2.4s;
+}
+
+@keyframes appear {
+  to {
+    opacity: 1;
+  }
+}
+
+@media (min-width: 1200px) {
+  .hide-on-desktop {
+    display: none;
+  }
+}
+
+.show-on-mobile {
+  display: block;
+}
+
+.hide-on-mobile {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .show-on-mobile {
+    display: none;
+  }
+
+  .hide-on-mobile {
+    display: block;
+  }
+}
+
+.hide-on-tablet {
+  display: block;
+}
+
+.show-on-tablet {
+  display: none;
+}
+
+@media (max-width: 1199px) and (min-width: 768px) {
+  .show-on-tablet {
+    display: block;
+  }
+
+  .hide-on-tablet {
+    display: none;
+  }
+}

apps/www/pages/launch-week/6/types6.d.ts

@@ -0,0 +1,43 @@
+export type Article = {
+  title: string
+  url: string
+  description?: string
+  products?: Product[]
+}
+
+export type Announcement = {
+  title: string
+  url: string
+  description?: string
+  type: 'soc2' | 'producthunt'
+}
+
+export type Product = {
+  title: string
+  url: string
+  description?: string
+}
+
+export type Step = {
+  title: string
+  url: string
+  docs: string
+  description?: string
+}
+
+export interface WeekDayProps {
+  shipped: boolean
+  title: string
+  description: string
+  date: string
+  imgUrl?: string
+  d?: number
+  dd?: 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday'
+  articles?: Article[]
+  announcements?: Announcement[]
+  products?: Announcement[]
+  index: number
+  shippingHasStarted?: boolean
+  youtube_id?: string
+  steps: Step[]
+}

apps/www/pages/launch-week/launchWeek.module.css

@@ -1,25 +1,7 @@
-.mask {
-  mask-image: radial-gradient(black, transparent);
+.bg-lw7 {
+  background: linear-gradient(135.19deg, #c9aaf3 -0.85%, #ab89da 27.17%, #8e6fa0 76.71%);
 }
 
-.dark_community {
-  background-image: radial-gradient(closest-side at 50% 50%, #132121, #132121db, #121212);
-}
-
-.community {
-  background-image: radial-gradient(closest-side at 50% 50%, #d9eeef, #dbeef0, white);
-}
-
-.wrappers > span {
-  left: -200px !important;
-}
-
-.community_wrappers > span {
-  left: -400px !important;
-}
-
-@media (max-width: 768px) {
-  .community_wrappers > span > img {
-    object-fit: contain !important;
-  }
+.bg-lw7-black-transition {
+  background: linear-gradient(0.39deg, #1c1c1c 53.84%, rgba(28, 28, 28, 0) 88.21%);
 }