Siddhesh.More/rubix
1
0
Fork 0
mirror of https://github.com/WDI-Ideas/rubix.git synced 2026-04-27 21:45:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Form page development done

Browse Source
This commit is contained in:
rockyeverlast
2024-04-04 16:45:56 +05:30
parent 7ffad4d638
commit e5c2ff574c
15 changed files with 240 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/BuildPage/LearnMore.jsx
View File

@@ -10,7 +10,7 @@ const SectionContent = {
const LearnMore = () => {
return (
<Box
height={"50vh"}
height={"auto"}
backgroundImage={`url(${banner})`}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
@@ -47,7 +47,7 @@ const LearnMore = () => {
textAlign={"center"}
display={"grid"}
placeContent={"center"}
height={"30vh"}
// height={"30vh"}
paddingBottom={"3rem"}
>
<Text

340
src/components/Contact/Form.jsx
View File

@@ -7,17 +7,10 @@ import {
useDisclosure,
Image,
Badge,
} from "@chakra-ui/react";
// import { Link } from "react-router-dom";
import {
// FormControl,
// FormLabel,
// FormErrorMessage,
// FormHelperText,
// Input,
Textarea,
} from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import { Controller, useForm } from "react-hook-form";
import { useEffect, useState } from "react";
import {
Modal,
@@ -29,22 +22,25 @@ import {
Button,
} from "@chakra-ui/react";
import BGimage from "../../assets/images/form.png";
// import { contactUs } from "../service/api";
import formx from "../../assets/images/formx.png";
// import location from "../../src/assets/contactLocation.svg";
// import mail from "../../src/assets/contactMail.svg";
// import mobile from "../../src/assets/mobile.svg";
import formfb from "../../assets/images/formfb.png";
import forml from "../../assets/images/forml.png";
import { Link } from "react-router-dom";
import { ChevronDownIcon } from "@chakra-ui/icons";
const Contact = () => {
const {
register,
handleSubmit,
reset,
control,
formState: { errors },
} = useForm();
const { isOpen, onOpen, onClose } = useDisclosure();
const [isLoading, setIsLoading] = useState(false);
const email = "rubix@gmail.com";
const onSubmit = async (data) => {
// console.log(data);
setIsLoading(true);
@@ -78,13 +74,14 @@ const Contact = () => {
paddingTop={"4rem"}
backgroundRepeat={"no-repeat"}
backgroundSize={"cover"}
backgroundPosition={"0 25%"}
>
<Container
maxW="container.xl"
backgroundColor={"transparent"}
display={"flex"}
justifyContent={"start"}
alignItems={"start"}
alignItems={"baseline"}
gap={"2rem"}
padding={"3rem 0rem"}
sx={{
@@ -110,7 +107,7 @@ const Contact = () => {
zIndex={"99"}
backgroundColor={"#transparent"}
// width={"30%"}
padding={"2rem"}
padding={"4rem"}
minH={"583px"}
// flex={"1"}
sx={{
@@ -126,7 +123,7 @@ const Contact = () => {
minH: "490px",
},
"@media (max-width: 820px)": { width: "55%" },
"@media (max-width: 535px)": { width: "95%" },
"@media (max-width: 535px)": { width: "95%", padding: "10px" },
"@media (max-width: 375px)": {},
}}
>
@@ -151,15 +148,13 @@ const Contact = () => {
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 768px)": {},
"@media (max-width: 535px)": {
padding: "1rem",
},
"@media (max-width: 535px)": {},
}}
>
Start reaching <br /> your digital goals
</Text>
</Box>
<Box>
<Box marginBottom={"2rem"}>
<Badge
textAlign={"left"}
background={"transparent"}
@@ -171,17 +166,79 @@ const Contact = () => {
>
Social Media
</Badge>
<Box
display={"flex"}
alignItems={"center"}
marginTop={"20px"}
gap={"2rem"}
>
<Image src={formx} />
<Image src={formfb} />
<Image src={forml} />
</Box>
</Box>
<Box marginBottom={"2rem"}>
<Badge
textAlign={"left"}
background={"transparent"}
color={"#fff"}
textTransform={"capitalize"}
fontWeight={"500"}
fontFamily={"Poppins"}
fontSize={"18px"}
>
Chat to us
</Badge>
<Box marginTop={"10px"}>
<Link
to={`mailto:${email}`}
style={{
fontSize: "18px",
color: "#969696",
fontWeight: "400",
fontFamily: "Poppins",
}}
>
rubix@gmail.com
</Link>
</Box>
</Box>
<Box>
<Badge
textAlign={"left"}
background={"transparent"}
color={"#fff"}
textTransform={"capitalize"}
fontWeight={"500"}
fontFamily={"Poppins"}
fontSize={"18px"}
>
Call us
</Badge>
<Box marginTop={"10px"}>
<Link
to={`mailto:${email}`}
style={{
fontSize: "18px",
color: "#969696",
fontWeight: "400",
fontFamily: "Poppins",
}}
>
914 578 1245
</Link>
</Box>
</Box>
</Box>
{/* Form */}
<Container
maxW="container.xl"
// boxShadow={"0px 4px 18px 0px rgba(65, 65, 65, 0.25)"}
textAlign={"center"}
textAlign={"left"}
marginLeft={"auto"}
marginRight={"auto"}
// marginTop={"15rem"}
backgroundColor={"transparent"}
sx={{
"@media (max-width: 1080px)": {
@@ -193,34 +250,8 @@ const Contact = () => {
// flex={"1"}
>
<form onSubmit={handleSubmit(onSubmit)}>
<Box textAlign={"center"}>
<Heading
as="h2"
color={"#404040"}
fontFamily={"Asap"}
fontSize={"35px"}
fontWeight={"600"}
lineHeight={"135%"}
marginBottom={"1rem"}
padding={"20px"}
marginTop={"1.5rem"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 768px)": {},
"@media (max-width: 535px)": {
padding: "1rem",
},
}}
>
Send us a Message
</Heading>
</Box>
<Box
// display={"flex"}
// justifyContent={"space-between"}
// alignItems={"start"}
padding={"0rem 2rem 0rem 2rem"}
// flexDirection={"column"}
gap={"20px"}
sx={{
"@media (max-width: 1024px)": {},
@@ -253,19 +284,24 @@ const Contact = () => {
}}
>
<Box width={"100%"} minH={"120px"}>
<label style={{ color: "#404040", fontFamily: "Asap" }}>
<label
style={{
fontSize: "22px",
color: "#fff",
fontFamily: "Poppins",
}}
>
First Name*
</label>
<input
style={{
width: "100%",
marginBottom: "5px",
background: "transparent",
color: "#404040",
border: "1px solid #C8C8C8",
background: "#1E1E23",
color: "#fff",
padding: "10px",
marginTop: "10px",
borderRadius: "2px",
borderRadius: "5px",
}}
// placeholder="First Name"
{...register("firstName", {
@@ -285,19 +321,24 @@ const Contact = () => {
)}
</Box>
<Box width={"100%"} minH={"120px"}>
<label style={{ color: "#404040", fontFamily: "Asap" }}>
<label
style={{
fontSize: "22px",
color: "#fff",
fontFamily: "Poppins",
}}
>
Last Name*
</label>
<input
style={{
width: "100%",
marginBottom: "5px",
background: "transparent",
color: "#404040",
border: "1px solid #C8C8C8",
background: "#1E1E23",
color: "#fff",
padding: "10px",
marginTop: "10px",
borderRadius: "2px",
borderRadius: "5px",
}}
// placeholder="Last Name"
{...register("lastName", {
@@ -338,19 +379,24 @@ const Contact = () => {
}}
>
<Box width={"100%"} minH={"120px"}>
<label style={{ color: "#404040", fontFamily: "Asap" }}>
E-mail Address*
<label
style={{
fontSize: "22px",
color: "#fff",
fontFamily: "Poppins",
}}
>
Email*
</label>
<input
style={{
width: "100%",
marginBottom: "5px",
background: "transparent",
color: "#404040",
border: "1px solid #C8C8C8",
background: "#1E1E23",
color: "#fff",
padding: "10px",
marginTop: "10px",
borderRadius: "2px",
borderRadius: "5px",
}}
// placeholder="Email"
type="email"
@@ -370,19 +416,24 @@ const Contact = () => {
</Box>
<Box width={"100%"} minH={"120px"}>
<label style={{ color: "#404040", fontFamily: "Asap" }}>
Phone Number*
<label
style={{
fontSize: "22px",
color: "#fff",
fontFamily: "Poppins",
}}
>
Phone*
</label>
<input
style={{
width: "100%",
marginBottom: "5px",
background: "transparent",
color: "#404040",
border: "1px solid #C8C8C8",
background: "#1E1E23",
color: "#fff",
padding: "10px",
marginTop: "10px",
borderRadius: "2px",
borderRadius: "5px",
}}
// placeholder="Phone"
type="tel"
@@ -409,6 +460,52 @@ const Contact = () => {
)}
</Box>
</Box>
<Box width={"100%"} minH={"120px"}>
<label
style={{
fontSize: "22px",
color: "#fff",
fontFamily: "Poppins",
}}
>
Choose type of inquiry
</label>
<Controller
name="selectOption"
control={control}
defaultValue=""
rules={{ required: "Please select an option" }}
render={({ field }) => (
<select
{...field}
placeholder="Select option"
style={{
width: "100%",
marginBottom: "5px",
background: "#1E1E23",
color: "#fff",
padding: "15px",
marginTop: "10px",
borderRadius: "5px",
textAlign: "left",
}}
>
<option value="" disabled>
Select Options
</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
)}
/>
{errors.selectOption && (
<p style={{ fontSize: "13px", color: "red" }}>
{errors.selectOption.message}
</p>
)}
</Box>
</Box>
<Container
maxW="container.lg"
@@ -422,86 +519,71 @@ const Contact = () => {
},
}}
>
<label style={{ color: "#404040", fontFamily: "Asap" }}>
<label
style={{
fontSize: "22px",
color: "#fff",
fontFamily: "Poppins",
}}
>
Message*
</label>
<Textarea
placeholder="Type your message here..."
size="xl"
resize="vertical"
minH={"100px"}
minH={"200px"}
padding={"1rem"}
color={"#404040"}
color={"#fff"}
backgroundColor={"#1E1E23"}
border={"none"}
marginTop={"10px"}
border={"1px solid #C8C8C8"}
borderRadius="2px"
borderRadius="5px"
type="text"
required
{...register("Text", { required: true })}
/>
<Button
type="submit"
isLoading={isLoading}
loadingText="Submitting"
fontFamily={"poppins"}
fontSize={"22px"}
variant="outline"
margin={"4rem 0"}
background={"#DE858E"}
minWidth={"210px"}
color={"#fff"}
fontWeight={"400"}
minHeight={"55px"}
padding={"0rem 2rem 0rem 2rem"}
_hover={{
background: "#ef843c",
color: "#fff",
}}
>
Submit
</Button>
</Container>
{/* <textarea
style={{
resize: "none",
minHeight: "130px",
padding: "1rem",
color: '"#404040"',
marginTop: "20px",
border: "1px solid #C8C8C8",
borderRadius: "2px",
type: "text",
width: "87%",
display: "block",
margin: "0rem 4rem 0rem 4rem",
}}
{...register("textarea", {
required: "This field is required",
})}
/> */}
{/* <input
type="submit"
style={{
padding: "10px 20px",
color: "#fff",
background: "#F46E15",
minWidth: "255px",
cursor: "pointer",
margin: "3rem 0",
borderRadius: "2px",
}}
/> */}
<Button
type="submit"
isLoading={isLoading}
loadingText="Submitting"
// colorScheme="teal"
variant="outline"
margin={"2rem 0"}
background={"#F46E15"}
minWidth={"255px"}
color={"#fff"}
fontWeight={"500"}
minHeight={"55px"}
_hover={{
background: "#ef843c",
color: "#fff",
}}
>
Submit
</Button>
</form>
</Container>
</Container>
<Modal isOpen={isOpen}>
<ModalOverlay />
<ModalContent>
<ModalContent backgroundColor="#1E1E23" color="#fff">
<ModalHeader>Success!</ModalHeader>
<ModalBody>Your form has been submitted successfully.</ModalBody>
<ModalFooter>
<Button colorScheme="blue" onClick={onClose}>
<Button
backgroundColor={"#DE858E"}
color="#fff"
onClick={onClose}
_hover={{
backgroundColor: "#DE858E",
color: "#fff",
}}
>
Close
</Button>
</ModalFooter>

6
src/components/Footer/Footer.jsx
View File

@@ -38,8 +38,8 @@ const Footer = () => {
padding={"4rem"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 412px)": {
padding: "2rem",
"@media (max-width: 535px)": {
padding: "1rem",
},
}}
>
@@ -257,7 +257,7 @@ const Footer = () => {
"@media (max-width: 600px)": {
flexDirection: "column",
alignItems: "flex-start",
padding: "2rem",
padding: "1rem",
},
}}
>

7
src/components/HomePage/Client.jsx
View File

@@ -28,10 +28,11 @@ const Client = () => {
};
return (
<Box
height={"90vh"}
height={"auto"}
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
padding={"3rem"}
sx={{
"@media (max-width: 1024px)": {
height: "auto",
@@ -44,7 +45,7 @@ const Client = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
paddingBottom={"4rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"center"}
@@ -65,7 +66,7 @@ const Client = () => {
maxW="container.xl"
display={"grid"}
placeContent={"center"}
height={"65vh"}
paddingBottom={"3rem"}
sx={{
"@media (max-width: 1024px)": {
height: "40vh",

1
src/components/HomePage/Resources.jsx
View File

@@ -65,6 +65,7 @@ const Resources = () => {
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"flex-end"}
gap={"25px"}
overflowX={"auto"}
sx={{

5
src/components/HomePage/Stats.jsx
View File

@@ -14,10 +14,11 @@ const Stats = () => {
});
return (
<Box
height={"80vh"}
height={"auto"}
backgroundImage={`url(${banner})`}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
padding={"3rem"}
sx={{
"@media (max-width: 1024px)": {
height: "auto",
@@ -49,7 +50,7 @@ const Stats = () => {
maxW="container.lg"
display={"grid"}
placeContent={"center"}
height={"50vh"}
paddingBottom="3rem"
sx={{
"@media (max-width: 996px)": {
height: "auto",

3
src/components/HomePage/WhitePaper.jsx
View File

@@ -10,7 +10,7 @@ const SectionContent = {
const WhitePaper = () => {
return (
<Box
height={"50vh"}
height={"auto"}
backgroundImage={`url(${banner})`}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
@@ -46,7 +46,6 @@ const WhitePaper = () => {
textAlign={"center"}
display={"grid"}
placeContent={"center"}
height={"30vh"}
paddingBottom={"3rem"}
>
<Text

2
src/components/LearnPage/Faq.jsx
View File

@@ -55,7 +55,7 @@ export const Faq = () => {
>
<Container
maxW={"container.xl"}
padding={"5rem"}
padding={"5rem 4rem"}
sx={{
"@media (max-width: 435px)": {
padding: "2rem",

2
src/components/LearnPage/GetStarted.jsx
View File

@@ -10,7 +10,7 @@ const GetStarted = () => {
<Box backgroundColor={"#000"}>
<Container
maxW={"container.xl"}
padding={"0 5rem"}
padding={"4rem 4rem"}
sx={{
"@media (max-width: 1024px)": {
padding: "3rem",

6
src/components/LearnPage/LearnBanner.jsx
View File

@@ -38,7 +38,7 @@ const LearnBanner = () => {
maxW="container.xl"
textAlign={"left"}
marginTop={"2rem"}
paddingLeft={"5rem"}
paddingLeft={"3.5rem"}
sx={{
"@media (max-width: 435px)": {
paddingLeft: "2rem",
@@ -57,7 +57,7 @@ const LearnBanner = () => {
as={"h2"}
fontWeight={700}
fontSize={"60px"}
textTransform={"upperCase"}
textTransform={"Capitalize"}
color={"#DE858E"}
sx={{
"@media (max-width: 996px)": {
@@ -108,7 +108,7 @@ const LearnBanner = () => {
maxW="container.xl"
textAlign={"left"}
marginTop={"3rem"}
paddingLeft={"5rem"}
paddingLeft={"3.5rem"}
sx={{
"@media (max-width: 435px)": {
paddingLeft: "2rem",

9
src/components/LearnPage/LearnDev.jsx
View File

@@ -62,7 +62,7 @@ const LearnDev = () => {
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
paddingLeft={"4rem"}
paddingLeft={"3rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"left"}
@@ -85,8 +85,9 @@ const LearnDev = () => {
{Content.span}
</Text>
</Container>
<Box
paddingLeft={"7rem"}
<Container
maxW="container.xl"
paddingLeft={"4rem"}
paddingBottom={"2rem"}
// height={"50vh"}
sx={{
@@ -119,7 +120,7 @@ const LearnDev = () => {
/>
))}
</Box>
</Box>
</Container>
</Box>
);
};

2
src/components/LearnPage/WhyRubix.jsx
View File

@@ -49,7 +49,7 @@ const WhyRubix = () => {
>
<Container
maxW={"container.xl"}
padding={"5rem"}
padding={"5rem 4rem"}
sx={{
"@media (max-width: 1024px)": {
padding: "3rem",

2
src/components/NavBar/NavBar.jsx
View File

@@ -84,7 +84,7 @@ const NavBar = () => {
zIndex={"999"}
width={"100%"}
top={"0px"}
padding={"2rem 0rem"}
padding={"2.5rem 0 2rem 0"}
sx={{
"@media (max-width: 996px)": {
justifyContent: "space-between",

2
src/index.css
View File

@@ -20,7 +20,7 @@
}
.rubix-text-large {
font-size: 22px !important;
font-size: 25px !important;
font-family: "Poppins" !important;
color: #fff !important;
}

2
src/pages/Contact.jsx
View File

@@ -1,5 +1,6 @@
import { useEffect } from "react";
import Form from "../components/Contact/Form";
import Footer from "../components/Footer/Footer";
const Contact = () => {
useEffect(() => {
@@ -9,6 +10,7 @@ const Contact = () => {
return (
<>
<Form />
<Footer />
</>
);
};