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

NAN

Browse Source
This commit is contained in:
npcdazai
2024-09-04 19:03:59 +05:30
parent 75c2f39c7a
commit 2568410e47
15 changed files with 647 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/angular.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/anugular.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/codeigniter.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/html.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/assets/java.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/react.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/vue.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 803 B

84
src/components/FAQs.jsx
View File

@@ -7,51 +7,113 @@ import {
Box,
Container,
Heading,
ListItem,
UnorderedList,
} from "@chakra-ui/react";
import React from "react";
const FAQData = [
{
question: "I Have An App Idea, What Do I Do Next?",
question:
"What is your Agile development process for building native apps (iOS & Android) or cross-platform solutions?",
answer:
"You should start the App Ideation process with the most accurate preparation of your concept. Because you just think you have a wonderful idea of the app for iPhone or Android. In fact, all you have right now is just a dream and not a concrete one.",
points: [
"Consultation & Requirement Gathering",
"Sprint Planning",
"Design & Prototyping",
"Development",
"Testing",
"Review & Feedback",
"Launch & Deployment",
"Post-Launch Support",
],
},
{
question: "Can I Hire WDI To Just Do The Prototype For My Project?",
answer:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
question:
"Do you include UI/UX design in your mobile app development services?",
answer: "Yes, UI/UX design is integral to our services. We provide:",
points: [
"User Research",
"Wireframing",
"Visual Design",
"Prototyping",
"Usability Testing",
],
},
{
question: "I Have An App Idea, What Do I Do Next?",
question:
"Can you provide an estimated timeline for developing a minimum viable product (MVP) or a fully-featured mobile app?",
answer:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"The timeline for developing a mobile app can vary based on the complexity and scope of the project. Here’s a general estimate:",
points: [
"MVP It typically takes 3-4 months. This includes core features essential for the initial launch and user feedback.",
"Fully-Featured Mobile App It usually takes 6-12 months. This covers all planned features, integrations, and extensive testing for a comprehensive user experience.",
],
},
{
question:
"How do you integrate back-end development and APIs for a seamless mobile experience?",
answer: "Our approach includes:",
points: [
"Requirement Analysis",
"API Development",
"Data Security",
"Performance Optimization",
"Testing & Validation",
"Continuous Integration",
],
},
{
question:
"Do you offer transparent cost structures for mobile app development projects?",
answer: "Yes, we provide clear pricing models that include:",
points: [
"Initial Consultation & Planning",
"Design & Prototyping",
"Development",
"Testing & QA",
"Maintenance & Support",
],
},
];
const FAQs = () => {
return (
<Container maxW="container.2xl" bgColor="black" p="2.8rem" >
<Container maxW="container.2xl" bgColor="black" p="2.8rem">
<Heading color="#FBFBFB" fontWeight={600} textAlign="center">
FAQ’s
</Heading>
<Box bgColor="black" py={8}>
<Accordion display="flex" flexDirection="column" gap={3} defaultIndex={[0]} allowMultiple color="#ffff">
<Accordion
display="flex"
flexDirection="column"
gap={3}
defaultIndex={[0]}
allowMultiple
color="#ffff"
>
{FAQData.map((faq, index) => (
<AccordionItem
key={index}
borderTop="0px solid #E8155D"
borderBottom="1px solid #E8155D"
>
<h2>
<AccordionButton>
<Box as="span" flex="1" textAlign="left" fontSize="25px">
{faq.question}
</Box>
{/* <AccordionIcon /> */} {/* Accordion Icon */}
{/* <AccordionIcon /> */}
</AccordionButton>
</h2>
<AccordionPanel pb={4} color="#9F9F9F" fontSize="20px">
{faq.answer}
<Box display="flex" p={4} flexDirection="column">
<UnorderedList>
{faq.points.map((point, idx) => (
<ListItem key={idx}>{point}</ListItem>
))}
</UnorderedList>
</Box>
</AccordionPanel>
</AccordionItem>
))}

19
src/components/Form.jsx
View File

@@ -66,7 +66,7 @@ const Form = () => {
};
return (
<Container maxW='container.2xl' p={{ base: "1rem", lg: "3rem" }} bg="black">
<Container maxW="container.2xl" p={{ base: "1rem", lg: "3rem" }} bg="black">
<Box
bg="#0F0F0F"
display="flex"
@@ -82,13 +82,24 @@ const Form = () => {
color="#FBFBFB"
w={{ base: "100%", md: "75%", lg: "50%" }}
py={"1rem"}
>
Let’s Collaborate to Shape Your Vision into Reality
</Heading>
<Box display="flex" flexDirection="column" alignItems="center" w={'100%'}>
<Box
display="flex"
flexDirection="column"
alignItems="center"
p={"2rem"}
w={"100%"}
>
{/* <form> */}
<FormControl display="flex" flexDirection="column" alignItems="center" gap={4} w="100%">
<FormControl
display="flex"
flexDirection="column"
alignItems="center"
gap={4}
w="100%"
>
<Box
px={"4rem"}
display="grid"

2
src/components/Hero.jsx
View File

@@ -17,7 +17,7 @@ const Hero = () => {
justifyContent="space-between"
spacing={4}
alignItems="center"
px={"4.4rem"}
px={"3rem"}
py={"5rem"}
>
<HStack wrap="wrap" w={"60%"} gap={"2rem"}>

179
src/components/OS/Hybrid.jsx
View File

@@ -1,14 +1,31 @@
import { Box, Container, Heading, Image, Text } from "@chakra-ui/react";
import { Box, 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 angular from "../../assets/anugular.png";
import vue from "../../assets/vue.png";
const techStack = [
{ name: "HTML", image: htmlpng },
{ name: "React", image: reactjs },
{ name: "Code Igniter", image: codeIgniter },
{ name: "Java", image: java },
{ name: "Angular", image: angular },
{ name: "Vue", image: vue },
];
const Hybrid = () => {
return (
<Container>
<Box
display="flex"
alignItems="center"
w="100%"
flexDirection="column"
bgColor="black"
gap={3}
>
<Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
Front-End
</Heading>
@@ -21,7 +38,9 @@ const Hybrid = () => {
gap={4}
py="2rem"
>
{techStack.slice(0, 3).map((tech) => (
<Box
key={tech.name}
w="288px"
h={"99px"}
p={"1.4rem"}
@@ -30,42 +49,15 @@ const Hybrid = () => {
flexDirection="row"
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
>
<Image src={htmlpng} w="45.31px" h="50px" />
<Image src={tech.image} 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
{tech.name}
</Text>
</Box>
))}
</Box>
<Box
display={"flex"}
@@ -74,7 +66,9 @@ const Hybrid = () => {
justifyContent="space-between"
gap={4}
>
{techStack.slice(3).map((tech) => (
<Box
key={tech.name}
w="288px"
h={"99px"}
p={"1.4rem"}
@@ -83,42 +77,15 @@ const Hybrid = () => {
flexDirection="row"
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
>
<Image src={java} w="45.31px" h="50px" />
<Image src={tech.image} 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
{tech.name}
</Text>
</Box>
))}
</Box>
</Box>
@@ -134,7 +101,9 @@ const Hybrid = () => {
gap={4}
py="2rem"
>
{techStack.slice(0, 3).map((tech) => (
<Box
key={tech.name}
w="288px"
h={"99px"}
p={"1.4rem"}
@@ -143,42 +112,15 @@ const Hybrid = () => {
flexDirection="row"
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
>
<Image src={htmlpng} w="45.31px" h="50px" />
<Image src={tech.image} 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
{tech.name}
</Text>
</Box>
))}
</Box>
<Box
display={"flex"}
@@ -187,7 +129,9 @@ const Hybrid = () => {
justifyContent="space-between"
gap={4}
>
{techStack.slice(3).map((tech) => (
<Box
key={tech.name}
w="288px"
h={"99px"}
p={"1.4rem"}
@@ -196,45 +140,18 @@ const Hybrid = () => {
flexDirection="row"
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
>
<Image src={java} w="45.31px" h="50px" />
<Image src={tech.image} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
Java
{tech.name}
</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>
);
};

158
src/components/OS/IOS.jsx Normal file
View File

@@ -0,0 +1,158 @@
import { Box, 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 angular from "../../assets/anugular.png";
import vue from "../../assets/vue.png";
const techStack = [
{ name: "HTML", image: htmlpng },
{ name: "React", image: reactjs },
{ name: "Code Igniter", image: codeIgniter },
{ name: "Java", image: java },
{ name: "Angular", image: angular },
{ name: "Vue", image: vue },
];
const Hybrid = () => {
return (
<Box
display="flex"
alignItems="center"
w="100%"
flexDirection="column"
bgColor="black"
gap={3}
>
<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"
>
{techStack.slice(0, 3).map((tech) => (
<Box
key={tech.name}
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
>
<Image src={tech.image} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
{tech.name}
</Text>
</Box>
))}
</Box>
<Box
display={"flex"}
flexDirection="row"
alignItems="center"
justifyContent="space-between"
gap={4}
>
{techStack.slice(3).map((tech) => (
<Box
key={tech.name}
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
>
<Image src={tech.image} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
{tech.name}
</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"
>
{techStack.slice(0, 3).map((tech) => (
<Box
key={tech.name}
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
>
<Image src={tech.image} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
{tech.name}
</Text>
</Box>
))}
</Box>
<Box
display={"flex"}
flexDirection="row"
alignItems="center"
justifyContent="space-between"
gap={4}
>
{techStack.slice(3).map((tech) => (
<Box
key={tech.name}
w="288px"
h={"99px"}
p={"1.4rem"}
display={"flex"}
bgColor="#0F0F0F"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
>
<Image src={tech.image} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
{tech.name}
</Text>
</Box>
))}
</Box>
</Box>
</Box>
);
};
export default Hybrid;

1
src/components/WhatWeTeach.jsx
View File

@@ -17,7 +17,6 @@ const WhatWeTeach = () => {
What tech we use
</Heading>
<CompactTable />
</Container>
);
};

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

@@ -1,7 +1,7 @@
import { Container, Flex, Box, Text } from "@chakra-ui/react";
import { useState } from "react";
import Hybrid from "../OS/Hybrid";
const HybridComponent = () => <Hybrid/>;
const HybridComponent = () => <Hybrid />;
const IOSComponent = () => <div>IOS Content</div>;
const AndriodComponent = () => <div>Sync Content</div>;
const AIMLComponent = () => <div>Prosperity Content</div>;
@@ -27,8 +27,8 @@ const TabsComponent = () => {
const ActiveTabComponent = activeTab.component;
return (
<Container>
<Flex p={1} justifyContent="center" w="100%">
<Box display="flex" alignItems="center" flexDirection="column" w="100%">
<Flex w="50%" px={"6rem"} py={"3px"} alignItems="center">
{tabs.map((tab) => (
<Flex
key={tab.id}
@@ -36,7 +36,6 @@ const TabsComponent = () => {
alignItems="center"
justifyContent="center"
color={activeTab.id === tab.id ? "white" : "gray.400"}
px={{ base: "2rem", md: "4rem" }}
py={2}
cursor="pointer"
borderBottom={
@@ -45,7 +44,7 @@ const TabsComponent = () => {
onClick={() => handleTabClick(tab)}
transition="color 0.3s, border-bottom 0.3s"
_hover={{ color: "white" }}
w="20%"
w="50%"
>
{/* <Image
h="24px"
@@ -54,18 +53,17 @@ const TabsComponent = () => {
filter={activeTab.id === tab.id ? "none" : "grayscale(100%)"}
transition="filter 0.3s"
/> */}
<Text mt={2} fontSize="sm" fontWeight="bold">
<Text mt={2} fontSize="20px" fontWeight="bold">
{tab.label}
</Text>
</Flex>
))}
</Flex>
<Box borderBottom="1px solid #E0E0E0" w={"100%"} />
<Box maxW="container.md" mt="2rem">
<Box maxW="container.2xl">
<ActiveTabComponent />
</Box>
</Container>
</Box>
);
};