Siddhesh.More/rubix
1
0
Fork 0
mirror of https://github.com/WDI-Ideas/rubix.git synced 2026-04-28 01:35:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed NavBar hover

Browse Source
This commit is contained in:
rockyeverlast
2024-04-11 13:41:31 +05:30
parent 2914aeaf35
commit 7b92f70775
7 changed files with 198 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Card/LearnCard.jsx
View File

@@ -4,10 +4,7 @@ import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
const LearnCard = ({ id, src, alt, text }) => {
return (
<Box
padding={"1px"}
borderRadius={"10px"}
>
<Box padding={"1px"} borderRadius={"10px"}>
{/* {images.map((img) => (
<></>
))} */}
@@ -26,17 +23,18 @@ const LearnCard = ({ id, src, alt, text }) => {
},
}}
>
<Box padding={"1rem"} >
<Box padding={"1rem"}>
<Image height={"60px"} src={src} alt={alt} />
</Box>
<Box padding={"1rem"} height={"110px"}>
<Box padding={"1rem"}>
<Text
color={"#E8E8E8"}
fontSize={"18px"}
fontFamily={"Poppins"}
marginBottom={"20px"}
// fontWeight={"100"}
minHeight={"100px"}
>
{text}
</Text>

6
src/components/Card/MobileHomeCard.jsx
View File

