Skip to content

Commit 309597e

Browse files
Nudelsuppe42Nudelsuppe42
committed
feat(frontend/v2): ✨ Refactor image components for improved layout and styling
1 parent b7551b1 commit 309597e

1 file changed

Lines changed: 88 additions & 93 deletions

File tree

‎apps/frontend/src/app/[locale]/page.tsx‎

Lines changed: 88 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -150,58 +150,56 @@ export default async function Page({ params }: { params: Promise<{ locale: Local
150150
offset={{ base: 0, xs: 1, sm: 0, xl: 1 }}
151151
style={{ position: 'relative', zIndex: 0 }}
152152
>
153-
<Image
154-
style={{ aspectRatio: '16 / 9', position: 'relative', top: '35%' }}
155-
src={
156-
showcaseImages.length > 0
157-
? 'https://cdn.buildtheearth.net/uploads/' + showcaseImages[1].image.name
158-
: '/images/landing_bg_default.jpg' // TODO: replace with better cdn fallback
159-
}
160-
w="100%"
161-
alt={`${showcaseImages[1].title}, ${showcaseImages[1].city}`}
162-
/>
163-
<Flex
164-
style={{ position: 'absolute', bottom: 'calc(-35% - 16px)', right: 'var(--mantine-spacing-sm)' }}
165-
align="flex-end"
166-
>
167-
<Text
168-
fw="bold"
169-
fz="sm"
170-
style={{ color: 'var(--mantine-color-dimmed)', textShadow: '0px 0px 28px #000' }}
171-
>
172-
{`${showcaseImages[1].title}, ${showcaseImages[1].city}`}
173-
</Text>
174-
<IconCornerRightUp size={24} color="var(--mantine-color-dimmed)" style={{ paddingBottom: '4px' }} />
175-
</Flex>
153+
<Box style={{ marginTop: '35%' }}>
154+
<Image
155+
style={{ aspectRatio: '16 / 9' }}
156+
src={
157+
showcaseImages.length > 0
158+
? 'https://cdn.buildtheearth.net/uploads/' + showcaseImages[1].image.name
159+
: '/images/landing_bg_default.jpg' // TODO: replace with better cdn fallback
160+
}
161+
w="100%"
162+
alt={`${showcaseImages[1].title}, ${showcaseImages[1].city}`}
163+
/>
164+
<Flex justify="flex-end" align="center" mt="xs" mr="xs">
165+
<Text
166+
fw="bold"
167+
fz="sm"
168+
style={{ color: 'var(--mantine-color-dimmed)', textShadow: '0px 0px 28px #000' }}
169+
>
170+
{`${showcaseImages[1].title}, ${showcaseImages[1].city}`}
171+
</Text>
172+
<IconCornerRightUp size={24} color="var(--mantine-color-dimmed)" style={{ paddingBottom: '4px' }} />
173+
</Flex>
174+
</Box>
176175
</GridCol>
177176
<GridCol
178177
span={{ base: 10, xs: 7, md: 6, xl: 5 }}
179178
offset={{ base: 0, md: 2, xl: 2 }}
180179
style={{ zIndex: 1, position: 'relative' }}
181180
>
182-
<Image
183-
style={{ aspectRatio: '17 / 9' }}
184-
src={
185-
showcaseImages.length > 0
186-
? 'https://cdn.buildtheearth.net/uploads/' + showcaseImages[2].image.name
187-
: '/images/landing_bg_default.jpg' // TODO: replace with better cdn fallback
188-
}
189-
h="100%"
190-
alt={`${showcaseImages[2].title}, ${showcaseImages[2].city}`}
191-
/>
192-
<Flex
193-
style={{ position: 'absolute', bottom: 'calc(-2% - 16px)', right: 'var(--mantine-spacing-sm)' }}
194-
align="flex-end"
195-
>
196-
<Text
197-
fw="bold"
198-
fz="sm"
199-
style={{ color: 'var(--mantine-color-dimmed)', textShadow: '0px 0px 28px #000' }}
200-
>
201-
{`${showcaseImages[2].title}, ${showcaseImages[2].city}`}
202-
</Text>
203-
<IconCornerRightUp size={24} color="var(--mantine-color-dimmed)" style={{ paddingBottom: '4px' }} />
204-
</Flex>
181+
<Box>
182+
<Image
183+
style={{ aspectRatio: '17 / 9' }}
184+
src={
185+
showcaseImages.length > 0
186+
? 'https://cdn.buildtheearth.net/uploads/' + showcaseImages[2].image.name
187+
: '/images/landing_bg_default.jpg' // TODO: replace with better cdn fallback
188+
}
189+
h="100%"
190+
alt={`${showcaseImages[2].title}, ${showcaseImages[2].city}`}
191+
/>
192+
<Flex justify="flex-end" align="center" mt="xs" mr="xs">
193+
<Text
194+
fw="bold"
195+
fz="sm"
196+
style={{ color: 'var(--mantine-color-dimmed)', textShadow: '0px 0px 28px #000' }}
197+
>
198+
{`${showcaseImages[2].title}, ${showcaseImages[2].city}`}
199+
</Text>
200+
<IconCornerRightUp size={24} color="var(--mantine-color-dimmed)" style={{ paddingBottom: '4px' }} />
201+
</Flex>
202+
</Box>
205203
</GridCol>
206204
</Grid>
207205
<Grid
@@ -312,59 +310,56 @@ export default async function Page({ params }: { params: Promise<{ locale: Local
312310
offset={{ base: 0, md: 2, xl: 1 }}
313311
style={{ position: 'relative', zIndex: 0 }}
314312
>
315-
<Image
316-
style={{ aspectRatio: '5 / 3' }}
317-
src={
318-
showcaseImages.length > 0
319-
? 'https://cdn.buildtheearth.net/uploads/' + showcaseImages[3].image.name
320-
: '/images/landing_bg_default.jpg' // TODO: replace with better cdn fallback
321-
}
322-
w="100%"
323-
h="100%"
324-
mt="xl"
325-
alt={`${showcaseImages[3].title}, ${showcaseImages[3].city}`}
326-
/>
327-
<Flex
328-
style={{ position: 'absolute', bottom: 'calc(-9% - 16px)', right: 'var(--mantine-spacing-sm)' }}
329-
align="flex-end"
330-
>
331-
<Text
332-
fw="bold"
333-
fz="sm"
334-
style={{ color: 'var(--mantine-color-dimmed)', textShadow: '0px 0px 28px #000' }}
335-
>
336-
{`${showcaseImages[3].title}, ${showcaseImages[3].city}`}
337-
</Text>
338-
<IconCornerRightUp size={24} color="var(--mantine-color-dimmed)" style={{ paddingBottom: '4px' }} />
339-
</Flex>
313+
<Box mt="xl">
314+
<Image
315+
style={{ aspectRatio: '5 / 3' }}
316+
src={
317+
showcaseImages.length > 0
318+
? 'https://cdn.buildtheearth.net/uploads/' + showcaseImages[3].image.name
319+
: '/images/landing_bg_default.jpg' // TODO: replace with better cdn fallback
320+
}
321+
w="100%"
322+
h="100%"
323+
alt={`${showcaseImages[3].title}, ${showcaseImages[3].city}`}
324+
/>
325+
<Flex justify="flex-end" align="center" mt="xs" mr="xs">
326+
<Text
327+
fw="bold"
328+
fz="sm"
329+
style={{ color: 'var(--mantine-color-dimmed)', textShadow: '0px 0px 28px #000' }}
330+
>
331+
{`${showcaseImages[3].title}, ${showcaseImages[3].city}`}
332+
</Text>
333+
<IconCornerRightUp size={24} color="var(--mantine-color-dimmed)" style={{ paddingBottom: '4px' }} />
334+
</Flex>
335+
</Box>
340336
</GridCol>
341337
<GridCol
342338
span={{ base: 9, xs: 7, sm: 5, xl: 5 }}
343339
offset={{ base: 2, xs: 4, sm: 0 }}
344340
style={{ zIndex: 1, position: 'relative' }}
345341
>
346-
<Image
347-
style={{ aspectRatio: '16 / 9' }}
348-
src={
349-
showcaseImages.length > 0
350-
? 'https://cdn.buildtheearth.net/uploads/' + showcaseImages[4].image.name
351-
: '/images/landing_bg_default.jpg' // TODO: replace with better cdn fallback
352-
}
353-
alt={`${showcaseImages[4].title}, ${showcaseImages[4].city}`}
354-
/>
355-
<Flex
356-
style={{ position: 'absolute', bottom: '-16px', right: 'var(--mantine-spacing-sm)' }}
357-
align="flex-end"
358-
>
359-
<Text
360-
fw="bold"
361-
fz="sm"
362-
style={{ color: 'var(--mantine-color-dimmed)', textShadow: '0px 0px 28px #000' }}
363-
>
364-
{`${showcaseImages[4].title}, ${showcaseImages[4].city}`}
365-
</Text>
366-
<IconCornerRightUp size={24} color="var(--mantine-color-dimmed)" style={{ paddingBottom: '4px' }} />
367-
</Flex>
342+
<Box>
343+
<Image
344+
style={{ aspectRatio: '16 / 9' }}
345+
src={
346+
showcaseImages.length > 0
347+
? 'https://cdn.buildtheearth.net/uploads/' + showcaseImages[4].image.name
348+
: '/images/landing_bg_default.jpg' // TODO: replace with better cdn fallback
349+
}
350+
alt={`${showcaseImages[4].title}, ${showcaseImages[4].city}`}
351+
/>
352+
<Flex justify="flex-end" align="center" mt="xs" mr="xs">
353+
<Text
354+
fw="bold"
355+
fz="sm"
356+
style={{ color: 'var(--mantine-color-dimmed)', textShadow: '0px 0px 28px #000' }}
357+
>
358+
{`${showcaseImages[4].title}, ${showcaseImages[4].city}`}
359+
</Text>
360+
<IconCornerRightUp size={24} color="var(--mantine-color-dimmed)" style={{ paddingBottom: '4px' }} />
361+
</Flex>
362+
</Box>
368363
</GridCol>
369364
<GridCol span={{ base: 12, sm: 11, md: 6, xl: 6 }} offset={{ base: 0, sm: 1, xl: 1 }}>
370365
<Box mt="calc(var(--mantine-spacing-xl) * 4)">

0 commit comments

Comments
 (0)