NAN

src/components/Banner.jsx

@@ -1,4 +1,4 @@
-import { Box, Heading, Image, Text } from "@chakra-ui/react";
+import { Box, Image, Text } from "@chakra-ui/react";
 import banner from "../assets/handvector.png";
 import text from "../assets/text.png";
 import Button from "../components/ui/Button"

src/components/Companys.jsx

@@ -33,7 +33,7 @@ function App() {
   const getBoxHeight = (box) => (selectedBox === box ? "452px" : "412px");
 
   return (
-      <Box position="relative" h="100%" p="3rem">
+      <Box position="relative" h="100%" p="3rem" overflowX="hidden" width={["25%", "50%", "100%"]}>
         <AnimatePresence>
           {selectedBox && (
             <motion.div

src/components/Form.jsx

@@ -38,9 +38,7 @@ const Form = () => {
     console.log(data);
   };
 
-  // const handleSliderChange = (value) => {
-  //   setSliderValue(value);
-  // };
+
   const handleClick = () => {
     document.getElementById("fileInput").click();
   };
@@ -91,7 +89,9 @@ const Form = () => {
           Lets Collaborate to Shape Your Vision into Reality
         </Heading>
         <Box w="100%" display="flex" flexDirection="column" alignItems="center">
-          <form onSubmit={handleSubmit(onSubmit)}>
+          <form
+          //  onSubmit={handleSubmit(onSubmit)}
+           >
             <FormControl display="flex" flexDirection="column" gap={4}>
               <Box
                 display="grid"
@@ -233,44 +233,7 @@ const Form = () => {
                     </Text>
                   )}
                 </Box>
-                {/* <Box w="100%" maxW="570px">
-                  <FormLabel color="#FFFFFF">Attach file</FormLabel>
-                  <Input
-                    id="fileInput"
-                    type="file"
-                    {...register("fileInput", {
-                      validate: (file) =>
-                        file &&
-                        ["image/png", "image/jpeg", "application/pdf"].includes(
-                          file.type
-                        ) &&
-                        file.size <= 5 * 1024 * 1024
-                          ? true
-                          : "Invalid file type or size. Only PNG, JPEG, and PDF files under 5MB are allowed.",
-                    })}
-                    onChange={handleChange}
-                    display="none"
-                  />
-                  <Button
-                    onClick={handleClick}
-                    leftIcon={<Icon as={FiPaperclip} />}
-                    variant="outline"
-                    bg="#E5195E12"
-                    border="1px solid #E5195E"
-                    borderRadius="10px"
-                    size="md"
-                    _hover={{ bg: "#E5195E12" }}
-                    w="100%"
-                    color="#fff"
-                  >
-                    Attach file
-                  </Button>
-                  {errors.fileInput && (
-                    <Text color="red.400" mt={2}>
-                      {errors.fileInput.message}
-                    </Text>
-                  )}
-                </Box> */}
+      
                 <Box w="100%" maxW="570px">
                   <FormLabel color="#FFFFFF">Attach file</FormLabel>
                   <Input
@@ -335,10 +298,11 @@ const Form = () => {
                   }}
                   colorScheme="pink"
                 >
-                  <SliderTrack bg="gray.700" height="2px">
+                  <SliderTrack bg="#999999" height="2px">
                     <SliderFilledTrack bg="#E5195E" />
                   </SliderTrack>
-                  <SliderThumb boxSize={5} bg="#E5195E"></SliderThumb>
+                  <SliderThumb boxSize={4} bg="#E5195E">
+                  </SliderThumb>
                 </Slider>
                 {errors.budget && (
                   <Text color="red.400" mt={2}>
@@ -361,7 +325,7 @@ const Form = () => {
                           w="8.34px"
                           h="8.34px"
                           px="0"
-                          marginTop="-3rem"
+                          marginTop="-2.8rem"
                           position="relative"
                           mb={"3rem"}
                           bg={sliderValue >= val ? "#E5195E" : "gray.600"}
@@ -412,6 +376,7 @@ const Form = () => {
                   h="55px"
                   borderRadius="0px"
                   type="submit"
+                  onClick={handleSubmit(onSubmit)}
                 >
                   Submit
                 </Button>

src/components/Header.jsx

@@ -37,7 +37,7 @@ const Header = () => {
 
   return (
     <div style={{ position: "sticky", top: 0, zIndex: 100 }}>
-      <Box w={"100vw"}>
+      <Box w={"100%"}>
         <Flex
           bgColor="black"
           borderBottom="1px solid #5C5C5C"
@@ -72,6 +72,7 @@ const Header = () => {
               borderRadius="0px"
               textColor="white"
               className="pinkcolor"
+              display={{base:"none", md:"block"}}
             >
               Contact Us
             </Button>

src/components/Hero.jsx

@@ -1,12 +1,4 @@
-import {
-  Box,
-  Flex,
-  Heading,
-  HStack,
-  Image,
-  Text,
-  VStack,
-} from "@chakra-ui/react";
+import { Box, Flex, Heading, HStack, Image, Text } from "@chakra-ui/react";
 import banner from "../assets/images/banner.png";
 import whiteCircle from "../assets/white.png";
 import pinkCircle from "../assets/pink.png";
@@ -20,8 +12,7 @@ const circlesData = [
 
 const Hero = () => {
   return (
-    <div>
-      <Box bgColor="black" h="100%">
+      <Box bgColor="black" h="100%" width={["25%", "50%", "100%"]} >
         <Flex
           justifyContent="space-between"
           spacing={4}
@@ -35,6 +26,7 @@ const Hero = () => {
               lineHeight="40.88px"
               fontWeight={600}
               fontSize="40px"
+              flexDirection={{base:"column" , lg:"row"}}
             >
               Develop AI-Powered solutions with the leading mobile
             </Heading>
@@ -47,7 +39,13 @@ const Hero = () => {
               Develop AI-Powered solutions with the leading mobile solutions
               with the leading mobile
             </Text>
-            <Box w={"100%"} display="flex" flexDirection="row" position="relative" alignItems="center">
+            <Box
+              w={"100%"}
+              display="flex"
+              flexDirection="row"
+              position="relative"
+              alignItems="center"
+            >
               {circlesData.map((circle, index) => (
                 <Box
                   key={circle.id}
@@ -56,7 +54,11 @@ const Hero = () => {
                   alignItems="center"
                   w={"158.06px"}
                   h="158.06px"
-                  right={`${index * 8}px`}
+                  right={{
+                    base: `${index * 4}px`,
+                    md: `${index * 8}px`, 
+                    lg: `${index * 12}px`,
+                  }}
                 >
                   <Image
                     src={circle.image}
@@ -88,7 +90,6 @@ const Hero = () => {
           </Box>
         </Flex>
       </Box>
-    </div>
   );
 };
 

src/pages/Home.jsx

@@ -12,7 +12,7 @@ import Footer from "../components/Footer"
 import FooterCom from "../components/FooterCom";
 const Home = () => {
   return (
-    <div>
+    <>
       <Hero />
       <TimeLines/>
       <ServicesSection/>
@@ -25,7 +25,7 @@ const Home = () => {
       <FAQs/>
       <Footer/>
       <FooterCom/>
-    </div>
+    </>
   );
 };