change font and newsletter

src/App.js

 import Home from './pages/Home';
 import Cart from './pages/Cart';
 import Login from './pages/Login';
-import Newsletter from './pages/Newsletter';
 import Products from './pages/Products';
 import Product from './pages/Products/Product';
 import Checkout from './pages/Checkout';
             <Route path=':pid' element={<Product />} />
 
           </Route>
-
-          <Route path='/newsletter' element={<Newsletter />} />
           <Route path='/cart' element={<Cart />} />
           <Route path='/checkout' element={<Checkout />} />
 

src/components/ImageView/ImageView.jsx

             }}
             onClick={handleZoomToggle}
           >
-            <img
+            <Box
               src={previewImage}
+              component="img"
               alt="Preview"
-              style={{
-                width: "70%",
+              sx={{
+                width:{
+                  xs:"100%",
+                  sm:"100%",
+                  md:"70%"
+                },
                 height: "auto",
                 display: "block",
                 margin: "auto auto"
             sx={{
               display: "flex",
               flexDirection: "row",
-              justifyContent: "center",
+              justifyContent: {
+                xs:"left",
+                sm:"left",
+                md:"center"
+              },
+              flexWrap:"wrap",
               padding: 2,
               gap: 2
             }}

src/components/Navbar/Navbar.jsx

   const swiperRef = useRef(null); // Create a ref for the Swiper instance
   const [showHeader, setShowHeader] = useState(true);
   const [isAtTop, setIsAtTop] = useState(false);
+  const [isProductPage, setIsProductPage] = useState(false);
   const [lastScrollPos, setLastScrollPos] = useState(0);
   const [language, setLanguage] = useState('English');
   const dispatch = useDispatch();
                   xl:10
                 },
                 display: {
-                  xs: "none",
-                  md: "none",
+                  xs: (isProductPage) ? "flex" : "none",
+                  md: (isProductPage) ? "flex" : "none",
                   lg: "flex"
                 },
               }}

src/components/NewsLetter/NewsLetter.jsx

         width: '100%',
         height: 0,
         paddingTop: '600px', // This sets the height based on top padding
-        backgroundImage:`url(${bgImage})`,
+        backgroundImage: `url(${bgImage})`,
+        backgroundSize:"cover",
+        backgroundPosition: 'center center',
         overflow: 'hidden',
-        display: "flex"
+        display: "flex",
       }}
     >
       <Box
         }}
       >
 
