46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
import '@mantine/core/styles.css';
|
|
|
|
import { Box, Center, Image, MantineProvider, Overlay, em } from '@mantine/core';
|
|
import { theme } from './theme';
|
|
import HotspotPicture from './components/HotspotPicture';
|
|
import BannerImage from '../Images/VJB-Banner.jpg';
|
|
import { useMediaQuery } from '@mantine/hooks';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import CosmeticProductCard from './components/CosmeticProductCard';
|
|
|
|
import clientPhoto from '../Images/client/eva.jpg';
|
|
|
|
export default function App() {
|
|
const isMobile = useMediaQuery(`(max-width: ${em(750)})`);
|
|
const imageRef = useRef(null);
|
|
const [imageHeight, setImageHeight] = useState(null);
|
|
|
|
useEffect(() => {
|
|
const img = imageRef.current;
|
|
if (!img) return;
|
|
|
|
const updateHeight = () => setImageHeight(img.offsetHeight);
|
|
|
|
if (img.complete) {
|
|
updateHeight(); // already loaded
|
|
} else {
|
|
img.addEventListener('load', updateHeight);
|
|
return () => img.removeEventListener('load', updateHeight);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<MantineProvider theme={theme}>
|
|
<Box bg={"black"} p={0} m={0} style={{borderBottom : "gold 2px solid"}}>
|
|
|
|
<Image src={BannerImage} ref={imageRef} fit='contain' h={"5vh"} m={0} p={0}/>
|
|
</Box>
|
|
<Overlay p={10} m={0} top={imageHeight} gradient="linear-gradient(145deg, rgba(198, 78, 178, 1) 0%, rgba(170, 78, 171, 0.2) 100%)">
|
|
<Center>
|
|
<HotspotPicture/>
|
|
</Center>
|
|
</Overlay>
|
|
</MantineProvider>
|
|
);
|
|
}
|