Siddhesh.More/wdi-landing-page
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Footer Fix

Browse Source
This commit is contained in:
npcdazai
2024-10-23 15:28:09 +05:30
parent 90e3a61409
commit cb6d045e1b
2 changed files with 50 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ui/Mobile/FooterComMobile.jsx
View File

@@ -68,9 +68,9 @@ const FooterCom = () => {
display="flex"
flexDirection="row"
flexWrap="wrap"
justifyContent="space-between"
justifyContent="center"
w="100%"
// alignItems="center"
alignItems="center"
>
<Box w="80%" display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={"4rem"}>
{footerData.map((val) => (
@@ -101,13 +101,13 @@ const FooterCom = () => {
</Box>
))}
<Box display="flex" flexDirection="column" gap={4}>
<Box display="flex" flexDirection="column" alignItems="flex-start" gap={6}>
<Image src={logo} w={"56px"} h="57px" />
<Text
_hover={{ color: "#E5195E", cursor: "pointer" }}
color="#E6E6E6"
fontWeight={300}
fontSize="14px"
fontSize="small"
>
©Copyright 2023 WDIPL – Software company. All rights reserved
</Text>
@@ -135,8 +135,9 @@ const FooterCom = () => {
<Box
display="flex"
flexDirection="column"
alignItems="flex-start"
alignItems="center"
gap={6}
mt={"3rem"}
>
<Box display="flex" flexDirection="column" alignItems="center" gap={3}>
<Text color="#FFFFFF" fontWeight="400" fontSize="18px">
@@ -151,6 +152,7 @@ const FooterCom = () => {
alignItems="center"
height="38px"
gap={5}
w="100%"
_hover={{ bgColor: "#C01550" }}
>
<Image width="28px" height="28px" src={pdf} alt="PDF icon" />

73
src/components/ui/Mobile/GSFMobile.jsx
View File

@@ -1,6 +1,7 @@
import { Container, Flex, Image, Box, Text } from "@chakra-ui/react";
import React from "react";
import LineBar from "../../../assets/imgpsh_fullsize_anim.png";
const data = [
{ id: 1, phase: "Strategy and Planning", date: "June 2023 - July 2023" },
{ id: 2, phase: "App Development", date: "August 2023 - September 2023" },
@@ -16,23 +17,24 @@ const data = [
const Timeline = () => {
return (
<Box
display={"flex"}
flexDirection="column"
gap={4}
alignItems="center"
display="flex"
flexDirection="row"
gap={1}
alignItems="flex-start"
w="100%"
color="white"
>
{/* Upper Flex for the first 3 timeline items */}
<Flex
w="100%"
position="relative"
justify={{ base: "center", md: "space-between" }}
flexDirection={{ base: "column", md: "row" }}
align={{ base: "center", md: "flex-start" }}
gap={{ base: 2, md: 0 }}
justify="space-between"
align="center"
flexDirection={{ base: "column", md: "row" }} // Stack on mobile
gap={{ base: 4, md: 0 }} // Add gap on mobile
>
{data.slice(0, 3).map((item) => (
<Box key={item.id} textAlign="center" w={{ base: "90%", md: "auto" }}>
<Box key={item.id} textAlign="center">
<Box
px={5}
py={3}
@@ -45,7 +47,7 @@ const Timeline = () => {
}}
>
<Text fontSize={{ base: "md", md: "lg" }}>{item.phase}</Text>
<Text fontSize={{ base: "sm", md: "17.83px" }} mt={2}>
<Text fontSize="17.83px" mt={2}>
{item.date}
</Text>
</Box>
@@ -60,33 +62,44 @@ const Timeline = () => {
flexDirection="column"
alignItems="center"
>
<Image src={LineBar} h="80px" w="100%" />
<Image
src={LineBar}
h="100%"
w="100%"
transform={{ base: "rotate(90deg)", md: "rotate(0deg)" }} // Rotate on mobile
/>
<Box
px={{ base: "1rem", md: "5rem" }}
px="5rem"
position="absolute"
top={{ base: "2rem", md: "3rem" }}
display={"flex"}
top="0rem"
display="flex"
justifyContent="space-between"
w="100%"
gap={8}
flexDirection="column"
>
{Array(5)
.fill(null)
.map((_, index) => (
.fill("")
.map((_, idx) => (
<Box
key={index}
key={idx}
as="button"
borderRadius="50%"
w="6px"
h="6px"
w="8.34px"
h="8.34px"
bgColor="#E5195E"
marginBottom={{ base: "1rem", md: 0 }} // Add margin on mobile
>
<Box
top="-2.8px"
right="7px"
as="button"
borderRadius="50%"
w="18px"
h="18px"
position="relative"
w="22.94px"
h="22.94px"
px="0"
marginTop="-1rem"
position="relative"
bgColor="#E5195E42"
/>
</Box>
@@ -94,17 +107,17 @@ const Timeline = () => {
</Box>
</Box>
{/* Bottom Timeline Phases */}
{/* Lower Flex for the remaining 2 timeline items */}
<Flex
w="100%"
w="60%"
position="relative"
justify={{ base: "center", md: "space-between" }}
flexDirection={{ base: "column", md: "row" }}
align={{ base: "center", md: "flex-start" }}
gap={{ base: 2, md: 0 }}
justify="space-between"
align="center"
flexDirection={{ base: "column", md: "row" }} // Stack on mobile
gap={{ base: 4, md: 0 }} // Add gap on mobile
>
{data.slice(3, 5).map((item) => (
<Box key={item.id} textAlign="center" w={{ base: "90%", md: "auto" }}>
<Box key={item.id} textAlign="center">
<Box
px={5}
py={3}
@@ -117,7 +130,7 @@ const Timeline = () => {
}}
>
<Text fontSize={{ base: "md", md: "lg" }}>{item.phase}</Text>
<Text fontSize={{ base: "sm", md: "md" }} mt={2}>
<Text fontSize="md" mt={2}>
{item.date}
</Text>
</Box>