mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 03:45:06 +03:00
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
This commit is contained in:
Francesco Sansalvadore authored and GitHub committed
1 parent
0916076110
commit
2852d67f14
36 files changed
+1383
-1724
No files matched your search
@@ -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
|
||||
|
||||
@@ -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 (
|
||||
<div className="flex items-center gap-2">
|
||||
{audio}
|
||||
<Link
|
||||
href="https://supabase.productions/"
|
||||
target="_blank"
|
||||
className={cn(
|
||||
'opacity-0 outline-none group translate-x-2 !ease-[.24,0,.22,.99] duration-200 transition-all text-foreground-muted hover:text-foreground !leading-3 font-mono uppercase text-[10px] flex flex-col text-right',
|
||||
isPlaying && 'opacity-100 translate-x-0'
|
||||
)}
|
||||
>
|
||||
<span className="text-border-strong">Now playing</span>
|
||||
<span className="tracking-widest flex justify-end gap-px text-right translate-x-0 transition-transform group-hover:-translate-x-2">
|
||||
{trackName}
|
||||
<IconArrowRight className="w-3 h-3 opacity-0 group-hover:opacity-100 -mr-full absolute -right-3 text-current transition-opacity" />
|
||||
</span>
|
||||
</Link>
|
||||
<button
|
||||
onClick={isPlaying ? controls.pause : controls.play}
|
||||
className="relative outline-border-muted w-7 h-7 opacity-70 hover:opacity-100 rounded-full flex items-center justify-center text-foreground-muted hover:text-foreground-lighter transition-opacity"
|
||||
style={{
|
||||
background: `radial-gradient(closest-side, #060809 79%, transparent 95% 100%),conic-gradient(hsl(var(--foreground-lighter)) ${progress.toFixed()}%, hsl(var(--border-muted)) 0)`,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full -rotate-90"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle opacity="0.1" cx="8" cy="8" r="7.5" stroke="hsl(var(--foreground-default))" />
|
||||
<circle
|
||||
cx="8"
|
||||
cy="8"
|
||||
r="7.5"
|
||||
stroke="white"
|
||||
opacity="0.4"
|
||||
strokeLinecap="round"
|
||||
className={cn('transition-opacity', isPlaying ? 'opacity-30' : 'opacity-10')}
|
||||
strokeDasharray={playerLength}
|
||||
strokeDashoffset={playerProgress}
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{isPlaying ? (
|
||||
<svg
|
||||
className="w-2.5 h-2.5"
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect x="1" width="4" height="12" fill="currentColor" />
|
||||
<rect x="7" width="4" height="12" fill="currentColor" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
className="w-2.5 h-2.5 transform translate-x-px"
|
||||
width="11"
|
||||
height="12"
|
||||
viewBox="0 0 11 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M11.0075 6L0.20752 0V12" fill="currentColor" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Player
|
||||
+2
-2
@@ -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 (
|
||||
<SectionContainer className="!py-0 w-full !px-0 !max-w-none">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 scroll-mt-[105px]" id="hackathon">
|
||||
@@ -58,4 +58,4 @@ const LW8CalloutsSection = () => {
|
||||
)
|
||||
}
|
||||
|
||||
export default LW8CalloutsSection
|
||||
export default LWXCalloutsSection
|
||||
@@ -14,6 +14,7 @@ export default function LaunchWeekPrizeSection({ className }: { className?: stri
|
||||
)}
|
||||
>
|
||||
<h2 className="w-full text-sm font-mono uppercase tracking-[1px]">Awards</h2>
|
||||
<p>Stay tuned on Launch Week X's final day to find out if you're one of the lucky winners.</p>
|
||||
<div className="w-full pt-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mx-auto h-auto text-[#EDEDED]">
|
||||
<LaunchWeekPrizeCard
|
||||
@@ -24,9 +25,8 @@ export default function LaunchWeekPrizeSection({ className }: { className?: stri
|
||||
<div className="p-4 md:p-6 flex flex-col flex-shrink gap-2 text-sm items-start">
|
||||
<LabelBadge text="10 keyboards" />
|
||||
<p className="text-lg text-[#8B9092] max-w-lg">
|
||||
Increase your chances of winning a limited-edition{' '}
|
||||
<span className="text-[#EDEDED]">62-Key ISO Mechanical Keyboard</span> by
|
||||
sharing your ticket on X and LinkedIn.
|
||||
Limited-edition{' '}
|
||||
<span className="text-[#EDEDED]">62-Key ISO Mechanical Keyboard</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-4 mt-10 w-full">
|
||||
|
||||
@@ -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 (
|
||||
<>
|
||||
<SectionContainer className="!max-w-none lg:!container lwx-nav-anchor" id="build-stage">
|
||||
<h3 className="text-foreground uppercase font-mono pb-4 md:pb-8 text-sm tracking-[0.1rem]">
|
||||
Build Stage
|
||||
</h3>
|
||||
<motion.ul
|
||||
ref={ref}
|
||||
variants={variants}
|
||||
animate={isInView ? 'reveal' : 'initial'}
|
||||
className="w-full grid gap-2 sm:gap-3 xl:gap-4 grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
|
||||
>
|
||||
{days.map((day, i) => (
|
||||
<li
|
||||
key={day.id}
|
||||
className={cn(
|
||||
'relative flex flex-col w-full aspect-square rounded-xl border border-dashed border-muted/50 bg-surface-100/10 col-span-1',
|
||||
day.className
|
||||
)}
|
||||
data-delay={i}
|
||||
>
|
||||
<AdventCard day={day} index={i} />
|
||||
{!day.is_shipped && (
|
||||
<div className="absolute m-4 md:m-6 lg:m-8">
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g opacity="0.5">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.9999 7.55557V5.95557C3.9999 3.74643 5.79076 1.95557 7.9999 1.95557C10.209 1.95557 11.9999 3.74643 11.9999 5.95557V7.55557C12.8836 7.55557 13.5999 8.27191 13.5999 9.15557V13.1556C13.5999 14.0392 12.8836 14.7556 11.9999 14.7556H3.9999C3.11625 14.7556 2.3999 14.0392 2.3999 13.1556V9.15557C2.3999 8.27191 3.11625 7.55557 3.9999 7.55557ZM10.3999 5.95557V7.55557H5.5999V5.95557C5.5999 4.63008 6.67442 3.55557 7.9999 3.55557C9.32539 3.55557 10.3999 4.63008 10.3999 5.95557Z"
|
||||
fill="#8B9092"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</motion.ul>
|
||||
</SectionContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default BuildStage
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
import SectionContainer from '../../../Layouts/SectionContainer'
|
||||
import Image from 'next/image'
|
||||
|
||||
const LWXHeader = () => {
|
||||
return (
|
||||
<div className="pt-16 w-full h-[275px] overflow-hidden">
|
||||
<SectionContainer className="!py-0 h-full flex justify-end">
|
||||
<Image
|
||||
src="/images/launchweek/lwx/lwx_header.svg"
|
||||
alt="Launch Week X header"
|
||||
width={300}
|
||||
height={300}
|
||||
draggable={false}
|
||||
className="relative -right-[63px] object-cover !object-center h-full aspect-square scale-[120%] overflow-visible"
|
||||
/>
|
||||
</SectionContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LWXHeader
|
||||
@@ -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<NodeListOf<HTMLHeadingElement> | null>(null)
|
||||
const links = useRef<NodeListOf<HTMLHeadingElement> | 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 (
|
||||
<div className="absolute inset-0 pointer-events-none w-full h-full">
|
||||
<nav className="sticky z-30 top-0 bg-[#06080999] backdrop-blur-sm pointer-events-auto w-full border-t border-b border-[#111718] h-[60px] flex items-center">
|
||||
<SectionContainer className="!max-w-none !py-0 lg:!container flex items-center justify-between font-mono gap-4 md:gap-8 text-sm">
|
||||
<div className="flex items-center gap-4 md:gap-8">
|
||||
<div className="flex items-center gap-3 leading-none uppercase">
|
||||
<span className="text-foreground tracking-[1px]">Launch Week</span>{' '}
|
||||
<Image
|
||||
src="/images/launchweek/lwx/logos/lwx_logo.svg"
|
||||
alt="Supabase Launch Week X icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Nav items */}
|
||||
<ul className="lwx-sticky-nav hidden md:flex items-center gap-2 md:gap-4 text-foreground-muted">
|
||||
{days.map((day: WeekDayProps) => (
|
||||
<li key={day.id}>
|
||||
<Link
|
||||
href={`#${day.id}`}
|
||||
className={cn(
|
||||
'p-1 transition-colors hover:text-foreground',
|
||||
day.shipped && 'text-foreground-light'
|
||||
)}
|
||||
>
|
||||
{day.dd}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
<li>
|
||||
<Link href="#build-stage" className="p-1 transition-colors hover:text-foreground">
|
||||
Build Stage
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<Player />
|
||||
</div>
|
||||
</SectionContainer>
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LWXStickyNav
|
||||
@@ -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 = () => (
|
||||
<SectionContainer className="relative !max-w-none !py-0 lg:!container" id="main-stage">
|
||||
<h3 className="absolute -top-14 text-foreground uppercase font-mono pb-4 md:pb-8 text-lg tracking-[0.1rem]">
|
||||
Main Stage
|
||||
</h3>
|
||||
<div>
|
||||
{days.map((day) => (
|
||||
<DaySection day={day} key={day.dd} />
|
||||
))}
|
||||
</div>
|
||||
</SectionContainer>
|
||||
)
|
||||
|
||||
export default MainStage
|
||||
@@ -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<HTMLDivElement>(null)
|
||||
const hiddenRef = useRef<HTMLDivElement>(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 (
|
||||
<div
|
||||
ref={ticketRef}
|
||||
className="absolute -inset-px group"
|
||||
style={{
|
||||
perspective: '1000px',
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
className="opacity-0 flex flex-col justify-between w-full aspect-square p-4 md:p-6 lg:p-8 rounded-xl bg-[#121516] transition-colors text-[#575E61] border hover:border-strong overflow-hidden"
|
||||
variants={variants}
|
||||
>
|
||||
<div className="opacity-30 group-hover:opacity-100 transition-opacity">{day.icon}</div>
|
||||
<div
|
||||
className={cn(
|
||||
'relative group-hover:!bottom-0 !ease-[.25,.25,0,1] duration-300 transition-all flex flex-col gap-1'
|
||||
)}
|
||||
style={{
|
||||
bottom: isTablet ? 0 : -hiddenHeight + 'px',
|
||||
}}
|
||||
>
|
||||
<h4 className="text-foreground text-lg">{day.title}</h4>
|
||||
<div
|
||||
ref={hiddenRef}
|
||||
className="relative z-10 !ease-[.25,.25,0,1] duration-300 transition-opacity opacity-100 lg:opacity-0 group-hover:opacity-100"
|
||||
style={{
|
||||
backfaceVisibility: 'hidden',
|
||||
transform: 'translateZ(0)',
|
||||
WebkitFontSmoothing: 'subpixel-antialiased',
|
||||
}}
|
||||
>
|
||||
<p className="text-[#575E61] text-sm">{day.description}</p>
|
||||
<div className="flex gap-1 mt-3 flex-wrap">
|
||||
{day.links?.map((link: AdventLink) => (
|
||||
<Link
|
||||
href={link.url}
|
||||
target={link.target ?? '_self'}
|
||||
className="px-2 py-1 pointer-events-auto border border-muted transition-colors text-foreground-light bg-[#191D1E] hover:bg-[#22272A] rounded text-xs"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AdventCard
|
||||
@@ -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 (
|
||||
<section
|
||||
id={day.isToday ? 'today' : day.id}
|
||||
className="lwx-nav-anchor border-b py-8 first:border-t border-[#111718] text-[#575E61] scroll-mt-16 grid grid-cols-1 gap-4 md:grid-cols-3"
|
||||
>
|
||||
{/* Day title and links */}
|
||||
<div className="flex h-full flex-col gap-4 items-between">
|
||||
<div
|
||||
className={cn(
|
||||
'text-sm inline uppercase font-mono text-foreground-muted tracking-[0.1rem]',
|
||||
day.shipped || (day.hasCountdown && 'text-foreground')
|
||||
)}
|
||||
>
|
||||
{day.dd}, {day.date}
|
||||
</div>
|
||||
{day.shipped && (
|
||||
<ul className="flex-1 h-full w-full justify-end grid grid-cols-2 md:flex flex-col gap-1">
|
||||
{day.links?.map((link) => (
|
||||
<li key={link.href}>
|
||||
<DayLink {...link}></DayLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Day Countdown */}
|
||||
{!day.shipped && day.hasCountdown && (
|
||||
<div className="flex items-center gap-2 h-5">
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 17 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g opacity="0.5">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4.32656 7.58047V5.98047C4.32656 3.77133 6.11742 1.98047 8.32656 1.98047C10.5357 1.98047 12.3266 3.77133 12.3266 5.98047V7.58047C13.2102 7.58047 13.9266 8.29681 13.9266 9.18047V13.1805C13.9266 14.0641 13.2102 14.7805 12.3266 14.7805H4.32656C3.44291 14.7805 2.72656 14.0641 2.72656 13.1805V9.18047C2.72656 8.29681 3.44291 7.58047 4.32656 7.58047ZM10.7266 5.98047V7.58047H5.92656V5.98047C5.92656 4.65499 7.00108 3.58047 8.32656 3.58047C9.65205 3.58047 10.7266 4.65499 10.7266 5.98047Z"
|
||||
fill="#A0A0A0"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<CountdownComponent date={day.published_at} showCard={false} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Day card */}
|
||||
{day.shipped && day.steps.length > 0 && (
|
||||
<div className="flex col-span-2">
|
||||
<Link
|
||||
href={day.blog!}
|
||||
className={cn(
|
||||
`min-h-[210px] aspect-[3.67/1] relative overflow-hidden flex-1 flex flex-col justify-between
|
||||
bg-[#111415] hover:bg-[#121516] hover:border-strong transition-colors border border-muted
|
||||
rounded-xl p-4 sm:p-6 md:p-8 text-2xl bg-contain shadow-lg`,
|
||||
cssGroup
|
||||
)}
|
||||
>
|
||||
<div className="flex-grow flex flex-col items-start justify-between gap-2 w-full xl:w-2/3 text-left">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<IconEdit2 className="w-4" /> Blog post
|
||||
</div>
|
||||
<h2 className="text-lg leading-7">{day.description}</h2>
|
||||
</div>
|
||||
{day.steps[0]?.bg_layers &&
|
||||
day.steps[0]?.bg_layers?.map(
|
||||
(layer, i) =>
|
||||
!!layer.img && (
|
||||
<div
|
||||
key={`${day.title}-image-${i}`}
|
||||
className="absolute opacity-90 transition-opacity inset-0 w-full h-full -z-10 group-hover/d1:opacity-100"
|
||||
>
|
||||
<Image
|
||||
src={!!layer.mobileImg && isTablet ? (layer.mobileImg as any) : layer.img}
|
||||
className={`
|
||||
absolute opacity-90 object-contain
|
||||
w-full h-full -z-10 transition-all duration-300
|
||||
`}
|
||||
fill
|
||||
objectPosition={isTablet ? '50%' : '90% 50%'}
|
||||
alt={day.title}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default DaySection
|
||||
@@ -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 = () => (
|
||||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M3.21792 11.2469L11.8015 2.66333L14.0953 4.95709L5.51167 13.5407M3.21792 11.2469L2.34219 14.4164L5.51167 13.5407M3.21792 11.2469L5.51167 13.5407"
|
||||
stroke="#8F8F8F"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinejoin="bevel"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
export const DocsSvg = () => (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.96289 9.48618H10.9629M4.96289 7.48618H10.9629M4.96289 11.4862H8.96289M3 2.00034V13.9998H12.9996V5.60113L9.38156 2.00034H3ZM12.9644 5.58432L9.38004 2L9.38004 5.58432L12.9644 5.58432Z"
|
||||
stroke="#8F8F8F"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinejoin="bevel"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
export const PlaySvg = () => (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M13.4287 8L8.74762 10.7026L4.06653 13.4053L4.06653 8L4.06653 2.59474L8.74762 5.29737L13.4287 8Z"
|
||||
stroke="#8F8F8F"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinejoin="bevel"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
export const GithubSvg = () => (
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8.2125 1.75781C4.6765 1.75781 1.8125 4.62181 1.8125 8.15781C1.8125 10.9898 3.6445 13.3818 6.1885 14.2298C6.5085 14.2858 6.6285 14.0938 6.6285 13.9258C6.6285 13.7738 6.6205 13.2698 6.6205 12.7338C5.0125 13.0298 4.5965 12.3418 4.4685 11.9818C4.3965 11.7978 4.0845 11.2298 3.8125 11.0778C3.5885 10.9578 3.2685 10.6618 3.8045 10.6538C4.3085 10.6458 4.6685 11.1178 4.7885 11.3098C5.3645 12.2778 6.2845 12.0058 6.6525 11.8378C6.7085 11.4218 6.8765 11.1418 7.0605 10.9818C5.6365 10.8218 4.1485 10.2698 4.1485 7.82181C4.1485 7.12581 4.3965 6.54981 4.8045 6.10181C4.7405 5.94181 4.5165 5.28581 4.8685 4.40581C4.8685 4.40581 5.4045 4.23781 6.6285 5.06181C7.1405 4.91781 7.6845 4.84581 8.2285 4.84581C8.7725 4.84581 9.3165 4.91781 9.8285 5.06181C11.0525 4.22981 11.5885 4.40581 11.5885 4.40581C11.9405 5.28581 11.7165 5.94181 11.6525 6.10181C12.0605 6.54981 12.3085 7.11781 12.3085 7.82181C12.3085 10.2778 10.8125 10.8218 9.3885 10.9818C9.6205 11.1818 9.8205 11.5658 9.8205 12.1658C9.8205 13.0218 9.8125 13.7098 9.8125 13.9258C9.8125 14.0938 9.9325 14.2938 10.2525 14.2298C11.523 13.8009 12.627 12.9844 13.4092 11.8951C14.1913 10.8059 14.6122 9.49877 14.6125 8.15781C14.6125 4.62181 11.7485 1.75781 8.2125 1.75781Z"
|
||||
fill="#8F8F8F"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
export const LinkSvg = () => (
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M6.875 4.0013H4.20833C3.47195 4.0013 2.875 4.59826 2.875 5.33464V12.0013C2.875 12.7377 3.47195 13.3346 4.20833 13.3346H10.875C11.6114 13.3346 12.2083 12.7377 12.2083 12.0013V9.33464M9.54167 2.66797H13.5417M13.5417 2.66797V6.66797M13.5417 2.66797L6.875 9.33464"
|
||||
stroke="#8F8F8F"
|
||||
strokeWidth="1"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
export const ArrowTopRightSvg = () => (
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M3.44531 13.846L13.1152 4.17578"
|
||||
stroke="#8F8F8F"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinejoin="bevel"
|
||||
/>
|
||||
<path
|
||||
d="M3.44531 4.09375H13.1152V13.7637"
|
||||
stroke="#8F8F8F"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinejoin="bevel"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
export const HackernewsSvg = () => (
|
||||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8.26821 7.87591L9.94194 4.47266H11.8008L8.82871 10.074V13.606H7.16205V10.0213L4.1875 4.47266H6.15549L7.86748 7.9537C7.87321 7.95954 7.87972 7.96606 7.88751 7.97386C7.95585 8.04219 7.98757 8.11202 8.00726 8.16124C8.01322 8.17614 8.01776 8.18804 8.02175 8.19849C8.02548 8.20824 8.02872 8.21672 8.03217 8.22518L8.04751 8.24052C8.11375 8.10585 8.19796 7.98119 8.26821 7.87591Z"
|
||||
fill="#8F8F8F"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const TwitterSpacesSvg = () => (
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M4.46228 5.78799C4.46228 3.4802 6.3331 1.60938 8.64089 1.60938C10.9487 1.60938 12.8195 3.4802 12.8195 5.78799V8.17578C12.8195 10.4836 10.9487 12.3544 8.64089 12.3544C6.3331 12.3544 4.46228 10.4836 4.46228 8.17578V5.78799ZM6.85006 8.17578C7.09719 8.17578 7.29777 7.9752 7.29777 7.72807V6.2357C7.29777 5.98857 7.09719 5.78799 6.85006 5.78799C6.60292 5.78799 6.40235 5.98857 6.40235 6.2357V7.72807C6.40235 7.9752 6.60292 8.17578 6.85006 8.17578ZM8.64089 8.77272C8.88803 8.77272 9.0886 8.57215 9.0886 8.32501V5.63876C9.0886 5.39162 8.88803 5.19105 8.64089 5.19105C8.39376 5.19105 8.19319 5.39162 8.19319 5.63876V8.32501C8.19319 8.57215 8.39376 8.77272 8.64089 8.77272ZM10.4317 8.17578C10.6789 8.17578 10.8794 7.9752 10.8794 7.72807V6.2357C10.8794 5.98857 10.6789 5.78799 10.4317 5.78799C10.1846 5.78799 9.98402 5.98857 9.98402 6.2357V7.72807C9.98402 7.9752 10.1846 8.17578 10.4317 8.17578Z"
|
||||
fill="#8F8F8F"
|
||||
/>
|
||||
<path
|
||||
d="M2.85924 9.24628C3.17502 9.15077 3.50692 9.32985 3.60243 9.64624C4.24654 11.7934 6.23138 13.3992 8.64185 13.3992C11.0523 13.3992 13.0372 11.7934 13.6819 9.64564C13.7768 9.32926 14.1099 9.15137 14.4251 9.24569C14.7402 9.34 14.9205 9.6725 14.825 9.98888C14.0364 12.6172 11.6039 14.5931 8.64185 14.5931C5.67981 14.5931 3.24725 12.6172 2.45928 9.98948C2.36377 9.6737 2.54286 9.34179 2.85924 9.24628Z"
|
||||
fill="#8F8F8F"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const ProductHuntSvg = () => (
|
||||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3061_22934)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M8.00078 15.5094C12.0787 15.5094 15.3844 12.2037 15.3844 8.12578C15.3844 4.04782 12.0787 0.742188 8.00078 0.742188C3.92282 0.742188 0.617188 4.04782 0.617188 8.12578C0.617188 12.2037 3.92282 15.5094 8.00078 15.5094ZM6.89312 8.12578H8.98527C9.279 8.12578 9.56071 8.00909 9.76841 7.80139C9.97612 7.59369 10.0928 7.31198 10.0928 7.01824C10.0928 6.7245 9.97612 6.4428 9.76841 6.23509C9.56071 6.02739 9.279 5.9107 8.98527 5.9107H6.89312V8.12578ZM5.41641 4.43398H8.98527C9.67065 4.43398 10.328 4.70625 10.8126 5.1909C11.2973 5.67554 11.5695 6.33285 11.5695 7.01824C11.5695 7.70363 11.2973 8.36095 10.8126 8.84559C10.328 9.33023 9.67065 9.6025 8.98527 9.6025H6.89312V11.8176H5.41641V4.43398Z"
|
||||
fill="#8F8F8F"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3061_22934">
|
||||
<rect width="16" height="16" fill="currentColor" transform="translate(0 0.378906)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
import { StepLink } from '../data/lwx_data'
|
||||
|
||||
export const CheckCircleSolidIcon = () => (
|
||||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
@@ -136,17 +25,17 @@ export const SmallCard = ({
|
||||
children: any
|
||||
}) => (
|
||||
<div
|
||||
className={[
|
||||
className={cn(
|
||||
'group relative p-[1px] bg-gradient-to-b from-[#11171890] to-[#1C1C1C60] rounded-2xl overflow-hidden shadow-lg',
|
||||
className,
|
||||
].join(' ')}
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={[
|
||||
className={cn(
|
||||
'rounded-2xl text-sm text-[#9296AA] p-2 flex flex-row justify-between items-center backdrop-blur-md h-full',
|
||||
'bg-[#030A0C]',
|
||||
innerClassName,
|
||||
].join(' ')}
|
||||
innerClassName
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
@@ -160,11 +49,7 @@ export const StyledArticleBadge = ({
|
||||
className?: string
|
||||
children: any
|
||||
}) => (
|
||||
<div
|
||||
className={['relative bg-transparent border border-[#F4FFFA90] rounded-full', className].join(
|
||||
' '
|
||||
)}
|
||||
>
|
||||
<div className={cn('relative bg-transparent border border-[#F4FFFA90] rounded-full', className)}>
|
||||
<div className="!bg-transparent rounded-full !py-1 !px-4 w-full inset-[1px] text-sm border-none from-foreground to-[#6453C5]">
|
||||
<span className="text-sm text-[#F4FFFA80] bg-clip-text bg-gradient-to-r from-[#F4FFFA] to-[#7E7AAD]">
|
||||
{children}
|
||||
@@ -174,95 +59,55 @@ export const StyledArticleBadge = ({
|
||||
</div>
|
||||
)
|
||||
|
||||
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
|
||||
}) => (
|
||||
<div
|
||||
className={[
|
||||
'h-[79px] hover:cursor-default flex flex-1 items-center scroll-mt-20 text-muted',
|
||||
].join(' ')}
|
||||
>
|
||||
<div
|
||||
className={[
|
||||
'flex flex-1 sm:flex-none',
|
||||
shippable && shipped ? 'items-stretch' : 'flex-row items-center',
|
||||
].join(' ')}
|
||||
>
|
||||
<div className="flex gap-4 w-full sm:w-auto sm:min-w-[240px] md:min-w-[380px] items-center">
|
||||
<span className="text-sm">
|
||||
<span className="inline sm:hidden md:inline">{weekDay} </span>
|
||||
{date && (
|
||||
<span>
|
||||
<span className="inline sm:hidden md:inline">・</span> {date}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
{shippable && shipped && (
|
||||
<Badge
|
||||
className={`relative hidden sm:inline-flex inset-0 !bg-[#05090B] border !border-[#061517] !py-1 !px-4 h-fit`}
|
||||
>
|
||||
<span className="text-[#F4FFFA40] text-sm font-normal bg-clip-text bg-gradient-to-r from-[#F4FFFA] to-[#675FA7]">
|
||||
Shipped
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
{shippable && shipped && youtube_id && (
|
||||
<div className={['hover:cursor-pointer hover:!opacity-100'].join(' ')}>
|
||||
<ExpandableVideo
|
||||
videoId={youtube_id}
|
||||
trigger={
|
||||
<VideoPreviewTrigger
|
||||
title={`Watch: Day ${day}`}
|
||||
thumbnail={videoThumbnail ?? '/images/launchweek/8/day5/yt_d5.jpg'}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* {shippable && !shipped && (
|
||||
<span className="text-sm font-normal text-[#A0A0A0] mt-1 sm:mt-0 flex items-center gap-1 md:gap-4">
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 17 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g opacity="0.5">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4.32656 7.58047V5.98047C4.32656 3.77133 6.11742 1.98047 8.32656 1.98047C10.5357 1.98047 12.3266 3.77133 12.3266 5.98047V7.58047C13.2102 7.58047 13.9266 8.29681 13.9266 9.18047V13.1805C13.9266 14.0641 13.2102 14.7805 12.3266 14.7805H4.32656C3.44291 14.7805 2.72656 14.0641 2.72656 13.1805V9.18047C2.72656 8.29681 3.44291 7.58047 4.32656 7.58047ZM10.7266 5.98047V7.58047H5.92656V5.98047C5.92656 4.65499 7.00108 3.58047 8.32656 3.58047C9.65205 3.58047 10.7266 4.65499 10.7266 5.98047Z"
|
||||
fill="#A0A0A0"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
interface DayLink extends StepLink {
|
||||
className?: string
|
||||
}
|
||||
|
||||
{day === 5 && <CountdownComponent date={publishedAt} showCard={false} />}
|
||||
</span>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
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 (
|
||||
<Link
|
||||
href={href}
|
||||
className={cn(
|
||||
'py-1 flex gap-2 items-center hover:text-foreground transition-colors text-sm',
|
||||
className
|
||||
)}
|
||||
target={isTargetBlank() ? '_blank' : '_self'}
|
||||
>
|
||||
<span className="w-4 h-4 flex items-center justify-center">
|
||||
<Icon />
|
||||
</span>
|
||||
<Text />
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export const VideoPreviewTrigger = ({
|
||||
title,
|
||||
@@ -287,24 +132,6 @@ export const VideoPreviewTrigger = ({
|
||||
</div>
|
||||
)
|
||||
|
||||
export const MultistepSectionHeader = ({ title, blog }: any) => {
|
||||
return (
|
||||
<div className="flex flex-1 flex-col sm:flex-row py-8">
|
||||
<div className="flex gap-4 w-full items-center justify-between md:justify-start">
|
||||
{title && <span className="text-foreground text-lg mt-3 sm:mt-0">{title}</span>}
|
||||
{!!blog && (
|
||||
<ChipLink href={blog} className="!w-auto !text-left !justify-between !flex-none">
|
||||
Blog post
|
||||
<div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
|
||||
<PencilSvg />
|
||||
</div>
|
||||
</ChipLink>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const ChipLink = ({
|
||||
href,
|
||||
uiOnly,
|
||||
@@ -320,10 +147,10 @@ export const ChipLink = ({
|
||||
}) =>
|
||||
uiOnly ? (
|
||||
<span
|
||||
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}
|
||||
</span>
|
||||
@@ -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}
|
||||
</Link>
|
||||
) : 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 (
|
||||
<div
|
||||
className={[
|
||||
'flex w-full max-w-full md:w-auto justify-center gap-2 z-10',
|
||||
mobileGrid && 'grid grid-cols-2 gap-2 sm:flex',
|
||||
].join(' ')}
|
||||
>
|
||||
{!!blog && (
|
||||
<ChipLink href={blog}>
|
||||
Blog post
|
||||
<div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
|
||||
<PencilSvg />
|
||||
</div>
|
||||
</ChipLink>
|
||||
)}
|
||||
{!!docs && (
|
||||
<ChipLink href={docs}>
|
||||
Docs
|
||||
<div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
|
||||
<DocsSvg />
|
||||
</div>
|
||||
</ChipLink>
|
||||
)}
|
||||
{!!video && (
|
||||
<ChipLink href={video} target="_blank">
|
||||
Video
|
||||
<div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
|
||||
<PlaySvg />
|
||||
</div>
|
||||
</ChipLink>
|
||||
)}
|
||||
{!!github && (
|
||||
<ChipLink href={github} target="_blank">
|
||||
GitHub
|
||||
<div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
|
||||
<GithubSvg />
|
||||
</div>
|
||||
</ChipLink>
|
||||
)}
|
||||
{!!url && (
|
||||
<ChipLink href={url}>
|
||||
Read
|
||||
<div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
|
||||
<LinkSvg />
|
||||
</div>
|
||||
</ChipLink>
|
||||
)}
|
||||
{hackernews && (
|
||||
<ChipLink href={hackernews} target="_blank">
|
||||
Hacker News
|
||||
<div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
|
||||
<HackernewsSvg />
|
||||
</div>
|
||||
</ChipLink>
|
||||
)}
|
||||
{product_hunt && (
|
||||
<ChipLink href={product_hunt} target="_blank" className="col-span-full">
|
||||
Product Hunt
|
||||
<div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
|
||||
<ProductHuntSvg />
|
||||
</div>
|
||||
</ChipLink>
|
||||
)}
|
||||
{twitter_spaces && (
|
||||
<ChipLink href={twitter_spaces} target="_blank" className="col-span-full">
|
||||
Twitter Spaces
|
||||
<div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
|
||||
<TwitterSpacesSvg />
|
||||
</div>
|
||||
</ChipLink>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const CartTitle = ({ children, className }: { children: any; className?: string }) => (
|
||||
<span
|
||||
className={[
|
||||
'z-0 relative text-[#F4FFFA90] bg-clip-text bg-gradient-to-r from-[#F4FFFA] to-[#675FA7] tracking-[-.5px] text-xl',
|
||||
className,
|
||||
].join(' ')}
|
||||
>
|
||||
<span className={cn('z-0 relative text-[#F4FFFA90] tracking-[-.5px] text-xl', className)}>
|
||||
{children}
|
||||
<div className="absolute -z-10 inset-0 w-full h-full bg-[#1C1C1C90] rounded-full blur-xl" />
|
||||
</span>
|
||||
)
|
||||
|
||||
export default {
|
||||
AccordionHeader,
|
||||
DocsSvg,
|
||||
PencilSvg,
|
||||
PlaySvg,
|
||||
DayLink,
|
||||
CartTitle,
|
||||
ChipLink,
|
||||
SectionButtons,
|
||||
SmallCard,
|
||||
StyledArticleBadge,
|
||||
}
|
||||
@@ -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'
|
||||
@@ -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: (
|
||||
<svg
|
||||
width="28"
|
||||
height="27"
|
||||
viewBox="0 0 28 27"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M26.7005 0.762595C26.924 0.952594 27.0528 1.23111 27.0528 1.52442V18.7135C27.0528 19.2658 26.605 19.7135 26.0528 19.7135C25.5005 19.7135 25.0528 19.2658 25.0528 18.7135V2.70048L10.8169 5.0192V21.358C10.8169 21.9103 10.3692 22.358 9.81689 22.358C9.26461 22.358 8.81689 21.9103 8.81689 21.358V4.1689C8.81689 3.67866 9.17228 3.26072 9.65613 3.18191L25.892 0.537428C26.1815 0.490276 26.4771 0.572595 26.7005 0.762595Z"
|
||||
fill="#EDEDED"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.75794 18.3916C4.04672 18.3916 2.69897 19.7414 2.69897 21.3583C2.69897 22.9752 4.04672 24.325 5.75794 24.325C7.46916 24.325 8.8169 22.9752 8.8169 21.3583C8.8169 19.7414 7.46916 18.3916 5.75794 18.3916ZM0.698975 21.3583C0.698975 18.5937 2.98575 16.3916 5.75794 16.3916C8.53013 16.3916 10.8169 18.5937 10.8169 21.3583C10.8169 24.1229 8.53013 26.325 5.75794 26.325C2.98575 26.325 0.698975 24.1229 0.698975 21.3583Z"
|
||||
fill="#EDEDED"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M21.9935 15.7466C20.2823 15.7466 18.9346 17.0964 18.9346 18.7133C18.9346 20.3302 20.2823 21.68 21.9935 21.68C23.7048 21.68 25.0525 20.3302 25.0525 18.7133C25.0525 17.0964 23.7048 15.7466 21.9935 15.7466ZM16.9346 18.7133C16.9346 15.9487 19.2213 13.7466 21.9935 13.7466C24.7657 13.7466 27.0525 15.9487 27.0525 18.7133C27.0525 21.4779 24.7657 23.68 21.9935 23.68C19.2213 23.68 16.9346 21.4779 16.9346 18.7133Z"
|
||||
fill="#EDEDED"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
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: (
|
||||
<svg
|
||||
width="34"
|
||||
height="32"
|
||||
viewBox="0 0 34 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.43881 3.75378C4.10721 1.93324 5.84055 0.723145 7.77992 0.723145H15.6033V0.734736H17.0394C23.8756 0.734736 29.4173 6.27652 29.4173 13.1127V20.1749C29.4173 20.7272 28.9696 21.1749 28.4173 21.1749C27.8651 21.1749 27.4173 20.7272 27.4173 20.1749V13.1127C27.4173 7.38109 22.771 2.73474 17.0394 2.73474H15.4396C15.3877 2.73474 15.3366 2.73078 15.2868 2.72314H7.77992C6.6793 2.72314 5.6956 3.40989 5.31627 4.44308L2.7812 11.3479C2.37375 12.4577 2.69516 13.7038 3.58855 14.4781L5.32807 15.9856C6.12772 16.6786 6.58711 17.6847 6.58709 18.7428L6.58706 21.5134C6.58702 23.8192 8.45627 25.6885 10.7621 25.6885C11.4007 25.6885 11.9184 25.1708 11.9184 24.5322L11.9185 12.1874C11.9185 9.59233 12.955 7.10481 14.7977 5.27761C15.1899 4.88873 15.823 4.8914 16.2119 5.28357C16.6008 5.67574 16.5981 6.3089 16.2059 6.69777C14.742 8.14943 13.9185 10.1257 13.9185 12.1874L13.9184 24.5323C13.9184 26.2754 12.5053 27.6885 10.7621 27.6885C7.35169 27.6885 4.58701 24.9238 4.58706 21.5134L4.58709 18.7428C4.5871 18.2647 4.37953 17.8101 4.01822 17.497L2.27871 15.9894C0.757203 14.6708 0.209829 12.5486 0.90374 10.6586L3.43881 3.75378ZM16.539 18.5225C17.0348 18.2791 17.634 18.4838 17.8773 18.9796C19.1969 21.6686 21.9313 23.3727 24.9267 23.3726L32.8043 23.3726C33.3566 23.3725 33.8043 23.8203 33.8043 24.3725C33.8044 24.9248 33.3566 25.3725 32.8044 25.3726L29.4081 25.3726C29.4142 25.4172 29.4173 25.4628 29.4173 25.5091C29.4173 29.0627 26.1868 31.4165 22.6091 31.4165C19.2966 31.4165 16.5385 29.0518 15.9271 25.9188C15.8213 25.3767 16.175 24.8516 16.717 24.7458C17.2591 24.64 17.7843 24.9936 17.89 25.5357C18.3217 27.7475 20.2716 29.4165 22.6091 29.4165C25.447 29.4165 27.4173 27.6256 27.4173 25.5091C27.4173 25.4628 27.4205 25.4172 27.4266 25.3726L24.9267 25.3726C21.1684 25.3727 17.7375 23.2346 16.0818 19.8607C15.8385 19.3649 16.0432 18.7658 16.539 18.5225Z"
|
||||
fill="#EDEDED"
|
||||
/>
|
||||
<path
|
||||
d="M21.7224 13.0006C21.7224 13.6338 22.2358 14.1472 22.869 14.1472C23.5022 14.1472 24.0156 13.6338 24.0156 13.0006C24.0156 12.3674 23.5022 11.854 22.869 11.854C22.2358 11.854 21.7224 12.3674 21.7224 13.0006Z"
|
||||
fill="#EDEDED"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
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: (
|
||||
<svg
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 40 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20.2446 8.70155C20.2295 7.69665 18.9596 7.26538 18.3333 8.05247L8.88245 19.9299C7.76695 21.3318 8.76744 23.3993 10.5614 23.3993H20.3351L20.45 31.0533C20.4651 32.0582 21.7349 32.4894 22.3612 31.7024L31.8121 19.825C32.9275 18.4231 31.927 16.3556 30.1332 16.3556H20.2949L20.2446 8.70155Z"
|
||||
fill="#EDEDED"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.39209 1.42236C9.22689 1.42236 9.06302 1.4277 8.90061 1.43819L8.40165 1.47044L8.33716 0.472517L8.83612 0.440273C9.01998 0.428392 9.20537 0.422363 9.39209 0.422363H10.3485V1.42236H9.39209ZM13.9131 0.422363H15.826V1.42236H13.9131V0.422363ZM19.3905 0.422363H21.3034V1.42236H19.3905V0.422363ZM24.8679 0.422363H26.7808V1.42236H24.8679V0.422363ZM30.3453 0.422363H31.3018C31.4885 0.422363 31.6739 0.428392 31.8577 0.440273L32.3567 0.472517L32.2922 1.47044L31.7932 1.43819C31.6308 1.4277 31.467 1.42236 31.3018 1.42236H30.3453V0.422363ZM4.8229 2.95351L4.44711 3.28333C4.20097 3.49936 3.96908 3.73124 3.75306 3.97738L3.42324 4.35317L2.67165 3.69353L3.00147 3.31774C3.24612 3.03899 3.50872 2.7764 3.78747 2.53175L4.16326 2.20193L4.8229 2.95351ZM36.5306 2.20193L36.9064 2.53175C37.1851 2.7764 37.4477 3.03899 37.6924 3.31774L38.0222 3.69353L37.2706 4.35317L36.9408 3.97738C36.7248 3.73124 36.4929 3.49936 36.2467 3.28333L35.871 2.95351L36.5306 2.20193ZM1.94016 7.93192L1.90792 8.43088C1.89742 8.59329 1.89209 8.75717 1.89209 8.92236V9.87881H0.89209V8.92236C0.89209 8.73564 0.898118 8.55025 0.91 8.36639L0.942244 7.86743L1.94016 7.93192ZM39.7516 7.86744L39.7838 8.36639C39.7957 8.55025 39.8018 8.73564 39.8018 8.92236V9.87881H38.8018V8.92236C38.8018 8.75717 38.7964 8.59329 38.7859 8.43088L38.7537 7.93192L39.7516 7.86744ZM39.8018 13.4433V15.3562H38.8018V13.4433H39.8018ZM1.89209 13.4433V15.3562H0.89209V13.4433H1.89209ZM1.89209 18.9207V20.8336H0.89209V18.9207H1.89209ZM39.8018 18.9207V20.8336H38.8018V18.9207H39.8018ZM1.89209 24.3982V26.3111H0.89209V24.3982H1.89209ZM39.8018 24.3982V26.3111H38.8018V24.3982H39.8018ZM1.89209 29.8756V30.832C1.89209 30.9972 1.89742 31.1611 1.90792 31.3235L1.94016 31.8225L0.942244 31.887L0.91 31.388C0.898118 31.2041 0.89209 31.0188 0.89209 30.832V29.8756H1.89209ZM39.8018 29.8756V30.832C39.8018 31.0188 39.7957 31.2041 39.7838 31.388L39.7516 31.887L38.7537 31.8225L38.7859 31.3235C38.7964 31.1611 38.8018 30.9972 38.8018 30.832V29.8756H39.8018ZM3.42324 35.4012L3.75306 35.777C3.96908 36.0232 4.20097 36.255 4.4471 36.4711L4.8229 36.8009L4.16326 37.5525L3.78746 37.2226C3.50872 36.978 3.24612 36.7154 3.00147 36.4367L2.67165 36.0609L3.42324 35.4012ZM38.0222 36.0609L37.6924 36.4367C37.4477 36.7154 37.1851 36.978 36.9064 37.2226L36.5306 37.5525L35.871 36.8009L36.2467 36.4711C36.4929 36.255 36.7248 36.0232 36.9408 35.777L37.2706 35.4012L38.0222 36.0609ZM8.40165 38.284L8.90061 38.3162C9.06302 38.3267 9.2269 38.332 9.39209 38.332H10.3485V39.332H9.39209C9.20537 39.332 9.01998 39.326 8.83612 39.3141L8.33716 39.2819L8.40165 38.284ZM32.3567 39.2819L31.8577 39.3141C31.6739 39.326 31.4885 39.332 31.3018 39.332H30.3453V38.332H31.3018C31.467 38.332 31.6308 38.3267 31.7932 38.3162L32.2922 38.284L32.3567 39.2819ZM13.9131 38.332H15.826V39.332H13.9131V38.332ZM19.3905 38.332H21.3034V39.332H19.3905V38.332ZM24.8679 38.332H26.7808V39.332H24.8679V38.332Z"
|
||||
fill="#EDEDED"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
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: '',
|
||||
},
|
||||
]
|
||||
@@ -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
|
||||
@@ -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 (
|
||||
<>
|
||||
<SectionContainer className="!pt-0 !w-full !px-0 !max-w-none">
|
||||
<Accordion
|
||||
type="default"
|
||||
openBehaviour="multiple"
|
||||
size="large"
|
||||
className="text-white"
|
||||
justified={false}
|
||||
chevronAlign="right"
|
||||
defaultValue={publishedSections}
|
||||
>
|
||||
<div className="border-b border-[#111718]">
|
||||
<Accordion.Item
|
||||
header={
|
||||
<AccordionHeader
|
||||
date={preRelease.date}
|
||||
day={preRelease.d}
|
||||
weekDay={preRelease.dd}
|
||||
title={preRelease.title}
|
||||
shipped={true}
|
||||
shippable={false}
|
||||
publishedAt={preRelease.publishedAt}
|
||||
/>
|
||||
}
|
||||
key={preRelease.dd}
|
||||
className="h-[79px]"
|
||||
id={preRelease.d.toString()}
|
||||
>
|
||||
{preRelease.steps.length > 0 && (
|
||||
<div className="flex flex-col gap-5 lg:flex-row pb-4">
|
||||
<div
|
||||
className={`
|
||||
min-h-[400px] relative overflow-hidden group/pre0 flex-1 flex flex-col items-center justify-between
|
||||
basis-1/2 lg:basis-1/3 border border-[#111718] rounded-xl lg:h-full bg-no-repeat py-10 lg:py-12 px-8 lg:px-10 text-2xl bg-contain shadow-lg
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className="inset-0 absolute group-hover/pre0:scale-105 opacity-10 group-hover/pre0:opacity-100 w-full h-full -z-10 transition-all duration-500 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(100% 100% at 80% 110%, #6F13A490, #030A0C)`,
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-2 min-w-[300px] w-full text-center lg:text-left">
|
||||
<CartTitle>{preRelease.steps[0].title}</CartTitle>
|
||||
<p className="text-sm text-slate-900">{preRelease.steps[0]?.description}</p>
|
||||
</div>
|
||||
<SectionButtons blog={preRelease.steps[0].blog} />
|
||||
{preRelease.steps[0]?.bg_layers &&
|
||||
preRelease.steps[0]?.bg_layers?.map(
|
||||
(layer, i) =>
|
||||
!!layer.img && (
|
||||
<div className="absolute opacity-90 transition-opacity inset-0 w-full h-full -z-10 group-hover/d1:opacity-100">
|
||||
<Image
|
||||
src={
|
||||
!!layer.mobileImg && isTablet
|
||||
? (layer.mobileImg as any)
|
||||
: layer.img
|
||||
}
|
||||
className={`
|
||||
absolute opacity-90
|
||||
w-full h-full -z-10 transition-all duration-300
|
||||
`}
|
||||
layout="fill"
|
||||
objectPosition="100%"
|
||||
objectFit="cover"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`
|
||||
min-h-[400px] relative overflow-hidden group/pre1 flex-1 flex flex-col items-center justify-between
|
||||
basis-1/2 lg:basis-1/3 border border-[#111718] rounded-xl lg:h-full bg-no-repeat py-10 lg:py-12 px-8 lg:px-10 text-2xl bg-cover shadow-lg
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className="inset-0 absolute group-hover/pre1:scale-105 opacity-60 group-hover/pre1:opacity-100 w-full h-full -z-10 transition-all duration-500 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(100% 100% at 80% 110%, #6F13A450, #030A0C)`,
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-2 min-w-[300px] w-full text-center lg:text-left">
|
||||
<CartTitle>{preRelease.steps[1].title}</CartTitle>
|
||||
<p className="text-sm text-slate-900">{preRelease.steps[1]?.description}</p>
|
||||
</div>
|
||||
<SectionButtons
|
||||
github={preRelease.steps[1].github}
|
||||
hackernews={preRelease.steps[1].hackernews}
|
||||
/>
|
||||
{preRelease.steps[1]?.bg_layers &&
|
||||
preRelease.steps[1]?.bg_layers?.map(
|
||||
(layer, i) =>
|
||||
!!layer.img && (
|
||||
<div className="absolute opacity-90 transition-opacity inset-0 w-full h-full -z-10 group-hover/d1:opacity-100">
|
||||
<Image
|
||||
src={
|
||||
!!layer.mobileImg && isTablet
|
||||
? (layer.mobileImg as any)
|
||||
: layer.img
|
||||
}
|
||||
className={`
|
||||
absolute opacity-90
|
||||
w-full h-full -z-10 transition-all duration-300
|
||||
`}
|
||||
layout="fill"
|
||||
objectPosition="20% 50%"
|
||||
objectFit="cover"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`
|
||||
min-h-[400px] relative overflow-hidden group/pre2 flex-1 flex flex-col items-center justify-between
|
||||
basis-1/2 lg:basis-1/3 border border-[#111718] rounded-xl lg:h-full bg-no-repeat py-10 lg:py-12 px-8 lg:px-10 text-2xl bg-contain shadow-lg
|
||||
`}
|
||||
>
|
||||
{' '}
|
||||
<div
|
||||
className="inset-0 absolute group-hover/pre2:scale-105 opacity-60 group-hover/pre2:opacity-100 w-full h-full -z-10 transition-all duration-500 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(100% 100% at 80% 110%, #6F13A450, #030A0C)`,
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-2 w-full text-center">
|
||||
<CartTitle>{preRelease.steps[2].title}</CartTitle>
|
||||
<p className="text-sm text-slate-900">{preRelease.steps[2]?.description}</p>
|
||||
</div>
|
||||
<SectionButtons blog={preRelease.steps[2].blog} />
|
||||
{preRelease.steps[2]?.bg_layers &&
|
||||
preRelease.steps[2]?.bg_layers?.map(
|
||||
(layer, i) =>
|
||||
!!layer.img && (
|
||||
<div className="absolute opacity-90 transition-opacity inset-0 w-full h-full -z-10 group-hover/d1:opacity-100">
|
||||
<Image
|
||||
src={layer.img}
|
||||
className={`
|
||||
absolute opacity-90
|
||||
w-full h-full -z-10 transition-all duration-300
|
||||
`}
|
||||
layout="fill"
|
||||
objectPosition={
|
||||
isTablet ? '50%' : isDesktop ? '100% 50%' : '30% 50%'
|
||||
}
|
||||
objectFit="contain"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Accordion.Item>
|
||||
</div>
|
||||
<div className="border-b border-[#111718] scroll-mt-16">
|
||||
<AccordionHeader
|
||||
date={day1.date}
|
||||
day={day1.d}
|
||||
weekDay={day1.dd}
|
||||
title={day1.title}
|
||||
shipped={day1.shipped}
|
||||
publishedAt={day1.publishedAt}
|
||||
youtube_id={day1.youtube_id}
|
||||
videoThumbnail={day1.videoThumbnail}
|
||||
/>
|
||||
|
||||
{day1.steps.length > 0 && (
|
||||
<div className="flex flex-col gap-5 lg:flex-row pb-4">
|
||||
<div
|
||||
className={`
|
||||
min-h-[400px] relative overflow-hidden group/d1 flex-1 flex flex-col items-center lg:items-start justify-between
|
||||
basis-1/2 lg:basis-1/3 border border-[#111718] rounded-xl lg:h-full bg-no-repeat py-10 lg:py-12 px-8 lg:px-10 text-2xl bg-contain shadow-lg
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className="inset-0 absolute group-hover/d1:scale-105 opacity-60 group-hover/d1:opacity-100 w-full h-full -z-10 transition-all duration-500 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(100% 100% at 80% 80%, #6F13A450, #030A0C)`,
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
|
||||
<Link href={day1.steps[0].blog!} className="m-0">
|
||||
<CartTitle>{day1.steps[0].title}</CartTitle>
|
||||
</Link>
|
||||
<p className="text-sm text-slate-900">{day1.steps[0]?.description}</p>
|
||||
</div>
|
||||
<SectionButtons blog={day1.steps[0].blog} hackernews={day1.steps[0].hackernews} />
|
||||
{day1.steps[0]?.bg_layers &&
|
||||
day1.steps[0]?.bg_layers?.map(
|
||||
(layer, i) =>
|
||||
!!layer.img && (
|
||||
<div className="absolute opacity-90 transition-opacity inset-0 w-full h-full -z-10 group-hover/d1:opacity-100">
|
||||
<Image
|
||||
src={
|
||||
!!layer.mobileImg && isTablet ? (layer.mobileImg as any) : layer.img
|
||||
}
|
||||
className={`
|
||||
absolute opacity-90
|
||||
w-full h-full -z-10 transition-all duration-300
|
||||
`}
|
||||
layout="fill"
|
||||
objectPosition={isTablet ? '50%' : '90% 50%'}
|
||||
objectFit="contain"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="border-b border-[#111718] scroll-mt-16">
|
||||
<AccordionHeader
|
||||
date={day2.date}
|
||||
day={day2.d}
|
||||
weekDay={day2.dd}
|
||||
title={day2.title}
|
||||
shipped={day2.shipped}
|
||||
publishedAt={day2.publishedAt}
|
||||
youtube_id={day2.youtube_id}
|
||||
videoThumbnail={day2.videoThumbnail}
|
||||
/>
|
||||
|
||||
{day2.steps.length > 0 && (
|
||||
<div className="flex flex-col gap-5 lg:flex-row pb-4">
|
||||
<div
|
||||
className={`
|
||||
min-h-[400px] relative overflow-hidden group/d1 flex-1 flex flex-col items-center lg:items-start justify-between
|
||||
basis-1/2 lg:basis-1/3 border border-[#111718] rounded-xl lg:h-full bg-no-repeat py-10 lg:py-12 px-8 lg:px-10 text-2xl bg-contain shadow-lg
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className="inset-0 absolute group-hover/d1:scale-105 opacity-60 group-hover/d1:opacity-100 w-full h-full -z-10 transition-all duration-500 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(100% 100% at 80% 80%, #6F13A450, #030A0C)`,
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
|
||||
<Link href={day2.steps[0].blog!} className="m-0">
|
||||
<CartTitle>{day2.steps[0].title}</CartTitle>
|
||||
</Link>
|
||||
<p className="text-sm text-slate-900">{day2.steps[0]?.description}</p>
|
||||
</div>
|
||||
<SectionButtons blog={day2.steps[0].blog} hackernews={day2.steps[0].hackernews} />
|
||||
{day2.steps[0]?.bg_layers &&
|
||||
day2.steps[0]?.bg_layers?.map(
|
||||
(layer, i) =>
|
||||
!!layer.img && (
|
||||
<div className="absolute opacity-90 transition-opacity inset-0 w-full h-full -z-10 group-hover/d1:opacity-100">
|
||||
<Image
|
||||
src={
|
||||
!!layer.mobileImg && isTablet ? (layer.mobileImg as any) : layer.img
|
||||
}
|
||||
className={`
|
||||
absolute opacity-90
|
||||
w-full h-full -z-10 transition-all duration-300
|
||||
`}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="border-b border-[#111718] scroll-mt-16">
|
||||
<AccordionHeader
|
||||
date={day3.date}
|
||||
day={day3.d}
|
||||
weekDay={day3.dd}
|
||||
title={day3.title}
|
||||
shipped={day3.shipped}
|
||||
publishedAt={day3.publishedAt}
|
||||
youtube_id={day3.youtube_id}
|
||||
videoThumbnail={day3.videoThumbnail}
|
||||
/>
|
||||
|
||||
{day3.steps.length > 0 && (
|
||||
<div className="flex flex-col gap-5 lg:flex-row pb-4">
|
||||
<div
|
||||
className={`
|
||||
min-h-[400px] relative overflow-hidden group/d1 flex-1 flex flex-col items-center lg:items-start justify-between
|
||||
basis-1/2 lg:basis-1/3 border border-[#111718] rounded-xl lg:h-full bg-no-repeat py-10 lg:py-12 px-8 lg:px-10 text-2xl bg-contain shadow-lg
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className="inset-0 absolute group-hover/d1:scale-105 opacity-60 group-hover/d1:opacity-100 w-full h-full -z-10 transition-all duration-500 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(100% 100% at 80% 80%, #6F13A450, #030A0C)`,
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
|
||||
<Link href={day3.steps[0].blog!} className="m-0">
|
||||
<CartTitle>{day3.steps[0].title}</CartTitle>
|
||||
</Link>
|
||||
<p className="text-sm text-slate-900">{day3.steps[0]?.description}</p>
|
||||
<ul className="flex flex-row flex-wrap lg:flex-col gap-2 text-sm md:text-base justify-center">
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircleSolidIcon /> AI SQL Editor
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircleSolidIcon /> Schema Diagrams
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircleSolidIcon /> Wrappers
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<SectionButtons
|
||||
blog={day3.steps[0].blog}
|
||||
product_hunt={day3.steps[0].product_hunt}
|
||||
/>
|
||||
{day3.steps[0]?.bg_layers &&
|
||||
day3.steps[0]?.bg_layers?.map(
|
||||
(layer, i) =>
|
||||
!!layer.img && (
|
||||
<div className="absolute opacity-90 transition-opacity inset-0 w-full h-full -z-10 group-hover/d1:opacity-100">
|
||||
<Image
|
||||
src={
|
||||
!!layer.mobileImg && isTablet ? (layer.mobileImg as any) : layer.img
|
||||
}
|
||||
className="absolute opacity-90 w-full h-full -z-10 transition-all duration-300"
|
||||
layout="fill"
|
||||
objectPosition={isTablet ? '50%' : '100% 50%'}
|
||||
objectFit={i == 1 && isTablet ? 'contain' : 'cover'}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="border-b border-[#111718] scroll-mt-16">
|
||||
<AccordionHeader
|
||||
date={day4.date}
|
||||
day={day4.d}
|
||||
weekDay={day4.dd}
|
||||
title={day4.title}
|
||||
shipped={day4.shipped}
|
||||
publishedAt={day4.publishedAt}
|
||||
youtube_id={day4.youtube_id}
|
||||
videoThumbnail={day4.videoThumbnail}
|
||||
/>
|
||||
|
||||
{day4.steps.length > 0 && (
|
||||
<div className="flex flex-col gap-5 lg:flex-row pb-4">
|
||||
<div
|
||||
className={`
|
||||
min-h-[400px] relative overflow-hidden group/d1 flex-1 flex flex-col items-center lg:items-start justify-between
|
||||
basis-1/2 lg:flex-shrink xl:basis-2/3 border border-[#111718] rounded-xl lg:h-full bg-no-repeat py-10 lg:py-12 px-8 lg:px-10 text-2xl bg-contain shadow-lg
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className="inset-0 absolute group-hover/d1:scale-105 opacity-60 group-hover/d1:opacity-100 w-full h-full -z-10 transition-all duration-500 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(100% 100% at 80% 80%, #6F13A450, #030A0C)`,
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
|
||||
<Link href={day4.steps[0].blog!} className="m-0">
|
||||
<CartTitle>{day4.steps[0].title}</CartTitle>
|
||||
</Link>
|
||||
<p className="text-sm text-slate-900">{day4.steps[0]?.description}</p>
|
||||
</div>
|
||||
<SectionButtons blog={day4.steps[0].blog} />
|
||||
{day4.steps[0]?.bg_layers &&
|
||||
day4.steps[0]?.bg_layers?.map(
|
||||
(layer, i) =>
|
||||
!!layer.img && (
|
||||
<div className="absolute opacity-90 transition-opacity inset-0 w-full h-full -z-10 group-hover/d1:opacity-100">
|
||||
<Image
|
||||
src={
|
||||
!!layer.mobileImg && isTablet ? (layer.mobileImg as any) : layer.img
|
||||
}
|
||||
className="absolute opacity-90 w-full h-full -z-10 transition-all duration-300"
|
||||
layout="fill"
|
||||
objectPosition={isTablet ? '50%' : '100% 50%'}
|
||||
objectFit={i == 1 && isTablet ? 'contain' : 'cover'}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`
|
||||
min-h-[400px] relative overflow-hidden group/d1 flex-1 flex flex-col items-center justify-between
|
||||
basis-1/2 lg:basis-1/3 border border-[#111718] rounded-xl lg:h-full bg-no-repeat py-10 lg:py-12 px-8 lg:px-10 text-2xl bg-contain shadow-lg
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className="inset-0 absolute group-hover/d1:scale-105 opacity-60 group-hover/d1:opacity-100 w-full h-full -z-10 transition-all duration-500 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(100% 100% at 80% 80%, #6F13A450, #030A0C)`,
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-2 min-w-[300px] w-full text-center lg:text-left">
|
||||
<Link href={day4.steps[1].blog!} className="m-0">
|
||||
<CartTitle>{day4.steps[1].title}</CartTitle>
|
||||
</Link>
|
||||
<p className="text-sm text-slate-900">{day4.steps[1]?.description}</p>
|
||||
</div>
|
||||
<SectionButtons blog={day4.steps[1].blog} />
|
||||
{day4.steps[1]?.bg_layers &&
|
||||
day4.steps[1]?.bg_layers?.map(
|
||||
(layer, i) =>
|
||||
!!layer.img && (
|
||||
<div className="absolute opacity-90 transition-opacity inset-0 w-full h-full -z-10 group-hover/d1:opacity-100">
|
||||
<Image
|
||||
src={
|
||||
!!layer.mobileImg && isTablet ? (layer.mobileImg as any) : layer.img
|
||||
}
|
||||
className="absolute opacity-90 w-full h-full -z-10 transition-all duration-300"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="border-b border-[#111718] scroll-mt-16">
|
||||
<AccordionHeader
|
||||
date={day5.date}
|
||||
day={day5.d}
|
||||
weekDay={day5.dd}
|
||||
title={day5.title}
|
||||
shipped={day5.shipped}
|
||||
publishedAt={day5.publishedAt}
|
||||
youtube_id={day5.youtube_id}
|
||||
videoThumbnail={day5.videoThumbnail}
|
||||
/>
|
||||
|
||||
{day5.steps.length > 0 && (
|
||||
<div className="flex flex-col pb-4">
|
||||
<div
|
||||
className={`
|
||||
min-h-[400px] relative overflow-hidden group/d1 flex-1 flex flex-col items-center lg:items-start justify-between
|
||||
border border-[#111718] rounded-xl lg:h-full bg-no-repeat py-10 lg:py-12 px-8 lg:px-10 text-2xl bg-contain shadow-lg
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className="inset-0 absolute group-hover/d1:scale-105 opacity-60 group-hover/d1:opacity-100 w-full h-full -z-10 transition-all duration-500 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(100% 100% at 80% 80%, #6F13A450, #030A0C)`,
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
|
||||
<Link href={day5.steps[0].blog!} className="m-0">
|
||||
<CartTitle>{day5.steps[0].title}</CartTitle>
|
||||
</Link>
|
||||
<p className="text-sm text-slate-900">{day5.steps[0]?.description}</p>
|
||||
</div>
|
||||
<SectionButtons blog={day5.steps[0].blog} hackernews={day5.steps[0].hackernews} />
|
||||
{day5.steps[0]?.bg_layers &&
|
||||
day5.steps[0]?.bg_layers?.map(
|
||||
(layer, i) =>
|
||||
!!layer.img && (
|
||||
<div className="absolute opacity-90 transition-opacity inset-0 w-full h-full -z-10 group-hover/d1:opacity-100">
|
||||
<Image
|
||||
src={
|
||||
!!layer.mobileImg && isTablet ? (layer.mobileImg as any) : layer.img
|
||||
}
|
||||
className="absolute opacity-90 w-full h-full -z-10 transition-all duration-300"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<MultistepSectionHeader title="Community" />
|
||||
<div
|
||||
className={`
|
||||
min-h-[400px] relative overflow-hidden group/d1 flex-1 flex flex-col items-center lg:items-start justify-between
|
||||
border border-[#111718] rounded-xl lg:h-full bg-no-repeat py-10 lg:py-12 px-8 lg:px-10 text-2xl bg-contain shadow-lg
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className="inset-0 absolute group-hover/d1:scale-105 opacity-60 group-hover/d1:opacity-100 w-full h-full -z-10 transition-all duration-500 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(100% 100% at 80% 80%, #6F13A450, #030A0C)`,
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
|
||||
<Link href={day5.steps[1].blog!} className="m-0">
|
||||
<CartTitle>{day5.steps[1].title}</CartTitle>
|
||||
</Link>
|
||||
<p className="text-sm text-slate-900">{day5.steps[1]?.description}</p>
|
||||
</div>
|
||||
<SectionButtons blog={day5.steps[1].blog} hackernews={day5.steps[1].hackernews} />
|
||||
{day5.steps[1]?.bg_layers &&
|
||||
day5.steps[1]?.bg_layers?.map(
|
||||
(layer, i) =>
|
||||
!!layer.img && (
|
||||
<div className="absolute opacity-90 transition-opacity inset-0 w-full h-full -z-10 group-hover/d1:opacity-100">
|
||||
<Image
|
||||
src={
|
||||
!!layer.mobileImg && isTablet ? (layer.mobileImg as any) : layer.img
|
||||
}
|
||||
className="absolute opacity-90 w-full h-full -z-10 transition-all duration-300"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<MultistepSectionHeader title="One more thing" />
|
||||
<div
|
||||
className={`
|
||||
min-h-[400px] relative overflow-hidden group/d1 flex-1 flex flex-col items-center lg:items-start justify-between
|
||||
border border-[#111718] rounded-xl lg:h-full bg-no-repeat py-10 lg:py-12 px-8 lg:px-10 text-2xl bg-contain shadow-lg
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className="inset-0 absolute group-hover/d1:scale-105 opacity-60 group-hover/d1:opacity-100 w-full h-full -z-10 transition-all duration-500 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(100% 100% at 80% 80%, #6F13A450, #030A0C)`,
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
|
||||
<Link href={day5.steps[2].blog!} className="m-0">
|
||||
<CartTitle>{day5.steps[2].title}</CartTitle>
|
||||
</Link>
|
||||
<p className="text-sm text-slate-900">{day5.steps[2]?.description}</p>
|
||||
</div>
|
||||
<SectionButtons blog={day5.steps[2].blog} hackernews={day5.steps[0].hackernews} />
|
||||
{day5.steps[2]?.bg_layers &&
|
||||
day5.steps[2]?.bg_layers?.map(
|
||||
(layer, i) =>
|
||||
!!layer.img && (
|
||||
<div className="absolute opacity-90 transition-opacity inset-0 w-full h-full -z-10 group-hover/d1:opacity-100">
|
||||
<Image
|
||||
src={
|
||||
!!layer.mobileImg && isTablet ? (layer.mobileImg as any) : layer.img
|
||||
}
|
||||
className="absolute opacity-90 w-full h-full -z-10 transition-all duration-300"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
objectPosition={isTablet ? '50%' : '100% 50%'}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Accordion>
|
||||
</SectionContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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
|
||||
@@ -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%);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
const TicketDisclaimer = ({ className, children }: { className?: string; children?: any }) => (
|
||||
<p className={['text-sm text-center text-[#9296AA90]', className].join(' ')}>
|
||||
{children || 'By registering you accept to receive email updates on Supabase Launch Week.'}
|
||||
</p>
|
||||
)
|
||||
|
||||
export default TicketDisclaimer
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -22,7 +22,7 @@ const DefaultLayout = (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
{!hideHeader && <Nav />}
|
||||
<main className={cn('min-h-screen', className)}>{children}</main>
|
||||
<main className={cn('relative min-h-screen', className)}>{children}</main>
|
||||
{!hideFooter && <Footer className={footerClassName} />}
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -35,6 +35,7 @@ const Nav = () => {
|
||||
|
||||
const isHomePage = router.pathname === '/'
|
||||
const isLaunchWeekPage = router.pathname.includes('launch-week')
|
||||
const isLaunchWeekXPage = router.pathname === '/launch-week'
|
||||
const showLaunchWeekNavMode = isLaunchWeekPage && !open
|
||||
|
||||
React.useEffect(() => {
|
||||
@@ -74,7 +75,10 @@ const Nav = () => {
|
||||
<Announcement>
|
||||
<LWXCountdownBanner />
|
||||
</Announcement>
|
||||
<div className="sticky top-0 z-40 transform" style={{ transform: 'translate3d(0,0,999px)' }}>
|
||||
<div
|
||||
className={cn('sticky top-0 z-40 transform', isLaunchWeekXPage && 'relative')}
|
||||
style={{ transform: 'translate3d(0,0,999px)' }}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'absolute inset-0 h-full w-full opacity-80 bg-background',
|
||||
@@ -105,7 +109,7 @@ const Nav = () => {
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{isLaunchWeekPage && (
|
||||
{isLaunchWeekPage && !isLaunchWeekXPage && (
|
||||
<Link
|
||||
href="/launch-week"
|
||||
as="/launch-week"
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
[
|
||||
{
|
||||
"type": "Announcement",
|
||||
"title": "Supabase Beta August 2023",
|
||||
"description": "Launch Week 8 review and more things we shipped 🚀",
|
||||
"imgUrl": "/images/blog/2023-09-07-beta-update-august-2023/monthly-update-august-2023.jpg",
|
||||
"logoUrl": "/images/blog/2023-09-07-beta-update-august-2023/monthly-update-august-2023.jpg",
|
||||
"title": "Postgres Language Server: implementing the Parser",
|
||||
"description": "A detailed analysis of our iterations to implement a Parser for Postgres",
|
||||
"imgUrl": "/images/blog/lwx-postgres-language-server/postgres-language-server-thumb.jpg",
|
||||
"logoUrl": "/images/blog/lwx-postgres-language-server/postgres-language-server-thumb.jpg",
|
||||
"organization": "Supabase",
|
||||
"url": "/blog/beta-update-august-2023",
|
||||
"url": "/blog/postgres-language-server-implementing-parser",
|
||||
"postMeta": {
|
||||
"name": "Ant Wilson",
|
||||
"publishDate": "Sep 08, 2023",
|
||||
"readLength": 5
|
||||
"name": "philipp",
|
||||
"publishDate": "Dec 08, 2023",
|
||||
"readLength": 10
|
||||
},
|
||||
"ctaText": "Learn more"
|
||||
},
|
||||
{
|
||||
"type": "Announcement",
|
||||
"title": "Launch Week 8 Hackathon Winners",
|
||||
"description": "Announcing the winners of the Launch Week 8 Hackathon!",
|
||||
"imgUrl": "/images/blog/lw8-hackathon-winners/hackathon-winners.png",
|
||||
"logoUrl": "/images/blog/lw8-hackathon-winners/hackathon-winners.png",
|
||||
"title": "Supabase Launch Week X Hackathon",
|
||||
"description": "Build an Open Source Project over 10 days. 5 prize categories",
|
||||
"imgUrl": "/images/blog/lwx-hackathon/ogimage.png",
|
||||
"logoUrl": "/images/blog/lwx-hackathon/ogimage.png",
|
||||
"organization": "Supabase",
|
||||
"url": "/blog/launch-week-8-hackathon-winners",
|
||||
"url": "/blog/supabase-hackathon-lwx",
|
||||
"postMeta": {
|
||||
"name": "Andrew Smith",
|
||||
"publishDate": "August 28, 2023",
|
||||
"name": "ant_wilson",
|
||||
"publishDate": "Dec 05, 2023",
|
||||
"readLength": 3
|
||||
},
|
||||
"ctaText": "See the winners"
|
||||
"ctaText": "Learn more"
|
||||
}
|
||||
]
|
||||
@@ -283,7 +283,7 @@
|
||||
"author_id": "marijana",
|
||||
"author": "Marijana Pavlinić",
|
||||
"position": "Design",
|
||||
"author_url": "https://dribbble.com/@marijanapav",
|
||||
"author_url": "https://dribbble.com/marijanapav",
|
||||
"author_image_url": "https://github.com/marijanapav.png"
|
||||
},
|
||||
{
|
||||
|
||||
@@ -13,6 +13,10 @@ import TicketingFlow from '~/components/LaunchWeek/X/Ticket/TicketingFlow'
|
||||
import SectionContainer from '~/components/Layouts/SectionContainer'
|
||||
import LaunchWeekPrizeSection from '~/components/LaunchWeek/X/LaunchWeekPrizeSection'
|
||||
import LWXMeetups, { Meetup } from '~/components/LaunchWeek/X/LWXMeetups'
|
||||
import LWXStickyNav from '../../components/LaunchWeek/X/Releases/LWXStickyNav'
|
||||
import LWXHeader from '../../components/LaunchWeek/X/Releases/LWXHeader'
|
||||
import MainStage from '../../components/LaunchWeek/X/Releases/MainStage'
|
||||
import BuildStage from '../../components/LaunchWeek/X/Releases/BuildStage'
|
||||
|
||||
interface Props {
|
||||
meetups?: Meetup[]
|
||||
@@ -106,8 +110,12 @@ export default function LaunchWeekIndex({ meetups }: Props) {
|
||||
}}
|
||||
>
|
||||
<DefaultLayout>
|
||||
<TicketingFlow />
|
||||
<SectionContainer id="meetups" className="!pt-4 scroll-mt-[66px]">
|
||||
<LWXStickyNav />
|
||||
<LWXHeader />
|
||||
<MainStage />
|
||||
<BuildStage />
|
||||
{/* <TicketingFlow /> */}
|
||||
<SectionContainer id="meetups" className="scroll-mt-[66px]">
|
||||
<LWXMeetups meetups={meetups} />
|
||||
</SectionContainer>
|
||||
<SectionContainer className="lg:pb-40">
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
@@ -0,0 +1,266 @@
|
||||
<svg width="812" height="216" viewBox="0 0 812 216" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_677_13963)">
|
||||
<mask id="mask0_677_13963" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-133" width="813" height="535">
|
||||
<rect y="-133" width="812.503" height="534.214" fill="url(#paint0_radial_677_13963)"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_677_13963)">
|
||||
<path d="M444.064 36.7195L408.243 0.898347L444.064 0.898351L444.064 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M408.244 72.5408L372.423 36.7196L408.244 36.7196L408.244 72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M408.244 215.825L372.423 180.004L408.244 180.004L408.244 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M479.886 0.898438L444.065 0.898434L444.065 -34.9227L479.886 0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="479.886" y="36.7195" width="35.8211" height="35.8211" transform="rotate(-180 479.886 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M372.422 36.7195L408.243 0.898347L372.422 0.898351L372.422 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M408.244 72.5408L444.065 36.7196L408.244 36.7196L408.244 72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M408.244 215.825L444.065 180.004L408.244 180.004L408.244 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M336.602 0.898438L372.423 0.898434L372.423 -34.9227L336.602 0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 336.602 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M372.422 -34.9226H408.243V0.898524L372.422 -34.9226Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="408.244" y="-34.9226" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M444.065 -34.9226V0.898524H408.244L444.065 -34.9226Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 264.959 -34.9226)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M229.138 36.7195L264.959 0.898347L229.138 0.898351L229.138 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M193.316 0.898438L229.138 0.898434L229.138 -34.9227L193.316 0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 193.316 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M300.78 -34.9226H264.959V0.898524L300.78 -34.9226Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M264.959 0.898438L229.138 36.7196H264.959V0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="551.528" y="-34.9226" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M587.35 36.7195L551.528 0.898347L587.35 0.898351L587.35 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M623.171 0.898438L587.35 0.898434L587.35 -34.9227L623.171 0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="623.171" y="36.7195" width="35.8211" height="35.8211" transform="rotate(-180 623.171 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M515.707 -34.9226H551.528V0.898524L515.707 -34.9226Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M551.528 0.898438L587.349 36.7196H551.528V0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 336.602 -34.9226)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M300.78 36.7195L336.601 0.898347L300.78 0.898351L300.78 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M264.959 0.898438L300.78 0.898434L300.78 -34.9227L264.959 0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 264.959 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M372.422 -34.9226H336.601V0.898524L372.422 -34.9226Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M336.602 0.898438L300.78 36.7196H336.602V0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M408.244 0.898438L372.423 36.7196H408.244V0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M408.244 144.183L372.423 180.004H408.244V144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="479.886" y="-34.9226" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M515.707 36.7195L479.886 0.898347L515.707 0.898351L515.707 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M551.528 0.898438L515.707 0.898434L515.707 -34.9227L551.528 0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="551.528" y="36.7195" width="35.8211" height="35.8211" transform="rotate(-180 551.528 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M444.064 -34.9226H479.886V0.898524L444.064 -34.9226Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M479.886 0.898438L515.707 36.7196H479.886V0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M408.244 0.898438L444.065 36.7196H408.244V0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M408.244 144.183L444.065 180.004H408.244V144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M372.422 -34.9226L408.243 0.898524H372.422V-34.9226Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 193.316 -34.9226)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M157.496 36.7195L193.317 0.898347L157.496 0.898351L157.496 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M121.674 0.898438L157.495 0.898434L157.495 -34.9227L121.674 0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 121.674 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M229.138 -34.9226H193.317V0.898524L229.138 -34.9226Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M193.316 0.898438L157.495 36.7196H193.316V0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="623.171" y="-34.9226" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M658.991 36.7195L623.17 0.898347L658.991 0.898351L658.991 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M694.812 0.898438L658.991 0.898434L658.991 -34.9227L694.812 0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="694.812" y="36.7195" width="35.8211" height="35.8211" transform="rotate(-180 694.812 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M587.35 -34.9226H623.171V0.898524L587.35 -34.9226Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M623.171 0.898438L658.992 36.7196H623.171V0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 121.674 -34.9226)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M85.8535 36.7195L121.675 0.898347L85.8535 0.898351L85.8535 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M50.0322 0.898438L85.8534 0.898434L85.8534 -34.9227L50.0322 0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 50.0322 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M157.496 -34.9226H121.675V0.898524L157.496 -34.9226Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M121.674 0.898438L85.8527 36.7196H121.674V0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="694.812" y="-34.9226" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M730.634 36.7195L694.813 0.898347L730.634 0.898351L730.634 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M766.455 0.898438L730.634 0.898434L730.634 -34.9227L766.455 0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="766.455" y="36.7195" width="35.8211" height="35.8211" transform="rotate(-180 766.455 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M658.991 -34.9226H694.812V0.898524L658.991 -34.9226Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M694.812 0.898438L730.634 36.7196H694.812V0.898438Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M730.634 -34.9226H766.455V0.898524L730.634 -34.9226Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M85.8535 -34.9226H50.0324V0.898524L85.8535 -34.9226Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M336.602 72.5408L372.423 108.362H336.602V72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M479.886 72.5408V108.362H444.064L479.886 72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 264.959 108.362)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 300.78 72.5408)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M300.78 36.7195L264.959 72.5406H300.78V36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 336.602 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M336.602 72.5408H300.78V108.362L336.602 72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M229.138 180.004L264.959 144.183L229.138 144.183L229.138 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M193.316 144.183L229.138 144.183L229.138 108.362L193.316 144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 193.316 180.004)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M300.78 108.362H264.959V144.183L300.78 108.362Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M300.78 36.7195H264.959V72.5406L300.78 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M264.959 72.5408L229.138 108.362H264.959V72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M264.959 144.183L229.138 180.004H264.959V144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="551.528" y="108.362" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="515.707" y="72.5408" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M515.707 36.7195L551.528 72.5406H515.707V36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="479.886" y="36.7195" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M479.886 72.5408H515.707V108.362L479.886 72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M587.35 180.004L551.528 144.183L587.35 144.183L587.35 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M623.171 144.183L587.35 144.183L587.35 108.362L623.171 144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="623.171" y="180.004" width="35.8211" height="35.8211" transform="rotate(-180 623.171 180.004)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M515.707 108.362H551.528V144.183L515.707 108.362Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M515.707 36.7195H551.528V72.5406L515.707 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M551.528 72.5408L587.349 108.362H551.528V72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M551.528 144.183L587.349 180.004H551.528V144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 336.602 108.362)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M300.78 180.004L336.601 144.183L300.78 144.183L300.78 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M264.959 144.183L300.78 144.183L300.78 108.362L264.959 144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 264.959 180.004)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M372.422 108.362H336.601V144.183L372.422 108.362Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M336.602 72.5408L300.78 108.362H336.602V72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M336.602 144.183L300.78 180.004H336.602V144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="479.886" y="108.362" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M515.707 180.004L479.886 144.183L515.707 144.183L515.707 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M551.528 144.183L515.707 144.183L515.707 108.362L551.528 144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="551.528" y="180.004" width="35.8211" height="35.8211" transform="rotate(-180 551.528 180.004)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M444.064 108.362H479.886V144.183L444.064 108.362Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M479.886 72.5408L515.707 108.362H479.886V72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M479.886 144.183L515.707 180.004H479.886V144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 193.316 108.362)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 229.138 72.5408)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M229.138 36.7195L193.317 72.5406H229.138V36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 264.959 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M264.959 72.5408H229.138V108.362L264.959 72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M157.496 180.004L193.317 144.183L157.496 144.183L157.496 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M121.674 144.183L157.495 144.183L157.495 108.362L121.674 144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 121.674 180.004)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M229.138 108.362H193.317V144.183L229.138 108.362Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M229.138 36.7195H193.317V72.5406L229.138 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M193.316 72.5408L157.495 108.362H193.316V72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M193.316 144.183L157.495 180.004H193.316V144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="623.171" y="108.362" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="587.35" y="72.5408" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M587.35 36.7195L623.171 72.5406H587.35V36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="551.528" y="36.7195" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M551.528 72.5408H587.349V108.362L551.528 72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M658.991 180.004L623.17 144.183L658.991 144.183L658.991 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M694.812 144.183L658.991 144.183L658.991 108.362L694.812 144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="694.812" y="180.004" width="35.8211" height="35.8211" transform="rotate(-180 694.812 180.004)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M587.35 108.362H623.171V144.183L587.35 108.362Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M587.35 36.7195H623.171V72.5406L587.35 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M623.171 72.5408L658.992 108.362H623.171V72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M623.171 144.183L658.992 180.004H623.171V144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 121.674 108.362)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 157.496 72.5408)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M157.496 36.7195L121.675 72.5406H157.496V36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 193.316 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M193.316 72.5408H157.495V108.362L193.316 72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M85.8535 180.004L121.675 144.183L85.8535 144.183L85.8535 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M50.0322 144.183L85.8534 144.183L85.8534 108.362L50.0322 144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 50.0322 180.004)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M157.496 108.362H121.675V144.183L157.496 108.362Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M157.496 36.7195H121.675V72.5406L157.496 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M121.674 72.5408L85.8527 108.362H121.674V72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M121.674 144.183L85.8527 180.004H121.674V144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="694.812" y="108.362" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="658.991" y="72.5408" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M658.991 36.7195L694.812 72.5406H658.991V36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="623.171" y="36.7195" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M623.171 72.5408H658.992V108.362L623.171 72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M730.634 180.004L694.813 144.183L730.634 144.183L730.634 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M766.455 144.183L730.634 144.183L730.634 108.362L766.455 144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="766.455" y="180.004" width="35.8211" height="35.8211" transform="rotate(-180 766.455 180.004)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M658.991 108.362H694.812V144.183L658.991 108.362Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M658.991 36.7195H694.812V72.5406L658.991 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M694.812 72.5408L730.634 108.362H694.812V72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M694.812 144.183L730.634 180.004H694.812V144.183Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="730.634" y="72.5408" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M730.634 36.7195L766.455 72.5406H730.634V36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="694.812" y="36.7195" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M694.812 72.5408H730.634V108.362L694.812 72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M730.634 108.362H766.455V144.183L730.634 108.362Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M730.634 36.7195H766.455V72.5406L730.634 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 85.8535 72.5408)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M85.8535 36.7195L50.0324 72.5406H85.8535V36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 121.674 36.7195)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M121.674 72.5408H85.8527V108.362L121.674 72.5408Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M85.8535 108.362H50.0324V144.183L85.8535 108.362Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M85.8535 36.7195H50.0324V72.5406L85.8535 36.7195Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="372.422" y="215.825" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M372.422 180.004L408.243 215.825H372.422V180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="336.602" y="180.004" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M336.602 215.825H372.423V251.646L336.602 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M444.064 251.646L408.243 215.825L444.064 215.825L444.064 251.646Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 479.886 180.004)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M479.886 215.825H444.065V251.646L479.886 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M444.065 180.004V215.825H408.244L444.065 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M408.244 215.825L444.065 251.646H408.244V215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M336.602 215.825L372.423 251.646H336.602V215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M479.886 215.825V251.646H444.064L479.886 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 300.78 215.825)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M300.78 180.004L264.959 215.825H300.78V180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 336.602 180.004)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M336.602 215.825H300.78V251.646L336.602 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M300.78 180.004H264.959V215.825L300.78 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M264.959 215.825L229.138 251.646H264.959V215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="515.707" y="215.825" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M515.707 180.004L551.528 215.825H515.707V180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="479.886" y="180.004" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M479.886 215.825H515.707V251.646L479.886 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M515.707 180.004H551.528V215.825L515.707 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M551.528 215.825L587.349 251.646H551.528V215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M408.244 215.825H372.423V251.646L408.244 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M336.602 215.825L300.78 251.646H336.602V215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M479.886 215.825L515.707 251.646H479.886V215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 229.138 215.825)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M229.138 180.004L193.317 215.825H229.138V180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 264.959 180.004)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M264.959 215.825H229.138V251.646L264.959 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M229.138 180.004H193.317V215.825L229.138 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M193.316 215.825L157.495 251.646H193.316V215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="587.35" y="215.825" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M587.35 180.004L623.171 215.825H587.35V180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="551.528" y="180.004" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M551.528 215.825H587.349V251.646L551.528 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M587.35 180.004H623.171V215.825L587.35 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M623.171 215.825L658.992 251.646H623.171V215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 157.496 215.825)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M157.496 180.004L121.675 215.825H157.496V180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 193.316 180.004)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M193.316 215.825H157.495V251.646L193.316 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M157.496 180.004H121.675V215.825L157.496 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M121.674 215.825L85.8527 251.646H121.674V215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="658.991" y="215.825" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M658.991 180.004L694.812 215.825H658.991V180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="623.171" y="180.004" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M623.171 215.825H658.992V251.646L623.171 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M658.991 180.004H694.812V215.825L658.991 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M694.812 215.825L730.634 251.646H694.812V215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="730.634" y="215.825" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M730.634 180.004L766.455 215.825H730.634V180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect x="694.812" y="180.004" width="35.8211" height="35.8211" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M694.812 215.825H730.634V251.646L694.812 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M730.634 180.004H766.455V215.825L730.634 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 85.8535 215.825)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M85.8535 180.004L50.0324 215.825H85.8535V180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<rect width="35.8211" height="35.8211" transform="matrix(-1 0 0 1 121.674 180.004)" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M121.674 215.825H85.8527V251.646L121.674 215.825Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<path d="M85.8535 180.004H50.0324V215.825L85.8535 180.004Z" stroke="#303030" stroke-width="0.432598"/>
|
||||
<g filter="url(#filter0_d_677_13963)">
|
||||
<path d="M444.026 37.3425H479.621V72.9376L444.026 108.533V72.9376H408.431L444.026 37.3425Z" fill="#D9D9D9" fill-opacity="0.01" shape-rendering="crispEdges"/>
|
||||
<path d="M372.836 179.723L408.431 144.128H372.836V108.533L337.241 144.128V179.723H372.836Z" fill="#D9D9D9" fill-opacity="0.01" shape-rendering="crispEdges"/>
|
||||
<path d="M372.836 37.3425L408.431 72.9376L444.026 108.533L479.621 144.128V179.723H444.026L408.431 144.128L372.836 108.533L337.241 72.9376V37.3425L372.836 37.3425Z" fill="#D9D9D9" fill-opacity="0.01" shape-rendering="crispEdges"/>
|
||||
<path d="M480.054 37.3425V36.9099H479.621H444.026H443.847L443.721 37.0366L408.431 72.3258L373.142 37.0366L373.015 36.9099L372.836 36.9099L337.241 36.9099L336.809 36.9099V37.3425V72.9376V73.1168L336.935 73.2435L372.224 108.533L336.935 143.822L336.809 143.949V144.128V179.723V180.155H337.241H372.836H373.015L373.142 180.029L408.431 144.74L443.721 180.029L443.847 180.155H444.026H479.621H480.054V179.723V144.128V143.949L479.927 143.822L444.638 108.533L479.927 73.2435L480.054 73.1168V72.9376V37.3425ZM373.269 143.695V109.577L407.387 143.695H373.269ZM443.594 107.488L409.476 73.3702H443.594V107.488Z" stroke="url(#paint1_linear_677_13963)" stroke-width="0.865196" shape-rendering="crispEdges"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_677_13963" x="328.589" y="28.6905" width="159.684" height="159.684" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="3.89338"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_677_13963"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_677_13963" result="shape"/>
|
||||
</filter>
|
||||
<radialGradient id="paint0_radial_677_13963" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(406.252 134.107) rotate(90) scale(200.889 305.539)">
|
||||
<stop stop-color="#D9D9D9"/>
|
||||
<stop offset="1" stop-color="#D9D9D9" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint1_linear_677_13963" x1="383.718" y1="-28.7003" x2="441.278" y2="144.791" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_677_13963">
|
||||
<rect width="812" height="216" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 28 KiB |
@@ -371,8 +371,9 @@ export * from './src/components/Icon/icons/IconMeh'
|
||||
export * from './src/components/Icon/icons/IconMenu'
|
||||
export * from './src/components/Icon/icons/IconMessageCircle'
|
||||
export * from './src/components/Icon/icons/IconMessageSquare'
|
||||
export * from './src/components/Icon/icons/IconMicOff'
|
||||
export * from './src/components/Icon/icons/IconMic'
|
||||
export * from './src/components/Icon/icons/IconMicOff'
|
||||
export * from './src/components/Icon/icons/IconMicSolid'
|
||||
export * from './src/components/Icon/icons/IconMinimize2'
|
||||
export * from './src/components/Icon/icons/IconMinimize'
|
||||
export * from './src/components/Icon/icons/IconMinusCircle'
|
||||
@@ -412,6 +413,7 @@ export * from './src/components/Icon/icons/IconPocket'
|
||||
export * from './src/components/Icon/icons/IconPower'
|
||||
export * from './src/components/Icon/icons/IconPrinter'
|
||||
export * from './src/components/Icon/icons/IconPresence'
|
||||
export * from './src/components/Icon/icons/IconProductHunt'
|
||||
export * from './src/components/Icon/icons/IconRadio'
|
||||
export * from './src/components/Icon/icons/IconRefreshCcw'
|
||||
export * from './src/components/Icon/icons/IconRefreshCw'
|
||||
|
||||
@@ -158,8 +158,9 @@ export default {
|
||||
IconMenu: 'src/components/Icon/icons/IconMenu/index.tsx',
|
||||
IconMessageCircle: 'src/components/Icon/icons/IconMessageCircle/index.tsx',
|
||||
IconMessageSquare: 'src/components/Icon/icons/IconMessageSquare/index.tsx',
|
||||
IconMicOff: 'src/components/Icon/icons/IconMicOff/index.tsx',
|
||||
IconMic: 'src/components/Icon/icons/IconMic/index.tsx',
|
||||
IconMicOff: 'src/components/Icon/icons/IconMicOff/index.tsx',
|
||||
IconMicSolid: 'src/components/Icon/icons/IconMicSolid/index.tsx',
|
||||
IconMinimize2: 'src/components/Icon/icons/IconMinimize2/index.tsx',
|
||||
IconMinimize: 'src/components/Icon/icons/IconMinimize/index.tsx',
|
||||
IconMinusCircle: 'src/components/Icon/icons/IconMinusCircle/index.tsx',
|
||||
@@ -197,6 +198,7 @@ export default {
|
||||
IconPocket: 'src/components/Icon/icons/IconPocket/index.tsx',
|
||||
IconPower: 'src/components/Icon/icons/IconPower/index.tsx',
|
||||
IconPrinter: 'src/components/Icon/icons/IconPrinter/index.tsx',
|
||||
IconProductHunt: 'src/components/Icon/icons/IconProductHunt/index.tsx',
|
||||
IconRadio: 'src/components/Icon/icons/IconRadio/index.tsx',
|
||||
IconRefreshCcw: 'src/components/Icon/icons/IconRefreshCcw/index.tsx',
|
||||
IconRefreshCw: 'src/components/Icon/icons/IconRefreshCw/index.tsx',
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
// @ts-ignore
|
||||
import IconBase from '../../IconBase'
|
||||
|
||||
// Import icon path from svg with viewbox of 16x16px
|
||||
const src = (
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.34939 5.70062C3.34939 2.85671 5.65466 0.55127 8.49837 0.55127C11.3421 0.55127 13.6473 2.85671 13.6473 5.70062V8.64311C13.6473 11.487 11.3421 13.7925 8.49837 13.7925C5.65466 13.7925 3.34939 11.487 3.34939 8.64311V5.70062ZM6.29166 8.64311C6.59619 8.64311 6.84334 8.39594 6.84334 8.09139V6.25234C6.84334 5.94779 6.59619 5.70062 6.29166 5.70062C5.98714 5.70062 5.73999 5.94779 5.73999 6.25234V8.09139C5.73999 8.39594 5.98714 8.64311 6.29166 8.64311ZM8.49837 9.37873C8.80289 9.37873 9.05004 9.13156 9.05004 8.82702V5.51672C9.05004 5.21217 8.80289 4.965 8.49837 4.965C8.19384 4.965 7.94669 5.21217 7.94669 5.51672V8.82702C7.94669 9.13156 8.19384 9.37873 8.49837 9.37873ZM10.7051 8.64311C11.0096 8.64311 11.2567 8.39594 11.2567 8.09139V6.25234C11.2567 5.94779 11.0096 5.70062 10.7051 5.70062C10.4005 5.70062 10.1534 5.94779 10.1534 6.25234V8.09139C10.1534 8.39594 10.4005 8.64311 10.7051 8.64311Z M1.3741 9.9623C1.76321 9.84461 2.17219 10.0653 2.28988 10.4552C3.08356 13.1012 5.52932 15.08 8.49954 15.08C11.4698 15.08 13.9155 13.1012 14.7099 10.4544C14.8269 10.0646 15.2373 9.84534 15.6257 9.96157C16.0141 10.0778 16.2362 10.4875 16.1186 10.8774C15.1469 14.1164 12.1494 16.5513 8.49954 16.5513C4.84965 16.5513 1.85221 14.1164 0.881265 10.8782C0.763574 10.489 0.984244 10.08 1.3741 9.9623Z"
|
||||
/>
|
||||
)
|
||||
|
||||
function IconMicSolid(props: any) {
|
||||
return <IconBase src={src} stroke="none" {...props} />
|
||||
}
|
||||
|
||||
export default IconMicSolid
|
||||
@@ -0,0 +1 @@
|
||||
export { default as IconMicSolid } from './IconMicSolid'
|
||||
@@ -0,0 +1,16 @@
|
||||
// @ts-ignore
|
||||
import IconBase from '../../IconBase'
|
||||
|
||||
// Import icon path from svg with viewbox of 16x16px
|
||||
const src = (
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7.29978 8.55127H9.56658C9.88484 8.55127 10.1901 8.42484 10.4151 8.1998C10.6401 7.97475 10.7666 7.66953 10.7666 7.35127C10.7666 7.03301 10.6401 6.72779 10.4151 6.50274C10.1901 6.2777 9.88484 6.15127 9.56658 6.15127H7.29978V8.55127Z M8.5 16.5513C12.9184 16.5513 16.5 12.9697 16.5 8.55127C16.5 4.13287 12.9184 0.55127 8.5 0.55127C4.0816 0.55127 0.5 4.13287 0.5 8.55127C0.5 12.9697 4.0816 16.5513 8.5 16.5513ZM5.69978 4.55127H9.56658C10.3092 4.55127 11.0214 4.84627 11.5465 5.37137C12.0716 5.89647 12.3666 6.60866 12.3666 7.35127C12.3666 8.09388 12.0716 8.80607 11.5465 9.33117C11.0214 9.85627 10.3092 10.1513 9.56658 10.1513H7.29978V12.5513H5.69978V4.55127Z"
|
||||
/>
|
||||
)
|
||||
|
||||
function IconProductHunt(props: any) {
|
||||
return <IconBase src={src} stroke="none" {...props} />
|
||||
}
|
||||
|
||||
export default IconProductHunt
|
||||
@@ -0,0 +1 @@
|
||||
export { default as IconProductHunt } from './IconProductHunt'
|
||||
@@ -168,8 +168,9 @@ export * as IconMeh from './IconMeh'
|
||||
export * as IconMenu from './IconMenu'
|
||||
export * as IconMessageCircle from './IconMessageCircle'
|
||||
export * as IconMessageSquare from './IconMessageSquare'
|
||||
export * as IconMicOff from './IconMicOff'
|
||||
export * as IconMic from './IconMic'
|
||||
export * as IconMicOff from './IconMicOff'
|
||||
export * as IconMicSolid from './IconMicSolid'
|
||||
export * as IconMinimize2 from './IconMinimize2'
|
||||
export * as IconMinimize from './IconMinimize'
|
||||
export * as IconMinusCircle from './IconMinusCircle'
|
||||
|
||||
Reference in new issue
Block a user