internal
/
Loops_Sustainability
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix/layout #23

Merged
mihir merged 3 commits from fix/layout into main 2025-02-20 17:43:32 +05:30
Conversation 0 Commits 3 Files Changed 15 +107 -72
15 changed files with 107 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/imageandgif/remine mobile.mp4 → public/reminemobile.mp4
View File

6
src/App.css
View File

@ -42,3 +42,9 @@
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../src//fonts/HelveticaNeue.ttc') format('truetype');
font-weight: normal;
font-style: normal;
}

8
src/components/footer.tsx
View File

@ -13,7 +13,7 @@ const Footer: React.FC = () => {
<Grid container spacing={4}>
{/* Loop Sustainability */}
<Grid item xs={12} md={3}>
<Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
<Typography variant="h6" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
Loop Sustainability
</Typography>
<Typography variant="body2" sx={{ mt: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
@ -23,7 +23,7 @@ const Footer: React.FC = () => {
{/* Get in Touch */}
<Grid item xs={7} md={3}>
<Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
<Typography variant="h6" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
Get in Touch
</Typography>
<Box display="flex" alignItems="flex-start" sx={{ mt: 1, color: "#77808B" }}>
@ -48,7 +48,7 @@ const Footer: React.FC = () => {
{/* Company Links */}
<Grid item xs={5} md={3} textAlign="center">
<Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
<Typography variant="h6" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
Company
</Typography>
<Box sx={{ mt: 1 }}>
@ -60,7 +60,7 @@ const Footer: React.FC = () => {
display="block"
sx={{
color: "#77808B",
mt: 0.5,
mt: 1,
textDecoration: "none",
fontFamily: "Helvetica, Arial, sans-serif",
"&:hover": { textDecoration: "underline" },

8
src/components/header.tsx
View File

@ -54,13 +54,13 @@ const Header: React.FC = () => {
{/* Desktop Navigation */}
<Box sx={{ display: { xs: "none", md: "flex" }, gap: 3, fontFamily: "Helvetica" }}>
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">Home</Button>
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">About</Button>
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">Team</Button>
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" , color:"#2F2E41"}} >Home</Button>
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" , color:"#2F2E41" }} >About</Button>
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" ,color:"#2F2E41" }} >Team</Button>
<Button
sx={{
padding: "7px 20px",
backgroundColor: "#0841adcc",
backgroundColor: "#317AF6",
color: "white",
fontFamily: "Helvetica",
textTransform: "capitalize",

100
src/components/homepage.tsx
View File

@ -27,9 +27,11 @@ import wasteimage from "../components/imageandgif/loopwastemanage.png"
import WhyChooseUs from "./whyus";
import WasteImageSection from "./wastemanagement";
import loopgif from "../components/imageandgif/loop hero new (1).gif"
import gifsevenm from "../components/imageandgif/disintegrate mobile.gif";
import gifeightm from "../components/imageandgif/gifeight.gif";
import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif";
import gifeightm from "../components/imageandgif/reminemobile.gif";
import giffivem from "../components/imageandgif/repairm.gif";
import gifsixm from "../components/imageandgif/newusenewuse.gif";
import gifonem from "../components/imageandgif/mine mobile.gif";
@ -71,7 +73,7 @@ const HomePage: React.FC = () => {
},
},
typography: {
fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
fontFamily: "SF Pro Regular, Arial, sans-serif",
h4: {
color: "#333333",
},
@ -92,7 +94,7 @@ const HomePage: React.FC = () => {
xs={12}
sx={{
marginTop: "0px",
height: { xs: "190px", lg: "55vh", sm: "300px", md: '400px' },
height: { xs: "190px", lg: "100px", sm: "300px", md: '400px' },
width: { lg: "100vw" },
backgroundColor: "white",
position: "relative",
@ -116,9 +118,10 @@ const HomePage: React.FC = () => {
borderRadius: "12px",
backgroundColor: "#7c77770d",
textAlign: "center",
color:'#333333',
height:'107px',
fontSize:{xs:'12px' , sm:'16px'}
color: '#333333',
height: '107px',
fontSize: { xs: '12px', sm: '16px' },
fontFamily: "SF Pro Regular, Arial, sans-serif",
}}
>
<Typography variant="body1">{text}</Typography>
@ -167,11 +170,16 @@ const HomePage: React.FC = () => {
}}>
<Box sx={{ width: { xs: "60%", md: "70%" } }}>
<img src={gifone} alt="Gif" style={{ width: "91%" }} />
<img
src={window.innerWidth <= 1400 ? gifone : gifonem}
alt="Gif"
style={{ width: "91%" }}
/>
</Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Mine from nature</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}} >Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Mine from nature</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography>
</Box>
</Box>
</Grid>
@ -193,8 +201,8 @@ const HomePage: React.FC = () => {
marginBottom: { xs: "20px", md: "0" },
}}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Manufacturing</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Manufacturing</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
</Box>
<Box sx={{ width: { lg: '50%', md: '67%' } }}>
<img src={giftwo} alt="Gif" style={{ width: "100%" }} />
@ -225,8 +233,8 @@ const HomePage: React.FC = () => {
<img src={gifthree} alt="Gif" style={{ width: "100%" }} />
</Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Assemble</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Assemble</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
</Box>
</Box>
@ -249,8 +257,8 @@ const HomePage: React.FC = () => {
marginBottom: { xs: "20px", md: "0" },
}}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Use</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</Typography>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Use</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</Typography>
</Box>
<Box sx={{ width: { xs: "60%", md: '70%' } }}>
@ -281,8 +289,8 @@ const HomePage: React.FC = () => {
margin: { xs: 1 }
}}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Reuse</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
</Typography>
</Box>
@ -307,8 +315,8 @@ const HomePage: React.FC = () => {
margin: { xs: 1 }
}}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Repair</Typography>
<Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
Loop Sustainability steps in to repair damaged or outdated electronics.
Our repair services extend the life of devices, minimizing waste and
reducing the need for new products.
@ -341,8 +349,8 @@ const HomePage: React.FC = () => {
<img src={gifseven} alt="Gif" style={{ width: "100%" }} />
</Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Disintegrate</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
</Box>
@ -366,35 +374,35 @@ const HomePage: React.FC = () => {
<img src={gifeight} alt="Gif" style={{ width: "100%" }} />
</Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Remine</Typography>
<Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}} >We take the disintegrated materials and remines them for precious metals, turning waste back into usable resources. closing the loop on electronic waste.</Typography>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >We take the disintegrated materials and remines them for precious metals, turning waste back into usable resources. closing the loop on electronic waste.</Typography>
</Box>
</Box>
</Grid>
{/* mobile only */}
<Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 38 }}
<Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 30 }}
sx={{
display: { xs: "flex", md: "flex", lg: 'none' },
backgroundImage: { lg: null, xs: `url(${mobileback})` },
backgroundSize: { xs: "60%", md: "70%", sm:'70%' },
backgroundSize: { xs: "60%", md: "50%", sm: '70%' },
backgroundPosition: { xs: "50% 60%", md: '50% 57%' },
backgroundRepeat: "no-repeat",
}}>
{/* Reuse */}
<Grid item xs={6}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Reuse</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
</Typography>
</Box>
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
<img
src={gifsix}
src={gifsixm}
alt="Reuse Gif"
style={{ width: "100%" }}
/>
@ -407,9 +415,9 @@ const HomePage: React.FC = () => {
{/* Repair */}
<Grid item xs={6}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Repair</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
<Box sx={{ background: "#95CD41", marginBottom: '30px', p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
Loop Sustainability steps in to repair damaged or outdated electronics.
Our repair services extend the life of devices, minimizing waste and
reducing the need for new products.
@ -418,7 +426,7 @@ const HomePage: React.FC = () => {
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
<img
src={giffive}
src={giffivem}
alt="Reuse Gif"
style={{ width: "100%" }}
/>
@ -430,18 +438,18 @@ const HomePage: React.FC = () => {
{/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
<Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
<img
src={gifseven}
src={gifsevenm}
alt="Reuse Gif"
style={{ width: "100%" }}
/>
</Box>
</Box>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131 , md:118}, maxHeight: 270 }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Disintegrate</Typography>
<Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}} >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
</Box>
</Box>
@ -450,18 +458,18 @@ const HomePage: React.FC = () => {
{/* Remine */}
<Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2, maxHeight: 270 }}>
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" }, marginTop: '27px' }}>
<img
src={gifeight}
src={gifeightm}
alt="Reuse Gif"
style={{ width: "100%" }}
/>
</Box>
</Box>
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, sm: 131 , md:118} }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Remine</Typography>
<Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}} >We take the disintegrated materials and remines them for precious metals, turning waste back into usable resources. closing the loop on electronic waste.</Typography>
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, sm: 138, md: 118 } }}>
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography>
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >We take the disintegrated materials and remines them for precious metals, turning waste back into usable resources. closing the loop on electronic waste.</Typography>
</Box>
</Box>
</Grid>

