mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 20:35:50 +00:00
Updated Home page and Footer implementation
This commit is contained in:
rockyeverlast
@@ -4,7 +4,6 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="preload" href="Mona-Sans.woff2" as="font" type="font/woff2" crossOrigin="anonymous">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React</title>
|
||||
</head>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
BIN
src/assets/images/CardImg.png
Normal file
BIN
src/assets/images/CardImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 463 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
79
src/components/Card/HomeCard.jsx
Normal file
79
src/components/Card/HomeCard.jsx
Normal file
@@ -0,0 +1,79 @@
|
||||
/* 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";
|
||||
|
||||
const HomeCard = () => {
|
||||
return (
|
||||
<Box
|
||||
backgroundImage={
|
||||
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
|
||||
}
|
||||
padding={"1px"}
|
||||
borderRadius={"10px"}
|
||||
>
|
||||
<Box width={"502px"} background={"#151419"} borderRadius={"10px"}>
|
||||
<Image src={cardimg} />
|
||||
<Box padding={"1rem"}>
|
||||
<Badge
|
||||
backgroundColor={"#565263"}
|
||||
color={"#fff"}
|
||||
fontWeight={"400"}
|
||||
borderRadius={"20px"}
|
||||
padding={"3px 16px"}
|
||||
>
|
||||
INSIGHT
|
||||
</Badge>
|
||||
|
||||
<Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}>
|
||||
Published: March 13, 2020
|
||||
</Text>
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontSize={"24px"}
|
||||
fontFamily={"Mona Sans"}
|
||||
marginBottom={"20px"}
|
||||
>
|
||||
Multichain over Blockchain — A reality check on security threat
|
||||
</Text>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
_hover={
|
||||
{
|
||||
// flexDirection: "column-reverse",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Box
|
||||
position={"relative"}
|
||||
width={"10%"}
|
||||
_before={{
|
||||
content: '""',
|
||||
width: "100%",
|
||||
position: "absolute",
|
||||
left: "0",
|
||||
borderBottom: "1px solid #DE858E",
|
||||
zIndex: "2",
|
||||
}}
|
||||
></Box>
|
||||
<Button
|
||||
position={"relative"}
|
||||
backgroundColor={"transparent"}
|
||||
color={"#fff"}
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
_hover={{
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
>
|
||||
Read More
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeCard;
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import "swiper/css";
|
||||
|
||||
const Carousel = () => {
|
||||
return (
|
||||
<Swiper spaceBetween={50} slidesPerView={3}>
|
||||
<SwiperSlide>Slide 1</SwiperSlide>
|
||||
<SwiperSlide>Slide 2</SwiperSlide>
|
||||
<SwiperSlide>Slide 3</SwiperSlide>
|
||||
<SwiperSlide>Slide 4</SwiperSlide>
|
||||
</Swiper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Carousel;
|
||||
72
src/components/Footer/Footer.jsx
Normal file
72
src/components/Footer/Footer.jsx
Normal file
@@ -0,0 +1,72 @@
|
||||
/* eslint-disable react/no-unescaped-entities */
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Flex,
|
||||
Image,
|
||||
Input,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
FormControl,
|
||||
FormLabel,
|
||||
FormErrorMessage,
|
||||
FormHelperText,
|
||||
} from "@chakra-ui/react";
|
||||
import logo from "../../assets/images/rubix.png";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<Box backgroundColor={"#101015"}>
|
||||
<Container maxW="container.xl" padding={"4rem"}>
|
||||
<Box paddingBottom={"2rem"}>
|
||||
<Image src={logo} width={"150px"} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Box marginBottom={"20px"}>
|
||||
<Text
|
||||
fontSize={"28px"}
|
||||
color={"#E9E9E9"}
|
||||
fontFamily={"Mona Sans"}
|
||||
fontWeight={"600"}
|
||||
>
|
||||
Stay up to date with Rubix
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text
|
||||
fontSize={"18px"}
|
||||
color={"#B0B0B0"}
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
Sign up for our newsletter and receive the <br /> latest updates.
|
||||
</Text>
|
||||
<Flex alignItems="center">
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
// value={}
|
||||
// onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
backgroundColor={"#DE858E"}
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
color={"#fff"}
|
||||
borderRadius={"0%"}
|
||||
// onClick={handleSubmit}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -1,5 +1,26 @@
|
||||
import { Box, Container, Text, Image } from "@chakra-ui/react";
|
||||
import client1 from "../../assets/images/client1.png";
|
||||
import chainx from "../../assets/images/chainx.png";
|
||||
import ensurity from "../../assets/images/ensurity.png";
|
||||
import exr from "../../assets/images/EXR.png";
|
||||
import finalo from "../../assets/images/Finaloeducation.png";
|
||||
import iskon from "../../assets/images/iskon.png";
|
||||
import jupiter from "../../assets/images/jupitermeta.png";
|
||||
import ondc from "../../assets/images/ondc.png";
|
||||
import smartcity from "../../assets/images/smartcity.png";
|
||||
import ymca from "../../assets/images/ymca.png";
|
||||
import bescom from "../../assets/images/bescom.png";
|
||||
|
||||
const imgWidth = {
|
||||
width: "230px",
|
||||
height: "82px",
|
||||
objectFit: "contain",
|
||||
filter: "grayscale(1)",
|
||||
transition: "0.5s",
|
||||
|
||||
_hover: {
|
||||
filter: "grayscale(0)",
|
||||
},
|
||||
};
|
||||
|
||||
const Client = () => {
|
||||
const Content = {
|
||||
@@ -25,22 +46,35 @@ const Client = () => {
|
||||
{Content.heading}
|
||||
</Text>
|
||||
<Container
|
||||
maxW="container.lg"
|
||||
maxW="container.xl"
|
||||
display={"grid"}
|
||||
placeContent={"center"}
|
||||
height={"50vh"}
|
||||
height={"65vh"}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
// justifyContent={"space-between"}
|
||||
alignItems={"center"}
|
||||
flexWrap={"wrap"}
|
||||
// flexWrap={"wrap"}
|
||||
marginBottom={"8rem"}
|
||||
>
|
||||
<Image src={client1} />
|
||||
<Image src={client1} />
|
||||
<Image src={client1} />
|
||||
<Image src={client1} />
|
||||
<Image src={client1} />
|
||||
<Image src={chainx} sx={imgWidth} />
|
||||
<Image src={jupiter} sx={imgWidth} />
|
||||
<Image src={finalo} sx={imgWidth} />
|
||||
<Image src={ymca} sx={imgWidth} />
|
||||
<Image src={ondc} sx={imgWidth} />
|
||||
</Box>
|
||||
<Box
|
||||
display={"flex"}
|
||||
// justifyContent={"space-between"}
|
||||
alignItems={"center"}
|
||||
// flexWrap={"wrap"}
|
||||
>
|
||||
<Image src={ensurity} sx={imgWidth} />
|
||||
<Image src={exr} sx={imgWidth} />
|
||||
<Image src={iskon} sx={imgWidth} />
|
||||
<Image src={smartcity} sx={imgWidth} />
|
||||
<Image src={bescom} sx={imgWidth} />
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
@@ -90,26 +90,6 @@ const HomeBanner = () => {
|
||||
border={"1px solid white"}
|
||||
borderRadius={"10px"}
|
||||
fontSize={"20px"}
|
||||
// sx={{
|
||||
// "::before": {
|
||||
// content: '""',
|
||||
// position: "absolute",
|
||||
// top: "50%",
|
||||
// left: "50%",
|
||||
// transform: "translate(-50%, -50%)",
|
||||
// width: "0",
|
||||
// height: "0",
|
||||
// borderRadius: "50%",
|
||||
// bgGradient:
|
||||
// "radial-gradient(circle, #d4dae0, #b7bccd, #a49db6, #987c99, #8e5c74)",
|
||||
// transition: "width 0.3s ease-in-out, height 0.3s ease-in-out",
|
||||
// },
|
||||
// "&:hover::before": {
|
||||
// width: "100%",
|
||||
// height: "100%",
|
||||
// zIndex: "-1",
|
||||
// },
|
||||
// }}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { Box, Container, Text, Image } from "@chakra-ui/react";
|
||||
/* eslint-disable no-unused-vars */
|
||||
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
|
||||
import HomeCard from "../Card/HomeCard";
|
||||
|
||||
const Content = {
|
||||
heading: `Resources and Latest Happenings`,
|
||||
@@ -7,7 +9,7 @@ const Content = {
|
||||
const Resources = () => {
|
||||
return (
|
||||
<Box
|
||||
height={"100vh"}
|
||||
// height={"100vh"}
|
||||
background={"#000"}
|
||||
backgroundSize={"cover"}
|
||||
backgroundRepeat={"no-repeat"}
|
||||
@@ -24,12 +26,52 @@ const Resources = () => {
|
||||
>
|
||||
{Content.heading}
|
||||
</Text>
|
||||
<Container
|
||||
maxW="container.lg"
|
||||
display={"grid"}
|
||||
placeContent={"center"}
|
||||
height={"50vh"}
|
||||
></Container>
|
||||
<Box
|
||||
paddingLeft={"7rem"}
|
||||
paddingBottom={"2rem"}
|
||||
// height={"50vh"}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"25px"}
|
||||
overflowX={"auto"}
|
||||
sx={{
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "0px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{Array.from({ length: 4 }).map((_, index) => (
|
||||
<HomeCard key={index} />
|
||||
))}
|
||||
</Box>
|
||||
<Box textAlign={"center"} marginTop={"4rem"}>
|
||||
<Button
|
||||
position={"relative"}
|
||||
backgroundColor={"transparent"}
|
||||
cursor={"pointer"}
|
||||
transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
|
||||
color={"#fff"}
|
||||
width={"227px"}
|
||||
height={"60px"}
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
border={"1px solid white"}
|
||||
borderRadius={"10px"}
|
||||
fontSize={"20px"}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #d4dae0, #b7bccd, #a49db6, #987c99, #8e5c74)",
|
||||
transition: "width 0.3s ease-in-out, height 0.3s ease-in-out",
|
||||
}}
|
||||
>
|
||||
View More
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { Global } from "@emotion/react";
|
||||
// import { Global } from "@emotion/react";
|
||||
|
||||
const Fonts = () => (
|
||||
<Global
|
||||
styles={`
|
||||
@font-face {
|
||||
font-family: 'Mona-Sans';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
src: url('../../assets/fonts/Mona-Sans-Regular.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
// const Fonts = () => (
|
||||
// <Global
|
||||
// styles={`
|
||||
// @font-face {
|
||||
// font-family: 'Mona Sans';
|
||||
// font-style: normal;
|
||||
// font-weight: normal;
|
||||
// font-display: swap;
|
||||
// src: url('../../assets/fonts/Mona-Sans.woff2') format('woff2');
|
||||
// unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
// }
|
||||
// `}
|
||||
// />
|
||||
// );
|
||||
|
||||
export default Fonts;
|
||||
// export default Fonts;
|
||||
|
||||
@@ -3,7 +3,7 @@ import "@fontsource/poppins";
|
||||
|
||||
const theme = extendTheme({
|
||||
fonts: {
|
||||
body: `'Mona-Sans', sans-serif`,
|
||||
body: `"Mona Sans", sans-serif`,
|
||||
p: `Poppins`,
|
||||
},
|
||||
styles: {
|
||||
|
||||
@@ -6,6 +6,6 @@
|
||||
font-stretch: 75% 125%;
|
||||
}
|
||||
|
||||
html {
|
||||
/* html {
|
||||
font-family: "Mona Sans";
|
||||
}
|
||||
} */
|
||||
|
||||
@@ -4,12 +4,12 @@ import App from "./App.jsx";
|
||||
import "./index.css";
|
||||
import { ChakraProvider } from "@chakra-ui/react";
|
||||
import theme from "./components/Theme/Theme.jsx";
|
||||
import Fonts from "./components/Theme/Fonts.jsx";
|
||||
// import Fonts from "./components/Theme/Fonts.jsx";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<ChakraProvider theme={theme}>
|
||||
<Fonts />
|
||||
{/* <Fonts /> */}
|
||||
<App />
|
||||
</ChakraProvider>
|
||||
</React.StrictMode>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import Footer from "../components/Footer/Footer";
|
||||
import Client from "../components/HomePage/Client";
|
||||
import HomeBanner from "../components/HomePage/HomeBanner";
|
||||
import Resources from "../components/HomePage/Resources";
|
||||
@@ -14,6 +15,7 @@ const HomePage = () => {
|
||||
<WhitePaper />
|
||||
<Client />
|
||||
<Resources />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user