add tracking info

src/App.js

 import ReturnExchange from './pages/ReturnExchange';
 import PrivacyNotice from './pages/PrivacyNotice';
 import ShoppingFAQs from './pages/ShoppingFAQs';
+import DeliveryInfo from './pages/DeliveryInfo';
 import Product from './pages/Products/Product';
 import Checkout from './pages/Checkout';
 import Navbar from './components/Navbar';
           </Route>
           <Route path='/cart' element={<Cart />} />
           <Route path='/checkout' element={<Checkout />} />
+          <Route path='/delivery_info' element={<DeliveryInfo />} /> 
           <Route path='/sale_terms_and_condition' element={<SaleTerm />} />
           <Route path='/return_and_exchange' element={<ReturnExchange />} /> 
           <Route path='/privacy_notice' element={<PrivacyNotice />} />
-          <Route path='/shopping_faqs' element={<ShoppingFAQs />} />
+          <Route path='/shopping_faqs' element={<ShoppingFAQs />} /> 
           <Route path='/collection/:pid' element={<Collection />}/>
 
         </Routes>

src/components/Footer/Footer.jsx

           </Typography>
           <nav>
             <Typography variant="body2" sx={{ mb: 1 }}>
-              <a style={{ textDecoration: 'none', color: 'inherit', color:"gray", cursor:"pointer" }}>Delivery Information</a>
+              <a href='/delivery_info' style={{ textDecoration: 'none', color: 'inherit', cursor:"pointer" }}>Delivery Information</a>
             </Typography>
             <Typography variant="body2" sx={{ mb: 1 }}>
               <a href='/sale_terms_and_condition' style={{ textDecoration: 'none', color: 'inherit', cursor:"pointer" }}>Sale Terms & Conditions</a>

src/pages/DeliveryInfo.jsx

+import React, { useState } from 'react';
+import { Box, TextField, Typography, Button } from '@mui/material';
+
+const DeliveryInfo = () => {
+  const [trackingNumber, setTrackingNumber] = useState('');
+
+  return (
+    <Box sx={{
+      textAlign: "center",
+      mt: 15,
+      px: {
+        xs: 2,
+        md: 5,
+        lg: 5
+      },
+      mb: {
+        xs: 0,
+        md: 5,
+        lg: 10
+      }
+    }}>
+      <Typography variant='h4' sx={{ textAlign: "center", fontWeight: "bolder", mb: 3 }}>
+        DELIVERY INFORMATION
+      </Typography>
+      <Box sx={{ border: "1px solid black", maxWidth: "600px", margin: "auto auto" }}>
+        <Box sx={{ borderBottom: "1px solid black" }}>
+          <Typography variant='h5' sx={{ textAlign: "center", fontWeight: "bolder", py: 2, px: 1 }}>
+            ORDER TRACKING NUMBER
+          </Typography>
+        </Box>
+        <Box sx={{ px: { xs: 1, sm: 2, md: 4 }, py: 3 }}>
+          <Typography variant='body2' sx={{ textAlign: "center", py: 2, px: 1, margin: "auto auto" }}>
+            Thank you for your purchase! Your order is on its way. You can track the status of your shipment using the tracking number provided below.
+          </Typography>
+          <TextField
+            variant="outlined"
+            placeholder="Order Tracking Number"
+            type="text"
+            value={trackingNumber}
+            onChange={(e) => setTrackingNumber(e.target.value)}
+            sx={{
+              py: 2,
+              width: "100%",
+            }}
+          />
+        </Box>
+      </Box>
+      <Button
+        onClick={() => {
+          if (trackingNumber.trim()) {
+            window.open(`https://app.easyparcel.com/my/en/track/details/?courier=JnT-Express&awb=${trackingNumber}`, '_blank')
+          } else {
+            alert("Please enter a tracking number.");
+          }
+        }}
+        variant="contained"
+        sx={{
+          backgroundColor: "#000",
+          color: "white",
+          margin: "0 auto",
+          mt: 6,
+          px: 7,
+          py: 2,
+          textTransform: "none",
+          "&:hover": {
+            backgroundColor: (theme) => theme.palette.grey[900],
+          },
+        }}
+      >
+        SUBMIT
+      </Button>
+    </Box>
+  );
+};
+
+export default DeliveryInfo;