mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 21:55:50 +00:00
Fixed nav and Desktop pages and responsive design
This commit is contained in:
rockyeverlast
@@ -12,6 +12,7 @@ import Community from "./pages/Community";
|
||||
import Contact from "./pages/Contact";
|
||||
import UseCases from "./pages/UseCases";
|
||||
import ArticleInternalPage from "./components/ArticleInternalPage/ArticleInternalPage";
|
||||
import NotFound from "./pages/NotFound";
|
||||
|
||||
const router = createBrowserRouter(
|
||||
createRoutesFromElements(
|
||||
@@ -23,6 +24,7 @@ const router = createBrowserRouter(
|
||||
<Route path="community" element={<Community />} />
|
||||
<Route path="Articles" element={<ArticleInternalPage />} />
|
||||
<Route path="Contact" element={<Contact />} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Route>
|
||||
)
|
||||
);
|
||||
|
||||
BIN
src/assets/images/communityBanner.webp
Normal file
BIN
src/assets/images/communityBanner.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@@ -148,7 +148,7 @@ const BuildBanner = () => {
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
border: "1px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -82,6 +82,7 @@ const Connect = () => {
|
||||
// fontSize={"40px"}
|
||||
color={"#fff"}
|
||||
marginBottom={"3rem"}
|
||||
textAlign={"center"}
|
||||
>
|
||||
Connect with Rubix community
|
||||
</Text>
|
||||
|
||||
@@ -94,7 +94,11 @@ const Tools = () => {
|
||||
borderRadius={"10px"}
|
||||
height={"100%"}
|
||||
>
|
||||
<CardHeader display={"flex"} justifyContent={"center"} paddingBottom={"15px"}>
|
||||
<CardHeader
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
paddingBottom={"15px"}
|
||||
>
|
||||
<Image height={"70px"} src={item.img} />
|
||||
{/* <Heading size="md"></Heading> */}
|
||||
</CardHeader>
|
||||
@@ -112,7 +116,11 @@ const Tools = () => {
|
||||
dangerouslySetInnerHTML={{ __html: item.title }}
|
||||
/>
|
||||
</CardBody>
|
||||
<CardFooter justifyContent={"center"} cursor={"pointer"} paddingTop={"15px"}>
|
||||
<CardFooter
|
||||
justifyContent={"center"}
|
||||
cursor={"pointer"}
|
||||
paddingTop={"15px"}
|
||||
>
|
||||
<Image
|
||||
src={arrow}
|
||||
transition="all .5s"
|
||||
@@ -168,7 +176,7 @@ const Tools = () => {
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
border: "1px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -8,10 +8,10 @@ const HomeCard = ({ key, date, text }) => {
|
||||
return (
|
||||
<Box
|
||||
backgroundImage={
|
||||
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
|
||||
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f85c), color-stop(0.67, #f8697a75))"
|
||||
}
|
||||
padding={"1px"}
|
||||
borderRadius={"10px"}
|
||||
borderRadius={"8px"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "90%",
|
||||
@@ -20,10 +20,10 @@ const HomeCard = ({ key, date, text }) => {
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
width={"502px"}
|
||||
width={"475px"}
|
||||
background={"#151419"}
|
||||
borderRadius={"10px"}
|
||||
minHeight={"502px"}
|
||||
minHeight={"475px"}
|
||||
key={key}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
@@ -44,14 +44,14 @@ const HomeCard = ({ key, date, text }) => {
|
||||
INSIGHT
|
||||
</Badge>
|
||||
|
||||
<Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}>
|
||||
<Text fontSize={"12px"} color={"#979797"} margin={"20px 0px"}>
|
||||
{date}
|
||||
</Text>
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontSize={"24px"}
|
||||
fontSize={"20px"}
|
||||
marginBottom={"20px"}
|
||||
minHeight={"73px"}
|
||||
minHeight={"70px"}
|
||||
maxWidth={"460px"}
|
||||
>
|
||||
{text}
|
||||
|
||||
@@ -30,7 +30,7 @@ const MobileHomeCard = ({ key, date, text }) => {
|
||||
background={"#151419"}
|
||||
borderRadius={"10px"}
|
||||
minHeight={"415px !important"}
|
||||
key={key}
|
||||
// key={key}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100%",
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
/* eslint-disable no-unused-vars */
|
||||
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
|
||||
import { ArrowForwardIcon } from "@chakra-ui/icons";
|
||||
@@ -17,7 +18,7 @@ const PlaceCard = ({ key, text, cardicon, title, button }) => {
|
||||
"@media (max-width: 500px)": {
|
||||
width: "320px",
|
||||
fontWeight: "400",
|
||||
minHeight:'290px'
|
||||
minHeight: "290px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -30,11 +31,14 @@ const PlaceCard = ({ key, text, cardicon, title, button }) => {
|
||||
}}
|
||||
/>
|
||||
<Box>
|
||||
<Text fontSize={"22px"} color={"#fff"} margin={"25px 0px"}
|
||||
<Text
|
||||
fontSize={"22px"}
|
||||
color={"#fff"}
|
||||
margin={"25px 0px"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "15px",
|
||||
margin:'10px 0'
|
||||
margin: "10px 0",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -44,7 +48,7 @@ const PlaceCard = ({ key, text, cardicon, title, button }) => {
|
||||
color={"#D4D4D4"}
|
||||
fontSize={"16px"}
|
||||
marginBottom={"20px"}
|
||||
minHeight={"73px"}
|
||||
minHeight={"135px"}
|
||||
maxWidth={"460px"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
@@ -70,8 +74,10 @@ const PlaceCard = ({ key, text, cardicon, title, button }) => {
|
||||
}}
|
||||
>
|
||||
{button}
|
||||
<Image src={Arrow} style={{ width: "30px", marginLeft: "8px" }}
|
||||
sx={{
|
||||
<Image
|
||||
src={Arrow}
|
||||
style={{ width: "30px", marginLeft: "8px" }}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
width: "25px",
|
||||
},
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Box, Button, Container, Text } from "@chakra-ui/react";
|
||||
import banner from "../../assets/images/learnBanner.webp";
|
||||
import banner from "../../assets/images/communityBanner.webp";
|
||||
|
||||
const BannerContent = [
|
||||
{
|
||||
@@ -73,7 +73,7 @@ const CommunityBanner = () => {
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "40px",
|
||||
marginBottom: "0rem",
|
||||
lineHeight:'54px'
|
||||
lineHeight: "54px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -109,7 +109,7 @@ const CommunityBanner = () => {
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "16px",
|
||||
lineHeight:'28px'
|
||||
lineHeight: "28px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -161,13 +161,13 @@ const CommunityBanner = () => {
|
||||
marginTop: "2rem",
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
color:'#000',
|
||||
fontWeight:'600'
|
||||
color: "#000",
|
||||
fontWeight: "600",
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
border: "1px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
@@ -23,7 +24,6 @@ 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",
|
||||
@@ -128,8 +128,8 @@ const CommunityCard = () => {
|
||||
<>
|
||||
<Box backgroundColor={"#101015"}>
|
||||
<Container
|
||||
maxW={"container.xl"}
|
||||
padding={"0 5rem"}
|
||||
maxW={"1200px"}
|
||||
padding={"0rem"}
|
||||
paddingBottom={"6rem"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
|
||||
@@ -40,7 +40,8 @@ const Content = {
|
||||
heading: `Latest Happenings`,
|
||||
};
|
||||
|
||||
const Happen = () => { return (
|
||||
const Happen = () => {
|
||||
return (
|
||||
<Box
|
||||
// height={"100vh"}
|
||||
background={"#000"}
|
||||
@@ -56,7 +57,7 @@ const Happen = () => { return (
|
||||
padding: "3rem",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
padding:'1rem'
|
||||
padding: "1rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -71,7 +72,7 @@ const Happen = () => { return (
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "22px",
|
||||
fontWeight:'400'
|
||||
fontWeight: "400",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -88,17 +89,17 @@ const Happen = () => { return (
|
||||
>
|
||||
<Box>
|
||||
<SimpleGrid
|
||||
spacing={5}
|
||||
templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
display:'flex',
|
||||
overflowX:'scroll',
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "0px",
|
||||
spacing={5}
|
||||
templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
display: "flex",
|
||||
overflowX: "scroll",
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "0px",
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
}}
|
||||
>
|
||||
{Latest.map((item) => (
|
||||
<HappenCard
|
||||
@@ -112,71 +113,72 @@ const Happen = () => { return (
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
<Box textAlign={"center"} marginTop={"4rem"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
marginTop:'2rem',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
position={"relative"}
|
||||
backgroundColor={"transparent"}
|
||||
cursor={"pointer"}
|
||||
transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
|
||||
color={"#fff"}
|
||||
width={"216px"}
|
||||
height={"54px"}
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
border={"1px solid white"}
|
||||
borderRadius={"10px"}
|
||||
fontSize={"20px"}
|
||||
zIndex={"1"}
|
||||
overflow={"hidden"}
|
||||
<Box
|
||||
textAlign={"center"}
|
||||
marginTop={"4rem"}
|
||||
sx={{
|
||||
"::before": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "65px",
|
||||
height: "65px",
|
||||
borderRadius: "50%",
|
||||
transition: "0.35s linear",
|
||||
zIndex: -1,
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
opacity: "0",
|
||||
},
|
||||
"&:hover::before": {
|
||||
width: "100%",
|
||||
height: "120%",
|
||||
borderRadius: "0px",
|
||||
opacity: "1",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "14px",
|
||||
fontWeight:'400',
|
||||
height:'40px',
|
||||
width:'140px',
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
color: "#000",
|
||||
fontWeight: "600",
|
||||
|
||||
marginTop: "2rem",
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
View More
|
||||
</Button>
|
||||
</Box>
|
||||
<Button
|
||||
position={"relative"}
|
||||
backgroundColor={"transparent"}
|
||||
cursor={"pointer"}
|
||||
transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
|
||||
color={"#fff"}
|
||||
width={"216px"}
|
||||
height={"54px"}
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
border={"1px solid white"}
|
||||
borderRadius={"10px"}
|
||||
fontSize={"20px"}
|
||||
zIndex={"1"}
|
||||
overflow={"hidden"}
|
||||
sx={{
|
||||
"::before": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "65px",
|
||||
height: "65px",
|
||||
borderRadius: "50%",
|
||||
transition: "0.35s linear",
|
||||
zIndex: -1,
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
opacity: "0",
|
||||
},
|
||||
"&:hover::before": {
|
||||
width: "100%",
|
||||
height: "120%",
|
||||
borderRadius: "0px",
|
||||
opacity: "1",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "14px",
|
||||
fontWeight: "400",
|
||||
height: "40px",
|
||||
width: "140px",
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
color: "#000",
|
||||
// fontWeight: "600",
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "1px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
View More
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
@@ -135,7 +135,7 @@ const Insights = () => {
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
border: "1px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -5,7 +5,7 @@ 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",
|
||||
btnBild: "Build with Rubix",
|
||||
};
|
||||
|
||||
const LearnMore = () => {
|
||||
@@ -37,8 +37,8 @@ const LearnMore = () => {
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "20px",
|
||||
fontWeight:'500',
|
||||
marginBottom:'5px'
|
||||
fontWeight: "500",
|
||||
marginBottom: "5px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -54,131 +54,131 @@ const LearnMore = () => {
|
||||
>
|
||||
<Text
|
||||
color={"#E4E4E4"}
|
||||
fontSize={"22px"}
|
||||
fontSize={"22px"}
|
||||
marginBottom={"2rem"}
|
||||
fontFamily={"Poppins"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "14px",
|
||||
fontWeight:'100',
|
||||
marginBottom:'5px',
|
||||
marginBottom:'30px'
|
||||
fontWeight: "100",
|
||||
// marginBottom:'5px',
|
||||
marginBottom: "30px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{SectionContent.subContent}
|
||||
</Text>
|
||||
<Text>
|
||||
<Button
|
||||
fontSize={"20px"}
|
||||
// minW={"284px"}
|
||||
height={"54px"}
|
||||
fontFamily={"Poppins"}
|
||||
backgroundColor={"transparent"}
|
||||
border={"1px solid #fff"}
|
||||
color={"#fff"}
|
||||
fontWeight={"400"}
|
||||
margin={"0 10px"}
|
||||
// transition="0.3s ease-in-out"
|
||||
zIndex={"1"}
|
||||
overflow={"hidden"}
|
||||
padding={"0 3rem"}
|
||||
sx={{
|
||||
"::before": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "65px",
|
||||
height: "65px",
|
||||
borderRadius: "50%",
|
||||
transition: "0.35s linear",
|
||||
zIndex: -1,
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
opacity: "0",
|
||||
},
|
||||
"&:hover::before": {
|
||||
width: "100%",
|
||||
height: "120%",
|
||||
borderRadius: "0px",
|
||||
opacity: "1",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
padding:'5px 15px',
|
||||
height:'40px',
|
||||
fontSize:'14px',
|
||||
margin:'0 7px',
|
||||
bgGradient:
|
||||
<Button
|
||||
fontSize={"20px"}
|
||||
// minW={"284px"}
|
||||
height={"54px"}
|
||||
fontFamily={"Poppins"}
|
||||
backgroundColor={"transparent"}
|
||||
border={"1px solid #fff"}
|
||||
color={"#fff"}
|
||||
fontWeight={"400"}
|
||||
margin={"0 10px"}
|
||||
// transition="0.3s ease-in-out"
|
||||
zIndex={"1"}
|
||||
overflow={"hidden"}
|
||||
padding={"0 3rem"}
|
||||
sx={{
|
||||
"::before": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "65px",
|
||||
height: "65px",
|
||||
borderRadius: "50%",
|
||||
transition: "0.35s linear",
|
||||
zIndex: -1,
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
color:'#000',
|
||||
fontWeight:'600'
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{SectionContent.btnBild}
|
||||
</Button>
|
||||
<Button
|
||||
fontSize={"20px"}
|
||||
// minW={"284px"}
|
||||
height={"54px"}
|
||||
fontFamily={"Poppins"}
|
||||
backgroundColor={"transparent"}
|
||||
border={"1px solid #fff"}
|
||||
color={"#fff"}
|
||||
fontWeight={"400"}
|
||||
margin={"0 10px"}
|
||||
// transition="0.3s ease-in-out"
|
||||
zIndex={"1"}
|
||||
overflow={"hidden"}
|
||||
padding={"0 3rem"}
|
||||
sx={{
|
||||
"::before": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "65px",
|
||||
height: "65px",
|
||||
borderRadius: "50%",
|
||||
transition: "0.35s linear",
|
||||
zIndex: -1,
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
opacity: "0",
|
||||
},
|
||||
"&:hover::before": {
|
||||
width: "100%",
|
||||
height: "120%",
|
||||
borderRadius: "0px",
|
||||
opacity: "1",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
padding:'5px 15px',
|
||||
height:'40px',
|
||||
fontSize:'14px',
|
||||
margin:'0 7px',
|
||||
bgGradient:
|
||||
opacity: "0",
|
||||
},
|
||||
"&:hover::before": {
|
||||
width: "100%",
|
||||
height: "120%",
|
||||
borderRadius: "0px",
|
||||
opacity: "1",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
padding: "5px 15px",
|
||||
height: "40px",
|
||||
fontSize: "14px",
|
||||
margin: "0 7px",
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
color:'#000',
|
||||
fontWeight:'600'
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{SectionContent.btnContent}
|
||||
</Button>
|
||||
color: "#000",
|
||||
fontWeight: "600",
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "1px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{SectionContent.btnBild}
|
||||
</Button>
|
||||
<Button
|
||||
fontSize={"20px"}
|
||||
// minW={"284px"}
|
||||
height={"54px"}
|
||||
fontFamily={"Poppins"}
|
||||
backgroundColor={"transparent"}
|
||||
border={"1px solid #fff"}
|
||||
color={"#fff"}
|
||||
fontWeight={"400"}
|
||||
margin={"0 10px"}
|
||||
// transition="0.3s ease-in-out"
|
||||
zIndex={"1"}
|
||||
overflow={"hidden"}
|
||||
padding={"0 3rem"}
|
||||
sx={{
|
||||
"::before": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "65px",
|
||||
height: "65px",
|
||||
borderRadius: "50%",
|
||||
transition: "0.35s linear",
|
||||
zIndex: -1,
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
opacity: "0",
|
||||
},
|
||||
"&:hover::before": {
|
||||
width: "100%",
|
||||
height: "120%",
|
||||
borderRadius: "0px",
|
||||
opacity: "1",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
padding: "5px 15px",
|
||||
height: "40px",
|
||||
fontSize: "14px",
|
||||
margin: "0 7px",
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
color: "#000",
|
||||
fontWeight: "600",
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "1px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{SectionContent.btnContent}
|
||||
</Button>
|
||||
</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
|
||||
import Partner from "../../assets/images/partner.png"
|
||||
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";
|
||||
@@ -8,31 +8,31 @@ import Banner from "../../assets/images/place-banner.png";
|
||||
const content = [
|
||||
{
|
||||
id: 1,
|
||||
title:'Partners',
|
||||
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',
|
||||
button: "Explore our ecosystem",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title:'Enterprises',
|
||||
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',
|
||||
button: "See how it works",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title:'Developers',
|
||||
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',
|
||||
button: "Start Building",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title:'Advisors',
|
||||
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',
|
||||
button: "Contact Us",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -73,9 +73,9 @@ const Place = () => {
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "22px",
|
||||
fontWeight:'400',
|
||||
fontWeight: "400",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -93,13 +93,13 @@ const Place = () => {
|
||||
}}
|
||||
>
|
||||
{content.map((item) => (
|
||||
<PlaceCard
|
||||
key={item.id}
|
||||
cardicon={item.cardicon}
|
||||
title={item.title}
|
||||
date={item.date}
|
||||
text={item.text}
|
||||
button={item.button}
|
||||
<PlaceCard
|
||||
key={item.id}
|
||||
cardicon={item.cardicon}
|
||||
title={item.title}
|
||||
date={item.date}
|
||||
text={item.text}
|
||||
button={item.button}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
@@ -178,7 +178,7 @@ const HomeBanner = () => {
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
border: "1px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -28,7 +28,7 @@ import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/navigation";
|
||||
|
||||
import { Navigation, Pagination } from "swiper/modules";
|
||||
import { Navigation, Pagination, Autoplay } from "swiper/modules";
|
||||
import { useState } from "react";
|
||||
|
||||
const imgWidth = {
|
||||
@@ -91,8 +91,12 @@ export default function Partner() {
|
||||
{/* Box1 */}
|
||||
<Swiper
|
||||
pagination={true}
|
||||
navigation={true}
|
||||
modules={[Navigation, Pagination]}
|
||||
navigation={false}
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
autoplay={{
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
loop={true}
|
||||
style={{
|
||||
paddingBottom: "4rem",
|
||||
|
||||
@@ -117,7 +117,7 @@ const Resources = () => {
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
border: "1px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -106,7 +106,7 @@ const WhitePaper = () => {
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
border: "1px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -3,7 +3,7 @@ import banner from "../../assets/images/learnBanner.webp";
|
||||
|
||||
const BannerContent = [
|
||||
{
|
||||
head:'Powerful',
|
||||
head: "Powerful",
|
||||
heading1: ` blockchain tools`,
|
||||
heading2: `for developers`,
|
||||
},
|
||||
@@ -58,8 +58,7 @@ const LearnBanner = () => {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontWeight={700}
|
||||
@@ -86,7 +85,9 @@ const LearnBanner = () => {
|
||||
style={{
|
||||
color: "#fff",
|
||||
}}
|
||||
>{BannerContent[0].head}</span>
|
||||
>
|
||||
{BannerContent[0].head}
|
||||
</span>
|
||||
{BannerContent[0].heading1} <br />
|
||||
<span
|
||||
style={{
|
||||
@@ -156,7 +157,7 @@ const LearnBanner = () => {
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
border: "1px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -58,34 +58,33 @@ const LearnDev = () => {
|
||||
backgroundRepeat={"no-repeat"}
|
||||
padding={"2rem 0 4rem 0"}
|
||||
>
|
||||
<Container maxW="container.xl">
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
paddingBottom={"2rem"}
|
||||
paddingLeft={"3rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textAlign={"left"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 996px)": {
|
||||
fontSize: "35px",
|
||||
},
|
||||
"@media (max-width: 435px)": {
|
||||
fontSize: "26px",
|
||||
paddingLeft: "2rem",
|
||||
},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{Content.heading} {isSmallScreen ? null : <br />}
|
||||
{Content.span}
|
||||
</Text>
|
||||
</Container>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
paddingBottom={"2rem"}
|
||||
paddingLeft={"7rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textAlign={"left"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
width={"fit-content"}
|
||||
sx={{
|
||||
"@media (max-width: 996px)": {
|
||||
fontSize: "35px",
|
||||
},
|
||||
"@media (max-width: 435px)": {
|
||||
fontSize: "26px",
|
||||
paddingLeft: "2rem",
|
||||
},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{Content.heading} {isSmallScreen ? null : <br />}
|
||||
{Content.span}
|
||||
</Text>
|
||||
<Box
|
||||
// maxW="container.xl"
|
||||
paddingLeft={"6rem"}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
|
||||
import cube from "../../assets/images/cube.png";
|
||||
import MobileSubnet2 from "./MobileSubnet2";
|
||||
@@ -7,51 +8,38 @@ import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/navigation";
|
||||
|
||||
import { Navigation, Pagination } from "swiper/modules";
|
||||
import { Navigation, Pagination, Autoplay } from "swiper/modules";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
|
||||
const MobileSubnet = () => {
|
||||
return (
|
||||
<>
|
||||
<Swiper>
|
||||
<SwiperSlide></SwiperSlide>
|
||||
<Box backgroundColor={"#000"} padding={"1.5rem"}>
|
||||
{/* Subnet1 */}
|
||||
<Box>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"space-between"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"20px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
>
|
||||
decentralised Auto Syncing subnets
|
||||
</Text>
|
||||
<Image
|
||||
src={cube}
|
||||
width={"140px"}
|
||||
transform="translateY(-10%)"
|
||||
animation="floatAnimation 2s infinite alternate"
|
||||
sx={{
|
||||
"@keyframes floatAnimation": {
|
||||
"0%": {
|
||||
transform: "translateY(0)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(-20px)",
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Swiper
|
||||
pagination={true}
|
||||
navigation={false}
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
loop={true}
|
||||
// autoplay={{
|
||||
// delay: 2500,
|
||||
// disableOnInteraction: false,
|
||||
// }}
|
||||
style={{ backgroundColor: "#000" }}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<Box
|
||||
backgroundColor={"#000"}
|
||||
padding={"1.5rem"}
|
||||
height={"100dvh"}
|
||||
display={"grid"}
|
||||
alignContent={"center"}
|
||||
>
|
||||
{/* Subnet1 */}
|
||||
<Box>
|
||||
<Box>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"space-between"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
@@ -60,95 +48,127 @@ const MobileSubnet = () => {
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
>
|
||||
P2P
|
||||
decentralised Auto Syncing subnets
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem>Only L1 powering full mobile nodes</ListItem>
|
||||
<ListItem>
|
||||
Mobile nodes with full state data will settle P2P .
|
||||
Consensus provided by nearby node validators.
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
High scalability, Partition tolerance and portability
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
{/* <Image
|
||||
src={cube}
|
||||
width={"140px"}
|
||||
transform="translateY(-10%)"
|
||||
animation="floatAnimation 2s infinite alternate"
|
||||
sx={{
|
||||
"@keyframes floatAnimation": {
|
||||
"0%": {
|
||||
transform: "translateY(0)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(-20px)",
|
||||
},
|
||||
},
|
||||
}}
|
||||
/> */}
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"20px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
>
|
||||
Self Sovereign
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem>
|
||||
Permissioned subnets with no oracles and <br />{" "}
|
||||
intermediaries
|
||||
</ListItem>
|
||||
<ListItem>INo block space ransom</ListItem>
|
||||
<ListItem>
|
||||
Zero risk of transactions being blocked out of <br />
|
||||
chain.
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"20px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
>
|
||||
P2P
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem>Only L1 powering full mobile nodes</ListItem>
|
||||
<ListItem>
|
||||
Mobile nodes with full state data will settle P2P .
|
||||
Consensus provided by nearby node validators.
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
High scalability, Partition tolerance and portability
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"20px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
>
|
||||
Easier
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem>
|
||||
Leverage own infrastructure for block space
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Smart contracts in Rust , GoLang and C/C++
|
||||
</ListItem>
|
||||
<ListItem>WASM compiler for smooth code migration</ListItem>
|
||||
</UnorderedList>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"20px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
>
|
||||
Self Sovereign
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem>
|
||||
Permissioned subnets with no oracles and <br />{" "}
|
||||
intermediaries
|
||||
</ListItem>
|
||||
<ListItem>INo block space ransom</ListItem>
|
||||
<ListItem>
|
||||
Zero risk of transactions being blocked out of <br />
|
||||
chain.
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"20px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
>
|
||||
cheaper
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem>No GAS fees</ListItem>
|
||||
<ListItem>
|
||||
Incremental and modular infrastructure ask
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
No expensive re training of development <br />
|
||||
resources
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
<Box>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"20px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
>
|
||||
Easier
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem>
|
||||
Leverage own infrastructure for block space
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Smart contracts in Rust , GoLang and C/C++
|
||||
</ListItem>
|
||||
<ListItem>WASM compiler for smooth code migration</ListItem>
|
||||
</UnorderedList>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"20px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
>
|
||||
cheaper
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem>No GAS fees</ListItem>
|
||||
<ListItem>
|
||||
Incremental and modular infrastructure ask
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
No expensive re training of development <br />
|
||||
resources
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<SwiperSlide></SwiperSlide>
|
||||
<MobileSubnet2 />
|
||||
<SwiperSlide></SwiperSlide>
|
||||
<MobileSubnet3 />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<MobileSubnet2 />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<MobileSubnet3 />
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -4,7 +4,13 @@ import cube from "../../assets/images/cube.png";
|
||||
|
||||
const MobileSubnet2 = () => {
|
||||
return (
|
||||
<Box backgroundColor={"#000"} padding={"1.5rem"}>
|
||||
<Box
|
||||
backgroundColor={"#000"}
|
||||
padding={"1.5rem"}
|
||||
height={"100dvh"}
|
||||
display={"grid"}
|
||||
alignContent={"center"}
|
||||
>
|
||||
{/* Subnet1 */}
|
||||
<Box>
|
||||
<Box
|
||||
@@ -22,7 +28,7 @@ const MobileSubnet2 = () => {
|
||||
>
|
||||
With unmatched privacy and scalability
|
||||
</Text>
|
||||
<Image
|
||||
{/* <Image
|
||||
src={cube}
|
||||
width={"140px"}
|
||||
transform="translateY(-10%)"
|
||||
@@ -37,7 +43,7 @@ const MobileSubnet2 = () => {
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
/> */}
|
||||
</Box>
|
||||
<Box>
|
||||
<Box>
|
||||
|
||||
@@ -4,7 +4,14 @@ import stack from "../../assets/images/stacksmall.png";
|
||||
|
||||
const MobileSubnet3 = () => {
|
||||
return (
|
||||
<Box backgroundColor={"#000"} padding={"1.5rem"} paddingBottom={"4rem"}>
|
||||
<Box
|
||||
backgroundColor={"#000"}
|
||||
padding={"1.5rem"}
|
||||
paddingBottom={"4rem"}
|
||||
height={"100dvh"}
|
||||
display={"grid"}
|
||||
alignContent={"center"}
|
||||
>
|
||||
{/* Subnet1 */}
|
||||
<Box>
|
||||
<Box
|
||||
@@ -23,7 +30,7 @@ const MobileSubnet3 = () => {
|
||||
>
|
||||
All In One Composable Stack
|
||||
</Text>
|
||||
<Image
|
||||
{/* <Image
|
||||
src={stack}
|
||||
width={"140px"}
|
||||
transform="translateY(-10%)"
|
||||
@@ -39,7 +46,7 @@ const MobileSubnet3 = () => {
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
/> */}
|
||||
</Box>
|
||||
<Box>
|
||||
<Box>
|
||||
|
||||
@@ -5,7 +5,7 @@ import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/navigation";
|
||||
|
||||
import { Navigation, Pagination } from "swiper/modules";
|
||||
import { Navigation, Pagination, Autoplay } from "swiper/modules";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import MobileHomeCard from "../Card/MobileHomeCard";
|
||||
|
||||
@@ -55,8 +55,12 @@ const ResourcesMobile = () => {
|
||||
<Swiper
|
||||
pagination={true}
|
||||
navigation={true}
|
||||
modules={[Navigation, Pagination]}
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
loop={true}
|
||||
autoplay={{
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
>
|
||||
{content.map((item) => (
|
||||
<>
|
||||
|
||||
@@ -46,7 +46,7 @@ const NavBar = () => {
|
||||
position: "absolute",
|
||||
bottom: "0px",
|
||||
left: "50%",
|
||||
width: "130%",
|
||||
width: "100%",
|
||||
height: "3px",
|
||||
backgroundColor: "#DE858E",
|
||||
borderRadius: "10px",
|
||||
@@ -168,7 +168,7 @@ const NavBar = () => {
|
||||
|
||||
<Box
|
||||
display={"flex"}
|
||||
gap={"49px"}
|
||||
gap={"25px"}
|
||||
alignItems={"center"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
@@ -692,11 +692,24 @@ const NavBar = () => {
|
||||
</Popover>
|
||||
|
||||
<Link to="/" className="link" style={{ position: "relative" }}>
|
||||
FOUNDATION
|
||||
<Button
|
||||
backgroundColor={"transparent"}
|
||||
color={"#fff"}
|
||||
fontWeight={"400"}
|
||||
_hover={{
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
_focus={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
FOUNDATION
|
||||
</Button>
|
||||
<span
|
||||
style={location.pathname === "/" ? active : linkStyle}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/Contact"
|
||||
className="link"
|
||||
@@ -715,7 +728,19 @@ const NavBar = () => {
|
||||
arrowRight.style.transform = "none";
|
||||
}}
|
||||
>
|
||||
CONTACT US
|
||||
<Button
|
||||
backgroundColor={"transparent"}
|
||||
color={"#fff"}
|
||||
fontWeight={"400"}
|
||||
_hover={{
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
_focus={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
CONTACT US
|
||||
</Button>
|
||||
<span
|
||||
style={
|
||||
location.pathname === "/Contact" ? active : linkStyle
|
||||
|
||||
@@ -34,7 +34,7 @@ export const NewSubnetComp = () => {
|
||||
start: "top top",
|
||||
scrub: 1,
|
||||
pin: true,
|
||||
end: "bottom bottom-=100vh",
|
||||
end: "bottom bottom-=500vh",
|
||||
markers: false,
|
||||
},
|
||||
})
|
||||
@@ -95,7 +95,13 @@ export const NewSubnetComp = () => {
|
||||
display={"grid"}
|
||||
alignContent={"center"}
|
||||
>
|
||||
<Container maxW="container.xl" textAlign={"center"} height={"100vh"}>
|
||||
<Container
|
||||
maxW="container.xl"
|
||||
textAlign={"center"}
|
||||
height={"100vh"}
|
||||
display={"grid"}
|
||||
alignContent={"center"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import CommunityBanner from '../components/Community/CommunityBanner'
|
||||
import CommunityCard from '../components/Community/CommunityCard'
|
||||
import Place from '../components/Community/Place'
|
||||
import Connect from '../components/Community/Connect'
|
||||
import Happen from '../components/Community/Happen'
|
||||
import Insights from '../components/Community/Insights'
|
||||
import LearnMore from '../components/Community/LearnMore'
|
||||
import Footer from '../components/Footer/Footer'
|
||||
import MobileCommunityCard from '../components/MobileComponent/MobileCommunityCard'
|
||||
import CommunityBanner from "../components/Community/CommunityBanner";
|
||||
import CommunityCard from "../components/Community/CommunityCard";
|
||||
import Place from "../components/Community/Place";
|
||||
import Connect from "../components/Community/Connect";
|
||||
import Happen from "../components/Community/Happen";
|
||||
import Insights from "../components/Community/Insights";
|
||||
import LearnMore from "../components/Community/LearnMore";
|
||||
import Footer from "../components/Footer/Footer";
|
||||
import MobileCommunityCard from "../components/MobileComponent/MobileCommunityCard";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const Community = () => {
|
||||
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
||||
@@ -31,19 +31,18 @@ const Community = () => {
|
||||
|
||||
const isMobile = windowWidth <= 996;
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<CommunityBanner/>
|
||||
<CommunityBanner />
|
||||
{!isMobile ? <CommunityCard /> : <MobileCommunityCard />}
|
||||
<Place />
|
||||
<Connect/>
|
||||
<Connect />
|
||||
<Happen />
|
||||
<Insights/>
|
||||
<Insights />
|
||||
<LearnMore />
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Community
|
||||
export default Community;
|
||||
|
||||
31
src/pages/NotFound.jsx
Normal file
31
src/pages/NotFound.jsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Box, Heading } from "@chakra-ui/react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const NotFound = () => {
|
||||
return (
|
||||
<Box
|
||||
backgroundColor={"#101015"}
|
||||
height={"100vh"}
|
||||
display={"grid"}
|
||||
placeContent={"center"}
|
||||
textAlign={"center"}
|
||||
>
|
||||
<Heading
|
||||
as="h2"
|
||||
color={"#FFF"}
|
||||
fontFamily={"Mona Sans"}
|
||||
fontSize={"42px"}
|
||||
fontWeight={"500"}
|
||||
lineHeight={"150%"}
|
||||
marginBottom={"2rem"}
|
||||
>
|
||||
Page not Found!
|
||||
</Heading>
|
||||
<Link to="/" style={{ color: "#DE858E" }}>
|
||||
Click to return Home
|
||||
</Link>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFound;
|
||||
Reference in New Issue
Block a user