From 2852d67f149cbbfc73d192c1fe0cdfce46d0a11a Mon Sep 17 00:00:00 2001 From: Francesco Sansalvadore Date: Fri, 8 Dec 2023 17:52:27 +0100 Subject: [PATCH] X Build Stage (#19531) * start lwx pre release * prepare data * prepare layout * main stage + build stage layouts * lwx sticky nav * update build stage layout * more padding to meetups * udpate build stage layout * finish player * dimm upcoming days * update postgres blog link * active link while scrolling lwx page * increase x size * update design blog subtitle * smol fixes * update design post link * add target blank prop * update post description * update nav featured posts * update design card descr * The * Fix nav indexes --- ...023-12-08-how-design-works-at-supabase.mdx | 2 +- .../components/LaunchWeek/X/Album/Player.tsx | 93 +++ ...outsSection.tsx => LWXCalloutsSection.tsx} | 4 +- .../LaunchWeek/X/LaunchWeekPrizeSection.tsx | 6 +- .../LaunchWeek/X/Releases/BuildStage.tsx | 75 +++ .../LaunchWeek/X/Releases/LWXHeader.tsx | 22 + .../LaunchWeek/X/Releases/LWXStickyNav.tsx | 99 +++ .../LaunchWeek/X/Releases/MainStage.tsx | 20 + .../X/Releases/components/AdventCard.tsx | 99 +++ .../X/Releases/components/DaySection.tsx | 109 ++++ .../X/Releases/components/index.tsx | 409 ++---------- .../LaunchWeek/X/Releases/data/index.ts | 4 + .../X/Releases/data/lwx_advent_days.tsx | 300 +++++++++ .../LaunchWeek/X/Releases/data/lwx_data.tsx | 147 +++++ .../LaunchWeek/X/Releases/index.tsx | 599 ------------------ .../LaunchWeek/X/Releases/lw8_data.ts | 237 ------- .../X/Releases/styles/launchWeek7.module.css | 29 - .../X/Releases/styles/utils7.module.css | 76 --- .../LaunchWeek/X/Ticket/TicketDisclaimer.tsx | 7 - .../X/Ticket/ticket-copy.module.css | 190 ------ .../X/Ticket/ticket-visual.module.css | 70 -- .../LaunchWeek/X/Ticket/ticket.module.css | 141 ----- apps/www/components/Layouts/Default.tsx | 2 +- apps/www/components/Nav/index.tsx | 8 +- apps/www/data/Announcements.json | 32 +- apps/www/lib/authors.json | 2 +- apps/www/pages/launch-week/index.tsx | 12 +- .../images/launchweek/lwx/lwx_header.png | Bin 0 -> 104586 bytes .../images/launchweek/lwx/lwx_header.svg | 266 ++++++++ packages/ui/index.tsx | 4 +- packages/ui/internals/icons.js | 4 +- .../Icon/icons/IconMicSolid/IconMicSolid.tsx | 18 + .../Icon/icons/IconMicSolid/index.tsx | 1 + .../icons/IconProductHunt/IconProductHunt.tsx | 16 + .../Icon/icons/IconProductHunt/index.tsx | 1 + .../ui/src/components/Icon/icons/index.tsx | 3 +- 36 files changed, 1383 insertions(+), 1724 deletions(-) create mode 100644 apps/www/components/LaunchWeek/X/Album/Player.tsx rename apps/www/components/LaunchWeek/X/{LW8CalloutsSection.tsx => LWXCalloutsSection.tsx} (97%) create mode 100644 apps/www/components/LaunchWeek/X/Releases/BuildStage.tsx create mode 100644 apps/www/components/LaunchWeek/X/Releases/LWXHeader.tsx create mode 100644 apps/www/components/LaunchWeek/X/Releases/LWXStickyNav.tsx create mode 100644 apps/www/components/LaunchWeek/X/Releases/MainStage.tsx create mode 100644 apps/www/components/LaunchWeek/X/Releases/components/AdventCard.tsx create mode 100644 apps/www/components/LaunchWeek/X/Releases/components/DaySection.tsx create mode 100644 apps/www/components/LaunchWeek/X/Releases/data/index.ts create mode 100644 apps/www/components/LaunchWeek/X/Releases/data/lwx_advent_days.tsx create mode 100644 apps/www/components/LaunchWeek/X/Releases/data/lwx_data.tsx delete mode 100644 apps/www/components/LaunchWeek/X/Releases/index.tsx delete mode 100644 apps/www/components/LaunchWeek/X/Releases/lw8_data.ts delete mode 100644 apps/www/components/LaunchWeek/X/Releases/styles/launchWeek7.module.css delete mode 100644 apps/www/components/LaunchWeek/X/Releases/styles/utils7.module.css delete mode 100644 apps/www/components/LaunchWeek/X/Ticket/TicketDisclaimer.tsx delete mode 100644 apps/www/components/LaunchWeek/X/Ticket/ticket-copy.module.css delete mode 100644 apps/www/components/LaunchWeek/X/Ticket/ticket-visual.module.css delete mode 100644 apps/www/components/LaunchWeek/X/Ticket/ticket.module.css create mode 100644 apps/www/public/images/launchweek/lwx/lwx_header.png create mode 100644 apps/www/public/images/launchweek/lwx/lwx_header.svg create mode 100644 packages/ui/src/components/Icon/icons/IconMicSolid/IconMicSolid.tsx create mode 100644 packages/ui/src/components/Icon/icons/IconMicSolid/index.tsx create mode 100644 packages/ui/src/components/Icon/icons/IconProductHunt/IconProductHunt.tsx create mode 100644 packages/ui/src/components/Icon/icons/IconProductHunt/index.tsx diff --git a/apps/www/_blog/2023-12-08-how-design-works-at-supabase.mdx b/apps/www/_blog/2023-12-08-how-design-works-at-supabase.mdx index c4f2614a434..cea06102345 100644 --- a/apps/www/_blog/2023-12-08-how-design-works-at-supabase.mdx +++ b/apps/www/_blog/2023-12-08-how-design-works-at-supabase.mdx @@ -1,6 +1,6 @@ --- title: 'How design works at Supabase' -description: 'How design works at Supabase' +description: "The transformative journey of Supabase's Design team and its unique culture to enhance the output and quality of the entire company." launchweek: X categories: - product diff --git a/apps/www/components/LaunchWeek/X/Album/Player.tsx b/apps/www/components/LaunchWeek/X/Album/Player.tsx new file mode 100644 index 00000000000..b6170263fe8 --- /dev/null +++ b/apps/www/components/LaunchWeek/X/Album/Player.tsx @@ -0,0 +1,93 @@ +import Link from 'next/link' +import { useAudio } from 'react-use' +import { IconArrowRight, cn } from 'ui' + +const Player = () => { + const [audio, state, controls, ref] = useAudio({ + src: 'https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/audio/supabase-album/Quaid.m4a', + loop: true, + }) + + const isPlaying = state.playing + const trackName = audio.props.src?.split('/')?.slice(-1)?.toString()?.split('.')[0] + const duration = ref?.current?.duration ?? 0 + const progress = (state.time * 100) / duration + const playerLength = 47 + const playerProgress = -(progress * playerLength) / 100 - playerLength + + return ( +
+ {audio} + + Now playing + + {trackName} + + + + +
+ ) +} + +export default Player diff --git a/apps/www/components/LaunchWeek/X/LW8CalloutsSection.tsx b/apps/www/components/LaunchWeek/X/LWXCalloutsSection.tsx similarity index 97% rename from apps/www/components/LaunchWeek/X/LW8CalloutsSection.tsx rename to apps/www/components/LaunchWeek/X/LWXCalloutsSection.tsx index 21d017c48fc..b61b2089105 100644 --- a/apps/www/components/LaunchWeek/X/LW8CalloutsSection.tsx +++ b/apps/www/components/LaunchWeek/X/LWXCalloutsSection.tsx @@ -4,7 +4,7 @@ import { SmallCard } from '../8/Releases/components' import Link from 'next/link' import Image from 'next/image' -const LW8CalloutsSection = () => { +const LWXCalloutsSection = () => { return (
@@ -58,4 +58,4 @@ const LW8CalloutsSection = () => { ) } -export default LW8CalloutsSection +export default LWXCalloutsSection diff --git a/apps/www/components/LaunchWeek/X/LaunchWeekPrizeSection.tsx b/apps/www/components/LaunchWeek/X/LaunchWeekPrizeSection.tsx index 40becd0a9a6..10011ab5e07 100644 --- a/apps/www/components/LaunchWeek/X/LaunchWeekPrizeSection.tsx +++ b/apps/www/components/LaunchWeek/X/LaunchWeekPrizeSection.tsx @@ -14,6 +14,7 @@ export default function LaunchWeekPrizeSection({ className }: { className?: stri )} >

Awards

+

Stay tuned on Launch Week X's final day to find out if you're one of the lucky winners.

- Increase your chances of winning a limited-edition{' '} - 62-Key ISO Mechanical Keyboard by - sharing your ticket on X and LinkedIn. + Limited-edition{' '} + 62-Key ISO Mechanical Keyboard

diff --git a/apps/www/components/LaunchWeek/X/Releases/BuildStage.tsx b/apps/www/components/LaunchWeek/X/Releases/BuildStage.tsx new file mode 100644 index 00000000000..cec5f523148 --- /dev/null +++ b/apps/www/components/LaunchWeek/X/Releases/BuildStage.tsx @@ -0,0 +1,75 @@ +import React, { FC } from 'react' +import { buildDays as days } from '~/components/LaunchWeek/X/Releases/data' + +import SectionContainer from '~/components/Layouts/SectionContainer' +import AdventCard from './components/AdventCard' +import { motion, useInView } from 'framer-motion' +import { IconLock, cn } from 'ui' + +const BuildStage: FC = () => { + const ref = React.useRef(null) + const isInView = useInView(ref, { margin: '-25%', once: true }) + + const variants = { + reveal: { + transition: { + type: 'spring', + damping: 10, + mass: 0.75, + stiffness: 100, + staggerChildren: 0.08, + }, + }, + } + + return ( + <> + +

+ Build Stage +

+ + {days.map((day, i) => ( +
  • + + {!day.is_shipped && ( +
    + + + + + +
    + )} +
    • + ))} +     +     + + ) +} + +export default BuildStage diff --git a/apps/www/components/LaunchWeek/X/Releases/LWXHeader.tsx b/apps/www/components/LaunchWeek/X/Releases/LWXHeader.tsx new file mode 100644 index 00000000000..0b19aaaa647 --- /dev/null +++ b/apps/www/components/LaunchWeek/X/Releases/LWXHeader.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import SectionContainer from '../../../Layouts/SectionContainer' +import Image from 'next/image' + +const LWXHeader = () => { + return ( +
    + + Launch Week X header + +
    + ) +} + +export default LWXHeader diff --git a/apps/www/components/LaunchWeek/X/Releases/LWXStickyNav.tsx b/apps/www/components/LaunchWeek/X/Releases/LWXStickyNav.tsx new file mode 100644 index 00000000000..64add2824b6 --- /dev/null +++ b/apps/www/components/LaunchWeek/X/Releases/LWXStickyNav.tsx @@ -0,0 +1,99 @@ +import React, { FC, useEffect, useRef } from 'react' +import Image from 'next/image' +import Link from 'next/link' +import { WeekDayProps, mainDays as days } from './data' +import { cn } from 'ui' +import { isBrowser } from 'common' + +import SectionContainer from '~/components/Layouts/SectionContainer' +import Player from '../Album/Player' + +const LWXStickyNav: FC = () => { + const OFFSET = 66 + const anchors = useRef | null>(null) + const links = useRef | null>(null) + + const handleScroll = () => { + let newActiveAnchor: string = '' + + anchors.current?.forEach((anchor) => { + const { y: offsetFromTop } = anchor.getBoundingClientRect() + + if (offsetFromTop - OFFSET < 0) { + newActiveAnchor = anchor.id + } + }) + + links.current?.forEach((link) => { + link.classList.remove('!text-foreground') + + const sanitizedHref = decodeURI(link.getAttribute('href') ?? '') + .split('#') + .splice(-1) + .join('') + const isMatch = sanitizedHref === newActiveAnchor + + if (isMatch) { + link.classList.add('!text-foreground') + } + }) + } + + useEffect(() => { + if (!isBrowser) return + anchors.current = document.querySelectorAll('.lwx-nav-anchor') + links.current = document.querySelectorAll('.lwx-sticky-nav li a') + + window.addEventListener('scroll', handleScroll) + return () => { + window.removeEventListener('scroll', handleScroll) + } + }, []) + + return ( +
    + +
    + ) +} + +export default LWXStickyNav diff --git a/apps/www/components/LaunchWeek/X/Releases/MainStage.tsx b/apps/www/components/LaunchWeek/X/Releases/MainStage.tsx new file mode 100644 index 00000000000..9cbd511ef73 --- /dev/null +++ b/apps/www/components/LaunchWeek/X/Releases/MainStage.tsx @@ -0,0 +1,20 @@ +import React, { FC } from 'react' +import { mainDays as days } from './data' + +import SectionContainer from '~/components/Layouts/SectionContainer' +import DaySection from './components/DaySection' + +const MainStage: FC = () => ( + +

    + Main Stage +

    +
    + {days.map((day) => ( + + ))} +
    +     +) + +export default MainStage diff --git a/apps/www/components/LaunchWeek/X/Releases/components/AdventCard.tsx b/apps/www/components/LaunchWeek/X/Releases/components/AdventCard.tsx new file mode 100644 index 00000000000..73ed654777e --- /dev/null +++ b/apps/www/components/LaunchWeek/X/Releases/components/AdventCard.tsx @@ -0,0 +1,99 @@ +import React, { useEffect, useRef, useState } from 'react' +import Link from 'next/link' +import { motion } from 'framer-motion' +import Tilt from 'vanilla-tilt' +import { cn } from 'ui' +import { useBreakpoint } from 'common' + +import { AdventDay } from '../data' +import { AdventLink } from '../data/lwx_advent_days' + +const AdventCard = ({ day, index }: { day: AdventDay; index: number }) => { + const isTablet = useBreakpoint(1024) + const ticketRef = useRef(null) + const hiddenRef = useRef(null) + const [hiddenHeight, setHiddenHeight] = useState(0) + const transition = { type: 'spring', damping: 10, mass: 0.75, stiffness: 100, delay: index / 15 } + const variants = { + initial: { + rotateY: -90, + opacity: 0, + }, + ...(day.is_shipped && { + reveal: { + rotateY: 0, + opacity: 1, + transition, + }, + }), + } + + useEffect(() => { + if (ticketRef.current) { + Tilt.init(ticketRef.current, { + glare: false, + max: 4, + gyroscope: false, + 'full-page-listening': false, + }) + } + }, [ticketRef]) + + useEffect(() => { + if (hiddenRef?.current) { + const { height } = hiddenRef.current.getBoundingClientRect() + setHiddenHeight(height) + } + }, [hiddenRef]) + + return ( +
    + +
    {day.icon}
    +
    +

    {day.title}

    +
    +

    {day.description}

    +
    + {day.links?.map((link: AdventLink) => ( + + {link.label} + + ))} +
    +
    +
    +     +
    + ) +} + +export default AdventCard diff --git a/apps/www/components/LaunchWeek/X/Releases/components/DaySection.tsx b/apps/www/components/LaunchWeek/X/Releases/components/DaySection.tsx new file mode 100644 index 00000000000..4603994d20a --- /dev/null +++ b/apps/www/components/LaunchWeek/X/Releases/components/DaySection.tsx @@ -0,0 +1,109 @@ +import React from 'react' +import { WeekDayProps } from '../data' +import { DayLink } from '.' +import Image from 'next/image' +import { useBreakpoint } from 'common' +import { IconEdit2, cn } from 'ui' +import CountdownComponent from '../../Countdown' +import Link from 'next/link' + +const DaySection = ({ day }: { day: WeekDayProps }) => { + const isTablet = useBreakpoint(1023) + const cssGroup = 'group/d' + day.d + + return ( +
    + {/* Day title and links */} +
    +
    + {day.dd}, {day.date} +
    + {day.shipped && ( +
      + {day.links?.map((link) => ( +
    • + +
      • + ))} +
    + )} +
    + + {/* Day Countdown */} + {!day.shipped && day.hasCountdown && ( +
    + + + + + + +
    + )} + + {/* Day card */} + {day.shipped && day.steps.length > 0 && ( +
    + +
    +
    + Blog post +
    +

    {day.description}

    +
    + {day.steps[0]?.bg_layers && + day.steps[0]?.bg_layers?.map( + (layer, i) => + !!layer.img && ( +
    + {day.title} +
    + ) + )} + +
    + )} +
    + ) +} + +export default DaySection diff --git a/apps/www/components/LaunchWeek/X/Releases/components/index.tsx b/apps/www/components/LaunchWeek/X/Releases/components/index.tsx index e0832847c2c..7a68dc014ff 100644 --- a/apps/www/components/LaunchWeek/X/Releases/components/index.tsx +++ b/apps/www/components/LaunchWeek/X/Releases/components/index.tsx @@ -1,119 +1,8 @@ -import { Badge, ExpandableVideo } from 'ui' +import { IconDocumentation, IconMicSolid, IconProductHunt, IconYoutubeSolid, cn } from 'ui' import Link from 'next/link' -import CountdownComponent from '../../Countdown' import Image from 'next/image' - -export const PencilSvg = () => ( - - - -) -export const DocsSvg = () => ( - - - -) -export const PlaySvg = () => ( - - - -) -export const GithubSvg = () => ( - - - -) -export const LinkSvg = () => ( - - - -) -export const ArrowTopRightSvg = () => ( - - - - -) -export const HackernewsSvg = () => ( - - - -) - -export const TwitterSpacesSvg = () => ( - - - - -) - -export const ProductHuntSvg = () => ( - - - - - - - - - - -) +import { StepLink } from '../data/lwx_data' export const CheckCircleSolidIcon = () => ( @@ -136,17 +25,17 @@ export const SmallCard = ({ children: any }) => (
    {children}
    @@ -160,11 +49,7 @@ export const StyledArticleBadge = ({ className?: string children: any }) => ( -
    +
    {children} @@ -174,95 +59,55 @@ export const StyledArticleBadge = ({
    ) -export const AccordionHeader = ({ - date, - day, - weekDay, - title, - shipped, - publishedAt, - shippable = true, - youtube_id, - videoThumbnail, -}: { - date: string - day: number - weekDay: string - title: string - shipped?: boolean - publishedAt: string - shippable?: boolean - youtube_id?: string - videoThumbnail?: string -}) => ( -
    -
    -
    - - {weekDay} - {date && ( - - ・ {date} - - )} - - {shippable && shipped && ( - - )} - {shippable && shipped && youtube_id && ( -
    - - } - /> -
    - )} -
    - {/* {shippable && !shipped && ( - - - - - - +interface DayLink extends StepLink { + className?: string +} - {day === 5 && } - - )} */} -
    -
    -) +export const DayLink = ({ type, icon, text, href = '', className }: DayLink) => { + const linkTypes = { + docs: { + icon: IconDocumentation, + text: 'Docs', + }, + productHunt: { + icon: IconProductHunt, + text: 'Product Hunt', + }, + video: { + icon: IconYoutubeSolid, + text: 'Watch video', + }, + xSpace: { + icon: IconMicSolid, + text: 'X Space', + }, + } + const isTargetBlank = () => { + switch (type) { + case 'productHunt': + case 'docs': + return true + } + } + const Icon = icon ?? linkTypes[type].icon + const Text = () => <>{text ?? linkTypes[type]?.text} + + return ( + + + + + + + ) +} export const VideoPreviewTrigger = ({ title, @@ -287,24 +132,6 @@ export const VideoPreviewTrigger = ({
    ) -export const MultistepSectionHeader = ({ title, blog }: any) => { - return ( -
    -
    - {title && {title}} - {!!blog && ( - - Blog post -
    - -
    -     - )} -
    -
    - ) -} - export const ChipLink = ({ href, uiOnly, @@ -320,10 +147,10 @@ export const ChipLink = ({ }) => uiOnly ? ( {children} @@ -332,131 +159,25 @@ export const ChipLink = ({ href={href} target={target ?? '_self'} rel="noopener" - className={[ + className={cn( 'flex flex-auto justify-center sm:justify-between w-full text-center sm:text-left min-h-[43px] sm:w-auto items-center border border-[#232323] bg-gradient-to-r text-white from-[#46444460] to-[#19191980] hover:from-[#4e4e4e90] hover:to-[#19191990] hover:border-stronger backdrop-blur-xl rounded-full text-sm py-2 px-3 sm:pr-2', - className, - ].join(' ')} + className + )} > {children} ) : null -export const SectionButtons = ({ - blog, - docs, - video, - github, - url, - hackernews, - twitter_spaces, - product_hunt, - mobileGrid, -}: { - blog?: string - docs?: string - video?: string - github?: string - url?: string - hackernews?: string - twitter_spaces?: string - product_hunt?: string - mobileGrid?: boolean -}) => { - return ( -
    - {!!blog && ( - - Blog post -
    - -
    -     - )} - {!!docs && ( - - Docs -
    - -
    -     - )} - {!!video && ( - - Video -
    - -
    -     - )} - {!!github && ( - - GitHub -
    - -
    -     - )} - {!!url && ( - - Read -
    - -
    -     - )} - {hackernews && ( - - Hacker News -
    - -
    -     - )} - {product_hunt && ( - - Product Hunt -
    - -
    -     - )} - {twitter_spaces && ( - - Twitter Spaces -
    - -
    -     - )} -
    - ) -} - export const CartTitle = ({ children, className }: { children: any; className?: string }) => ( - + {children} -
    ) export default { - AccordionHeader, - DocsSvg, - PencilSvg, - PlaySvg, + DayLink, CartTitle, ChipLink, - SectionButtons, SmallCard, StyledArticleBadge, } diff --git a/apps/www/components/LaunchWeek/X/Releases/data/index.ts b/apps/www/components/LaunchWeek/X/Releases/data/index.ts new file mode 100644 index 00000000000..508893faca4 --- /dev/null +++ b/apps/www/components/LaunchWeek/X/Releases/data/index.ts @@ -0,0 +1,4 @@ +export { default as mainDays } from './lwx_data' +export type { StepProps, StepLink, WeekDayProps } from './lwx_data' +export { days as buildDays } from './lwx_advent_days' +export type { AdventDay } from './lwx_advent_days' diff --git a/apps/www/components/LaunchWeek/X/Releases/data/lwx_advent_days.tsx b/apps/www/components/LaunchWeek/X/Releases/data/lwx_advent_days.tsx new file mode 100644 index 00000000000..94552e38d50 --- /dev/null +++ b/apps/www/components/LaunchWeek/X/Releases/data/lwx_advent_days.tsx @@ -0,0 +1,300 @@ +export interface AdventDay { + type: string | 'blog' + icon?: any + className?: string + id: string + title: string + description?: string + is_shipped: boolean + image: string + links: AdventLink[] +} + +export interface AdventLink { + url: string + label: string + target?: '_blank' +} + +export const days: AdventDay[] = [ + { + title: 'Supabase Album', + description: 'The best soundtrack to build your app in a weekend', + type: '', + className: '', + icon: ( + + + + + + ), + id: '', + is_shipped: true, + links: [ + { + url: 'https://supabase.productions/', + label: 'Listen now', + target: '_blank', + }, + ], + image: '', + }, + { + title: 'Postgres Language Server', + description: 'Implementing the Parser', + type: '', + className: '', + icon: ( + + + + + ), + id: '', + is_shipped: true, + links: [ + { + url: '/blog/postgres-language-server-implementing-parser', + label: 'Blog post', + }, + ], + image: '', + }, + { + type: '', + title: 'Design at Supabase', + description: "The transformative journey of Supabase's Design team", + className: '', + icon: ( + + + + + ), + id: '', + is_shipped: true, + links: [ + { + url: '/blog/how-design-works-at-supabase', + label: 'Blog post', + }, + ], + image: '', + }, + { + title: '', + type: '', + is_shipped: false, + className: '', + icon: '', + id: '', + links: [ + { + url: '', + label: '', + }, + ], + image: '', + }, + { + title: '', + type: '', + is_shipped: false, + className: 'col-span-2 xl:col-span-3 aspect-[2/1] xl:aspect-auto md:h-full', + icon: '', + id: '', + links: [ + { + url: '', + label: '', + }, + ], + image: '', + }, + { + title: '', + type: '', + is_shipped: false, + className: '', + icon: '', + id: '', + links: [ + { + url: '', + label: '', + }, + ], + image: '', + }, + { + title: '', + type: '', + is_shipped: false, + className: '', + icon: '', + id: '', + links: [ + { + url: '', + label: '', + }, + ], + image: '', + }, + { + title: '', + type: '', + is_shipped: false, + className: 'xl:col-span-2 xl:aspect-auto h-full', + icon: '', + id: '', + links: [ + { + url: '', + label: '', + }, + ], + image: '', + }, + { + title: '', + type: '', + is_shipped: false, + className: '', + icon: '', + id: '', + links: [ + { + url: '', + label: '', + }, + ], + image: '', + }, + { + title: '', + type: '', + is_shipped: false, + className: '', + icon: '', + id: '', + links: [ + { + url: '', + label: '', + }, + ], + image: '', + }, + { + title: '', + type: '', + is_shipped: false, + className: 'xl:col-span-2 xl:aspect-auto h-full', + icon: '', + id: '', + links: [ + { + url: '', + label: '', + }, + ], + image: '', + }, + { + title: '', + type: '', + is_shipped: false, + className: '', + icon: '', + id: '', + links: [ + { + url: '', + label: '', + }, + ], + image: '', + }, + { + title: '', + type: '', + is_shipped: false, + className: 'xl:col-span-2 md:aspect-auto h-full', + icon: '', + id: '', + links: [ + { + url: '', + label: '', + }, + ], + image: '', + }, + { + title: '', + type: '', + className: + 'col-span-2 aspect-[2/1] md:col-span-1 md:aspect-auto xl:col-span-2 xl:aspect-[2/1] h-full', + is_shipped: false, + icon: '', + id: '', + links: [ + { + url: '', + label: '', + }, + ], + image: '', + }, +] diff --git a/apps/www/components/LaunchWeek/X/Releases/data/lwx_data.tsx b/apps/www/components/LaunchWeek/X/Releases/data/lwx_data.tsx new file mode 100644 index 00000000000..622bce2e743 --- /dev/null +++ b/apps/www/components/LaunchWeek/X/Releases/data/lwx_data.tsx @@ -0,0 +1,147 @@ +import { ReactNode } from 'react' + +const images = {} + +type StepLinkType = 'productHunt' | 'video' | 'docs' | 'xSpace' + +export interface StepLink { + type: StepLinkType + text?: string + icon?: any + href: string +} + +export interface StepProps { + title: string + badge?: string + blog?: string + docs?: string + description?: string + github?: string + hackernews?: string + product_hunt?: string + thumb?: string + url?: string + video?: string + twitter_spaces?: string + className?: string + hideInBlog?: boolean + bg_layers?: { + img?: string + mobileImg?: string + className?: string + }[] + steps: StepProps[] | [] +} + +export interface WeekDayProps { + id: string + title: string + shipped: boolean + date: string + published_at: string + isToday?: boolean + hasCountdown?: boolean + description: string | ReactNode + d: number + dd: string + links?: StepLink[] + videoThumbnail?: string + blog?: string + steps: StepProps[] | [] +} + +export const endOfLW8 = '2023-12-15T23:59:59.999-08:00' + +const days: WeekDayProps[] = [ + { + id: 'day-1', + title: 'Read Replicas', + shipped: false, + // isToday: true, + blog: '', + hasCountdown: true, + date: '11 Dec', + published_at: '2023-12-11T08:00:00.000-08:00', + description: null, + d: 1, + dd: 'Mon', + links: [ + { + type: 'productHunt', + href: 'https://www.producthunt.com/', + }, + { + type: 'video', + href: 'https://www.youtube.com/', + }, + { + type: 'xSpace', + href: 'https://twitter.com/home', + }, + { + type: 'docs', + href: 'https://supabase.com/docs', + }, + ], + steps: [ + { + title: "Why we'll stay remote", + blog: '/blog/why-supabase-remote', + // bg_layers: [{ img: images['00-stay-remote'] }], + steps: [], + }, + ], + }, + { + id: 'day-2', + title: '', + shipped: false, + blog: '', + hasCountdown: false, + date: '12 Dec', + published_at: '2023-12-12T08:00:00.000-08:00', + description: '', + d: 2, + dd: 'Tue', + steps: [], + }, + { + id: 'day-3', + title: '', + shipped: false, + blog: '', + date: '13 Dec', + published_at: '2023-12-13T08:00:00.000-08:00', + description: '', + d: 3, + dd: 'Wed', + steps: [], + }, + { + id: 'day-4', + title: '', + shipped: false, + blog: '', + date: '14 Dec', + published_at: '2023-12-14T08:00:00.000-08:00', + description: '', + d: 4, + dd: 'Thu', + steps: [], + }, + { + id: 'day-5', + title: '', + shipped: false, + blog: '', + date: '15 Dec', + published_at: '2023-12-15T08:00:00.000-08:00', + description: '', + d: 5, + dd: 'Fri', + steps: [], + }, +] + +export default days diff --git a/apps/www/components/LaunchWeek/X/Releases/index.tsx b/apps/www/components/LaunchWeek/X/Releases/index.tsx deleted file mode 100644 index e90f9c76c6e..00000000000 --- a/apps/www/components/LaunchWeek/X/Releases/index.tsx +++ /dev/null @@ -1,599 +0,0 @@ -import Image from 'next/image' -import Link from 'next/link' -import { Accordion } from 'ui' -import { useBreakpoint } from 'common/hooks/useBreakpoint' - -import { - AccordionHeader, - CartTitle, - CheckCircleSolidIcon, - MultistepSectionHeader, - SectionButtons, -} from './components' -import SectionContainer from '~/components/Layouts/SectionContainer' -import days, { WeekDayProps } from './lw8_data' - -export default function LW8Releases() { - const [preRelease, day1, day2, day3, day4, day5] = days - const isTablet = useBreakpoint(1023) - const isDesktop = useBreakpoint(1280) - const showAll = false - const publishedSections = - days - .filter( - (day: WeekDayProps) => Date.parse(day.publishedAt) <= Date.now() || day.shipped || showAll - ) - .map((day: WeekDayProps) => day.d.toString()) ?? [] - - return ( - <> - - -
    - - } - key={preRelease.dd} - className="h-[79px]" - id={preRelease.d.toString()} - > - {preRelease.steps.length > 0 && ( -
    -
    -
    -
    - {preRelease.steps[0].title} -

    {preRelease.steps[0]?.description}

    -
    - - {preRelease.steps[0]?.bg_layers && - preRelease.steps[0]?.bg_layers?.map( - (layer, i) => - !!layer.img && ( -
    - -
    - ) - )} -
    -
    -
    -
    - {preRelease.steps[1].title} -

    {preRelease.steps[1]?.description}

    -
    - - {preRelease.steps[1]?.bg_layers && - preRelease.steps[1]?.bg_layers?.map( - (layer, i) => - !!layer.img && ( -
    - -
    - ) - )} -
    -
    - {' '} -
    -
    - {preRelease.steps[2].title} -

    {preRelease.steps[2]?.description}

    -
    - - {preRelease.steps[2]?.bg_layers && - preRelease.steps[2]?.bg_layers?.map( - (layer, i) => - !!layer.img && ( -
    - -
    - ) - )} -
    -
    - )} - -
    -
    - - - {day1.steps.length > 0 && ( -
    -
    -
    -
    - - {day1.steps[0].title} - -

    {day1.steps[0]?.description}

    -
    - - {day1.steps[0]?.bg_layers && - day1.steps[0]?.bg_layers?.map( - (layer, i) => - !!layer.img && ( -
    - -
    - ) - )} -
    -
    - )} -
    -
    - - - {day2.steps.length > 0 && ( -
    -
    -
    -
    - - {day2.steps[0].title} - -

    {day2.steps[0]?.description}

    -
    - - {day2.steps[0]?.bg_layers && - day2.steps[0]?.bg_layers?.map( - (layer, i) => - !!layer.img && ( -
    - -
    - ) - )} -
    -
    - )} -
    -
    - - - {day3.steps.length > 0 && ( -
    -
    -
    -
    - - {day3.steps[0].title} - -

    {day3.steps[0]?.description}

    -
      -
    • - AI SQL Editor -
      • -
    • - Schema Diagrams -
      • -
    • - Wrappers -
      • -
    -
    - - {day3.steps[0]?.bg_layers && - day3.steps[0]?.bg_layers?.map( - (layer, i) => - !!layer.img && ( -
    - -
    - ) - )} -
    -
    - )} -
    -
    - - - {day4.steps.length > 0 && ( -
    -
    -
    -
    - - {day4.steps[0].title} - -

    {day4.steps[0]?.description}

    -
    - - {day4.steps[0]?.bg_layers && - day4.steps[0]?.bg_layers?.map( - (layer, i) => - !!layer.img && ( -
    - -
    - ) - )} -
    -
    -
    -
    - - {day4.steps[1].title} - -

    {day4.steps[1]?.description}

    -
    - - {day4.steps[1]?.bg_layers && - day4.steps[1]?.bg_layers?.map( - (layer, i) => - !!layer.img && ( -
    - -
    - ) - )} -
    -
    - )} -
    -
    - - - {day5.steps.length > 0 && ( -
    -
    -
    -
    - - {day5.steps[0].title} - -

    {day5.steps[0]?.description}

    -
    - - {day5.steps[0]?.bg_layers && - day5.steps[0]?.bg_layers?.map( - (layer, i) => - !!layer.img && ( -
    - -
    - ) - )} -
    - -
    -
    -
    - - {day5.steps[1].title} - -

    {day5.steps[1]?.description}

    -
    - - {day5.steps[1]?.bg_layers && - day5.steps[1]?.bg_layers?.map( - (layer, i) => - !!layer.img && ( -
    - -
    - ) - )} -
    - -
    -
    -
    - - {day5.steps[2].title} - -

    {day5.steps[2]?.description}

    -
    - - {day5.steps[2]?.bg_layers && - day5.steps[2]?.bg_layers?.map( - (layer, i) => - !!layer.img && ( -
    - -
    - ) - )} -
    -
    - )} -
    - - - - ) -} diff --git a/apps/www/components/LaunchWeek/X/Releases/lw8_data.ts b/apps/www/components/LaunchWeek/X/Releases/lw8_data.ts deleted file mode 100644 index eb1a074e26c..00000000000 --- a/apps/www/components/LaunchWeek/X/Releases/lw8_data.ts +++ /dev/null @@ -1,237 +0,0 @@ -const images = { - yt_thumbnail: '/images/launchweek/8/lw8-yt-thumb.jpg', - day_1_thumb: '/images/launchweek/8/day1/yt_d1.jpg', - day_2_thumb: '/images/launchweek/8/day2/yt_d2.jpg', - day_3_thumb: '/images/launchweek/8/day3/yt_d3.jpg', - day_4_thumb: '/images/launchweek/8/day4/yt_d4.jpg', - day_5_thumb: '/images/launchweek/8/day5/yt_d5.jpg', - '00-stay-remote': '/images/launchweek/8/day0/remote.png', - '00-pg-server': '/images/launchweek/8/day0/pg-server.png', - '00-constellation': '/images/launchweek/8/day0/constellation.svg', - '01-hugging': '/images/launchweek/8/day1/hugging.svg', - '02-localdev': '/images/launchweek/8/day2/localdev.svg', - '02-localdev-mobile': '/images/launchweek/8/day2/localdev-mobile.svg', - '03-studio3': '/images/launchweek/8/day3/studio3.svg', - '03-studio3-mobile': '/images/launchweek/8/day3/studio3-mobile.svg', - '04-marketplace': '/images/launchweek/8/day4/marketplace.svg', - '04-marketplace-mobile': '/images/launchweek/8/day4/marketplace-mobile.svg', - '04-vercel': '/images/launchweek/8/day4/vercel-integration.svg', - '05-supavisor': '/images/launchweek/8/day5/supavisor.svg', - '05-community': '/images/launchweek/8/day5/community.svg', - '05-compliant': '/images/launchweek/8/day5/compliant.svg', - '05-supavisor-mobile': '/images/launchweek/8/day5/supavisor-mobile.svg', - '05-community-mobile': '/images/launchweek/8/day5/community-mobile.svg', - '05-compliant-mobile': '/images/launchweek/8/day5/compliant-mobile.svg', -} - -export interface StepProps { - title: string - badge?: string - break_thumb_title?: boolean - blog?: string - docs?: string - description?: string - github?: string - hackernews?: string - product_hunt?: string - isNew?: boolean - thumb?: string - url?: string - video?: string - twitter_spaces?: string - className?: string - hideInBlog?: boolean - bg_layers?: { - lottie?: any - img?: string - mobileImg?: string - }[] - steps: StepProps[] | [] -} -export interface WeekDayProps { - title: string - shipped: boolean - date: string - publishedAt: string - description: string - d: number - dd: string - youtube_id: string - videoThumbnail?: string - blogpost?: string - docs?: string - twitter_spaces?: string - steps: StepProps[] | [] -} - -export const endOfLW8 = '2023-08-11T23:59:59.999-07:00' - -const days: WeekDayProps[] = [ - { - title: '', - shipped: true, - date: '04 Aug', - publishedAt: '2023-08-04T09:00:00.000-07:00', - description: '', - d: 0, - dd: 'Pre-release', - youtube_id: '', - blogpost: '', - docs: '', - steps: [ - { - title: "Why we'll stay remote", - blog: '/blog/why-supabase-remote', - bg_layers: [{ img: images['00-stay-remote'] }], - steps: [], - }, - { - title: 'Postgres Language Server', - github: 'https://github.com/supabase/postgres_lsp', - hackernews: 'https://news.ycombinator.com/item?id=37020610', - bg_layers: [{ img: images['00-pg-server'] }], - steps: [], - }, - { - title: 'Coding an interactive constellation with Three.js and React Three Fiber', - blog: '/blog/interactive-constellation-threejs-react-three-fiber', - bg_layers: [{ img: images['00-constellation'] }], - steps: [], - }, - ], - }, - { - title: '', - shipped: true, - date: '07 Aug', - publishedAt: '2023-08-07T09:00:00.000-07:00', - description: '', - d: 1, - dd: 'Mon', - youtube_id: 'RJccSbJ9Go4', - videoThumbnail: images.day_1_thumb, - twitter_spaces: 'https://twitter.com/i/spaces/1DXGyvjkeEeJM', - steps: [ - { - title: 'Hugging Face now supported in Supabase', - blog: '/blog/hugging-face-supabase', - hackernews: 'https://news.ycombinator.com/item?id=37035960', - video: 'https://www.youtube.com/watch?v=RJccSbJ9Go4', - twitter_spaces: 'https://twitter.com/i/spaces/1DXGyvjkeEeJM', - bg_layers: [{ img: images['01-hugging'] }], - steps: [], - }, - ], - }, - { - title: '', - shipped: true, - date: '08 Aug', - publishedAt: '2023-08-08T09:00:00.000-07:00', - description: '', - d: 2, - dd: 'Tue', - youtube_id: 'N0Wb85m3YMI', - videoThumbnail: images.day_2_thumb, - twitter_spaces: 'https://twitter.com/i/spaces/1vAxRAvNQyDJl?s=20', - steps: [ - { - title: 'Supabase Local Dev: Migrations, Branching, Observability', - blog: '/blog/supabase-local-dev', - hackernews: 'https://news.ycombinator.com/item?id=37059400', - twitter_spaces: 'https://twitter.com/i/spaces/1vAxRAvNQyDJl?s=20', - bg_layers: [{ img: images['02-localdev'], mobileImg: images['02-localdev-mobile'] }], - steps: [], - }, - ], - }, - { - title: '', - shipped: true, - date: '09 Aug', - publishedAt: '2023-08-09T09:00:00.000-07:00', - description: '', - d: 3, - dd: 'Wed', - youtube_id: '51tCMQPiitQ', - videoThumbnail: images.day_3_thumb, - steps: [ - { - title: 'Supabase Studio 3.0', - blog: '/blog/supabase-studio-3-0', - hackernews: '', - video: '', - product_hunt: 'https://www.producthunt.com/posts/ai-powered-sql-editor', - twitter_spaces: 'https://twitter.com/i/spaces/1vAxRAvNQyDJl?s=20', - bg_layers: [{ img: images['03-studio3'], mobileImg: images['03-studio3-mobile'] }], - steps: [], - }, - ], - }, - { - title: '', - shipped: true, - date: '10 Aug', - publishedAt: '2023-08-10T09:00:00.000-07:00', - description: '', - d: 4, - dd: 'Thu', - youtube_id: 'gtJo1lTxHfs', - videoThumbnail: images.day_4_thumb, - twitter_spaces: 'https://twitter.com/supabase/status/1688544207571484672?s=20', - steps: [ - { - title: 'Supabase Integrations Marketplace', - blog: '/blog/supabase-integrations-marketplace', - bg_layers: [{ img: images['04-marketplace'], mobileImg: images['04-marketplace-mobile'] }], - steps: [], - }, - { - title: 'Vercel integrations', - blog: '/blog/using-supabase-with-vercel', - bg_layers: [{ img: images['04-vercel'] }], - steps: [], - }, - ], - }, - { - title: '', - shipped: true, - date: '11 Aug', - publishedAt: '2023-08-11T09:00:00.000-07:00', - description: '', - d: 5, - dd: 'Fri', - youtube_id: 'qzxzLSAJDfE', - videoThumbnail: images.day_5_thumb, - steps: [ - { - title: 'Supabase Supavisor: 1M Postgres connections', - blog: '/blog/supavisor-1-million', - hackernews: '', - video: '', - twitter_spaces: '', - bg_layers: [{ img: images['05-supavisor'], mobileImg: images['05-supavisor-mobile'] }], - steps: [], - }, - { - title: 'Community day', - blog: '/blog/launch-week-8-community-highlights', - hackernews: '', - video: '', - twitter_spaces: '', - bg_layers: [{ img: images['05-community'], mobileImg: images['05-community-mobile'] }], - steps: [], - }, - { - title: 'SOC2 type 2 and HIPAA compliant', - blog: '/blog/supabase-soc2-hipaa', - hackernews: '', - bg_layers: [{ img: images['05-compliant'], mobileImg: images['05-compliant-mobile'] }], - steps: [], - }, - ], - }, -] - -export default days diff --git a/apps/www/components/LaunchWeek/X/Releases/styles/launchWeek7.module.css b/apps/www/components/LaunchWeek/X/Releases/styles/launchWeek7.module.css deleted file mode 100644 index 7a1417601cd..00000000000 --- a/apps/www/components/LaunchWeek/X/Releases/styles/launchWeek7.module.css +++ /dev/null @@ -1,29 +0,0 @@ -.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; - } -} - -.lw7-article-card-gradient { - background: linear-gradient(90deg, #1c1c1c -20%, #20113d50 150%); -} diff --git a/apps/www/components/LaunchWeek/X/Releases/styles/utils7.module.css b/apps/www/components/LaunchWeek/X/Releases/styles/utils7.module.css deleted file mode 100644 index c4aba2ab686..00000000000 --- a/apps/www/components/LaunchWeek/X/Releases/styles/utils7.module.css +++ /dev/null @@ -1,76 +0,0 @@ -.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; - } -} diff --git a/apps/www/components/LaunchWeek/X/Ticket/TicketDisclaimer.tsx b/apps/www/components/LaunchWeek/X/Ticket/TicketDisclaimer.tsx deleted file mode 100644 index e23e77804e2..00000000000 --- a/apps/www/components/LaunchWeek/X/Ticket/TicketDisclaimer.tsx +++ /dev/null @@ -1,7 +0,0 @@ -const TicketDisclaimer = ({ className, children }: { className?: string; children?: any }) => ( -

    - {children || 'By registering you accept to receive email updates on Supabase Launch Week.'} -

    -) - -export default TicketDisclaimer diff --git a/apps/www/components/LaunchWeek/X/Ticket/ticket-copy.module.css b/apps/www/components/LaunchWeek/X/Ticket/ticket-copy.module.css deleted file mode 100644 index 65007c67559..00000000000 --- a/apps/www/components/LaunchWeek/X/Ticket/ticket-copy.module.css +++ /dev/null @@ -1,190 +0,0 @@ -.wrapper { - color: var(--lw-secondary-color); - display: flex; - align-items: center; - justify-content: center; - animation-delay: 2.6s; - flex-direction: column; -} - -:global(.ticket-generated) .wrapper { - animation-delay: 1.2s; -} - -.label { - width: 100%; - margin-bottom: var(--space-2x); -} - -.label-wrapper { - display: flex; - align-items: center; - max-width: 400px; - width: 100%; - justify-content: space-between; -} - -@media (min-width: 768px) { - .wrapper { - flex-direction: row; - } - - .label { - width: auto; - margin-right: 10px; - margin-bottom: 0px; - } - - .label-wrapper { - width: auto; - } -} - -.field { - position: relative; - border-radius: var(--space-2x); - overflow: hidden; - background: var(--gray); -} - -@media (min-width: 768px) { - .field { - padding-right: 50px; - } - .field.desktop-copy-disabled { - padding-right: 0px; - } -} - -.mobile-copy { - margin-bottom: 10px; - display: flex; -} - -.mobile-copy-disabled.mobile-copy-disabled { - display: none; -} - -.mobile-copy * { - color: var(--lw-secondary-color); - transition: color 0.2s ease; -} - -.mobile-copy:hover * { - color: #fff; - transition: color 0.2s ease; -} - -.field * { - color: var(--lw-secondary-color); - transition: color 0.2s ease; -} - -.field:hover * { - color: #fff; - transition: color 0.2s ease; -} - -.url { - width: calc(100vw - 36px); - user-select: all; - overflow-x: scroll; - white-space: nowrap; - display: block; - - padding: var(--space-2x) 14px; - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ -} - -@media (min-width: 436px) { - .url { - width: 400px; - } -} - -@media (min-width: 768px) { - .url { - width: 400px; - } - .mobile-copy { - margin-bottom: 0; - display: none; - } -} - -.url::-webkit-scrollbar { - display: none; -} - -/* .fade { - position: absolute; - background: linear-gradient(90deg, rgba(37, 39, 41, 0%) 0%, #252729 100%); - top: 0; - bottom: 0; - right: 0px; - width: 50px; - z-index: 1; - display: block; - border-radius: var(--space-2x); - pointer-events: none; -} */ - -.desktop-copy.desktop-copy-disabled { - display: none; -} - -@media (min-width: 768px) { - .fade { - right: 50px; - } - .fade.desktop-copy-disabled { - right: 0px; - } -} - -.copied { - display: flex; - z-index: 2; - align-items: center; - justify-content: flex-end; - opacity: 0; - transition: opacity 0.2s ease !important; -} - -.copied.visible { - opacity: 1; -} - -.copy-button { - background: none; - outline: none; - border: none; - cursor: pointer; - z-index: 2; - border-radius: var(--space-2x); - width: 40px; - display: flex; - align-items: center; - justify-content: center; - margin-right: -10px; -} - -@media (min-width: 768px) { - .copied { - position: absolute; - right: 50px; - top: 0px; - bottom: 0px; - background: linear-gradient(90deg, rgba(37, 39, 41, 0%) 0px, #252729 40px); - padding-left: 50px; - } - .copy-button { - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - margin-right: 0px; - width: 50px; - } -} diff --git a/apps/www/components/LaunchWeek/X/Ticket/ticket-visual.module.css b/apps/www/components/LaunchWeek/X/Ticket/ticket-visual.module.css deleted file mode 100644 index f399e967aa1..00000000000 --- a/apps/www/components/LaunchWeek/X/Ticket/ticket-visual.module.css +++ /dev/null @@ -1,70 +0,0 @@ -.visual { - /* transform: translateZ(0); */ - background: linear-gradient( - 30deg, - hsla(274, 100%, 77%, 0.05) 0%, - hsla(200, 43%, 1%, 0.2) 30%, - hsla(200, 43%, 1%, 0.2) 70%, - hsla(151, 50%, 53%, 0.1) 100% - ), - hsla(200, 43%, 1%, 0.8); - /* background: hsla(200, 43%, 1%, 0.2); */ - box-shadow: 0px 1px 27px rgba(158, 68, 239, 0.06), - /* 0 0 0 1px rgba(121, 89, 134, 0.25), */ 0 10px 20px 0px rgba(20, 17, 21, 0.8), - inset 0 0.2px 1px 0.2px rgba(214, 210, 210, 0.4), - inset -0.4px -0.4px 1px -0.3px rgba(74, 252, 175, 0.4); - /* border: 1px solid rgba(0, 0, 0, 0.05); */ - /* border-radius: 16px; */ - - -webkit-backdrop-filter: blur(2px); - backdrop-filter: blur(2px); - - /* border: 1px solid #1c1c1c; */ - /* animation: 2s ease-in-out infinite alternate; */ - - background-repeat: no-repeat; - background-size: contain; -} - -.visual--gold { - background: radial-gradient(#fcdf9d50, #dbb33340); -} - -.visual--gold::before { - content: ' '; - position: absolute; - inset: 0; - filter: drop-shadow(0 0 60px #fcdf9d); - background: radial-gradient(#fcdf9d50, #dbb33320); - /* border: 1px solid #dbb33320; */ -} - -@keyframes opacity-pulse { - from { - opacity: 0.5; - } - - to { - opacity: 1; - } -} - -@keyframes svg-shadow { - from { - filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #d99f0c) drop-shadow(0 0 6px #d99f0c); - } - - to { - filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 6px #d99f0c) drop-shadow(0 0 9px #d99f0c); - } -} - -@keyframes blank-svg-shadow { - from { - filter: drop-shadow(0 0 2px #bada55) drop-shadow(0 0 2px #bada55) drop-shadow(0 0 2px #bada55); - } - - to { - filter: drop-shadow(0 0 3px #bada55) drop-shadow(0 0 2px #bada55) drop-shadow(0 0 2px #bada55); - } -} diff --git a/apps/www/components/LaunchWeek/X/Ticket/ticket.module.css b/apps/www/components/LaunchWeek/X/Ticket/ticket.module.css deleted file mode 100644 index 66abf10d905..00000000000 --- a/apps/www/components/LaunchWeek/X/Ticket/ticket.module.css +++ /dev/null @@ -1,141 +0,0 @@ -.ticket-hero { - background: linear-gradient(137.46deg, rgba(125, 196, 176, 0.04) 0%, rgba(255, 255, 255, 0) 100%), - linear-gradient(137.46deg, rgba(255, 255, 255, 0) 6.19%, rgba(255, 255, 255, 0) 103.29%); - z-index: 10; - box-shadow: 0 1px 1px rgba(131, 6, 184, 0.1), 0 1px 1px rgba(128, 6, 184, 0.1), - 0 20px 30px -30px rgba(76, 195, 138, 0.05), 0 80px 40px -40px rgba(128, 6, 184, 0.04), - inset 0.25px 0.3px 0px 0.3px rgba(209, 243, 227, 0.1), - inset 0.25px 0.3px 0px 0.3px rgba(76, 195, 138, 0.02), - inset 0 -3px 0 -2px rgba(255, 255, 255, 0.08), 0px 4px 20px rgba(118, 7, 170, 0.1); -} - -.hero { - line-height: 1.15; - letter-spacing: -0.05em; - font-weight: 400; - margin: 0; - text-align: center; -} - -@media (min-width: 768px) { - .hero { - line-height: 1; - } -} - -.description { - font-size: 20px; - line-height: 1.4; - color: var(--lw-secondary-color); - text-align: center; - margin: 30px auto; - max-width: 350px; -} - -@media (min-width: 768px) { - .description { - font-size: 24px; - max-width: 415px; - } -} - -.ticket-text { - margin-bottom: 30px; -} - -.ticket-layout { - display: grid; - grid-template-columns: 1fr; - gap: 45px; - margin: auto; - padding: var(--space-4x); - padding-top: 64px; - padding-bottom: 64px; -} - -@media (min-width: 1200px) { - .ticket-layout { - padding-top: 0; - padding-bottom: 0; - } -} - -.ticket-share-layout { - align-items: center; - margin-bottom: auto; -} - -.ticket-visual:before { - left: 50%; - top: -7.5%; - transform: translateZ(0) translateX(-50%) rotate(90deg); -} - -.ticket-visual:after { - left: 50%; - bottom: -7.5%; - transform: translateZ(0) translateX(-50%) rotate(90deg); -} - -@media (min-width: 768px) { - .ticket-visual:before { - top: 50%; - left: -7%; - transform: translateZ(0) translateY(-50%); - } - - .ticket-visual:after { - top: 50%; - left: 96%; - transform: translateZ(0) translateY(-50%); - } -} - -.ticket-actions { - margin-top: 70px; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} - -.ticket-copy { - margin-top: 30px; -} - -.ticket-actions-placeholder { - height: 280px; -} - -@media (min-width: 768px) { - .ticket-actions { - flex-direction: row; - } - .ticket-actions-placeholder { - height: 157px; - } -} - -@media (min-width: 1200px) { - .ticket-layout { - grid-template-columns: 1fr 1fr; - } - .hero { - text-align: left; - } - .description { - text-align: left; - margin: 30px 0; - } -} - -.gold-text { - color: #f4cf72; - text-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.1); -} - -@media (min-width: 768px) { - .gold-text { - color: #e4b641; - } -} diff --git a/apps/www/components/Layouts/Default.tsx b/apps/www/components/Layouts/Default.tsx index 79df05a3083..2b602970a0a 100644 --- a/apps/www/components/Layouts/Default.tsx +++ b/apps/www/components/Layouts/Default.tsx @@ -22,7 +22,7 @@ const DefaultLayout = (props: Props) => { return ( <> {!hideHeader &&