-        <Box sx={{ 
-          width: {xs:"80%", md:"40%"}, 
-          backgroundColor: "rgba(255,255,255, 0.5)", 
+        <Box sx={{
+          width: { xs: "80%", md: "40%" },
+          backgroundColor: "rgba(255,255,255, 0.5)",
           px: 15,
           py: 10,
-          textAlign:"center", 
-          color:"black" 
+          textAlign: "center",
+          color: "black"
         }}>
 
           <Typography variant='h3'>
             label="Enter your email address"
             variant="outlined"
             fullWidth
-            sx={{ backgroundColor: "white", my:4 }}
+            sx={{
+              backgroundColor: "white",
+              my: 4,
+              '& .MuiInputLabel-root': {
+                fontSize: {
+                  xs: "12px",
+                  sm: "12px",
+                  md: "16px"
+                },
+              },
+            }}
             InputProps={{
               endAdornment: (
                 <InputAdornment position="end">
                   <Button
                     variant="contained"
                     color="primary"
-                    sx={{ 
-                      height: "100%", 
-                      borderTopLeftRadius: 0, 
+                    sx={{
+                      height: "100%",
+                      borderTopLeftRadius: 0,
                       borderBottomLeftRadius: 0,
-                      position:"absolute",
-                      right:0
+                      position: "absolute",
+                      right: 0
                     }}
                   >
                     Subscribe

src/components/PageTitle/PageTitle.jsx

       {/* Title */}
       <Typography
         variant="h3"
+        className="main-title"
         sx={{
           position: "relative",
           zIndex: 2,

src/components/ProductDetails/ProductDetails.jsx

     if (!isEmptyObject(product)) {
 
       console.log("Product: ", product)
-      
+
 
       let productVariants = product?.variants
 
       // get all variant type
       if (!productVariants || productVariants?.length == 0) return
-      
+
       // we want to get the title for each variant
       const uniqueOptions = {};
       productVariants.forEach(variant => {
-        
+
         variant.selectedOptions.forEach(option => {
           if (!uniqueOptions[option.name]) {
             uniqueOptions[option.name] = new Set();
 
   const handleVariantClick = (name, value) => {
 
-    
+
 
     setVariantSelection({ ...variantSelection, [name]: value })
 
         }
       }
 
-      debugger
-
-
       return newVariantSelection
 
     })
         </Box>
 
         {/* Section 2: Variants */}
-        <Box>
+        <Box >
 
           {variants.map(({ name, options }, index) => {
 
                   {name}
                 </Typography>
 
-                <Box display="flex" gap={2} sx={{ mb: 2 }}>
+                <Box sx={{
+                  display: "flex",
+                  flexWrap: "wrap",
+                  
+                  mb: 2
+                }} gap={2}>
                   {options?.map((value) => (
                     <Button
                       key={value}

src/components/ProductType/ProductType.jsx

 import React from 'react';
 import { Box, Button, Typography } from '@mui/material';
 
-const ProductType = ({title, link, img_url}) => {
+const ProductType = ({ title, img_url }) => {
   return (
     <Box
       sx={{
         paddingTop: '600px', // This sets the height based on top padding
         backgroundImage: `url(${img_url})`,
         overflow: 'hidden',
-        backgroundSize:'cover',
+        backgroundSize: 'cover',
         backgroundPosition: 'center center'
       }}
     >
           color: '#fff', // Text and button color for visibility
         }}
       >
-        <Typography variant="h5" gutterBottom sx={{fontWeight:"600", letterSpacing:7}}>
-          {title}
+        <Typography variant="h5" gutterBottom sx={{ fontWeight: "600", letterSpacing: 7 }}>
+          {title?.toUpperCase()}
         </Typography>
-        <Button variant="contained" color="primary" onClick={()=>{ window.location.href = link }}>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => {
+            sessionStorage.setItem('amber-select-product-type', title)
+            sessionStorage.removeItem('amber-select-collection')
+            window.location.href = '/products'
+          }}>
           SHOP NOW
         </Button>
       </Box>

src/index.css

   src: url(./assets/fonts/ProximaNova-Regular.otf);
 }
 
+@font-face {
+  font-family: 'BigCalson';
+  src: url(./assets/fonts/BigCaslonFB-Regular.ttf);
+}
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
   scrollbar-color: #95AAC5 #FFF; /* Thumb color and track color */
 }
 
+.main-title{
+  font-family: 'BigCalson' !important;
+  font-weight: 100;
+}
+
 /*LOADER*/
 /* HTML: <div class="loader"></div> */
 .loader {

src/pages/Home.jsx

         <Box sx={{ flexGrow: 1, mt: 5 }}>
           <Grid container spacing={2}>
             <Grid size={12}>
-              <ProductType title={'CLOTHING'} link={'/collection/clothing'} img_url={AmberClothing}/>
+              <ProductType title={'Apparel'} img_url={AmberClothing}/>
             </Grid>
             <Grid size={{xs:12, md:6}}>
-              <ProductType title={'BEAUTY'} link={'/collection/beauty'} img_url={AmberBeautyWallpaper}/>
+              <ProductType title={'Beauty'} img_url={AmberBeautyWallpaper}/>
             </Grid>
             <Grid size={{xs:12, md:6}}>
-              <ProductType title={'HOME'} link={'/collection/home'} img_url={AmberHomeWallpaper} />
+              <ProductType title={'Home'} img_url={AmberHomeWallpaper} />
             </Grid>
           </Grid>
         </Box>

src/pages/Newsletter.jsx

-import React from 'react'
-
-const Newsletter = () => {
-  return (
-    <div>Newsletter</div>
-  )
-}
-
-export default Newsletter

src/pages/Products/Product.jsx

         lg: 10
       }
     }}>
-      <Grid container spacing={0} sx={{ mt: 15, mb:5 }}>
-
-        <Grid size={12} sx={{ backgroundColor: "#000", textAlign:"center", display:{xs:"block", md:"none"} }}>
-          <img src={logoSrc} alt="Logo"
-            style={{
-              width: 150,
-              height: 50
-            }} />
-        </Grid>
+      <Grid container spacing={0} sx={{ mt: 10, mb:5 }}>
 
         <Grid size={{ xs: 12, md: 6 }}>
           <Box sx={{ paddingRight: 1 }}>