Merge pull request #139 from ramith-kulal/revert-138-feature/request-…

…page

Revert "Implemented design for request page based on Figma design"

client/src/components/Request/Request.jsx

@@ -9,6 +9,7 @@ import {
   Flex,
   Image,
   useColorModeValue,
+  useBreakpointValue,
 } from '@chakra-ui/react';
 import { Link } from 'react-router-dom';
 import { useEffect, useState } from 'react';
@@ -42,34 +43,31 @@ const Request = () => {
   };
 
   const textColor = useColorModeValue('gray.700', 'white');
+  const displayImage = useBreakpointValue({ base: 'none', md: 'block' });
 
   return (
-    <Container marginLeft="10%" maxWidth="80%">
-      <Flex justifyContent="space-between">
-        <VStack justifyContent="center" spacing={'5'} h={`${viewportHeight}px`}>
+    <Container maxWidth="80%" paddingX={{ base: '6', md: '0' }}>
+      <Flex flexDirection={{ base: 'column', md: 'row' }} justifyContent="space-between">
+        <VStack justifyContent="center" spacing={'5'} height="auto" width={{ base: '100%', md: '50%' }} marginBottom={{ base: '6', md: '0' }}>
           <form onSubmit={handleSubmit} style={{ width: '100%' }}>
             <Heading
               children={'Request New Course'}
               marginBottom="4px"
               fontFamily="'Uncut Sans', sans-serif"
-              color={textColor} // Set text color
+              color={textColor}
             />
 
-            <Box my={3} textAlign="left" color={textColor}>
+            <Box textAlign="left" color={textColor} marginBottom={{ base: '4', md: '0' }}>
               {' '}
-              {/* Set text color */}
               You can reach us anytime via
-              <Link
-                to="/request"
-                style={{ textDecoration: 'none', marginLeft: '5px' }}
-              >
+              <Link to="/request" style={{ textDecoration: 'none', marginLeft: '5px' }}>
                 <Button colorScheme="orange" variant={'link'}>
                   hi@edumi
                 </Button>
               </Link>
             </Box>
 
-            <Box my={'4'}>
+            <Box marginBottom={{ base: '4', md: '0' }}>
               <FormLabel htmlFor="name" children="Name" />
               <Input
                 required
@@ -78,12 +76,12 @@ const Request = () => {
                 onChange={e => setName(e.target.value)}
                 placeholder="Enter your Name"
                 focusBorderColor="yellow.400"
-                width={{ base: '100%', md: '505px' }} // Responsive width
+                width="100%"
                 height="45px"
               />
             </Box>
 
-            <Box>
+            <Box marginBottom={{ base: '4', md: '0' }}>
               <FormLabel htmlFor="email" children="Email Address" />
               <Input
                 required
@@ -93,11 +91,12 @@ const Request = () => {
                 placeholder=" &#128231; Enter your Email Address"
                 type="email"
                 focusBorderColor="yellow.400"
-                width={{ base: '100%', md: '505px' }} // Responsive width
+                width="100%"
                 height="45px"
               />
             </Box>
-            <Box my={'4'}>
+
+            <Box marginBottom={{ base: '4', md: '0' }}>
               <FormLabel htmlFor="Coursename" children="Course Name" />
               <Input
                 required
@@ -106,12 +105,12 @@ const Request = () => {
                 onChange={e => setName(e.target.value)}
                 placeholder="Enter the course name"
                 focusBorderColor="yellow.400"
-                width={{ base: '100%', md: '505px' }} // Responsive width
+                width="100%"
                 height="45px"
               />
             </Box>
 
-            <Box my={3}>
+            <Box>
               <FormLabel htmlFor="course" children="Brief description" />
               <Input
                 required
@@ -120,10 +119,10 @@ const Request = () => {
                 onChange={e => setCourse(e.target.value)}
                 placeholder="Tell us a little about the course...."
                 focusBorderColor="yellow.400"
-                width={{ base: '100%', md: '505px' }} // Responsive width
+                width="100%"
                 paddingTop="19px"
                 paddingBottom="80px"
-                paddingLeft="10px" // Add padding to the left
+                paddingLeft="10px"
                 textAlign="left"
               />
             </Box>
@@ -132,7 +131,7 @@ const Request = () => {
               my={3}
               colorScheme="#EB5017"
               background="#EB5017"
-              width={{ base: '100%', md: '505px' }} // Responsive width
+              width="100%"
               height="45px"
               borderRadius="sm"
               gap="10px"
@@ -141,19 +140,21 @@ const Request = () => {
             </Button>
           </form>
         </VStack>
-
-        <Box
-          width={{ base: '100%', md: '50%' }}
-          height="auto"
-          style={{ filter: 'blur(2px)', opacity: '0.1' }}
-        >
-          <Image
-            src={requestImage}
-            alt="Request Image"
-            width="100%"
-            height="90%"
-          />
-        </Box>
+ <Box
+  width={{ base: '100%', md: '40%' }} // Adjust the width for smaller screens
+  height="auto"
+  marginBottom={{ base: '6', md: '0' }}
+  marginRight={{ base: '0', md: '4' }} // Add margin to the right for larger screens
+  display={displayImage}
+>
+  <Image
+    src={requestImage}
+    alt="Request Image"
+    width="100%"
+    height="90%"
+    style={{ filter: 'blur(2px)', opacity: '0.1' }}
+  />
+</Box>
       </Flex>
       <GoToTopButton />
     </Container>