Merge pull request #136 from ramith-kulal/redesign-contact-page

Redesigned the contact page layout
anand-harsh · Feb 23, 2024 · 814cf52 · 814cf52
2 parents e6cddb5 + 21081ac
commit 814cf52
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 57 deletions.
diff --git a/client/src/assets/images/contact.jpg b/client/src/assets/images/contact.jpg
diff --git a/client/src/components/Contact.jsx/Contact.jsx b/client/src/components/Contact.jsx/Contact.jsx
@@ -6,12 +6,15 @@ import {
   Input,
   FormLabel,
   Button,
+  Flex,
+  Image,
+  useColorModeValue,
 } from '@chakra-ui/react';
 import { Link } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import React from 'react';
-import GoToTopButton from '../Button/GoToTopButton'; // Import the GoToTopButton component
-
+import GoToTopButton from '../Button/GoToTopButton';
+import contactImage from '../../assets/images/contact.jpg';
 
 const Contact = () => {
   const [name, setName] = React.useState('');
@@ -32,67 +35,114 @@ const Contact = () => {
       window.removeEventListener('resize', calculateViewportHeight);
     };
   }, []);
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    // Add your form submission logic here
+  };
+
+  const textColor = useColorModeValue('gray.700', 'white');
+
   return (
-    <Container>
-      <VStack justifyContent="center" spacing={'5'} h={`${viewportHeight}px`}>
-        <Heading children={'Contact Us'} />
-        <form action="" style={{ width: '100%' }}>
-          <Box my={'4'}>
-            <FormLabel htmlFor="name" children="Name" />
-            <Input
-              required
-              id="name"
-              value={name}
-              onChange={e => setName(e.target.value)}
-              placeholder="Enter your Name"
-              type="text"
-              focusBorderColor="yellow.400"
+    <Container marginLeft="10%" maxWidth="80%">
+      <Flex justifyContent="space-between">
+        <VStack justifyContent="center" spacing={'5'} h={`${viewportHeight}px`}>
+          <form onSubmit={handleSubmit} style={{ width: '100%' }}>
+            <Heading
+              children={'Contact Us'}
+              marginBottom="4px"
+              fontFamily="'Uncut Sans', sans-serif"
+              color={textColor} // Set text color
             />
-          </Box>
 
-          <Box>
-            <FormLabel htmlFor="email" children="Email Address" />
-            <Input
-              required
-              id="email"
-              value={email}
-              onChange={e => setEmail(e.target.value)}
-              placeholder="Abc"
-              type="email"
-              focusBorderColor="yellow.400"
-            />
-          </Box>
+            <Box my={3} textAlign="left" color={textColor}>
+              {' '}
+              {/* Set text color */}
+              Request For a Course?
+              <Link
+                to="/request"
+                style={{ textDecoration: 'none', marginLeft: '5px' }}
+              >
+                <Button colorScheme="yellow" variant={'link'}>
+                  Click here
+                </Button>
+              </Link>
+            </Box>
 
-          <Box my={3}>
-            <FormLabel htmlFor="message" children="Message" />
-            <Input
-              required
-              id="message"
-              value={message}
-              onChange={e => setMessage(e.target.value)}
-              placeholder="Your message"
-              focusBorderColor="yellow.400"
-            />
-          </Box>
+            <Box my={'4'}>
+              <FormLabel htmlFor="name" children="Name" />
+              <Input
+                required
+                id="name"
+                value={name}
+                onChange={e => setName(e.target.value)}
+                placeholder="Enter your Name"
+                focusBorderColor="yellow.400"
+                width={{ base: '100%', md: '505px' }} // Responsive width
+                height="45px"
+              />
+            </Box>
 
-          <Button my={3} colorScheme="yellow" type="submit">
-            Send
-          </Button>
+            <Box>
+              <FormLabel htmlFor="email" children="Email Address" />
+              <Input
+                required
+                id="email"
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+                placeholder=" &#128231; Enter your Email Address"
+                type="email"
+                focusBorderColor="yellow.400"
+                width={{ base: '100%', md: '505px' }} // Responsive width
+                height="45px"
+              />
+            </Box>
 
-          <Box my={3}>
-            Resquest For a Course?
-            <Link to="/request">
-              {' '}
-              <Button colorScheme="yellow" variant={'link'}>
-                Click
-              </Button>{' '}
-            </Link>
-            here
-          </Box>
-        </form>
-      </VStack>
-      {/* use button */}
-      <GoToTopButton/>
+            <Box my={3}>
+              <FormLabel htmlFor="message" children="Message" />
+              <Input
+                required
+                id="message"
+                value={message}
+                onChange={e => setMessage(e.target.value)}
+                placeholder="Your message"
+                focusBorderColor="yellow.400"
+                width={{ base: '100%', md: '505px' }} // Responsive width
+                paddingTop="15px"
+                paddingBottom="60px"
+                paddingLeft="10px" // Add padding to the left
+                textAlign="left"
+              />
+            </Box>
+
+            <Button
+              my={3}
+              colorScheme="#EB5017"
+              background="#EB5017"
+              width={{ base: '100%', md: '505px' }} // Responsive width
+              height="45px"
+              borderRadius="sm"
+              gap="10px"
+            >
+              Send Request
+            </Button>
+          </form>
+        </VStack>
+
+        <Box
+          width={{ base: '100%', md: '50%' }}
+          height="auto"
+          style={{ filter: 'blur(2px)', opacity: '0.1' }}
+        >
+          <Image
+            src={contactImage}
+            alt="Contact Image"
+            width="100%"
+            height="90%"
+          />
+        </Box>
+      </Flex>
+      <GoToTopButton />
     </Container>
   );
 };