mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 21:55:50 +00:00
Blogs api/ Community Banner api/ New api integration
This commit is contained in:
rockyeverlast
14
src/Redux/slice/blogsSlice.js
Normal file
14
src/Redux/slice/blogsSlice.js
Normal file
@@ -0,0 +1,14 @@
|
||||
// apiSlice.js
|
||||
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
|
||||
|
||||
export const blogApi = createApi({
|
||||
reducerPath: 'blog',
|
||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
|
||||
endpoints: (builder) => ({
|
||||
getBlog: builder.query({
|
||||
query: () => 'blog/active',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useGetBlogQuery } = blogApi;
|
||||
14
src/Redux/slice/communityBannerSlice.js
Normal file
14
src/Redux/slice/communityBannerSlice.js
Normal file
@@ -0,0 +1,14 @@
|
||||
// apiSlice.js
|
||||
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
|
||||
|
||||
export const communitiesBanner = createApi({
|
||||
reducerPath: 'communitiesBanner',
|
||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
|
||||
endpoints: (builder) => ({
|
||||
getCommunitiesBanner: builder.query({
|
||||
query: () => 'admin/main-community',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useGetCommunitiesBannerQuery } = communitiesBanner;
|
||||
@@ -3,10 +3,10 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
|
||||
|
||||
export const api = createApi({
|
||||
reducerPath: 'communities',
|
||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/admin/' }),
|
||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
|
||||
endpoints: (builder) => ({
|
||||
getCommunities: builder.query({
|
||||
query: () => 'community',
|
||||
query: () => 'community/active',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
13
src/Redux/slice/newsSlice.js
Normal file
13
src/Redux/slice/newsSlice.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
|
||||
|
||||
export const newsApi = createApi({
|
||||
reducerPath: 'news',
|
||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
|
||||
endpoints: (builder) => ({
|
||||
getNews: builder.query({
|
||||
query: () => 'admin/news',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useGetNewsQuery } = newsApi;
|
||||
@@ -1,12 +1,23 @@
|
||||
import { configureStore } from '@reduxjs/toolkit';
|
||||
import { api } from '../slice/communitySlice';
|
||||
import { blogApi } from '../slice/blogsSlice';
|
||||
import { communitiesBanner } from '../slice/communityBannerSlice';
|
||||
import { newsApi } from '../slice/newsSlice';
|
||||
|
||||
const store = configureStore({
|
||||
reducer: {
|
||||
[api.reducerPath]: api.reducer,
|
||||
[blogApi.reducerPath]: blogApi.reducer,
|
||||
[communitiesBanner.reducerPath]: communitiesBanner.reducer,
|
||||
[newsApi.reducerPath]: newsApi.reducer,
|
||||
},
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware().concat(api.middleware),
|
||||
getDefaultMiddleware().concat(
|
||||
api.middleware,
|
||||
blogApi.middleware,
|
||||
communitiesBanner.middleware,
|
||||
newsApi.middleware
|
||||
), // Add blogApi.middleware here
|
||||
});
|
||||
|
||||
export default store;
|
||||
|
||||
296
src/components/BlogPost/BlogPost.jsx
Normal file
296
src/components/BlogPost/BlogPost.jsx
Normal file
@@ -0,0 +1,296 @@
|
||||
/* eslint-disable react/jsx-key */
|
||||
/* eslint-disable no-unused-vars */
|
||||
import React, { useEffect } from "react";
|
||||
import { Box, Text, Image } from "@chakra-ui/react";
|
||||
import { Avatar, AvatarBadge, AvatarGroup } from "@chakra-ui/react";
|
||||
import Chip from "../Chip/Chip";
|
||||
import Footer from "../Footer/Footer";
|
||||
import { ChevronRightIcon } from "@chakra-ui/icons";
|
||||
import profile from "../../assets/images/profile.png";
|
||||
import x from "../../assets/images/x.png";
|
||||
import linked from "../../assets/images/linked.png";
|
||||
import github from "../../assets/images/github.png";
|
||||
import tele from "../../assets/images/tele.png";
|
||||
import reddit from "../../assets/images/reddit.png";
|
||||
import fb from "../../assets/images/fb.png";
|
||||
import { useGetBlogQuery } from "../../Redux/slice/blogsSlice";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import NotFound from "../../pages/NotFound";
|
||||
|
||||
const BlogPost = () => {
|
||||
const { title_slug } = useParams();
|
||||
const { data, error, isLoading } = useGetBlogQuery();
|
||||
const blogPosts = data?.data;
|
||||
console.log(blogPosts);
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
const matchingBlogPost = blogPosts
|
||||
? blogPosts.find((item) => item.title_slug === title_slug)
|
||||
: null;
|
||||
|
||||
console.log(matchingBlogPost);
|
||||
|
||||
return (
|
||||
<>
|
||||
{matchingBlogPost ? (
|
||||
<Box
|
||||
bg="#000000"
|
||||
height={"auto"}
|
||||
display={"flex"}
|
||||
gap={7}
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
flexDirection={"column"}
|
||||
color="white"
|
||||
key={matchingBlogPost.id}
|
||||
>
|
||||
<Box
|
||||
bg="#000000"
|
||||
minHeight={"50vh"}
|
||||
width={"70vw"}
|
||||
display={"flex"}
|
||||
gap={5}
|
||||
marginTop={10}
|
||||
justifyContent={"end"}
|
||||
alignItems={"center"}
|
||||
flexDirection={"column"}
|
||||
color="white"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
minHeight: "inherit",
|
||||
width: "100vw",
|
||||
marginTop: "6rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
textAlign={"center"}
|
||||
className="rubix-fw-600"
|
||||
fontSize={"40px"}
|
||||
fontFamily={"Mona Sans"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
lineHeight: "45px",
|
||||
padding: "0px 1rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{matchingBlogPost.title}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
textAlign={"center"}
|
||||
className="rubix-text-xsmall rubix-fw-500"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "35px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{matchingBlogPost.category.blog_category}
|
||||
{(function () {
|
||||
const createdAtDate = new Date(matchingBlogPost.createdAt);
|
||||
const formattedDate = createdAtDate.toLocaleDateString(
|
||||
"en-GB",
|
||||
{
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "2-digit",
|
||||
}
|
||||
);
|
||||
return (
|
||||
<Text
|
||||
as={"span"}
|
||||
textAlign={"center"}
|
||||
className="rubix-text-xsmall rubix-fw-500"
|
||||
marginLeft={"10px"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "35px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{formattedDate}
|
||||
</Text>
|
||||
);
|
||||
})()}
|
||||
</Text>
|
||||
|
||||
<Box display={"flex"} gap={3} textAlign={"center"}>
|
||||
<Avatar
|
||||
size="lg"
|
||||
name="Dan Abrahmov"
|
||||
src={`https://rubix.betadelivery.com/${matchingBlogPost.profile_image}`}
|
||||
/>
|
||||
|
||||
<Box
|
||||
textAlign={"start"}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
alignItems={"start"}
|
||||
justifyContent={"center"}
|
||||
className="rubix-text-xsmall rubix-fw-500"
|
||||
>
|
||||
<Text>{matchingBlogPost.author_name}</Text>
|
||||
<Text>{matchingBlogPost.author_designation}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
{/* ========[ Banner ]======= */}
|
||||
<Box
|
||||
height={"70vh"}
|
||||
width={"85vw"}
|
||||
backgroundImage={`url(https://rubix.betadelivery.com/${matchingBlogPost.content_image_large})`}
|
||||
backgroundRepeat={"no-repeat"}
|
||||
backgroundSize={"cover"}
|
||||
position="relative"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
height: "215px",
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
width="100%"
|
||||
height="100%"
|
||||
backgroundColor="rgba(0, 0, 0, 0.5)"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
bg="#000000"
|
||||
width={"85vw"}
|
||||
height={"auto"}
|
||||
display={"flex"}
|
||||
pb={"60px"}
|
||||
gap={5}
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
flexDirection={"column"}
|
||||
color="white"
|
||||
position={"relative"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
display: "block",
|
||||
top: "inherit",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
position={"absolute"}
|
||||
top={0}
|
||||
left={0}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
alignItems={"center"}
|
||||
gap={2}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
bottom: "0px",
|
||||
top: "inherit",
|
||||
display: "block",
|
||||
width: "100%",
|
||||
marginBottom: "20px",
|
||||
marginTop: "20px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
className="rubix-text-xsmall"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
marginBottom: "15px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Share
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "60%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Link to="https://t.me/rubixblockchain" target="_blank">
|
||||
<Image cursor={"pointer"} mb={4} w={6} h={6} src={tele} />
|
||||
</Link>
|
||||
<Link to="https://twitter.com/rubixchain" target="_blank">
|
||||
<Image cursor={"pointer"} mb={4} w={6} h={6} src={x} />
|
||||
</Link>
|
||||
<Link to="https://www.facebook.com/RubixChain" target="_blank">
|
||||
<Image cursor={"pointer"} mb={4} w={6} h={6} src={fb} />
|
||||
</Link>
|
||||
<Link
|
||||
to="https://www.linkedin.com/company/rubixnet/"
|
||||
target="_blank"
|
||||
>
|
||||
<Image cursor={"pointer"} mb={4} w={6} h={6} src={linked} />
|
||||
</Link>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
bg="#000000"
|
||||
width={"68vw"}
|
||||
height={"auto"}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
gap={5}
|
||||
justifyContent={"start"}
|
||||
color="white"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box display={"flex"} gap={5} justifyContent={"start"}>
|
||||
{matchingBlogPost.tags.map((tag, index) => (
|
||||
<Chip key={index} title={tag.tag} />
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
pt={5}
|
||||
pb={5}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
marginBottom: "3rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
pb={5}
|
||||
className="rubix-text-small"
|
||||
dangerouslySetInnerHTML={{ __html: matchingBlogPost.content }}
|
||||
/>
|
||||
{/* {matchingBlogPost.content}
|
||||
</Text> */}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<NotFound />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogPost;
|
||||
@@ -14,7 +14,8 @@ import linkedin from "../../assets/images/linkedin.png";
|
||||
import games from "../../assets/images/discot.png";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const CommCard = ({ id, imageUrl, name, jobTitle, description, link }) => {
|
||||
const CommCard = ({ id, img, name, designation, description, link }) => {
|
||||
console.log(img);
|
||||
const imgHeight = {
|
||||
minWidth: `214px`,
|
||||
height: "240px",
|
||||
@@ -46,7 +47,7 @@ const CommCard = ({ id, imageUrl, name, jobTitle, description, link }) => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Image src={imageUrl} style={imgHeight} />
|
||||
<Image src={img} style={imgHeight} />
|
||||
</Text>
|
||||
<Text
|
||||
position={"relative"}
|
||||
@@ -88,7 +89,7 @@ const CommCard = ({ id, imageUrl, name, jobTitle, description, link }) => {
|
||||
{name}
|
||||
</Text>
|
||||
<Text fontSize={"12px"} color={"#DEDEDE"} margin={"4px 0px"}>
|
||||
{jobTitle}
|
||||
{designation}
|
||||
</Text>
|
||||
<Text fontSize={"11px"} color={"#DEDEDE"} margin={"6px 0px"}>
|
||||
{description}
|
||||
|
||||
@@ -1,101 +1,142 @@
|
||||
/* eslint-disable react/jsx-key */
|
||||
/* eslint-disable react/prop-types */
|
||||
/* 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 { Link } from "react-router-dom";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useGetBlogQuery } from "../../Redux/slice/blogsSlice";
|
||||
|
||||
const HomeCard = ({ key, date, text, link }) => {
|
||||
return (
|
||||
<Box
|
||||
backgroundImage={
|
||||
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f85c), color-stop(0.67, #f8697a75))"
|
||||
}
|
||||
padding={"1px"}
|
||||
borderRadius={"8px"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "90%",
|
||||
margin: "0 auto",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
width={"420px"}
|
||||
background={"#151419"}
|
||||
borderRadius={"10px"}
|
||||
minHeight={"420px"}
|
||||
key={key}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100%",
|
||||
minHeight: "0",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Image src={cardimg} />
|
||||
<Box padding={"1rem"}>
|
||||
<Badge
|
||||
backgroundColor={"#565263"}
|
||||
color={"#fff"}
|
||||
fontWeight={"400"}
|
||||
borderRadius={"20px"}
|
||||
padding={"3px 16px"}
|
||||
>
|
||||
INSIGHT
|
||||
</Badge>
|
||||
const HomeCard = ({ cardkey, date, text, link }) => {
|
||||
const { title_slug } = useParams();
|
||||
const { data } = useGetBlogQuery();
|
||||
const blogCards = data?.data;
|
||||
|
||||
<Text fontSize={"12px"} color={"#979797"} margin={"20px 0px"}>
|
||||
{date}
|
||||
</Text>
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontSize={"20px"}
|
||||
marginBottom={"20px"}
|
||||
minHeight={"70px"}
|
||||
maxWidth={"460px"}
|
||||
>
|
||||
{text}
|
||||
</Text>
|
||||
const matchingBlogPost = blogCards
|
||||
? blogCards.find((item) => item.title_slug === title_slug)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{blogCards?.map((card) => (
|
||||
<Box
|
||||
backgroundImage={
|
||||
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f85c), color-stop(0.67, #f8697a75))"
|
||||
}
|
||||
padding={"1px"}
|
||||
borderRadius={"8px"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "90%",
|
||||
margin: "0 auto",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
_hover={
|
||||
{
|
||||
// flexDirection: "column-reverse",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Box
|
||||
position={"relative"}
|
||||
width={"10%"}
|
||||
_before={{
|
||||
content: '""',
|
||||
width={"420px"}
|
||||
background={"#151419"}
|
||||
borderRadius={"10px"}
|
||||
minHeight={"490px"}
|
||||
key={card.id}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100%",
|
||||
position: "absolute",
|
||||
left: "0",
|
||||
borderBottom: "1px solid #DE858E",
|
||||
zIndex: "2",
|
||||
}}
|
||||
></Box>
|
||||
<Link to={link}>
|
||||
<Button
|
||||
position={"relative"}
|
||||
backgroundColor={"transparent"}
|
||||
minHeight: "0",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
maxHeight={"250px"}
|
||||
width={"100%"}
|
||||
objectFit={"cover"}
|
||||
borderRadius={"10px"}
|
||||
objectPosition={"center"}
|
||||
src={`https://rubix.betadelivery.com/${card.content_image_large}`}
|
||||
/>
|
||||
<Box padding={"1rem"}>
|
||||
<Badge
|
||||
backgroundColor={"#565263"}
|
||||
color={"#fff"}
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
_hover={{
|
||||
backgroundColor: "transparent",
|
||||
borderRadius={"20px"}
|
||||
padding={"3px 16px"}
|
||||
>
|
||||
INSIGHT
|
||||
</Badge>
|
||||
|
||||
{(function () {
|
||||
const createdAtDate = new Date(card.createdAt);
|
||||
const formattedDate = createdAtDate.toLocaleDateString(
|
||||
"en-GB",
|
||||
{
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "2-digit",
|
||||
}
|
||||
);
|
||||
return (
|
||||
<Text fontSize={"12px"} color={"#979797"} margin={"20px 0px"}>
|
||||
{formattedDate}
|
||||
</Text>
|
||||
);
|
||||
})()}
|
||||
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontSize={"20px"}
|
||||
marginBottom={"20px"}
|
||||
minHeight={"50px"}
|
||||
maxWidth={"460px"}
|
||||
sx={{
|
||||
display: "-webkit-box",
|
||||
WebkitBoxOrient: "vertical",
|
||||
overflow: "hidden",
|
||||
WebkitLineClamp: 2,
|
||||
}}
|
||||
>
|
||||
Read More
|
||||
</Button>
|
||||
</Link>
|
||||
{card.meta_description}
|
||||
</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>
|
||||
<Link to={`/blogs/${card.title_slug}`}>
|
||||
<Button
|
||||
position={"relative"}
|
||||
backgroundColor={"transparent"}
|
||||
color={"#fff"}
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
_hover={{
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
>
|
||||
Read More
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
/* eslint-disable react/prop-types */
|
||||
/* eslint-disable react/no-unknown-property */
|
||||
import { Box, Button, Container, Text } from "@chakra-ui/react";
|
||||
import banner from "../../assets/images/communityBanner.webp";
|
||||
import { useGetCommunitiesBannerQuery } from "../../Redux/slice/communityBannerSlice";
|
||||
|
||||
const BannerContent = [
|
||||
{
|
||||
@@ -19,10 +21,20 @@ const BannerContent = [
|
||||
];
|
||||
|
||||
const CommunityBanner = ({ onClick }) => {
|
||||
const { data } = useGetCommunitiesBannerQuery();
|
||||
const content = data?.data.rows;
|
||||
// const loop = () => {
|
||||
// blogPosts.map((item) => {
|
||||
// console.log(item);
|
||||
// });
|
||||
// };
|
||||
// loop();
|
||||
console.log(content);
|
||||
|
||||
return (
|
||||
<Box
|
||||
height={"100vh"}
|
||||
backgroundImage={`url(${banner})`}
|
||||
backgroundImage={`url(https://rubix.betadelivery.com/${content?.[1]?.banner_image})`}
|
||||
backgroundRepeat={"no-repeat"}
|
||||
backgroundSize={"cover"}
|
||||
display={"grid"}
|
||||
@@ -53,7 +65,7 @@ const CommunityBanner = ({ onClick }) => {
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
width={"75%"}
|
||||
width={"100%"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
width: "100%",
|
||||
@@ -84,7 +96,7 @@ const CommunityBanner = ({ onClick }) => {
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
{BannerContent[0].heading1}
|
||||
{content?.[1]?.Heading}
|
||||
</span>
|
||||
<br
|
||||
sx={{
|
||||
@@ -94,7 +106,7 @@ const CommunityBanner = ({ onClick }) => {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{BannerContent[0].heading2}
|
||||
{/* {BannerContent[0].heading2} */}
|
||||
</Text>
|
||||
<Box
|
||||
marginTop={"1.5rem"}
|
||||
@@ -122,7 +134,7 @@ const CommunityBanner = ({ onClick }) => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
{BannerContent[1].subheading}
|
||||
{content?.[1]?.sub_heading}
|
||||
</Text>
|
||||
</Box>
|
||||
<Button
|
||||
@@ -181,7 +193,7 @@ const CommunityBanner = ({ onClick }) => {
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{BannerContent[2].btn}
|
||||
{content?.[1]?.CTO_button_title}
|
||||
</Button>
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
SimpleGrid,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import CommCard from "../Card/CommCard";
|
||||
import imgOne from "../../assets/images/Component115.png";
|
||||
import imgtwo from "../../assets/images/Component116.png";
|
||||
@@ -28,6 +28,7 @@ import imgtweleve from "../../assets/images/kiran.jpg";
|
||||
import { useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import { useGetCommunitiesQuery } from "../../Redux/slice/communitySlice";
|
||||
import Loader from "../Loader/Loader";
|
||||
|
||||
const individuals = [
|
||||
{
|
||||
@@ -129,78 +130,81 @@ const individuals = [
|
||||
];
|
||||
|
||||
const CommunityCard = () => {
|
||||
// const { data, error, isLoading } = useGetCommunitiesQuery();
|
||||
|
||||
useEffect(() => {
|
||||
// async function fetchData() {
|
||||
// try {
|
||||
// const response = await axios.get(
|
||||
// "https://rubix.betadelivery.com/api/admin/community"
|
||||
// );
|
||||
// console.log(response.data.data.rows);
|
||||
// } catch (error) {
|
||||
// // Handle errors
|
||||
// console.error("Error fetching data:", error.message);
|
||||
// }
|
||||
// }
|
||||
// // Call the fetchData function to initiate the request
|
||||
// fetchData();
|
||||
}, []);
|
||||
const { data, error, isLoading } = useGetCommunitiesQuery();
|
||||
const [state, setState] = useState();
|
||||
const profile = data?.data?.data;
|
||||
console.log(data?.data?.data);
|
||||
useEffect(() => {}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box backgroundColor={"#101015"}>
|
||||
<Container
|
||||
maxW={"1200px"}
|
||||
padding={"0rem"}
|
||||
paddingBottom={"6rem"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
padding: "3rem",
|
||||
},
|
||||
"@media (max-width: 435px)": {},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"4rem"}
|
||||
paddingBottom={"4rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"38px"}
|
||||
textAlign={"center"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
id="rubix-community"
|
||||
{isLoading ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<Box backgroundColor={"#101015"}>
|
||||
<Container
|
||||
maxW={"1200px"}
|
||||
padding={"0rem"}
|
||||
paddingBottom={"6rem"}
|
||||
sx={{
|
||||
"@media (max-width: 435px)": {
|
||||
fontSize: "35px",
|
||||
},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "28px",
|
||||
textAlign: "center",
|
||||
"@media (max-width: 1024px)": {
|
||||
padding: "3rem",
|
||||
},
|
||||
"@media (max-width: 435px)": {},
|
||||
}}
|
||||
>
|
||||
Rubix Community
|
||||
</Text>
|
||||
<SimpleGrid
|
||||
spacing={"50px"}
|
||||
templateColumns="repeat(auto-fill, minmax(230px, 1fr))"
|
||||
>
|
||||
{individuals.map((item) => (
|
||||
<CommCard
|
||||
key={item.id}
|
||||
location={item.location}
|
||||
name={item.name}
|
||||
jobTitle={item.jobTitle}
|
||||
description={item.description}
|
||||
imageUrl={item.imageUrl}
|
||||
link={item.link}
|
||||
/>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Container>
|
||||
</Box>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"4rem"}
|
||||
paddingBottom={"4rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"38px"}
|
||||
textAlign={"center"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
id="rubix-community"
|
||||
sx={{
|
||||
"@media (max-width: 435px)": {
|
||||
fontSize: "35px",
|
||||
},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "28px",
|
||||
textAlign: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Rubix Community
|
||||
</Text>
|
||||
<SimpleGrid
|
||||
spacing={"50px"}
|
||||
templateColumns="repeat(auto-fill, minmax(230px, 1fr))"
|
||||
>
|
||||
{/* {individuals.map((item) => (
|
||||
<CommCard
|
||||
key={item.id}
|
||||
location={item.location}
|
||||
name={item.name}
|
||||
jobTitle={item.jobTitle}
|
||||
description={item.description}
|
||||
imageUrl={item.imageUrl}
|
||||
link={item.link}
|
||||
item.profile_image
|
||||
/>
|
||||
))} */}
|
||||
{profile.map((item) => (
|
||||
<CommCard
|
||||
key={item.id}
|
||||
description={item.description}
|
||||
designation={item.designation}
|
||||
name={item.member_name}
|
||||
img={`https://rubix.betadelivery.com/${item.profile_image}`}
|
||||
link={item.linkedin}
|
||||
/>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Container>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -7,7 +7,7 @@ const EventDates = () => {
|
||||
<Box
|
||||
width={"20%"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
"@media (max-width: 768px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
@@ -20,15 +20,60 @@ const EventDates = () => {
|
||||
fontFamily={"Poppins"}
|
||||
marginBottom={"2rem"}
|
||||
minW={"300px"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
minWidth: "270px",
|
||||
},
|
||||
"@media (max-width: 768px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text mb={"20px"}>Details</Text>
|
||||
<Text display={"flex"} alignItems={"center"} mb={"20px"}>
|
||||
<Text
|
||||
mb={"20px"}
|
||||
sx={{
|
||||
"@media (max-width: 768px)": {
|
||||
textAlign: "center",
|
||||
fontWeight: "600",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Details
|
||||
</Text>
|
||||
<Text
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
mb={"20px"}
|
||||
sx={{
|
||||
"@media (max-width: 768px)": {
|
||||
justifyContent: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Image src={calendar} mr={"10px"} /> Friday, May 18 - 8.00 PM
|
||||
</Text>
|
||||
<Text display={"flex"} alignItems={"center"} mb={"20px"}>
|
||||
<Text
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
mb={"20px"}
|
||||
sx={{
|
||||
"@media (max-width: 768px)": {
|
||||
justifyContent: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Image src={calendar} mr={"10px"} /> Friday, May 18 - 8.00 PM
|
||||
</Text>
|
||||
<Text display={"flex"} alignItems={"center"} mb={"20px"}>
|
||||
<Text
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
mb={"20px"}
|
||||
sx={{
|
||||
"@media (max-width: 768px)": {
|
||||
justifyContent: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Image src={calendar} mr={"10px"} /> Friday, May 18 - 8.00 PM
|
||||
</Text>
|
||||
</Box>
|
||||
@@ -41,9 +86,36 @@ const EventDates = () => {
|
||||
fontFamily={"Poppins"}
|
||||
marginBottom={"2rem"}
|
||||
minW={"300px"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
minWidth: "270px",
|
||||
},
|
||||
"@media (max-width: 768px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text mb={"20px"}>Location</Text>
|
||||
<Text display={"flex"} alignItems={"center"} mb={"20px"}>
|
||||
<Text
|
||||
mb={"20px"}
|
||||
sx={{
|
||||
"@media (max-width: 768px)": {
|
||||
textAlign: "center",
|
||||
fontWeight: "600",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Location
|
||||
</Text>
|
||||
<Text
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
mb={"20px"}
|
||||
sx={{
|
||||
"@media (max-width: 768px)": {
|
||||
justifyContent: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Image src={pin} mr={"10px"} /> Anywhere 123, anycity
|
||||
</Text>
|
||||
</Box>
|
||||
@@ -55,15 +127,59 @@ const EventDates = () => {
|
||||
borderRadius={"5px"}
|
||||
fontFamily={"Poppins"}
|
||||
minW={"300px"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
minWidth: "270px",
|
||||
},
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text mb={"20px"}>Organizer</Text>
|
||||
<Text display={"flex"} alignItems={"center"} mb={"20px"}>
|
||||
<Text
|
||||
mb={"20px"}
|
||||
sx={{
|
||||
"@media (max-width: 768px)": {
|
||||
textAlign: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Organizer
|
||||
</Text>
|
||||
<Text
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
mb={"20px"}
|
||||
sx={{
|
||||
"@media (max-width: 768px)": {
|
||||
justifyContent: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Rubix Team
|
||||
</Text>
|
||||
<Text display={"flex"} alignItems={"center"} mb={"20px"}>
|
||||
<Text
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
mb={"20px"}
|
||||
sx={{
|
||||
"@media (max-width: 768px)": {
|
||||
justifyContent: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
+91 4578451245
|
||||
</Text>
|
||||
<Text display={"flex"} alignItems={"center"} mb={"20px"}>
|
||||
<Text
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
mb={"20px"}
|
||||
sx={{
|
||||
"@media (max-width: 768px)": {
|
||||
justifyContent: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
rubix@gmail.com
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
@@ -45,7 +45,10 @@ const EventsInternal = () => {
|
||||
flexDirection={"column"}
|
||||
color="white"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
"@media (max-width: 1024px)": {
|
||||
minHeight: "30vh",
|
||||
},
|
||||
"@media (max-width: 820px)": {
|
||||
minHeight: "inherit",
|
||||
width: "100vw",
|
||||
marginTop: "6rem",
|
||||
@@ -60,7 +63,7 @@ const EventsInternal = () => {
|
||||
fontFamily={"Mona Sans"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
"@media (max-width: 768px)": {
|
||||
fontSize: "28px",
|
||||
lineHeight: "45px",
|
||||
padding: "0px 1rem",
|
||||
@@ -71,7 +74,7 @@ const EventsInternal = () => {
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
"@media (max-width: 768px)": {
|
||||
padding: "0px 1rem",
|
||||
},
|
||||
}}
|
||||
@@ -87,7 +90,7 @@ const EventsInternal = () => {
|
||||
alignItems={"flex-start"}
|
||||
justifyContent={"center"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
"@media (max-width: 820px)": {
|
||||
flexDirection: "column",
|
||||
},
|
||||
}}
|
||||
@@ -95,7 +98,10 @@ const EventsInternal = () => {
|
||||
<Box
|
||||
width={"845px"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
"@media (max-width: 1024px)": {
|
||||
width: "610px",
|
||||
},
|
||||
"@media (max-width: 768px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
@@ -104,8 +110,12 @@ const EventsInternal = () => {
|
||||
pb={"2rem"}
|
||||
width={"815px"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
height: "215px",
|
||||
"@media (max-width: 1024px)": {
|
||||
height: "auto",
|
||||
width: "555px",
|
||||
},
|
||||
"@media (max-width: 768px)": {
|
||||
height: "auto",
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
@@ -119,7 +129,7 @@ const EventsInternal = () => {
|
||||
color="white"
|
||||
width={"94%"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
"@media (max-width: 768px)": {
|
||||
display: "block",
|
||||
top: "inherit",
|
||||
width: "100%",
|
||||
|
||||
@@ -271,7 +271,7 @@ const Footer = () => {
|
||||
}}
|
||||
>
|
||||
<UnorderedList
|
||||
listStyle={"none"}
|
||||
liststyle={"none"}
|
||||
listStyleType={"none"}
|
||||
color={"#B0B0B0"}
|
||||
fontFamily={"Poppins"}
|
||||
|
||||
@@ -2,51 +2,51 @@
|
||||
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
|
||||
import HomeCard from "../Card/HomeCard";
|
||||
|
||||
const content = [
|
||||
{
|
||||
id: 1,
|
||||
date: `Published: January 5, 2023`,
|
||||
text: `Bring your own BlockSpace`,
|
||||
link: `bring-your-own-blockspace`,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
date: `Published: January 28, 2022`,
|
||||
text: `Enterprise blockchains on a Public Chain!`,
|
||||
link: `enterprise-blockchains-on-a-public-chain`,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
date: `Published: December 30, 2021`,
|
||||
text: `Mining Rubix Tokens — What You Need To Know`,
|
||||
link: `mining-rubix-tokens-what-you-need-to-know`,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
date: `Published: March 11, 2022`,
|
||||
text: `Securing wallet to wallet transfers across the network: Rubix solved it differently`,
|
||||
link: `securing-wallet-to-wallet-transfers-across-the-network-rubix-solved-it-differently`,
|
||||
},
|
||||
// const content = [
|
||||
// {
|
||||
// id: 1,
|
||||
// date: `Published: January 5, 2023`,
|
||||
// text: `Bring your own BlockSpace`,
|
||||
// link: `bring-your-own-blockspace`,
|
||||
// },
|
||||
// {
|
||||
// id: 5,
|
||||
// date: `Published: January 28, 2022`,
|
||||
// text: `Enterprise blockchains on a Public Chain!`,
|
||||
// link: `enterprise-blockchains-on-a-public-chain`,
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// date: `Published: December 30, 2021`,
|
||||
// text: `Mining Rubix Tokens — What You Need To Know`,
|
||||
// link: `mining-rubix-tokens-what-you-need-to-know`,
|
||||
// },
|
||||
// {
|
||||
// id: 4,
|
||||
// date: `Published: March 11, 2022`,
|
||||
// text: `Securing wallet to wallet transfers across the network: Rubix solved it differently`,
|
||||
// link: `securing-wallet-to-wallet-transfers-across-the-network-rubix-solved-it-differently`,
|
||||
// },
|
||||
|
||||
{
|
||||
id: 6,
|
||||
date: `Published: January 12, 2022`,
|
||||
text: `Multichain over Blockchain — A reality check on security threat`,
|
||||
link: `multichain-over-blockchain-a-reality-check-on-security-threat`,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: `Published: December 30, 2021`,
|
||||
text: `Rubix: The Sustainable Blockchain Solution — a Green Initiative`,
|
||||
link: `rubix-the-sustainable-blockchain-solution-a-green-initiative`,
|
||||
},
|
||||
// {
|
||||
// id: 7,
|
||||
// date: `Published: January 12, 2022`,
|
||||
// text: `Enterprise blockchains on a Public Chain`,
|
||||
// link: `enterprise-blockchains-on-a-public-chain`,
|
||||
// },
|
||||
];
|
||||
// {
|
||||
// id: 6,
|
||||
// date: `Published: January 12, 2022`,
|
||||
// text: `Multichain over Blockchain — A reality check on security threat`,
|
||||
// link: `multichain-over-blockchain-a-reality-check-on-security-threat`,
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// date: `Published: December 30, 2021`,
|
||||
// text: `Rubix: The Sustainable Blockchain Solution — a Green Initiative`,
|
||||
// link: `rubix-the-sustainable-blockchain-solution-a-green-initiative`,
|
||||
// },
|
||||
// // {
|
||||
// // id: 7,
|
||||
// // date: `Published: January 12, 2022`,
|
||||
// // text: `Enterprise blockchains on a Public Chain`,
|
||||
// // link: `enterprise-blockchains-on-a-public-chain`,
|
||||
// // },
|
||||
// ];
|
||||
|
||||
const Content = {
|
||||
heading: `Rubix Insights`,
|
||||
@@ -101,14 +101,16 @@ const ResourcesPage = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
{content.map((item) => (
|
||||
{/* {content.map((item) => (
|
||||
<HomeCard
|
||||
key={item.id}
|
||||
cardkey={item.id}
|
||||
// date={item.date}
|
||||
text={item.text}
|
||||
link={item.link}
|
||||
/>
|
||||
))}
|
||||
))} */}
|
||||
<HomeCard />
|
||||
</Container>
|
||||
{/* <Box textAlign={"center"} marginTop={"4rem"}>
|
||||
<Button
|
||||
|
||||
24
src/components/Loader/Loader.jsx
Normal file
24
src/components/Loader/Loader.jsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import { Box, Spinner } from "@chakra-ui/react";
|
||||
|
||||
const Loader = () => {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
height={"100vh"}
|
||||
background={"#101015"}
|
||||
display={"grid"}
|
||||
placeContent={"center"}
|
||||
>
|
||||
<Spinner
|
||||
thickness="4px"
|
||||
speed="0.65s"
|
||||
emptyColor="gray.200"
|
||||
color="#DE858E"
|
||||
size="xl"
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Loader;
|
||||
@@ -215,7 +215,18 @@ const MobileCommunityCard = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Image src={item.imageUrl} style={imgHeight} />
|
||||
<Image
|
||||
src={item.imageUrl}
|
||||
sx={{
|
||||
"@media (max-width: 820px)": {
|
||||
height: "auto",
|
||||
minW: "auto",
|
||||
},
|
||||
"@media (max-width: 600px)": {
|
||||
style: { imgHeight },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Text>
|
||||
</Text>
|
||||
<Text
|
||||
|
||||
@@ -4,6 +4,7 @@ import cardimg from "../../assets/images/cardimg2.png";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useState } from "react";
|
||||
import Pagination from "../Pagination/Pagination";
|
||||
import { useGetNewsQuery } from "../../Redux/slice/newsSlice";
|
||||
|
||||
const contents = [
|
||||
{
|
||||
@@ -74,6 +75,10 @@ const contents = [
|
||||
];
|
||||
|
||||
const NewsContent = () => {
|
||||
const { data } = useGetNewsQuery();
|
||||
const newsCard = data?.data;
|
||||
console.log(newsCard);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 9;
|
||||
const totalPages = Math.ceil(contents.length / itemsPerPage);
|
||||
|
||||
10
src/pages/Blogs.jsx
Normal file
10
src/pages/Blogs.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import BlogPost from "../components/BlogPost/BlogPost";
|
||||
import Loader from "../components/Loader/Loader";
|
||||
import { useGetBlogQuery } from "../Redux/slice/blogsSlice";
|
||||
|
||||
const Blogs = () => {
|
||||
const { isLoading } = useGetBlogQuery();
|
||||
return <>{isLoading ? <Loader /> : <BlogPost />}</>;
|
||||
};
|
||||
|
||||
export default Blogs;
|
||||
@@ -12,12 +12,18 @@ import { NewSubnetComp } from "../components/SubnetsComponent";
|
||||
import Partner from "../components/HomePage/Partner";
|
||||
import PartnerMobile from "../components/MobileComponent/PartnerMobile";
|
||||
import ResourcesMobile from "../components/MobileComponent/ResourcesMobile";
|
||||
import Loader from "../components/Loader/Loader";
|
||||
//
|
||||
|
||||
// import { useBreakpointValue } from "@chakra-ui/react";
|
||||
|
||||
const HomePage = () => {
|
||||
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
setTimeout(() => {
|
||||
setLoading(true);
|
||||
}, 2000);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
@@ -38,14 +44,20 @@ const HomePage = () => {
|
||||
const isMobile = windowWidth <= 996;
|
||||
return (
|
||||
<>
|
||||
<HomeBanner />
|
||||
{/* <NewSubnetComp /> */}
|
||||
{!isMobile ? <NewSubnetComp /> : <MobileSubnet />}
|
||||
<Stats />
|
||||
<WhitePaper />
|
||||
{!isMobile ? <Partner /> : <PartnerMobile />}
|
||||
{/* <Client /> */}
|
||||
{!isMobile ? <Resources /> : <ResourcesMobile />}
|
||||
{loading ? (
|
||||
<>
|
||||
<HomeBanner />
|
||||
{/* <NewSubnetComp /> */}
|
||||
{!isMobile ? <NewSubnetComp /> : <MobileSubnet />}
|
||||
<Stats />
|
||||
<WhitePaper />
|
||||
{!isMobile ? <Partner /> : <PartnerMobile />}
|
||||
{/* <Client /> */}
|
||||
{!isMobile ? <Resources /> : <ResourcesMobile />}
|
||||
</>
|
||||
) : (
|
||||
<Loader />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -28,6 +28,8 @@ import Ecosystem from "../pages/Ecosystem";
|
||||
import Events from "../pages/Events";
|
||||
import NewsPage from "../pages/NewsPage";
|
||||
import EventsInternnal from "../pages/EventsInternnal";
|
||||
import Blogs from "../pages/Blogs";
|
||||
import BlogPost from "../components/BlogPost/BlogPost";
|
||||
|
||||
export const route = [
|
||||
{
|
||||
@@ -103,6 +105,14 @@ export const route = [
|
||||
path: "events-internal",
|
||||
element: <EventsInternnal />,
|
||||
},
|
||||
{
|
||||
path: "blogs/:title_slug",
|
||||
element: <Blogs />,
|
||||
},
|
||||
{
|
||||
path: ":title_slug",
|
||||
element: <BlogPost />,
|
||||
},
|
||||
{
|
||||
path: "*",
|
||||
element: <NotFound />,
|
||||
|
||||
Reference in New Issue
Block a user