diff --git a/src/component/About.js b/src/component/About.js index 3dc0945..f6ff577 100644 --- a/src/component/About.js +++ b/src/component/About.js @@ -9,12 +9,11 @@ const StyledContainer = styled(Container)({ padding: "0", height: "auto", width: "100vw", - // background: "#EFEEEF", display: "flex", justifyContent: "center", alignItems: "flex-end", "@media (min-width:600px)": { - padding: "0", + padding: "5vw 0 0 0", height: "auto", width: "100%", textAlign: "center", @@ -28,30 +27,23 @@ const Title = styled(Typography)({ fontSize: "clamp(2rem, 4vw, 4rem)", margin: "1rem 0", "@media (min-width:600px)": { - margin: "3rem 0", + margin: "0 0 5vw 0", }, }); const Body = styled(Typography)({ - // Use this when text is added - // color: "#2B2B60", - // textAlign: "justify", - // fontSize: "clamp(1rem, 2vw, 1.5rem)", - // lineHeight: "1.5", - // '@media (min-width:600px)': { - // textAlign: "center" - // } + }); const StyledImage = styled("img")({ width: "100%", height: "auto", - marginBottom: "-.4rem", // To hide the small space below the image + marginBottom: "-.4rem", }); export default function OurStory() { return ( - + @@ -59,7 +51,6 @@ export default function OurStory() { {" "} - {/* Use StyledImage here */} diff --git a/src/component/ContactUs.js b/src/component/ContactUs.js index 642c846..7db62fe 100644 --- a/src/component/ContactUs.js +++ b/src/component/ContactUs.js @@ -14,7 +14,6 @@ const StyledContainer = styled(Container)({ alignItems: "center", '@media (min-width:600px)': { padding: "0", - // height: "auto", width:"100%", textAlign: "center" }, @@ -43,14 +42,9 @@ const SubTitle = styled(Typography)({ }); const Body = styled(Typography)({ -// Use this when text is added color: "#2B2B60", -// textAlign: "justify", fontSize: "clamp(1rem, 2vw, 1.5rem)", lineHeight: "1.5", - '@media (min-width:600px)': { - // textAlign: "center" - } }); const HasTags = styled(Typography)({ @@ -64,7 +58,7 @@ const HasTags = styled(Typography)({ const StyledImage = styled('img')({ width: '100%', height: 'auto', - marginBottom:'-.4rem' // To hide the small space below the image + marginBottom:'-.4rem' }); export default function ContactUs() { diff --git a/src/component/FAQ.js b/src/component/FAQ.js index b99b242..9c1d105 100644 --- a/src/component/FAQ.js +++ b/src/component/FAQ.js @@ -11,15 +11,13 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; const StyledContainer = styled(Container)({ padding: "5rem 1.5rem", - minheight: "100vh", width: "100%", background: "#226a49", display: "flex", justifyContent: "center", alignItems: "center", - // zIndex:"-1", "@media (min-width:600px)": { - padding: "10rem", + padding: "10rem 5vw", textAlign: "center", }, }); @@ -28,8 +26,8 @@ const Title = styled(Typography)({ color: "#EFEEEF", textAlign: "center", fontWeight: 700, - fontSize: "clamp(2rem, 4vw, 4rem)", // Use clamp() here - margin: "0 0 3rem 0", + fontSize: "clamp(2rem, 4vw, 4rem)", + margin: "0 0 5vw 0", }); const StyleAccordion = styled(Accordion)({ @@ -39,7 +37,7 @@ const StyleAccordion = styled(Accordion)({ const Body = styled(Typography)({ color: "#EFEEEF", textAlign: "left", - fontSize: "clamp(1rem, 2vw, 1.5rem)", // And here + fontSize: "clamp(1rem, 2vw, 1.5rem)", lineHeight: "1.5", "@media (min-width:600px)": { textAlign: "left", @@ -50,7 +48,7 @@ const Question = styled(Typography)({ color: "#2B2B60", textAlign: "left", fontWeight: "600", - fontSize: "clamp(1rem, 2vw, 1.3rem)", // And here + fontSize: "clamp(1rem, 2vw, 1.3rem)", lineHeight: "1.5", "@media (min-width:600px)": { textAlign: "left", @@ -61,7 +59,7 @@ const Answer = styled(Typography)({ color: "#2B2B60", textAlign: "left", fontWeight: "400", - fontSize: "clamp(1rem, 2vw, 1.2rem)", // And here + fontSize: "clamp(1rem, 2vw, 1.2rem)", lineHeight: "1.5", margin: "0 .5rem ", "@media (min-width:600px)": { @@ -78,13 +76,17 @@ export default function FAQ() { }; return ( - + Frequently asked questions - + + {"© " + new Date().getFullYear() + @@ -237,6 +242,7 @@ export default function Footer() { useFlexGap sx={{ color: "text.secondary", + order:{xs:"1",sm:"1"} }} > - + -
+ Privacy Policy @@ -292,13 +298,7 @@ export default function Footer() { Terms of Service -
- - {/* - - Back to Top - - */} + ); diff --git a/src/component/Header.js b/src/component/Header.js index 584d0de..5dc5de5 100644 --- a/src/component/Header.js +++ b/src/component/Header.js @@ -62,9 +62,7 @@ function Header() { width: "100%", }} > - + ({ @@ -105,7 +103,7 @@ function Header() { onClick={() => scrollToSection("os")} sx={{ py: "6px", px: "12px" }} > - + Our Story @@ -113,7 +111,7 @@ function Header() { onClick={() => scrollToSection("pwas")} sx={{ py: "6px", px: "12px" }} > - + Problem We are Solving @@ -121,7 +119,7 @@ function Header() { onClick={() => scrollToSection("mc")} sx={{ py: "6px", px: "12px" }} > - + Material Composition @@ -129,7 +127,7 @@ function Header() { onClick={() => scrollToSection("mp")} sx={{ py: "6px", px: "12px" }} > - + Manufacturing Process @@ -137,7 +135,7 @@ function Header() { onClick={() => scrollToSection("oi")} sx={{ py: "6px", px: "12px" }} > - + Our Impact @@ -145,7 +143,7 @@ function Header() { onClick={() => scrollToSection("p")} sx={{ py: "6px", px: "12px" }} > - + Product @@ -153,7 +151,7 @@ function Header() { onClick={() => scrollToSection("faq")} sx={{ py: "6px", px: "12px" }} > - + FAQ @@ -161,7 +159,7 @@ function Header() { onClick={() => scrollToSection("a")} sx={{ py: "6px", px: "12px" }} > - + About diff --git a/src/component/MainSlider.js b/src/component/MainSlider.js index b21753a..b8ce6e0 100644 --- a/src/component/MainSlider.js +++ b/src/component/MainSlider.js @@ -93,8 +93,6 @@ function MainSlider() {
+ @@ -68,6 +64,7 @@ export default function ManufacturingProcess() { <StyledImage alt="Manufacturing Composition" src={ManufacturingProcessChart} + sx={{minWidth:{sm:"calc(100% )",md:"calc(100% )"}}} /> </Body> </Grid> diff --git a/src/component/MaterialComposition.js b/src/component/MaterialComposition.js index ebf7273..495bfd6 100644 --- a/src/component/MaterialComposition.js +++ b/src/component/MaterialComposition.js @@ -13,7 +13,7 @@ const StyledContainer = styled(Container)({ justifyContent: "center", alignItems: "center", "@media (min-width:600px)": { - padding: "0 15rem", + padding: "5vw 5vw", textAlign: "center", minHeight: "100vh", }, @@ -23,11 +23,8 @@ const Title = styled(Typography)({ color: "#EFEEEF", textAlign: "center", fontWeight: 700, - fontSize: "clamp(2rem, 4vw, 4rem)", // Use clamp() here - margin: "3rem 0", - "@media (min-width:600px)": { - marginBottom: "6rem" - }, + fontSize: "clamp(2rem, 4vw, 4rem)", + margin: "0 0 5vw 0", }); const Body = styled(Typography)({ @@ -46,28 +43,26 @@ const StyledImage = styled("img")({ height: "auto", width: "100%", }, - // background: "#EFEEEF", - // border: "2px solid red", - // marginBottom:'-.4rem' // To hide the small space below the image }); const ImageName = styled(Typography)({ - fontSize: "clamp(1rem, 2vw, 1.5rem)", // And here + fontSize: "clamp(1rem, 2vw, 1.5rem)", lineHeight: "1.5", }); export default function OurStory() { return ( - <StyledContainer id="mc" maxWidth={false}> + <StyledContainer id="mc" maxWidth={false} sx={{minHeight: { sm: "100%", md: "100vh" }}}> <Grid container spacing={6}> <Grid item xs={12} md={12}> <Title component="h2" variant="h4"> Material Composition - + diff --git a/src/component/OurImpact.js b/src/component/OurImpact.js index b6c8f0e..f4eb7f1 100644 --- a/src/component/OurImpact.js +++ b/src/component/OurImpact.js @@ -33,16 +33,16 @@ const Title = styled(Typography)({ textAlign: "center", fontWeight: 700, fontSize: "clamp(2rem, 3vw, 3rem)", - margin: "0 0 3rem 0", - position: "relative", // Add this line + margin: "0 0 5vw 0", + position: "relative", "&::after": { - content: '""', // Add this line - display: "block", // Add this line - margin: "0 auto", // Center the bar - minWidth: "50%", // Adjust as needed + content: '""', + display: "block", + margin: "0 auto", + minWidth: "50%", maxWidth: "70%", - paddingTop: "0.5rem", // Space from the text - borderBottom: ".5px solid #EFEEEF", // Add this line + paddingTop: "0.5rem", + borderBottom: ".5px solid #EFEEEF", }, }); @@ -54,6 +54,7 @@ const ImpactBoard = styled(Box)({ alignItems: "center", gap: "4rem", width: "80vw", + // border:"2px solid red", "@media (min-width:600px)": { height: "max-content", }, @@ -62,16 +63,16 @@ const ImpactBoard = styled(Box)({ const ImpactContainer = styled(Box)({ display: "flex", height: "auto", - width: "calc(50% - 2rem)", flexDirection: "column", + justifyContent: "space-evenly", alignItems: "center", - gap: "1rem", + gap: ".5rem", padding: "1rem", background: "#cfcfedd6", borderRadius: "1rem", - boxShadow: "0 4px 6px #0f166899", + boxShadow: "0 4px 6px 3px #05140199", "@media (min-width:600px)": { - width: "15%", + gap: "1rem", }, }); @@ -82,10 +83,11 @@ const ImapctIcon = styled("img")({ }); const ImpactName = styled(Typography)({ - // background: "#2B2B60", fontWeight: "600", - fontSize: "clamp(.6rem, 2vw, 1rem)", + fontSize: "clamp(1rem, 2vw, 1.3rem)", color: "#2B2B60", + textAlign:"center", + marginTop: "1em", }); export default function ProblemWeAreSolving() { @@ -96,18 +98,27 @@ export default function ProblemWeAreSolving() { Environmental Impact - - + + 80% Less Green House Emission - + Massive Banana Waste Upcycle - + Community Impact - - + + Helps In Creating Sustainable Cities - + Low Energy Consumption - + + diff --git a/src/component/PageNotFound.js b/src/component/PageNotFound.js index d134c57..6dadd68 100644 --- a/src/component/PageNotFound.js +++ b/src/component/PageNotFound.js @@ -41,7 +41,7 @@ const Title = styled(Typography)({ const Body = styled(Typography)({ color: "#EFEEEF", textAlign: "justify", - fontSize: "clamp(1rem, 2vw, 1.5rem)", // And here + fontSize: "clamp(1rem, 2vw, 1.5rem)", lineHeight: "1.7", "@media (min-width:600px)": { textAlign: "center", diff --git a/src/component/PrivacyPolicy.js b/src/component/PrivacyPolicy.js index f38c2e4..a087637 100644 --- a/src/component/PrivacyPolicy.js +++ b/src/component/PrivacyPolicy.js @@ -24,14 +24,14 @@ const Title = styled(Typography)({ color: "#2B2B60", textAlign: "center", fontWeight: 700, - fontSize: "clamp(2rem, 4vw, 4rem)", // Use clamp() here + fontSize: "clamp(2rem, 4vw, 4rem)", margin: "3rem 0", }); const Body = styled(Typography)({ color: "#2B2B60", textAlign: "justify", - fontSize: "clamp(1rem, 2vw, 1.5rem)", // And here + fontSize: "clamp(1rem, 2vw, 1.5rem)", lineHeight: "1.7", "@media (min-width:600px)": { textAlign: "left", @@ -46,7 +46,6 @@ const Heading = styled(Typography)({ const SubHeading = styled(Typography)({ fontSize: "clamp(1.3rem, 2vw, 2rem)", - // margin: "0 0 0 1rem", fontWeight: "bold", "@media (min-width:600px)": { margin: "2rem 0 2rem 1rem", diff --git a/src/component/ProblemWeAreSolving.js b/src/component/ProblemWeAreSolving.js index 8082f7d..c1b53f6 100644 --- a/src/component/ProblemWeAreSolving.js +++ b/src/component/ProblemWeAreSolving.js @@ -4,17 +4,20 @@ import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; import { styled } from "@mui/system"; import Box from "@mui/material/Box"; +import Problem1Image from "../image/problem/problem-1.jpg"; +import Problem2Image from "../image/problem/problem-2.jpg"; +import Problem3Image from "../image/problem/problem-3.jpg"; +import Problem4Image from "../image/problem/problem-4.jpg"; const StyledContainer = styled(Container)({ - padding: "5rem 1.5rem", + padding: "5rem 0", minHeight: "100vh", width: "100%", - // background: "#EFEEEF", display: "flex", justifyContent: "center", alignItems: "center", "@media (min-width:600px)": { - padding: "10rem", + padding: "10rem 0", textAlign: "center", }, }); @@ -23,8 +26,8 @@ const Title = styled(Typography)({ color: "#226A49", textAlign: "center", fontWeight: 700, - fontSize: "clamp(2rem, 4vw, 4rem)", // Use clamp() here - margin: "0 0 3rem 0", + fontSize: "clamp(2rem, 4vw, 4rem)", + margin: "0 0 5vw 0", }); const ProblemBoard = styled(Typography)({ @@ -32,9 +35,9 @@ const ProblemBoard = styled(Typography)({ textAlign: "justify", display: "flex", flexDirection: "column", - fontSize: "clamp(1rem, 2vw, 1.5rem)", // And here + fontSize: "clamp(1rem, 2vw, 1.5rem)", lineHeight: "1.5", - gap: "6rem", + gap: "5vw", "@media (min-width:600px)": { textAlign: "center", }, @@ -43,13 +46,12 @@ const ProblemBoard = styled(Typography)({ const ProblemContainer = styled(Box)({ display: "flex", height: "auto", - width: "100%", + margin: "auto", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", - gap: "1rem", + gap: "5vw", padding: "1rem", - // background: "#cfcfed45", borderRadius: "1rem", borderTop: "1.5px solid #1D2064", boxShadow: "0 4px 6px #0f166899", @@ -58,7 +60,7 @@ const ProblemContainer = styled(Box)({ const ProblemDescription = styled(Box)({ width: "100%", "@media (min-width:600px)": { - width: "60%", + width: "50vw", }, "@media (max-width:600px)": { "&:nth-child(odd)": { @@ -71,12 +73,13 @@ const ProblemDescription = styled(Box)({ }); const ProblemData = styled(Typography)({ - fontSize: "clamp(3rem, 2vw, 8.5rem)", + fontSize: "clamp(3rem, 6vw, 8.5rem)", fontWeight: "bolder", textAlign: "center", }); const ProblemBodyText = styled(Typography)({ - fontSize: "clamp(1rem, 2vw, 1.5rem)", + fontSize: "clamp(1.4rem, 1vw, 3rem)", + textAlign: "justify", color: "#226A49", lineHeight: "1.7", opacity: ".8", @@ -85,7 +88,7 @@ const ProblemBodyText = styled(Typography)({ const ProblemImage = styled("img")({ width: "100%", aspectRatio: "5/4", - objectFit: "contain", + objectFit: "fill", "@media (min-width:600px)": { width: "30%", }, @@ -108,62 +111,54 @@ export default function ProblemWeAreSolving() { Problem We are Solving - + 20 % - BioThaili, our eco-friendly plastic, is a story of change. - Made from banana fibers, it's more than just a bag – it's a - promise to be + Every year, Nepal generates a staggering amount of plastic waste, contributing to environmental degradation and threatening biodiversity. Our mission is to combat this issue by transforming banana crop waste into eco-friendly plastic solutions. - + - 40 % + 80 % - BioThaili, our eco-friendly plastic, is a story of change. - Made from banana fibers, it's more than just a bag – it's a - promise to be + By utilizing EcoThaili, we aim to significantly reduce greenhouse gas emissions, diverting banana crop waste from landfills and providing a sustainable alternative to traditional plastic. - + - 80 % + 30 % - BioThaili, our eco-friendly plastic, is a story of change. - Made from banana fibers, it's more than just a bag – it's a - promise to be + Our initiative not only benefits the environment but also empowers local communities by creating jobs and fostering economic growth. By supporting EcoThaili, you're contributing to the development of sustainable cities and livelihoods. - + - 40 % + 50 % - BioThaili, our eco-friendly plastic, is a story of change. - Made from banana fibers, it's more than just a bag – it's a - promise to be + Through widespread adoption of EcoThaili, we aim to disrupt the plastic industry's reliance on imports, promoting self-sufficiency and boosting the local economy. Join us in reshaping the market landscape with sustainable alternatives. diff --git a/src/component/Product.js b/src/component/Product.js index bcb0890..b9060b7 100644 --- a/src/component/Product.js +++ b/src/component/Product.js @@ -8,15 +8,14 @@ import Button from "@mui/material/Button"; import BioThaili from "../image/products/bio-plastic.webp"; import BioGranuels from "../image/products/bio-granuels.webp"; import BioCellulos from "../image/products/bio-cellulos.webp"; +import BioWrap from "../image/products/bio-wrap.webp"; import OrderIcon from "@mui/icons-material/ShoppingCart"; import Link from "@mui/material/Link"; const StyledContainer = styled(Container)({ - padding: "5rem 1.5rem", - minHeight: "100vh", + padding: "5rem 5vw", width: "100%", margin: "auto", - // background: "#EFEEEF", display: "flex", justifyContent: "center", alignItems: "center", @@ -30,7 +29,7 @@ const Title = styled(Typography)({ textAlign: "center", fontWeight: 700, fontSize: "clamp(2rem, 4vw, 4rem)", - margin: "0 0 3rem 0", + margin: "0 0 5vw 0", }); const ProductBoard = styled(Box)({ @@ -38,7 +37,7 @@ const ProductBoard = styled(Box)({ margin: "auto", flexDirection: "row", flexWrap: "wrap", - justifyContent: "space-evenly", + justifyContent: "flex-start", alignItems: "center", gap: "4rem", width: "80vw", @@ -49,19 +48,15 @@ const ProductBoard = styled(Box)({ const ProductContainer = styled(Box)({ display: "flex", - height: "auto", - width: "100%", - maxWidth: "300px", + height: "max-content", flexDirection: "column", + justifyContent: "center", alignItems: "center", gap: "1rem", padding: "1rem", background: "#cfcfed45", borderRadius: "1rem", boxShadow: "0 4px 6px #0f166899", - "@media (min-width:600px)": { - width: "25%", - }, }); const ProductImage = styled("img")({ @@ -71,14 +66,13 @@ const ProductImage = styled("img")({ }); const ProductName = styled(Typography)({ - // background: "#2B2B60", fontWeight: "bold", fontSize: "clamp(1rem, 2vw, 1.3rem)", color: "#2B2B60", + textAlign: "center", }); const Price = styled(Typography)({ - // background: "#2B2B60", fontSize: "clamp(1rem, 2vw, 1.2rem)", fontWeight: "200", color: "#2B2B60", @@ -90,20 +84,31 @@ const BuyButton = styled(Button)({ fontSize: "clamp(.7rem, 2vw, 1rem)", color: "white", "&:hover": { - background: "#2b2b60bf", // Change the color when the button is hovered + background: "#2b2b60bf", }, }); export default function OurStory() { return ( - + Our Product - - + + EcoThaili (इको थैली) @@ -111,7 +116,7 @@ export default function OurStory() { Rs. 250 per Roll - + - + EcoGranuels (इको ग्रान्युल्स) @@ -133,7 +143,7 @@ export default function OurStory() { Rs. 1000 per KG - + - + EcoCellulos (इको सेल्युलोस) @@ -155,7 +170,34 @@ export default function OurStory() { Rs. 2000 per KG - + + + Order Now !   + + + + + + + + + Eco Wrap (इको र्याप) + + + Rs. 20 per pice + + + + + View More Products + + diff --git a/src/component/SignIn.js b/src/component/SignIn.js index a5edff2..91ca416 100644 --- a/src/component/SignIn.js +++ b/src/component/SignIn.js @@ -8,11 +8,11 @@ import Checkbox from "@mui/material/Checkbox"; import Link from "@mui/material/Link"; import Grid from "@mui/material/Grid"; import Box from "@mui/material/Box"; -import LockOutlinedIcon from "@mui/icons-material/LockOutlined"; +import VpnKeyIcon from '@mui/icons-material/VpnKey'; import Typography from "@mui/material/Typography"; import Container from "@mui/material/Container"; -import { createTheme, ThemeProvider } from "@mui/material/styles"; import Header from "./Header"; +import { styled } from "@mui/system"; function Copyright(props) { return ( @@ -32,9 +32,29 @@ function Copyright(props) { ); } -// TODO remove, this demo shouldn't need to reset the theme. +const StyledContainer = styled(Container)({ + padding: "5rem 1.5rem", + height: "100%", + width: "100%", + // background: "#226a49", + display: "flex", + justifyContent: "center", + alignItems: "center", + zIndex: "2", + "@media (min-width:600px)": { + padding: "15vw 5vw", + height: "100vh", + textAlign: "center", + }, +}); -const defaultTheme = createTheme(); +const Title = styled(Typography)({ + color: "#226a49", + textAlign: "center", + fontWeight: 700, + fontSize: "clamp(2rem, 4vw, 4rem)", + margin: "0 0 5vw 0", +}); export default function SignIn() { const handleSubmit = (event) => { @@ -47,8 +67,7 @@ export default function SignIn() { }; return ( - - +

- - + + - + Sign in - </Typography> + - - + ); } diff --git a/src/component/SignUp.js b/src/component/SignUp.js index 26d2c09..79fadf9 100644 --- a/src/component/SignUp.js +++ b/src/component/SignUp.js @@ -8,11 +8,11 @@ import Checkbox from "@mui/material/Checkbox"; import Link from "@mui/material/Link"; import Grid from "@mui/material/Grid"; import Box from "@mui/material/Box"; -import LockOutlinedIcon from "@mui/icons-material/LockOutlined"; +import DvrIcon from '@mui/icons-material/Dvr'; import Typography from "@mui/material/Typography"; import Container from "@mui/material/Container"; -import { createTheme, ThemeProvider } from "@mui/material/styles"; import Header from "./Header"; +import { styled } from "@mui/system"; function Copyright(props) { return ( @@ -23,7 +23,7 @@ function Copyright(props) { {...props} > {"Copyright © "} - + EcoThaili {" "} {new Date().getFullYear()} @@ -32,7 +32,29 @@ function Copyright(props) { ); } -const defaultTheme = createTheme(); +const StyledContainer = styled(Container)({ + padding: "5rem 1.5rem", + height: "100%", + width: "100%", + // background: "#226a49", + display: "flex", + justifyContent: "center", + alignItems: "center", + zIndex: "2", + "@media (min-width:600px)": { + padding: "15vw 5vw", + height: "100vh", + textAlign: "center", + }, +}); + +const Title = styled(Typography)({ + color: "#226a49", + textAlign: "center", + fontWeight: 700, + fontSize: "clamp(2rem, 4vw, 4rem)", + margin: "0 0 5vw 0", +}); export default function SignUp() { const handleSubmit = (event) => { @@ -45,93 +67,86 @@ export default function SignUp() { }; return ( - - -

- - - - - - - Sign up - - - - - - - - - - - - - - - + +

+ + + + + + + Sign up + + + + + + + + - - - - - Already have an account? Sign in - - + + + + + + + + + + + + Already have an account? Sign in + - + - - - + + + ); } diff --git a/src/component/TermsAndCondition.js b/src/component/TermsAndCondition.js index 3c857bb..02da04e 100644 --- a/src/component/TermsAndCondition.js +++ b/src/component/TermsAndCondition.js @@ -24,14 +24,14 @@ const Title = styled(Typography)({ color: "#2B2B60", textAlign: "center", fontWeight: 700, - fontSize: "clamp(2rem, 4vw, 4rem)", // Use clamp() here + fontSize: "clamp(2rem, 4vw, 4rem)", margin: "3rem 0", }); const Body = styled(Typography)({ color: "#2B2B60", textAlign: "justify", - fontSize: "clamp(1rem, 2vw, 1.5rem)", // And here + fontSize: "clamp(1rem, 2vw, 1.5rem)", lineHeight: "1.7", "@media (min-width:600px)": { textAlign: "left", diff --git a/src/image/problem/problem-1.jpg b/src/image/problem/problem-1.jpg new file mode 100644 index 0000000..ba66d9d Binary files /dev/null and b/src/image/problem/problem-1.jpg differ diff --git a/src/image/problem/problem-2.jpg b/src/image/problem/problem-2.jpg new file mode 100644 index 0000000..68e1934 Binary files /dev/null and b/src/image/problem/problem-2.jpg differ diff --git a/src/image/problem/problem-3.jpg b/src/image/problem/problem-3.jpg new file mode 100644 index 0000000..86abe51 Binary files /dev/null and b/src/image/problem/problem-3.jpg differ diff --git a/src/image/problem/problem-4.jpg b/src/image/problem/problem-4.jpg new file mode 100644 index 0000000..4ecce7e Binary files /dev/null and b/src/image/problem/problem-4.jpg differ diff --git a/src/image/products/bio-wrap.webp b/src/image/products/bio-wrap.webp new file mode 100644 index 0000000..69e575a Binary files /dev/null and b/src/image/products/bio-wrap.webp differ