NAN
This commit is contained in:
npcdazai
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/anugular.png
Normal file
BIN
src/assets/anugular.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/image.png
Normal file
BIN
src/assets/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 803 B |
@@ -7,57 +7,119 @@ 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" >
|
||||
<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">
|
||||
{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 */}
|
||||
</AccordionButton>
|
||||
</h2>
|
||||
<AccordionPanel pb={4} color="#9F9F9F" fontSize="20px">
|
||||
{faq.answer}
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</Box>
|
||||
</Container>
|
||||
<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"
|
||||
>
|
||||
{FAQData.map((faq, index) => (
|
||||
<AccordionItem
|
||||
key={index}
|
||||
borderTop="0px solid #E8155D"
|
||||
borderBottom="1px solid #E8155D"
|
||||
>
|
||||
<AccordionButton>
|
||||
<Box as="span" flex="1" textAlign="left" fontSize="25px">
|
||||
{faq.question}
|
||||
</Box>
|
||||
{/* <AccordionIcon /> */}
|
||||
</AccordionButton>
|
||||
<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>
|
||||
))}
|
||||
</Accordion>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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,306 +82,317 @@ 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%">
|
||||
<Box
|
||||
px={"4rem"}
|
||||
display="grid"
|
||||
gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }}
|
||||
gap={4}
|
||||
justifyItems="center"
|
||||
w="100%"
|
||||
>
|
||||
{[
|
||||
{ label: "Enter your name", type: "text", name: "name" },
|
||||
{
|
||||
label: "Enter your email address",
|
||||
type: "email",
|
||||
name: "email",
|
||||
},
|
||||
{
|
||||
label: "Enter your contact number",
|
||||
type: "text",
|
||||
name: "contact",
|
||||
},
|
||||
].map((field, index) => (
|
||||
<Box w="100%" key={index}>
|
||||
<FormLabel color="#FFFFFF">{field.label}</FormLabel>
|
||||
<Input
|
||||
{...register(field.name, {
|
||||
required: `${field.label} is required`,
|
||||
pattern:
|
||||
field.type === "email"
|
||||
? /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/
|
||||
: undefined,
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
focusBorderColor="#E5195E"
|
||||
type={field.type}
|
||||
backgroundColor="#E5195E0A"
|
||||
color="white"
|
||||
/>
|
||||
{errors[field.name] && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors[field.name].message}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
{[
|
||||
{
|
||||
label: "Select your country",
|
||||
options: ["Country 1", "Country 2", "Country 3"],
|
||||
name: "country",
|
||||
},
|
||||
{
|
||||
label: "Select your services",
|
||||
options: ["Service 1", "Service 2", "Service 3"],
|
||||
name: "services",
|
||||
},
|
||||
{
|
||||
label: "Where did you hear about us? *",
|
||||
options: ["Source 1", "Source 2", "Source 3"],
|
||||
name: "source",
|
||||
},
|
||||
].map((selectField, index) => (
|
||||
<Box w="100%" key={index + 3}>
|
||||
<FormLabel color="#FFFFFF">{selectField.label}</FormLabel>
|
||||
<Select
|
||||
{...register(selectField.name, {
|
||||
required: `${selectField.label} is required`,
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
color="white"
|
||||
placeholder="Select an option"
|
||||
>
|
||||
{selectField.options.map((option, idx) => (
|
||||
<option
|
||||
key={idx}
|
||||
value={option.toLowerCase().replace(/\s/g, "")}
|
||||
>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
{errors[selectField.name] && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors[selectField.name].message}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box w="100%" px={"4rem"}>
|
||||
<FormLabel color="#FFFFFF">
|
||||
Tell us about your project and business challenge.
|
||||
</FormLabel>
|
||||
<Textarea
|
||||
{...register("projectDetails", {
|
||||
required: "Project details are required",
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
focusBorderColor="#E5195E"
|
||||
backgroundColor="#E5195E0A"
|
||||
color="white"
|
||||
minH="65px"
|
||||
/>
|
||||
{errors.projectDetails && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.projectDetails.message}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
display="grid"
|
||||
gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }}
|
||||
gap={5}
|
||||
justifyItems="center"
|
||||
w="100%"
|
||||
px={"4rem"}
|
||||
>
|
||||
<Box w="100%">
|
||||
<FormLabel color="#FFFFFF">
|
||||
When would you like to start
|
||||
</FormLabel>
|
||||
<FormControl
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
gap={4}
|
||||
w="100%"
|
||||
>
|
||||
<Box
|
||||
px={"4rem"}
|
||||
display="grid"
|
||||
gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }}
|
||||
gap={4}
|
||||
justifyItems="center"
|
||||
w="100%"
|
||||
>
|
||||
{[
|
||||
{ label: "Enter your name", type: "text", name: "name" },
|
||||
{
|
||||
label: "Enter your email address",
|
||||
type: "email",
|
||||
name: "email",
|
||||
},
|
||||
{
|
||||
label: "Enter your contact number",
|
||||
type: "text",
|
||||
name: "contact",
|
||||
},
|
||||
].map((field, index) => (
|
||||
<Box w="100%" key={index}>
|
||||
<FormLabel color="#FFFFFF">{field.label}</FormLabel>
|
||||
<Input
|
||||
{...register(field.name, {
|
||||
required: `${field.label} is required`,
|
||||
pattern:
|
||||
field.type === "email"
|
||||
? /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/
|
||||
: undefined,
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
focusBorderColor="#E5195E"
|
||||
type={field.type}
|
||||
backgroundColor="#E5195E0A"
|
||||
color="white"
|
||||
/>
|
||||
{errors[field.name] && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors[field.name].message}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
{[
|
||||
{
|
||||
label: "Select your country",
|
||||
options: ["Country 1", "Country 2", "Country 3"],
|
||||
name: "country",
|
||||
},
|
||||
{
|
||||
label: "Select your services",
|
||||
options: ["Service 1", "Service 2", "Service 3"],
|
||||
name: "services",
|
||||
},
|
||||
{
|
||||
label: "Where did you hear about us? *",
|
||||
options: ["Source 1", "Source 2", "Source 3"],
|
||||
name: "source",
|
||||
},
|
||||
].map((selectField, index) => (
|
||||
<Box w="100%" key={index + 3}>
|
||||
<FormLabel color="#FFFFFF">{selectField.label}</FormLabel>
|
||||
<Select
|
||||
{...register("startDate", {
|
||||
required: "Start date is required",
|
||||
{...register(selectField.name, {
|
||||
required: `${selectField.label} is required`,
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
color="white"
|
||||
placeholder="Select an option"
|
||||
>
|
||||
<option value="option1">Option 1</option>
|
||||
<option value="option2">Option 2</option>
|
||||
<option value="option3">Option 3</option>
|
||||
</Select>
|
||||
{errors.startDate && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.startDate.message}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box w="100%">
|
||||
<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={(e) => {
|
||||
handleChange(e);
|
||||
setFileAdded(true);
|
||||
}}
|
||||
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>
|
||||
)}
|
||||
{fileAdded && !errors.fileInput && (
|
||||
<Text color="green.400" mt={2}>
|
||||
File added successfully!
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box w="100%" px={"4rem"} color="white" borderRadius="md">
|
||||
<Text mb={4} fontWeight="400" fontSize="18px">
|
||||
What is the budget of your project?
|
||||
</Text>
|
||||
<Slider
|
||||
aria-label="budget-slider"
|
||||
min={0}
|
||||
max={500000}
|
||||
step={100000}
|
||||
value={sliderValue}
|
||||
onChange={(value) => {
|
||||
setSliderValue(value);
|
||||
setValue("budget", value);
|
||||
}}
|
||||
colorScheme="pink"
|
||||
>
|
||||
<SliderTrack bg="#999999" height="2px">
|
||||
<SliderFilledTrack bg="#E5195E" />
|
||||
</SliderTrack>
|
||||
<SliderThumb boxSize={4} bg="#E5195E"></SliderThumb>
|
||||
</Slider>
|
||||
{errors.budget && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.budget.message}
|
||||
</Text>
|
||||
)}
|
||||
<Flex justify="space-between" mt={4}>
|
||||
{[0, 100000, 200000, 300000, 400000, 500000].map(
|
||||
(val, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
{selectField.options.map((option, idx) => (
|
||||
<option
|
||||
key={idx}
|
||||
value={option.toLowerCase().replace(/\s/g, "")}
|
||||
>
|
||||
<Box
|
||||
top="11px"
|
||||
as="button"
|
||||
borderRadius="50%"
|
||||
w="8.34px"
|
||||
h="8.34px"
|
||||
px="0"
|
||||
marginTop="-2.8rem"
|
||||
position="relative"
|
||||
mb={"3rem"}
|
||||
bg={sliderValue >= val ? "#E5195E" : "gray.600"}
|
||||
></Box>
|
||||
<Text color="gray.400" fontSize="sm" mt={"-1.7rem"}>
|
||||
{val / 1000}k
|
||||
</Text>
|
||||
</Box>
|
||||
)
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
{errors[selectField.name] && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors[selectField.name].message}
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box w="100%" px={"4rem"}>
|
||||
<FormLabel color="#FFFFFF">
|
||||
Tell us about your project and business challenge.
|
||||
</FormLabel>
|
||||
<Textarea
|
||||
{...register("projectDetails", {
|
||||
required: "Project details are required",
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
maxW="1186px"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
gap={4}
|
||||
>
|
||||
focusBorderColor="#E5195E"
|
||||
backgroundColor="#E5195E0A"
|
||||
color="white"
|
||||
minH="65px"
|
||||
/>
|
||||
{errors.projectDetails && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.projectDetails.message}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
display="grid"
|
||||
gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }}
|
||||
gap={5}
|
||||
justifyItems="center"
|
||||
w="100%"
|
||||
px={"4rem"}
|
||||
>
|
||||
<Box w="100%">
|
||||
<FormLabel color="#FFFFFF">
|
||||
Please type the letters below
|
||||
When would you like to start
|
||||
</FormLabel>
|
||||
<Textarea
|
||||
{...register("captcha", {
|
||||
required: "Captcha input is required",
|
||||
<Select
|
||||
{...register("startDate", {
|
||||
required: "Start date is required",
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
focusBorderColor="#E5195E"
|
||||
backgroundColor="#E5195E0A"
|
||||
color="white"
|
||||
minH="65px"
|
||||
/>
|
||||
{errors.captcha && (
|
||||
placeholder="Select an option"
|
||||
>
|
||||
<option value="option1">Option 1</option>
|
||||
<option value="option2">Option 2</option>
|
||||
<option value="option3">Option 3</option>
|
||||
</Select>
|
||||
{errors.startDate && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.captcha.message}
|
||||
{errors.startDate.message}
|
||||
</Text>
|
||||
)}
|
||||
<Box>
|
||||
<Image src={captcha} w="147px" h="55px" borderRadius="1px" />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box w="100%" display="flex" justifyContent="center">
|
||||
<Box w="100%">
|
||||
<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={(e) => {
|
||||
handleChange(e);
|
||||
setFileAdded(true);
|
||||
}}
|
||||
display="none"
|
||||
/>
|
||||
<Button
|
||||
bg="#E5195E"
|
||||
onClick={handleClick}
|
||||
leftIcon={<Icon as={FiPaperclip} />}
|
||||
variant="outline"
|
||||
bg="#E5195E12"
|
||||
border="1px solid #E5195E"
|
||||
borderRadius="10px"
|
||||
size="md"
|
||||
_hover={{ bg: "#E5195E12" }}
|
||||
w="100%"
|
||||
maxW="912px"
|
||||
h="55px"
|
||||
borderRadius="0px"
|
||||
type="submit"
|
||||
onClick={handleSubmit(onSubmit)}
|
||||
color="#fff"
|
||||
>
|
||||
Submit
|
||||
Attach file
|
||||
</Button>
|
||||
{errors.fileInput && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.fileInput.message}
|
||||
</Text>
|
||||
)}
|
||||
{fileAdded && !errors.fileInput && (
|
||||
<Text color="green.400" mt={2}>
|
||||
File added successfully!
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</FormControl>
|
||||
</Box>
|
||||
|
||||
<Box w="100%" px={"4rem"} color="white" borderRadius="md">
|
||||
<Text mb={4} fontWeight="400" fontSize="18px">
|
||||
What is the budget of your project?
|
||||
</Text>
|
||||
<Slider
|
||||
aria-label="budget-slider"
|
||||
min={0}
|
||||
max={500000}
|
||||
step={100000}
|
||||
value={sliderValue}
|
||||
onChange={(value) => {
|
||||
setSliderValue(value);
|
||||
setValue("budget", value);
|
||||
}}
|
||||
colorScheme="pink"
|
||||
>
|
||||
<SliderTrack bg="#999999" height="2px">
|
||||
<SliderFilledTrack bg="#E5195E" />
|
||||
</SliderTrack>
|
||||
<SliderThumb boxSize={4} bg="#E5195E"></SliderThumb>
|
||||
</Slider>
|
||||
{errors.budget && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.budget.message}
|
||||
</Text>
|
||||
)}
|
||||
<Flex justify="space-between" mt={4}>
|
||||
{[0, 100000, 200000, 300000, 400000, 500000].map(
|
||||
(val, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
>
|
||||
<Box
|
||||
top="11px"
|
||||
as="button"
|
||||
borderRadius="50%"
|
||||
w="8.34px"
|
||||
h="8.34px"
|
||||
px="0"
|
||||
marginTop="-2.8rem"
|
||||
position="relative"
|
||||
mb={"3rem"}
|
||||
bg={sliderValue >= val ? "#E5195E" : "gray.600"}
|
||||
></Box>
|
||||
<Text color="gray.400" fontSize="sm" mt={"-1.7rem"}>
|
||||
{val / 1000}k
|
||||
</Text>
|
||||
</Box>
|
||||
)
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box
|
||||
w="100%"
|
||||
maxW="1186px"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
gap={4}
|
||||
>
|
||||
<FormLabel color="#FFFFFF">
|
||||
Please type the letters below
|
||||
</FormLabel>
|
||||
<Textarea
|
||||
{...register("captcha", {
|
||||
required: "Captcha input is required",
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
focusBorderColor="#E5195E"
|
||||
backgroundColor="#E5195E0A"
|
||||
color="white"
|
||||
minH="65px"
|
||||
/>
|
||||
{errors.captcha && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.captcha.message}
|
||||
</Text>
|
||||
)}
|
||||
<Box>
|
||||
<Image src={captcha} w="147px" h="55px" borderRadius="1px" />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box w="100%" display="flex" justifyContent="center">
|
||||
<Button
|
||||
bg="#E5195E"
|
||||
w="100%"
|
||||
maxW="912px"
|
||||
h="55px"
|
||||
borderRadius="0px"
|
||||
type="submit"
|
||||
onClick={handleSubmit(onSubmit)}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Box>
|
||||
</FormControl>
|
||||
{/* </form> */}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -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"}>
|
||||
|
||||
@@ -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,51 +38,26 @@ const Hybrid = () => {
|
||||
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>
|
||||
{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"}
|
||||
@@ -74,51 +66,26 @@ const Hybrid = () => {
|
||||
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>
|
||||
{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>
|
||||
|
||||
@@ -134,51 +101,26 @@ const Hybrid = () => {
|
||||
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>
|
||||
{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"}
|
||||
@@ -187,54 +129,29 @@ const Hybrid = () => {
|
||||
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>
|
||||
{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>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
158
src/components/OS/IOS.jsx
Normal file
158
src/components/OS/IOS.jsx
Normal 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;
|
||||
@@ -17,7 +17,6 @@ const WhatWeTeach = () => {
|
||||
What tech we use
|
||||
</Heading>
|
||||
<CompactTable />
|
||||
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Container, Flex, Box, Text } from "@chakra-ui/react";
|
||||
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 borderBottom="1px solid #E0E0E0" w={"100%"} />
|
||||
<Box maxW="container.2xl">
|
||||
<ActiveTabComponent />
|
||||
</Box>
|
||||
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user