Hero Mobile

src/components/Header.jsx

@@ -21,7 +21,7 @@ const titles = [
   "Excellent ane timely execution",
   "State-of-the art infrastructure",
   "Integrity and sincerity ",
-  "A large team of developers"
+  "A large team of developers",
 ];
 
 const Header = () => {
@@ -36,43 +36,53 @@ const Header = () => {
   });
 
   return (
-    <div style={{ position: "sticky", top: 0, zIndex: 100 }}>
+    <div style={{ position: "sticky", top: 0, zIndex: 100, width: "100vw" }}>
-      <Box w={"100%"}>
+      <Box w="100%">
         <Flex
           bgColor="black"
           borderBottom="1px solid #5C5C5C"
-          px={"2.5rem"}
+          px={{ base: "0px", md: "1.5rem", lg: "2.5rem" }}
-          py={1}
+          py={{ base: 1, md: 2, lg: 4 }}
           justifyContent="space-between"
           alignItems="center"
         >
-          <Image ml="2rem" src={logo} h="67px" w="66px" alt="WDI" />
+          <Image
-          <Box w={"780px"} h={"66px"} textAlign="center" ml={4}>
+            ml={{ base: "10px", md: "1rem", lg: "2rem" }}
+            src={logo}
+            h={{ base: "40px", md: "50px", lg: "67px" }}
+            w="66px"
+            alt="WDI"
+          />
+          <Box
+            w={"100%"}
+            h={{ base: "30px", md: "50px", lg: "66px" }}
+            textAlign="center"
+            ml={{base :2, md : 3, lg:4}}
+          >
             <Text
               textColor="#e8155d"
               className="Robo"
-              fontSize="24px"
+              fontSize={{ base: "12px", md: "18px", lg: "24px" }}
               fontWeight={500}
               lineHeight="21.09px"
               animation={animation}
               textAlign="center"
-              py={6}
+              py={{ base: 3, md: 5, lg: 6 }}
             >
               {titles[currentIndex]}
             </Text>
           </Box>
           <NavLink>
             <Button
-            
               bgColor="#e8155d"
               _hover={{ bg: "#e8155d" }}
-              w={"166px"}
+              w={{ base: "85px", md: "70px", lg: "166px" }}
-              h={"50px"}
+              h={{ base: "25px", md: "35px", lg: "50px" }}
-              mr="2rem"
+              mr={{ base: "10px", md: "1rem", lg: "2rem" }}
               borderRadius="0px"
               textColor="white"
               className="pinkcolor"
-              display={{base:"none", md:"block"}}
+              fontSize={{base:"sm", md:"md",lg:"lg"}}
             >
               Contact Us
             </Button>

src/components/ui/Mobile/HeroMobile.jsx

@@ -12,11 +12,11 @@ const circlesData = [
 
 const Hero = () => {
   return (
-    <Box bgColor="black" h="100%" w="100%">
+    <Box bgColor="black" h="100%" w="100vw" display="flex" flexDirection="column" alignItems="center">
       <Flex
-        flexDirection={{ base: "column", md: "column" }} // Adjust direction based on screen size
+        flexDirection="column"
         alignItems="center"
-        px={{ base: "1rem", md: "4.4rem" }} // Adjust padding for mobile view
+        px={{ base: "sm", md:"md"}}
         py="2rem"
       >
         <Box mb={{ base: "1rem", md: "2rem" }}> {/* Add margin for spacing */}
@@ -28,13 +28,13 @@ const Hero = () => {
           w="100%"
           gap={{ base: "1rem", md: "2rem" }} // Adjust gap for mobile view
           alignItems="center"
-          textAlign={{ base: "center", md: "left" }} // Center text on mobile
+          textAlign={{ base: "center", md: "center" }} // Center text on mobile
         >
           <Heading
             color="#e8155d"
             lineHeight="35px"
             fontWeight={600}
-            fontSize={{ base: "24px", md: "32px" }} // Adjust font size for mobile view
+            fontSize={{ base: "md", md: "lg" }} // Adjust font size for mobile view
             flexDirection="column"
           >
             Develop AI-Powered solutions with the leading mobile
@@ -42,7 +42,7 @@ const Hero = () => {
           <Text
             color="#FFFFFF"
             fontWeight={400}
-            fontSize={{ base: "18px", md: "22px" }} // Adjust font size for mobile view
+            fontSize={{ base: "xs", md: "md" }} // Adjust font size for mobile view
             lineHeight="23.63px"
           >
             Develop AI-Powered solutions with the leading mobile solutions with
@@ -52,9 +52,10 @@ const Hero = () => {
         <Box
           w="100%"
           display="flex"
-          flexDirection={{ base: "column", md: "row" }} 
+          flexDirection={{ base: "row", md: "row" }} 
           alignItems="center"
           mt={{ base: "1rem", md: "2rem" }} 
+          px={1}
         >
           {circlesData.map((circle, index) => (
             <Box
@@ -64,9 +65,9 @@ const Hero = () => {
               flexDirection="column" 
               alignItems="center"
               mb={{ base: "1rem", md: "0" }} 
-              w="158.06px"
+              w={{base:"93px", md:"100.06px"}}
-              h="158.06px"
+              h="100.06px"
-              mr={{ base: "0", md: `${index * 4}px` }} 
+              ml={{ base: `${index * -4}px`, md: `${index * -3}px` }} 
             >
               <Image
                 src={circle.image}
@@ -74,6 +75,7 @@ const Hero = () => {
                 h="158.06px"
               />
               <Box
+              w="100%"
                 textAlign="center"
                 color="#e8155d"
                 position="absolute"
@@ -81,10 +83,10 @@ const Hero = () => {
                 left="50%"
                 transform="translate(-50%, -50%)" 
               >
-                <Text fontSize="26px" fontWeight="600">
+                <Text fontSize="18px" fontWeight="600">
                   200+
                 </Text>
-                <Text color="white" fontSize="16px" fontWeight="500">
+                <Text color="white" fontSize="12px" fontWeight="500">
                   Happy Client
                 </Text>
               </Box>

src/components/ui/Mobile/TimrLinesMobile.jsx

@@ -0,0 +1,124 @@
+import {
+    Box,
+    Circle,
+    Flex,
+    Image,
+    Text,
+    Tooltip,
+    VStack,
+  } from "@chakra-ui/react";
+  import React from "react";
+  import Tabs from "../Tabs";
+  import LineBar from "../../../assets/pointerBar.png";
+  import lineBar from "../../../assets/imgpsh_fullsize_anim.png";
+  
+  const timelineData = [
+    { date: "Oct 12, 2023", phase: "Phase 1", description: "Lorem ipsum" },
+    { date: "Oct 12, 2024", phase: "Phase 2", description: "Lorem ipsum" },
+  ];
+  
+  const TimeLines = () => {
+    return (
+      <div>
+        <Box bgColor="black" w="100%" px="4rem" h="100%">
+          <Box
+            bgColor="#D9D9D91A"
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            borderRadius="20px"
+            p={4}
+          >
+            <Text
+              fontWeight={500}
+              fontSize="28px"
+              lineHeight="37.71px"
+              color="#fff"
+            >
+              We Walk the Walk
+            </Text>
+            {/* <Tabs /> */}
+            <Box
+              w="100%"
+              p={"4rem"}
+              mt={"2rem"}
+              display="flex"
+              flexDirection="column"
+            >
+              <Image w={"100%"} src={lineBar} />
+              <Flex
+                direction={{ base: "column", md: "row" }}  // Adjust direction based on screen size
+                w="100%"
+                px="3rem"
+                justify="space-between"
+                align="center"
+              >
+                {timelineData.map((item, index) => (
+                  <Flex key={index} direction="column" align="center" mb={{ base: "2rem", md: "0" }}>
+                    <Tooltip
+                      display="flex"
+                      alignItems="center"
+                      flexDirection="column"
+                      bgColor="#E8155D21"
+                      w="220.85px"
+                      h="104.29px"
+                      label={item.description}
+                      placement="top"
+                      px="8rem"
+                    >
+                      <Box
+                        bottom="5rem"
+                        as="button"
+                        borderRadius="50%"
+                        w="8.34px"
+                        h="8.34px"
+                        marginTop="-1rem"
+                        position="relative"
+                        mb="3rem"
+                        bgColor="#E5195E"
+                      >
+                        <Box
+                          top="-2.8px"
+                          right="7px"
+                          as="button"
+                          borderRadius="50%"
+                          w="22.94px"
+                          h="22.94px"
+                          px="0"
+                          marginTop="-1rem"
+                          position="relative"
+                          bgColor="#E5195E42"
+                        />
+    
+                        <Box
+                          display="flex"
+                          w="220.85px"
+                          h="104.29px"
+                          flexDirection="row"
+                          position="relative"
+                          alignItems="center"
+                          justifyContent="center"
+                        >
+                          <Box display="flex" flexDirection="column" alignItems="center" mr="8rem">
+                            <Text fontSize="sm" color="white">
+                              {item.date}
+                            </Text>
+                            <Text fontSize="xs" color="white">
+                              {item.phase}
+                            </Text>
+                          </Box>
+                        </Box>
+                      </Box>
+                    </Tooltip>
+                  </Flex>
+                ))}
+              </Flex>
+            </Box>
+          </Box>
+        </Box>
+      </div>
+    );
+  };
+  
+  export default TimeLines;
+  

src/pages/Home.jsx

@@ -13,6 +13,7 @@ import Footer from "../components/Footer";
 import FooterCom from "../components/FooterCom";
 import { useBreakpointValue } from "@chakra-ui/react";
 import HeroMobile from "../components/ui/Mobile/HeroMobile";
+import TimeLinesMobile from "../components/ui/Mobile/TimrLinesMobile";
 
 const Home = () => {
   const heroComponent = useBreakpointValue({
@@ -20,20 +21,26 @@ const Home = () => {
     lg: <Hero />,
   });
 
+  const timeLines = useBreakpointValue({
+    base :<TimeLinesMobile/>,
+    lg :<TimeLines/>
+  })
+
   return (
     <>
       {heroComponent}
-      <TimeLines />
+      {timeLines}
+      {/* <TimeLines />
       <ServicesSection />
-      <Protfolio />
+      <Protfolio /> */}
-      <Teach />
+      {/* <Teach />
       <Testi />
       <Awards />
       <Banner />
       <Form />
       <FAQs />
       <Footer />
-      <FooterCom />
+      <FooterCom /> */}
     </>
   );
 };

vite.config.js

@@ -1,7 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    host: '0.0.0.0', 
+    port: 5173,     
+  },
 })