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

Languages changes are still ongoing

Browse Source
This commit is contained in:
npcdazai
2024-09-04 15:54:11 +05:30
parent 8a521bc282
commit bdfcfc1809
4 changed files with 250 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Banner.jsx
View File

@@ -14,7 +14,7 @@ const Banner = () => {
p={12}
>
<Box w="50%" display="flex" flexDirection="column" gap={4}>
<Image src={text} h="104px" w="598px" />
<Image src={text} w="598px" />
<Text
fontSize="20px"
fontWeight={400}

241
src/components/OS/Hybrid.jsx Normal file
View File

@@ -0,0 +1,241 @@
import { Box, Container, Heading, Image, Text } from "@chakra-ui/react";
import React from "react";
import htmlpng from "../../assets/html.png";
import reactjs from "../../assets/react.png";
import codeIgniter from "../../assets/codeigniter.png";
import java from "../../assets/java.png";
import anugular from "../../assets/angular.png";
import vue from "../../assets/vue.png";
const Hybrid = () => {
return (
<Container>
<Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
Front-End
</Heading>
<Box display="flex" alignItems="center" flexDirection="column">
<Box
display={"flex"}
flexDirection="row"
alignItems="center"
justifyContent="space-between"
gap={4}
py="2rem"
>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={htmlpng} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
HTML
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={reactjs} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
React
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={codeIgniter} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
Code Igniter
</Text>
</Box>
</Box>
<Box
display={"flex"}
flexDirection="row"
alignItems="center"
justifyContent="space-between"
gap={4}
>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={java} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
Java
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={anugular} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
Anugular
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={vue} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
vue
</Text>
</Box>
</Box>
</Box>
<Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
Back-End
</Heading>
<Box display="flex" alignItems="center" flexDirection="column">
<Box
display={"flex"}
flexDirection="row"
alignItems="center"
justifyContent="space-between"
gap={4}
py="2rem"
>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={htmlpng} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
HTML
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={reactjs} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
React
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={codeIgniter} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
Code Igniter
</Text>
</Box>
</Box>
<Box
display={"flex"}
flexDirection="row"
alignItems="center"
justifyContent="space-between"
gap={4}
>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={java} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
Java
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={anugular} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
Anugular
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={vue} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
vue
</Text>
</Box>
</Box>
</Box>
</Container>
);
};
export default Hybrid;

234
src/components/WhatWeTeach.jsx
View File

@@ -1,12 +1,7 @@
import { Box, Container, Flex, Heading, Image, Text } from "@chakra-ui/react";
import React from "react";
import CompactTable from "../components/ui/compactTabs";
import htmlpng from "../assets/html.png";
import reactjs from "../assets/react.png";
import codeIgniter from "../assets/codeigniter.png";
import java from "../assets/java.png";
import anugular from "../assets/angular.png";
import vue from "../assets/vue.png";
const WhatWeTeach = () => {
return (
<Container
@@ -22,232 +17,7 @@ const WhatWeTeach = () => {
What tech we use
</Heading>
<CompactTable />
<Box borderBottom="1px solid #E0E0E0" w={"100%"} />
<Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
Front-End
</Heading>
<Box display="flex" alignItems="center" flexDirection="column">
<Box
display={"flex"}
flexDirection="row"
alignItems="center"
justifyContent="space-between"
gap={4}
py="2rem"
>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={htmlpng} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
HTML
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={reactjs} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
React
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={codeIgniter} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
Code Igniter
</Text>
</Box>
</Box>
<Box
display={"flex"}
flexDirection="row"
alignItems="center"
justifyContent="space-between"
gap={4}
>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={java} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
Java
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={anugular} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
Anugular
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={vue} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
vue
</Text>
</Box>
</Box>
</Box>
<Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
Back-End
</Heading>
<Box display="flex" alignItems="center" flexDirection="column">
<Box
display={"flex"}
flexDirection="row"
alignItems="center"
justifyContent="space-between"
gap={4}
py="2rem"
>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={htmlpng} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
HTML
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={reactjs} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
React
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={codeIgniter} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
Code Igniter
</Text>
</Box>
</Box>
<Box
display={"flex"}
flexDirection="row"
alignItems="center"
justifyContent="space-between"
gap={4}
>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={java} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
Java
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={anugular} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
Anugular
</Text>
</Box>
<Box
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<Image src={vue} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
vue
</Text>
</Box>
</Box>
</Box>
</Container>
);
};

62
src/components/ui/compactTabs.jsx
View File

@@ -1,59 +1,7 @@
// import React, { useState } from "react";
// import {
// Flex,
// Box,
// IconButton,
// Text,
// Image,
// Container,
// } from "@chakra-ui/react";
// import { FaHome, FaSyncAlt, FaBinoculars } from "react-icons/fa";
// import { SiGoogletagmanager } from "react-icons/si";
// const TabsComponent = () => {
// const [activeTab, setActiveTab] = useState("tab1");
// const tabs = [
// { id: "tab1", label: "Hybrid", icon: null },
// { id: "tab2", label: "IOS", icon: null },
// { id: "tab3", label: "Andriod", icon: null },
// { id: "tab4", label: "AI/ML", icon: null },
// ];
// return (
// <Container>
// <Flex p={1} justifyContent="center" w="442px">
// {tabs.map((tab) => (
// <Flex
// key={tab.id}
// alignItems="center"
// color={activeTab === tab.id ? "white" : "gray.400"}
// px={"4rem"}
// py={1}
// cursor="pointer"
// borderBottom={activeTab === tab.id ? "2px solid #E8155D" : "none"}
// onClick={() => setActiveTab(tab.id)}
// transition="color 0.3s, border-bottom 0.3s"
// w="100%"
// >
// {tab.label && (
// <Text color="#FFFFFF" fontWeight={400} fontSize="20px">
// {tab.label}
// </Text>
// )}
// </Flex>
// ))}
// </Flex>
// </Container>
// );
// };
// export default TabsComponent;
// import React, { useState } from "react";
import { Container, Flex, Image, Box, Text } from "@chakra-ui/react";
import { Container, Flex, Box, Text } from "@chakra-ui/react";
import { useState } from "react";
const HybridComponent = () => <div>Home Content</div>;
import Hybrid from "../OS/Hybrid";
const HybridComponent = () => <Hybrid/>;
const IOSComponent = () => <div>IOS Content</div>;
const AndriodComponent = () => <div>Sync Content</div>;
const AIMLComponent = () => <div>Prosperity Content</div>;
@@ -80,7 +28,7 @@ const TabsComponent = () => {
return (
<Container>
<Flex p={1} justifyContent="center" w="442px">
<Flex p={1} justifyContent="center" w="100%">
{tabs.map((tab) => (
<Flex
key={tab.id}
@@ -112,9 +60,11 @@ const TabsComponent = () => {
</Flex>
))}
</Flex>
<Box borderBottom="1px solid #E0E0E0" w={"100%"} />
<Box maxW="container.md" mt="2rem">
<ActiveTabComponent />
</Box>
</Container>
);
};