diff --git a/src/App.jsx b/src/App.jsx index 5f73b57..a7b1f29 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,6 +8,7 @@ import HomePage from "./pages/HomePage"; import NavBar from "./components/NavBar/NavBar"; import LearnPage from "./pages/LearnPage"; import BuildPage from "./pages/BuildPage"; +import Community from "./pages/Community"; import Contact from "./pages/Contact"; const router = createBrowserRouter( @@ -16,6 +17,7 @@ const router = createBrowserRouter( } /> } /> } /> + } /> } /> ) diff --git a/src/assets/images/BuildBanner.webp b/src/assets/images/BuildBanner.webp new file mode 100644 index 0000000..0dfe1b3 Binary files /dev/null and b/src/assets/images/BuildBanner.webp differ diff --git a/src/assets/images/Component115.png b/src/assets/images/Component115.png new file mode 100644 index 0000000..97c6169 Binary files /dev/null and b/src/assets/images/Component115.png differ diff --git a/src/assets/images/Component116.png b/src/assets/images/Component116.png new file mode 100644 index 0000000..57300e6 Binary files /dev/null and b/src/assets/images/Component116.png differ diff --git a/src/assets/images/Component117.png b/src/assets/images/Component117.png new file mode 100644 index 0000000..11c45eb Binary files /dev/null and b/src/assets/images/Component117.png differ diff --git a/src/assets/images/Component118.png b/src/assets/images/Component118.png new file mode 100644 index 0000000..600cd85 Binary files /dev/null and b/src/assets/images/Component118.png differ diff --git a/src/assets/images/Component119.png b/src/assets/images/Component119.png new file mode 100644 index 0000000..dcf6def Binary files /dev/null and b/src/assets/images/Component119.png differ diff --git a/src/assets/images/Component120.png b/src/assets/images/Component120.png new file mode 100644 index 0000000..95c7d56 Binary files /dev/null and b/src/assets/images/Component120.png differ diff --git a/src/assets/images/Component121.png b/src/assets/images/Component121.png new file mode 100644 index 0000000..7ac91b6 Binary files /dev/null and b/src/assets/images/Component121.png differ diff --git a/src/assets/images/Component122.png b/src/assets/images/Component122.png new file mode 100644 index 0000000..573ec92 Binary files /dev/null and b/src/assets/images/Component122.png differ diff --git a/src/assets/images/Component123.png b/src/assets/images/Component123.png new file mode 100644 index 0000000..e42e6fc Binary files /dev/null and b/src/assets/images/Component123.png differ diff --git a/src/assets/images/Component127.png b/src/assets/images/Component127.png new file mode 100644 index 0000000..1e04b47 Binary files /dev/null and b/src/assets/images/Component127.png differ diff --git a/src/assets/images/Component128.png b/src/assets/images/Component128.png new file mode 100644 index 0000000..3ba08eb Binary files /dev/null and b/src/assets/images/Component128.png differ diff --git a/src/assets/images/Discort.png b/src/assets/images/Discort.png new file mode 100644 index 0000000..4c33dde Binary files /dev/null and b/src/assets/images/Discort.png differ diff --git a/src/assets/images/GitHub2.png b/src/assets/images/GitHub2.png new file mode 100644 index 0000000..8c85b35 Binary files /dev/null and b/src/assets/images/GitHub2.png differ diff --git a/src/assets/images/arrow-right.png b/src/assets/images/arrow-right.png new file mode 100644 index 0000000..02baae5 Binary files /dev/null and b/src/assets/images/arrow-right.png differ diff --git a/src/assets/images/cardimg2.png b/src/assets/images/cardimg2.png new file mode 100644 index 0000000..9f7dc66 Binary files /dev/null and b/src/assets/images/cardimg2.png differ diff --git a/src/assets/images/discot.png b/src/assets/images/discot.png new file mode 100644 index 0000000..eee1257 Binary files /dev/null and b/src/assets/images/discot.png differ diff --git a/src/assets/images/enterprise.png b/src/assets/images/enterprise.png new file mode 100644 index 0000000..71aecb5 Binary files /dev/null and b/src/assets/images/enterprise.png differ diff --git a/src/assets/images/facebook.png b/src/assets/images/facebook.png new file mode 100644 index 0000000..8949a0b Binary files /dev/null and b/src/assets/images/facebook.png differ diff --git a/src/assets/images/faqBg.webp b/src/assets/images/faqBg.webp new file mode 100644 index 0000000..8a3d88f Binary files /dev/null and b/src/assets/images/faqBg.webp differ diff --git a/src/assets/images/form.webp b/src/assets/images/form.webp new file mode 100644 index 0000000..4552d63 Binary files /dev/null and b/src/assets/images/form.webp differ diff --git a/src/assets/images/learnBanner.png b/src/assets/images/learnBanner.png deleted file mode 100644 index 7158be0..0000000 Binary files a/src/assets/images/learnBanner.png and /dev/null differ diff --git a/src/assets/images/learnBanner.webp b/src/assets/images/learnBanner.webp new file mode 100644 index 0000000..5f46fab Binary files /dev/null and b/src/assets/images/learnBanner.webp differ diff --git a/src/assets/images/linkedin.png b/src/assets/images/linkedin.png new file mode 100644 index 0000000..1e7032b Binary files /dev/null and b/src/assets/images/linkedin.png differ diff --git a/src/assets/images/linkedn.png b/src/assets/images/linkedn.png new file mode 100644 index 0000000..b4a154c Binary files /dev/null and b/src/assets/images/linkedn.png differ diff --git a/src/assets/images/map-pin.png b/src/assets/images/map-pin.png new file mode 100644 index 0000000..b11d8e1 Binary files /dev/null and b/src/assets/images/map-pin.png differ diff --git a/src/assets/images/partner.png b/src/assets/images/partner.png new file mode 100644 index 0000000..08ddb5c Binary files /dev/null and b/src/assets/images/partner.png differ diff --git a/src/assets/images/place-banner.png b/src/assets/images/place-banner.png new file mode 100644 index 0000000..cee681b Binary files /dev/null and b/src/assets/images/place-banner.png differ diff --git a/src/assets/images/reddit2.png b/src/assets/images/reddit2.png new file mode 100644 index 0000000..510ecdc Binary files /dev/null and b/src/assets/images/reddit2.png differ diff --git a/src/assets/images/telegram.png b/src/assets/images/telegram.png new file mode 100644 index 0000000..b733984 Binary files /dev/null and b/src/assets/images/telegram.png differ diff --git a/src/assets/images/twitter.png b/src/assets/images/twitter.png new file mode 100644 index 0000000..2c5a84c Binary files /dev/null and b/src/assets/images/twitter.png differ diff --git a/src/assets/images/whyRubix.webp b/src/assets/images/whyRubix.webp new file mode 100644 index 0000000..e6b583a Binary files /dev/null and b/src/assets/images/whyRubix.webp differ diff --git a/src/components/BuildPage/BuildBanner.jsx b/src/components/BuildPage/BuildBanner.jsx index d9069a0..fb8a08e 100644 --- a/src/components/BuildPage/BuildBanner.jsx +++ b/src/components/BuildPage/BuildBanner.jsx @@ -1,5 +1,5 @@ import { Box, Button, Container, Text } from "@chakra-ui/react"; -import banner from "../../assets/images/BuildBanner.png"; +import banner from "../../assets/images/BuildBanner.webp"; const BannerContent = [ { @@ -37,7 +37,7 @@ const BuildBanner = () => { maxW="container.xl" textAlign={"left"} marginTop={"2rem"} - paddingLeft={"5rem"} + paddingLeft={"4rem"} sx={{ "@media (max-width: 435px)": { paddingLeft: "2rem", @@ -56,7 +56,7 @@ const BuildBanner = () => { as={"h2"} fontWeight={700} fontSize={"60px"} - textTransform={"upperCase"} + textTransform={"capitalize"} color={"#DE858E"} sx={{ "@media (max-width: 996px)": { @@ -107,7 +107,7 @@ const BuildBanner = () => { maxW="container.xl" textAlign={"left"} marginTop={"3rem"} - paddingLeft={"5rem"} + paddingLeft={"4rem"} sx={{ "@media (max-width: 435px)": { paddingLeft: "2rem", diff --git a/src/components/BuildPage/Connect.jsx b/src/components/BuildPage/Connect.jsx index 8e19045..9b35ec0 100644 --- a/src/components/BuildPage/Connect.jsx +++ b/src/components/BuildPage/Connect.jsx @@ -108,6 +108,7 @@ const Connect = () => { background={"#000"} borderRadius={"10px"} minH={"270px"} + height={"100%"} border={"1px solid #454545"} > { return ( { textAlign={"center"} display={"grid"} placeContent={"center"} - height={"30vh"} + // height={"30vh"} paddingBottom={"3rem"} > { @@ -130,7 +130,7 @@ const Tools = () => { position={"relative"} backgroundColor={"transparent"} cursor={"pointer"} - transition="0.3s ease-in-out" + transition="0.3s ease-in" color={"#fff"} width={"227px"} height={"60px"} @@ -153,7 +153,7 @@ const Tools = () => { width: "65px", height: "65px", borderRadius: "50%", - transition: "0.35s linear", + transition: "0.35s ease-in", zIndex: -1, bgGradient: "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)", diff --git a/src/components/BuildPage/WhyBuild.jsx b/src/components/BuildPage/WhyBuild.jsx index cc4f199..6d3c5c1 100644 --- a/src/components/BuildPage/WhyBuild.jsx +++ b/src/components/BuildPage/WhyBuild.jsx @@ -8,7 +8,7 @@ import { AccordionPanel, AccordionIcon, } from "@chakra-ui/react"; -import bg from "../../assets/images/whyRubix.png"; +import bg from "../../assets/images/whyRubix.webp"; import cube from "../../assets/images/cube.png"; const accordion = [ @@ -46,7 +46,7 @@ const WhyBuild = () => { > { + return ( + + + + + + + + + + + {/* + {location} + */} + + {name} + + + {jobTitle} + + + {description} + + + ); +}; + +export default CommCard; diff --git a/src/components/Card/HappenCard.jsx b/src/components/Card/HappenCard.jsx new file mode 100644 index 0000000..32fffec --- /dev/null +++ b/src/components/Card/HappenCard.jsx @@ -0,0 +1,44 @@ +/* eslint-disable no-unused-vars */ +import { Box, Container, Text, Image, Button } from "@chakra-ui/react"; +import CardImg2 from "../../assets/images/cardimg2.png"; +import { Badge } from "@chakra-ui/react"; + +const HappenCard = ({ key, date, text, para, month, curentDate }) => { + return ( + + + + {month} +
+ {curentDate} + + + + + {date} + + + {text} + + {para} + + + + ); +}; + +export default HappenCard; diff --git a/src/components/Card/InsightsCard.jsx b/src/components/Card/InsightsCard.jsx new file mode 100644 index 0000000..a32c954 --- /dev/null +++ b/src/components/Card/InsightsCard.jsx @@ -0,0 +1,66 @@ +/* eslint-disable no-unused-vars */ +import { Box, Container, Text, Image, Button } from "@chakra-ui/react"; +import cardimg from "../../assets/images/CardImg.png"; +import { Badge } from "@chakra-ui/react"; +import { useState } from "react"; + +const InsightsCard = ({ key, title, text }) => { + const [showBrideBox, setShowBrideBox] = useState(false); + return ( + + setShowBrideBox(true)} + onMouseLeave={() => setShowBrideBox(false)} + width={"502px"} + background={"#151419"} + borderRadius={"10px"} + minHeight={"430px"} + key={key} + transition={"all 1s"} + > + + + {showBrideBox && ( + + INSIGHT + + )} + + + + {title} + + + {text} + + + + + ); +}; + +export default InsightsCard; diff --git a/src/components/Card/PlaceCard.jsx b/src/components/Card/PlaceCard.jsx new file mode 100644 index 0000000..69b56db --- /dev/null +++ b/src/components/Card/PlaceCard.jsx @@ -0,0 +1,56 @@ +/* eslint-disable no-unused-vars */ +import { Box, Container, Text, Image, Button } from "@chakra-ui/react"; +import {ArrowForwardIcon } from '@chakra-ui/icons' +import Arrow from "../../assets/images/arrow-right.png" + +const PlaceCard = ({ key, text, cardicon ,title,button}) => { + return ( + + + + + + {title} + + + {text} + + + + {button} + + + + + + ); +}; + +export default PlaceCard; diff --git a/src/components/Community/CommunityBanner.jsx b/src/components/Community/CommunityBanner.jsx new file mode 100644 index 0000000..d8cf892 --- /dev/null +++ b/src/components/Community/CommunityBanner.jsx @@ -0,0 +1,173 @@ +import { Box, Button, Container, Text } from "@chakra-ui/react"; +import banner from "../../assets/images/learnBanner.webp"; + +const BannerContent = [ + { + heading1: `Welcome To The`, + heading2: `Rubix Community`, + }, + { + subheading: `This is a space for enterprises, dApp developers, stakeholders + and blockchain advocates to aggregate resources and ideas to make a difference + through our green blockchain technology.`, + }, + { + btn: `Explore our community`, + }, +]; + +const CommunityBanner = () => { + return ( + + + + + {BannerContent[0].heading1}
+ + {BannerContent[0].heading2} + + + + + {BannerContent[1].subheading} + + + + + + + ); +}; + +export default CommunityBanner; diff --git a/src/components/Community/CommunityCard.jsx b/src/components/Community/CommunityCard.jsx new file mode 100644 index 0000000..cdb2510 --- /dev/null +++ b/src/components/Community/CommunityCard.jsx @@ -0,0 +1,183 @@ +import { + Box, + Card, + CardBody, + CardHeader, + Container, + Heading, + Image, + SimpleGrid, + Text, +} from "@chakra-ui/react"; +import React from "react"; +import CommCard from "../Card/CommCard"; +import imgOne from "../../assets/images/Component115.png"; +import imgtwo from "../../assets/images/Component116.png"; +import imgthree from "../../assets/images/Component117.png"; +import imgfour from "../../assets/images/Component118.png"; +import imgfive from "../../assets/images/Component119.png"; +import imgsix from "../../assets/images/Component120.png"; +import imgseven from "../../assets/images/Component121.png"; +import imgeight from "../../assets/images/Component122.png"; +import imgnine from "../../assets/images/Component123.png"; +import imgten from "../../assets/images/Component128.png"; +import imgeleven from "../../assets/images/Component127.png"; + + +const individuals = [ + { + location: "india", + name: "KC Reddy", + jobTitle: "Founder/CTO", + description: + "A visionary poised to deliver trustless, secure internet and passwordless cyber security", + imageUrl: imgOne, + }, + { + location: "india", + name: "Ravi Srinivasa Murty", + jobTitle: "Chief Strategy Officer", + description: + "Global business leader with a technology orientation and a vision to drive economic value.", + imageUrl: imgtwo, + }, + { + location: "india", + name: "Hari Krishnan", + jobTitle: "Chief Growth Officer", + description: + "Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.", + imageUrl: imgthree, + }, + { + location: "india", + name: "Eser Torun, CFA", + jobTitle: "Chief Growth Officer", + description: + "Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.", + imageUrl: imgten, + }, + { + location: "india", + name: "Gokul P S", + jobTitle: "Core Blockchain Developer", + description: + "A proactive Web3 enthusiast ensuring the security and scalability of our 51.4M proofchains.", + imageUrl: imgfour, + }, + { + location: "india", + name: "Allen Iype P Cherian", + jobTitle: "Blockchain Engineer", + description: + "A motivated and responsible B tech Graduate, with a strong work ethic.", + imageUrl: imgfive, + }, + { + location: "india", + name: "Nidhin M.", + jobTitle: "Lead Engineer", + description: + "Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.", + imageUrl: imgsix, + }, + { + location: "india", + name: "Arnab Ghose", + jobTitle: "Senior Blockchain Engineer", + description: + "Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.", + imageUrl: imgeleven, + }, + { + location: "india", + name: "ASHITA GUPTA", + jobTitle: "Blockchain Developer", + description: + "Enthusiastic blockchain developer who pushes herself every day to excel at work.", + imageUrl: imgseven, + }, + { + location: "india", + name: "Vaishnav C H", + jobTitle: "Blockchain Developer", + description: + "A very humble and talented Golang developer and mechatronics and blockchain engineer", + imageUrl: imgeight, + }, + { + location: "india", + name: "Maneesha Panda", + jobTitle: "Blockchain Engineer", + description: + "A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.", + imageUrl: imgnine, + }, + { + location: "india", + name: "Maneesha Panda", + jobTitle: "Blockchain Engineer", + description: + "A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.", + imageUrl: imgnine, + }, +]; + +const CommunityCard = () => { + return ( + <> + + + + Rubix Community + + + {individuals.map((item) => ( + + ))} + + + + + ); +}; + +export default CommunityCard; diff --git a/src/components/Community/Connect.jsx b/src/components/Community/Connect.jsx new file mode 100644 index 0000000..4d39841 --- /dev/null +++ b/src/components/Community/Connect.jsx @@ -0,0 +1,164 @@ +/* eslint-disable no-undef */ +/* eslint-disable no-unused-vars */ +import { + Box, + Button, + Card, + CardBody, + CardFooter, + CardHeader, + Container, + Heading, + Image, + SimpleGrid, + Text, +} from "@chakra-ui/react"; +import banner from "../../assets/images/Statsbanner.png"; +import tel from "../../assets/images/tel.png"; +import red from "../../assets/images/red.png"; +import git from "../../assets/images/git.png"; +import twitch from "../../assets/images/twitch.png"; +import twit from "../../assets/images/twit.png"; +import face from "../../assets/images/face.png"; +import lin from "../../assets/images/lin.png"; +import { Link } from "react-router-dom"; + +const items = [ + { + id: 1, + head: `Innovator Dialogue`, + logo1: tel, + logo2: red, + social1: `Telegram`, + social2: `Reddit`, + }, + { + id: 2, + head: `Developer Resources`, + logo1: git, + logo2: twitch, + social1: `GitHub`, + social2: `Discord`, + }, + { + id: 3, + head: `Social Media`, + logo1: twit, + logo2: face, + logo3: lin, + social1: `Twitter`, + social2: `Facebook`, + social3: `LinkedIn`, + }, +]; + +const Connect = () => { + return ( + + + + Connect with Rubix community + + + {items.map((item) => ( + <> + + + + {/* */} + + {item.head} + + + + + + + + + {item.social1} + + + + + + {item.social2} + + + {item.social3 ? ( + + + + {item.social3} + + + ) : ( + "" + )} + + + + + ))} + + + + ); +}; + +export default Connect; diff --git a/src/components/Community/Happen.jsx b/src/components/Community/Happen.jsx new file mode 100644 index 0000000..ab9b686 --- /dev/null +++ b/src/components/Community/Happen.jsx @@ -0,0 +1,153 @@ +/* eslint-disable no-unused-vars */ +import { + Box, + Container, + Text, + Image, + Button, + SimpleGrid, +} from "@chakra-ui/react"; +import HappenCard from "../Card/HappenCard"; + +const Latest = [ + { + id: 1, + date: `Sunday, 10 May 2024`, + text: `Financial Times Crypto & Digital Assets Summit Panel`, + para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ", + curentDate: "10", + month: "MAY", + }, + { + id: 2, + date: `Sunday, 15 Jan 2024`, + text: `Financial Times Crypto & Digital Assets Summit Panel`, + para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ", + curentDate: "10", + month: "MAY", + }, + { + id: 3, + date: `Sunday, 14 Feb 2024`, + text: `Financial Times Crypto & Digital Assets Summit Panel`, + para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ", + curentDate: "10", + month: "MAY", + }, +]; + +const Content = { + heading: `Latest Happenings`, +}; + +const Happen = () => { + return ( + + + + {Content.heading} + + + + + {Latest.map((item) => ( + + ))} + + + + + + + + + ); +}; + +export default Happen; diff --git a/src/components/Community/Insights.jsx b/src/components/Community/Insights.jsx new file mode 100644 index 0000000..528da5b --- /dev/null +++ b/src/components/Community/Insights.jsx @@ -0,0 +1,134 @@ +/* eslint-disable no-unused-vars */ +import { Box, Container, Text, Image, Button } from "@chakra-ui/react"; +import HomeCard from "../Card/HomeCard"; +import InsightsCard from "../Card/InsightsCard"; + +const content = [ + { + id: 1, + title: `Rubix Hackathon`, + text: `Start 2023 off right by registering for the next Top Rubix Start-up Hackathon! Join the community and build any project that leverages Rubix blockchain technology.`, + }, + { + id: 2, + title: `Rubix Hackathon`, + text: `Start 2023 off right by registering for the next Top Rubix Start-up Hackathon! Join the community and build any project that leverages Rubix blockchain technology.`, + }, + { + id: 3, + title: `Rubix Hackathon`, + text: `Start 2023 off right by registering for the next Top Rubix Start-up Hackathon! Join the community and build any project that leverages Rubix blockchain technology.`, + }, +]; + +const Content = { + heading: `Current news & insights`, +}; + +const Insights = () => { + return ( + + + + {Content.heading} + + + {content.map((item) => ( + + ))} + + + + + + + ); +}; + +export default Insights; diff --git a/src/components/Community/LearnMore.jsx b/src/components/Community/LearnMore.jsx new file mode 100644 index 0000000..c4fefc9 --- /dev/null +++ b/src/components/Community/LearnMore.jsx @@ -0,0 +1,160 @@ +import { Box, Button, Container, Text } from "@chakra-ui/react"; +import banner from "../../assets/images/moreBanner.png"; + +const SectionContent = { + heading: `Connect with us to learn more!`, + subContent: `With countless applications, there's a place for everyone in the Rubix community.`, + btnContent: `Contact Us`, + btnBild:"Build with Rubix", +}; + +const LearnMore = () => { + return ( + + + {SectionContent.heading} + + + + {SectionContent.subContent} + + + + + + + + ); +}; + +export default LearnMore; diff --git a/src/components/Community/Place.jsx b/src/components/Community/Place.jsx new file mode 100644 index 0000000..4bcc5f2 --- /dev/null +++ b/src/components/Community/Place.jsx @@ -0,0 +1,108 @@ +/* eslint-disable no-unused-vars */ +import { Box, Container, Text, Image, Button } from "@chakra-ui/react"; +import Partner from "../../assets/images/partner.png" +import PlaceCard from "../Card/PlaceCard"; +import Enterprise from "../../assets/images/enterprise.png"; +import Banner from "../../assets/images/place-banner.png"; + +const content = [ + { + id: 1, + title:'Partners', + cardicon: Partner, + text: `Our partners strengthen our foundation and the utility offered by the revolutionary L1 Rubix platform through the development and scaling of groundbreaking apps for ESG, media, real estate, construction, telecom, pharma, NFT, metaverse, DeFi, GameFi, cybersecurity, cloud, and more.`, + button:'Explore our ecosystem', + }, + { + id: 2, + title:'Enterprises', + cardicon: Enterprise, + text: `Rubix’s unique, lightweight subnet architecture and revolutionary Proof-of-Pledge protocol enables our partner DEVS to build secure, reliable, and efficient dApps that enable enterprises to realize their transformation goals.`, + button:'See how it works', + }, + { + id: 3, + title:'Developers', + cardicon: Enterprise, + text: `Our developers bring the passion, knowledge, and technical resources needed to deliver next-generation Web3 and Web5 platforms and through innovative, scalable solutions.`, + button:'Start Building', + }, + { + id: 4, + title:'Advisors', + cardicon: Enterprise, + text: `Our Advisors Share Our Passion For Making This Word A Better Place Through Web3. They Inspire Our Core Team To Change The Status Quo And Make The Impossible Possible.`, + button:'Contact Us', + }, +]; + +const Content = { + heading: `Find your place at the table`, +}; + +const Place = () => { + return ( + + + + {Content.heading} + + + {content.map((item) => ( + + ))} + + + + ); +}; + +export default Place; diff --git a/src/components/Contact/Form.jsx b/src/components/Contact/Form.jsx index 27a29dc..15dc9f8 100644 --- a/src/components/Contact/Form.jsx +++ b/src/components/Contact/Form.jsx @@ -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, @@ -28,23 +21,25 @@ import { ModalFooter, Button, } from "@chakra-ui/react"; -import BGimage from "../../assets/images/form.png"; -// import { contactUs } from "../service/api"; +import BGimage from "../../assets/images/form.webp"; 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"; 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 +73,14 @@ const Contact = () => { paddingTop={"4rem"} backgroundRepeat={"no-repeat"} backgroundSize={"cover"} + backgroundPosition={"0 25%"} > { zIndex={"99"} backgroundColor={"#transparent"} // width={"30%"} - padding={"2rem"} + padding={"4rem"} minH={"583px"} // flex={"1"} sx={{ @@ -126,7 +122,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 +147,13 @@ const Contact = () => { sx={{ "@media (max-width: 1024px)": {}, "@media (max-width: 768px)": {}, - "@media (max-width: 535px)": { - padding: "1rem", - }, + "@media (max-width: 535px)": {}, }} > Start reaching
your digital goals - + { > Social Media + + + + + + + + + + Chat to us + + + + rubix@gmail.com + + + + + + + Call us + + + + 914 578 1245 + + {/* Form */} { // flex={"1"} >
- - - Send us a Message - - { }} > - - + + + + ( + + )} + /> + {errors.selectOption && ( +

+ {errors.selectOption.message} +

+ )} + { }, }} > -