🚚(frontend) move slider assets to public folder with simplified names
Relocate and rename slider assets for easier customization when rebuilding images. Enables deployments to override branding elements more simply.
lebaudantoine
aleb_the_flash
|
Before Width: | Height: | Size: 651 KiB After Width: | Height: | Size: 651 KiB |
|
Before Width: | Height: | Size: 702 KiB After Width: | Height: | Size: 702 KiB |
|
Before Width: | Height: | Size: 599 KiB After Width: | Height: | Size: 599 KiB |
|
Before Width: | Height: | Size: 704 KiB After Width: | Height: | Size: 704 KiB |
@@ -1,7 +1,3 @@
|
||||
import firstSlide from '@/assets/intro-slider/1_solo.png'
|
||||
import secondSlide from '@/assets/intro-slider/2_multiple.png'
|
||||
import thirdSlide from '@/assets/intro-slider/3_resume.png'
|
||||
|
||||
import { styled } from '@/styled-system/jsx'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { Button, LinkButton } from '@/primitives'
|
||||
@@ -145,7 +141,7 @@ const TextAnimation = styled('div', {
|
||||
|
||||
type Slide = {
|
||||
key: string
|
||||
img: string
|
||||
src: string
|
||||
isAvailableInBeta?: boolean
|
||||
}
|
||||
|
||||
@@ -153,16 +149,15 @@ type Slide = {
|
||||
const SLIDES: Slide[] = [
|
||||
{
|
||||
key: 'slide1',
|
||||
img: firstSlide,
|
||||
src: '/assets/intro-slider/1.png',
|
||||
},
|
||||
{
|
||||
key: 'slide2',
|
||||
img: secondSlide,
|
||||
src: '/assets/intro-slider/2.png',
|
||||
},
|
||||
{
|
||||
key: 'slide3',
|
||||
img: thirdSlide,
|
||||
isAvailableInBeta: true,
|
||||
src: '/assets/intro-slider/3.png',
|
||||
},
|
||||
]
|
||||
|
||||
@@ -205,7 +200,7 @@ export const IntroSlider = () => {
|
||||
<SlideContainer>
|
||||
{filteredSlides.map((slide, index) => (
|
||||
<Slide visible={index == slideIndex} key={index}>
|
||||
<Image src={slide.img} alt={t(`${slide.key}.imgAlt`)} />
|
||||
<Image src={slide.src} alt={t(`${slide.key}.imgAlt`)} />
|
||||
<TextAnimation visible={index == slideIndex}>
|
||||
<Heading>{t(`${slide.key}.title`)}</Heading>
|
||||
<Body>{t(`${slide.key}.body`)}</Body>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { A, Button, Dialog, Div, H, P, Text } from '@/primitives'
|
||||
|
||||
import fourthSlide from '@/assets/intro-slider/4_record.png'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId'
|
||||
import { useRoomContext } from '@livekit/components-react'
|
||||
@@ -126,7 +125,7 @@ export const ScreenRecordingSidePanel = () => {
|
||||
alignItems="center"
|
||||
>
|
||||
<img
|
||||
src={fourthSlide}
|
||||
src="/assets/intro-slider/4.png"
|
||||
alt={''}
|
||||
className={css({
|
||||
minHeight: '309px',
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { A, Button, Dialog, Div, H, LinkButton, P, Text } from '@/primitives'
|
||||
|
||||
import thirdSlide from '@/assets/intro-slider/3_resume.png'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId'
|
||||
import { useRoomContext } from '@livekit/components-react'
|
||||
@@ -136,7 +135,7 @@ export const TranscriptSidePanel = () => {
|
||||
alignItems="center"
|
||||
>
|
||||
<img
|
||||
src={thirdSlide}
|
||||
src="/assets/intro-slider/3.png"
|
||||
alt={''}
|
||||
className={css({
|
||||
minHeight: '309px',
|
||||
|
||||
@@ -3,7 +3,6 @@ import { useQuery } from '@tanstack/react-query'
|
||||
import { Center, VStack } from '@/styled-system/jsx'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import fourthSlide from '@/assets/intro-slider/4_record.png'
|
||||
import { mediaUrl } from '@/api/mediaUrl'
|
||||
import { UserAware, useUser } from '@/features/auth'
|
||||
import { Screen } from '@/layout/Screen'
|
||||
@@ -69,7 +68,7 @@ export const RecordingDownload = () => {
|
||||
<Center>
|
||||
<VStack>
|
||||
<img
|
||||
src={fourthSlide}
|
||||
src="/assets/intro-slider/4.png"
|
||||
alt={''}
|
||||
className={css({
|
||||
maxHeight: '309px',
|
||||
|
||||