BIN
src/components/imageandgif/Loopherosectionmobiless.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 MiB

BIN
src/components/imageandgif/disintegrate mobile (2).gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
src/components/imageandgif/mine mobile.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
src/components/imageandgif/newusenewuse.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
src/components/imageandgif/reminemobile.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
src/components/imageandgif/repairm.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
src/components/imageandgif/reusem (1) (1).gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 872 KiB

13
src/components/ourteam.tsx
View File

@ -56,15 +56,15 @@ const OurTeam: React.FC = () => {
display="flex"
alignItems="center"
gap={1}
sx={{ cursor: "pointer", marginBottom: 10 }}
sx={{ cursor: "pointer", marginBottom: 5 }}
onClick={() => setShowTeam(!showTeam)}
>
<Typography
variant="h4"
sx={{
fontWeight: "bold",
fontSize: { xs: "20px", sm: "48px" },
fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
fontFamily: "SF Pro Regular, Arial, sans-serif",
color: "#333333",
}}
>
@ -81,9 +81,10 @@ const OurTeam: React.FC = () => {
sx={{
color: "#4D4D4D",
fontSize: { xs: "12px", sm: "20px" },
fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
padding:"20px",
textAlign:'center'
fontFamily: "SF Pro Regular, Arial, sans-serif",
paddingLeft:"60px",
textAlign:'center',
paddingRight:"60px",
}}
>
For over a decade, our team members have been actively involved in

40
src/components/whyus.tsx
View File

@ -11,6 +11,8 @@ const Circle = styled(Box)(({ theme }) => ({
justifyContent: "center",
border: "5px solid",
transition: "0.3s",
textAlign: "center",
padding: "10px",
[theme.breakpoints.down("sm")]: {
width: 120, // Adjusting for mobile
height: 120,
@ -27,22 +29,40 @@ const items = [
const WhyChooseUs: React.FC = () => {
return (
<Box sx={{ textAlign: "center", mt: 5 }}>
<Typography variant="h4" sx={{ fontWeight: "bold", color: '#333333', mb: 4, fontSize: { xs: "20px", sm: "48px" } }}>
<Typography
variant="h4"
sx={{
color: "#333333",
mb: 4,
fontSize: { xs: "20px", sm: "48px" },
fontFamily: "SF Pro Rounded, sans-serif",
}}
>
Why Choose Us?
</Typography>
<Grid
container
spacing={1}
justifyContent="center"
alignItems="center"
>
<Grid container spacing={2} justifyContent="center" alignItems="center">
{items.map((item, index) => (
<Grid item key={index} xs={6} sm={2} display="flex" justifyContent="center">
<Grid
item
key={index}
xs={6}
sm={2}
display="flex"
justifyContent="center"
>
<Circle sx={{ borderColor: item.color }}>
<Typography variant="body1" fontWeight="400" fontFamily="Roboto" sx={{fontSize:{xs:'12px', sm:'24px'}}}>
<Typography
variant="body1"
fontWeight="400"
sx={{
fontSize: { xs: "12px", sm: "20px" },
fontFamily: "Roboto, sans-serif",
textAlign: "center",
}}
>
{item.text}
</Typography>
</Circle>
</Grid>
))}

BIN
src/fonts/HelveticaNeue.ttc Normal file
View File

Binary file not shown.