Work on Host Kitchen

src/components/Home/HostKitchen/contcet/CloudKitchenHosting.js

@@ -0,0 +1,135 @@
+import React from 'react';
+import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
+
+const CloudKitchenHosting = ({ currentStepIndex = 0, onNext, onBack }) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        height: { xs: '90%', sm: '100%', md: '92.5%' },
+        backgroundColor: '#FFFFFF',
+        px: 4,
+        pt: 5,
+        pb: 10,
+        display: 'block',
+        borderRadius: 2,
+        boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+        position: 'relative',
+        width: { xs: '85%', sm: '90%' },
+      }}
+    >
+      <Stack spacing={2.5}>
+        <Typography
+          fontWeight={700}
+          sx={{
+            fontSize: {
+              xs: '1.8rem',
+              sm: '2rem',
+              md: '2.2rem'
+            }
+          }}
+        >
+          Cloud Kitchen Hosting
+        </Typography>
+        <Box sx={{ width: '80%' }}>
+          <Typography
+            fontSize="16px"
+            color="text.secondary"
+            fontWeight={500}
+            sx={{ pb: 1 }}
+          >
+            Enter your basic information to proceed to registration of your own restaurant on this platform
+          </Typography>
+        </Box>
+
+        {/* Inputs (Restaurant Name, Type, Address, City, Postal Code) */}
+        {[
+          { label: 'Restaurant Name', placeholder: 'Al-Baik Foods' },
+          { label: 'Restaurant Location', placeholder: 'Street 123, Jordan' },
+          { label: 'Availabel Space', placeholder: '300 sq. feet' },
+          { label: 'Number of Employees', placeholder: '200' },
+        ].map((field, index) => (
+          <Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+              {field.label}
+            </Typography>
+            <TextField
+              placeholder={field.placeholder}
+              variant="outlined"
+              fullWidth
+              sx={{
+                '& input': { fontWeight: 500, fontSize: '15px' },
+                '& input::placeholder': { color: '#969BA7' },
+                '& .MuiOutlinedInput-root': {
+                  borderRadius: '10px',
+                  transition: '0.3s',
+                  '&.Mui-focused fieldset': {
+                    borderColor: theme.palette.primary.main,
+                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                  }
+                },
+                '& .MuiOutlinedInput-root.Mui-focused': {
+                  borderColor: '#3f51b5',
+                  boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                }
+              }}
+            />
+          </Box>
+        ))}
+
+
+        <Box sx={{ pt: 2 }}>
+          <Button
+            variant="contained"
+            fullWidth
+            onClick={onNext}
+            sx={{
+              fontFamily: 'PlusJakartaSans',
+              fontWeight: 600,
+              fontSize: { xs: '14px', sm: '16px' },
+              height: { xs: '45px', sm: '52px' },
+              borderRadius: '50px',
+              textTransform: 'none',
+              color: 'white',
+              backgroundColor: theme.palette.primary.main,
+              '&:hover': {
+                backgroundColor: theme.palette.primary.hover,
+              },
+            }}
+          >
+            Next
+          </Button>
+
+          {/* زر Back تحت زر Next */}
+          <Button
+            variant="outlined"
+            fullWidth
+            onClick={onBack}
+            sx={{
+              mt: 2,
+              fontFamily: 'PlusJakartaSans',
+              fontWeight: 600,
+              fontSize: { xs: '14px', sm: '16px' },
+              height: { xs: '45px', sm: '52px' },
+              borderRadius: '50px',
+              textTransform: 'none',
+              display: { xs: 'block', sm: 'none', md: 'none' }, // يظهر فقط في xs و sm
+              borderColor: theme.palette.primary.main,
+              color: theme.palette.primary.main,
+              '&:hover': {
+                backgroundColor: theme.palette.primary.light,
+                borderColor: theme.palette.primary.main,
+              },
+            }}
+          >
+            Back
+          </Button>
+        </Box>
+
+      </Stack>
+    </Box>
+  );
+};
+
+export default CloudKitchenHosting;