@@ -29,7 +29,7 @@ const MobileHomeCard = ({ key, date, text }) => {
width={"502px"}
background={"#151419"}
borderRadius={"10px"}
minHeight={"455px !important"}
minHeight={"415px !important"}
key={key}
sx={{
"@media (max-width: 600px)": {
@@ -38,7 +38,7 @@ const MobileHomeCard = ({ key, date, text }) => {
},
}}
>
<Image src={cardimg} />
<Image src={cardimg} borderRadius={"10px"} />
<Box padding={"1rem"}>
<Badge
backgroundColor={"#565263"}
@@ -55,7 +55,7 @@ const MobileHomeCard = ({ key, date, text }) => {
</Text>
<Text
color={"#fff"}
fontSize={"24px"}
fontSize={"16px"}
marginBottom={"20px"}
minHeight={"73px"}
maxWidth={"460px"}

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

@@ -88,7 +88,7 @@ const LearnDev = () => {
</Container>
<Box
// maxW="container.xl"
paddingLeft={"7rem"}
paddingLeft={"6rem"}
paddingBottom={"2rem"}
// height={"50vh"}
sx={{

235
src/components/MobileComponent/MobileSubnet.jsx
View File

@@ -3,46 +3,26 @@ import cube from "../../assets/images/cube.png";
import MobileSubnet2 from "./MobileSubnet2";
import MobileSubnet3 from "./MobileSubnet3";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
const MobileSubnet = () => {
return (
<>
<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>
<SwiperSlide></SwiperSlide>
<Box backgroundColor={"#000"} padding={"1.5rem"}>
{/* Subnet1 */}
<Box>
<Box>
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
>
<Text
as={"h2"}
paddingTop={"2rem"}
@@ -51,86 +31,125 @@ 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>
<MobileSubnet2 />
<MobileSubnet3 />
<SwiperSlide></SwiperSlide>
<MobileSubnet2 />
<SwiperSlide></SwiperSlide>
<MobileSubnet3 />
</Swiper>
</>
);
};

4
src/components/MobileMenu/MobileMenu.jsx
View File

@@ -53,7 +53,7 @@ export const MobileMenu = () => {
return (
<>
<Box
{/* <Box
backgroundColor={"#141315"}
position={"fixed"}
zIndex={"9999"}
@@ -75,7 +75,7 @@ export const MobileMenu = () => {
EXPLORER
</Link>
</Box>
</Box>
</Box> */}
<Box
position={"fixed"}
top={"0px"}

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

@@ -30,6 +30,10 @@ import fintechIcon from "../../assets/images/Navicons/fintechIcon.png";
const NavBar = () => {
const [isScrolled, setIsScrolled] = useState(false);
const [isHoveredLearn, setIsHoveredLearn] = useState(false);
const [isHoveredBuild, setIsHoveredBuild] = useState(false);
const [isHoveredCases, setIsHoveredCases] = useState(false);
const [isHoveredCommunity, setIsHoveredCommunity] = useState(false);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const location = useLocation();
@@ -172,7 +176,10 @@ const NavBar = () => {
},
}}
>
<Popover>
<Popover
isOpen={isHoveredLearn}
onClose={() => setIsHoveredLearn(false)}
>
<PopoverTrigger>
<Button
backgroundColor={"transparent"}
@@ -181,6 +188,11 @@ const NavBar = () => {
_hover={{
backgroundColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredLearn(true)}
onMouseLeave={() => setIsHoveredLearn(false)}
>
LEARN
<span
@@ -197,6 +209,11 @@ const NavBar = () => {
borderRadius={"10px"}
border={"none"}
padding={"1rem"}
onMouseEnter={() => setIsHoveredLearn(true)}
onMouseLeave={() => setIsHoveredLearn(false)}
_focus={{
boxShadow: "none",
}}
>
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
<PopoverBody>
@@ -289,7 +306,10 @@ const NavBar = () => {
</PopoverContent>
</Popover>
<Popover>
<Popover
isOpen={isHoveredBuild}
onClose={() => setIsHoveredBuild(false)}
>
<PopoverTrigger>
<Button
backgroundColor={"transparent"}
@@ -298,6 +318,11 @@ const NavBar = () => {
_hover={{
backgroundColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredBuild(true)}
onMouseLeave={() => setIsHoveredBuild(false)}
>
BUILD
<span
@@ -314,6 +339,11 @@ const NavBar = () => {
borderRadius={"10px"}
border={"none"}
padding={"1rem"}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredBuild(true)}
onMouseLeave={() => setIsHoveredBuild(false)}
>
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
<PopoverBody>
@@ -406,7 +436,10 @@ const NavBar = () => {
</PopoverContent>
</Popover>
<Popover>
<Popover
isOpen={isHoveredCases}
onClose={() => setIsHoveredCases(false)}
>
<PopoverTrigger>
<Button
backgroundColor={"transparent"}
@@ -415,6 +448,11 @@ const NavBar = () => {
_hover={{
backgroundColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredCases(true)}
onMouseLeave={() => setIsHoveredCases(false)}
>
USE CASES
<span
@@ -429,6 +467,11 @@ const NavBar = () => {
borderRadius={"10px"}
border={"none"}
padding={"1rem"}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredCases(true)}
onMouseLeave={() => setIsHoveredCases(false)}
>
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
<PopoverBody>
@@ -519,7 +562,10 @@ const NavBar = () => {
</PopoverContent>
</Popover>
<Popover>
<Popover
isOpen={isHoveredCommunity}
onClose={() => setIsHoveredCommunity(false)}
>
<PopoverTrigger>
<Button
backgroundColor={"transparent"}
@@ -528,6 +574,11 @@ const NavBar = () => {
_hover={{
backgroundColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredCommunity(true)}
onMouseLeave={() => setIsHoveredCommunity(false)}
>
COMMUNITY
<span
@@ -545,6 +596,11 @@ const NavBar = () => {
borderRadius={"10px"}
border={"none"}
padding={"1rem"}
_focus={{
boxShadow: "none",
}}
onMouseEnter={() => setIsHoveredCommunity(true)}
onMouseLeave={() => setIsHoveredCommunity(false)}
>
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
<PopoverBody>

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

@@ -11,7 +11,7 @@ const theme = extendTheme({
body: {
// marginTop: { lg: "35px", md: "35px", base: "35px" },
boxSizing: "border-box",
// backGround: "#000",
backgroundColor: "#101015",
},
}),
},