craig/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor imports and improve layout in various components; update styles for consistency and readability.

Browse Source
This commit is contained in:
Craig
2025-04-10 15:04:30 +01:00
parent 55f56123ad
commit 0dc593c817
12 changed files with 116 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/vite-template-master/src/components/ExpertiseSection/ExpertiseSection.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { Button, Text, Title, Container, Stack, Grid, Image, Center } from '@mantine/core';
import { Carousel } from '@mantine/carousel';
import { Container, Grid, Image, Stack, Text, Title } from '@mantine/core';
import classes from './ExpertiseSection.module.css';
interface ExpertiseSectionProps {
@@ -15,19 +15,23 @@ const ExpertiseSection: React.FC<ExpertiseSectionProps> = ({
title,
content,
images,
viewMoreLink,
viewMoreLink: _viewMoreLink,
imageOnLeft = false,
}) => {
const slides = images.map((image) => (
<Carousel.Slide key={image.url}>
<Image src={image.url} alt={image.alt} style={{ width: '100%', height: 'auto', objectFit: 'cover' }} />
<Image
src={image.url}
alt={image.alt}
style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
/>
</Carousel.Slide>
));
return (
<Container>
<Grid className={classes.section}>
<Grid.Col order={imageOnLeft ? 2:1} span={{xs: 6, md: 8}} >
<Grid.Col order={imageOnLeft ? 2 : 1} span={{ xs: 6, md: 8 }}>
<Stack>
<Title>{title}</Title>
<Text size="lg">{content}</Text>
@@ -36,8 +40,16 @@ const ExpertiseSection: React.FC<ExpertiseSectionProps> = ({
</Button> */}
</Stack>
</Grid.Col>
<Grid.Col order={imageOnLeft ? 1:2} span={{xs: 6, md: 4}}>
<Carousel slideSize={300} align="start" slideGap="md" controlsOffset="xl" controlSize={28} loop withIndicators>
<Grid.Col order={imageOnLeft ? 1 : 2} span={{ xs: 6, md: 4 }}>
<Carousel
slideSize={300}
align="start"
slideGap="md"
controlsOffset="xl"
controlSize={28}
loop
withIndicators
>
{slides}
</Carousel>
</Grid.Col>
@@ -46,4 +58,4 @@ const ExpertiseSection: React.FC<ExpertiseSectionProps> = ({
);
};
export default ExpertiseSection;
export default ExpertiseSection;