mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 17:45:50 +00:00
stats updated with live api
This commit is contained in:
rockyeverlast
13
src/Redux/slice/NewsInternalSlice.js
Normal file
13
src/Redux/slice/NewsInternalSlice.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
|
||||
|
||||
export const newsInternalApi = createApi({
|
||||
reducerPath: 'newsInternal',
|
||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
|
||||
endpoints: (builder) => ({
|
||||
getNewsInternal: builder.query({
|
||||
query: () => 'news/active',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useGetNewsInternalQuery } = newsInternalApi;
|
||||
13
src/Redux/slice/ecosystemSlice.js
Normal file
13
src/Redux/slice/ecosystemSlice.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
|
||||
|
||||
export const ecoSystem = createApi({
|
||||
reducerPath: 'ecoSystem',
|
||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
|
||||
endpoints: (builder) => ({
|
||||
getEcoSystem: builder.query({
|
||||
query: () => 'eco/active',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useGetEcoSystemQuery } = ecoSystem;
|
||||
@@ -1,7 +1,7 @@
|
||||
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
|
||||
|
||||
export const homePageApi = createApi({
|
||||
reducerPath: 'events',
|
||||
reducerPath: 'homeSlice',
|
||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
|
||||
endpoints: (builder) => ({
|
||||
getHomePage: builder.query({
|
||||
|
||||
@@ -5,7 +5,7 @@ export const newsApi = createApi({
|
||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
|
||||
endpoints: (builder) => ({
|
||||
getNews: builder.query({
|
||||
query: ({ page, pageSize }) => `admin/news?page=${page}&pageSize=${pageSize}`,
|
||||
query: ({ page, pageSize }) => `news/active?page=${page}&pageSize=${pageSize}`,
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -5,9 +5,12 @@ export const resourcesApi = createApi({
|
||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
|
||||
endpoints: (builder) => ({
|
||||
getResources: builder.query({
|
||||
query: ({ page, pageSize }) => `admin/whitepaper?page=${page}&pageSize=${pageSize}`,
|
||||
query: ({ page, pageSize }) => `whitepaper/active?page=${page}&pageSize=${pageSize}`,
|
||||
}),
|
||||
getArticles: builder.query({
|
||||
query: ({ page, pageSize }) => `artical/active?page=${page}&pageSize=${pageSize}`,
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useGetResourcesQuery } = resourcesApi;
|
||||
export const { useGetResourcesQuery, useGetArticlesQuery } = resourcesApi;
|
||||
16
src/Redux/slice/statsSlice.js
Normal file
16
src/Redux/slice/statsSlice.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
|
||||
|
||||
export const statsApi = createApi({
|
||||
reducerPath: 'statsApi',
|
||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix-explorer-api.azurewebsites.net/api/' }),
|
||||
endpoints: (builder) => ({
|
||||
getStatsApi: builder.query({
|
||||
query: () => 'Explorer/totalsupply',
|
||||
}),
|
||||
getStatApi: builder.query({
|
||||
query: () => 'Explorer/Cards',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useGetStatsApiQuery, useGetStatApiQuery } = statsApi;
|
||||
@@ -10,6 +10,9 @@ import { learnPageApi } from '../slice/learPageSlice';
|
||||
import { homePageApi } from '../slice/homeSlice';
|
||||
import { eventsViewApi } from '../slice/eventsViewSlice';
|
||||
import { useCaseApi } from '../slice/useCaseSlice';
|
||||
import { newsInternalApi } from '../slice/NewsInternalSlice';
|
||||
import { ecoSystem } from '../slice/ecosystemSlice';
|
||||
import { statsApi } from '../slice/statsSlice';
|
||||
|
||||
const store = configureStore({
|
||||
reducer: {
|
||||
@@ -24,6 +27,9 @@ const store = configureStore({
|
||||
[homePageApi.reducerPath]: homePageApi.reducer,
|
||||
[eventsViewApi.reducerPath]: eventsViewApi.reducer,
|
||||
[useCaseApi.reducerPath]: useCaseApi.reducer,
|
||||
[newsInternalApi.reducerPath]: newsInternalApi.reducer,
|
||||
[ecoSystem.reducerPath]: ecoSystem.reducer,
|
||||
[statsApi.reducerPath]: statsApi.reducer,
|
||||
},
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware().concat(
|
||||
@@ -38,6 +44,9 @@ const store = configureStore({
|
||||
homePageApi.middleware,
|
||||
eventsViewApi.middleware,
|
||||
useCaseApi.middleware,
|
||||
newsInternalApi.middleware,
|
||||
ecoSystem.middleware,
|
||||
statsApi.middleware,
|
||||
), // Add blogApi.middleware here
|
||||
});
|
||||
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import { Box, Button, Container, Text } from "@chakra-ui/react";
|
||||
import banner from "../../assets/images/EcoBanner.png";
|
||||
import { Link } from "react-router-dom";
|
||||
import Loader from "../Loader/Loader";
|
||||
import { useGetEcoSystemQuery } from "../../Redux/slice/ecosystemSlice";
|
||||
|
||||
const BannerContent = [
|
||||
{
|
||||
@@ -17,168 +20,169 @@ const BannerContent = [
|
||||
];
|
||||
|
||||
const EcoBanner = () => {
|
||||
const { data, isLoading, error } = useGetEcoSystemQuery();
|
||||
const dataHeader = data?.data?.data;
|
||||
console.log(dataHeader);
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Box
|
||||
height={"100vh"}
|
||||
backgroundImage={`url(${banner})`}
|
||||
backgroundRepeat={"no-repeat"}
|
||||
backgroundSize={"cover"}
|
||||
display={"grid"}
|
||||
placeContent={"center"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
height: "70vh",
|
||||
},
|
||||
"@media (max-width: 600px)": {
|
||||
height: "85vh",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Container
|
||||
alignItems={"center"}
|
||||
display={"flex"}
|
||||
height={"100vh"}
|
||||
alignContent={"center"}
|
||||
paddingTop={"10%"}
|
||||
maxW="container.xl"
|
||||
textAlign={"left"}
|
||||
marginTop={"2rem"}
|
||||
paddingLeft={"3.5rem"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
|
||||
},
|
||||
}}
|
||||
>
|
||||
<>
|
||||
{dataHeader?.map((item) => (
|
||||
<Box
|
||||
width={"78%"}
|
||||
key={item.id}
|
||||
height={"100vh"}
|
||||
backgroundImage={`url(https://rubix.betadelivery.com/${item.banner_image})`}
|
||||
backgroundRepeat={"no-repeat"}
|
||||
backgroundSize={"cover"}
|
||||
display={"grid"}
|
||||
placeContent={"center"}
|
||||
sx={{
|
||||
"@media (max-width: 435px)": {
|
||||
width: "100%",
|
||||
"@media (max-width: 1024px)": {
|
||||
height: "70vh",
|
||||
},
|
||||
"@media (max-width: 600px)": {
|
||||
height: "85vh",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontWeight={700}
|
||||
fontSize={"52px"}
|
||||
textTransform={"Capitalize"}
|
||||
color={"#DE858E"}
|
||||
lineHeight={"62px"}
|
||||
letterSpacing={"1px"}
|
||||
<Container
|
||||
alignItems={"center"}
|
||||
display={"flex"}
|
||||
height={"100vh"}
|
||||
alignContent={"center"}
|
||||
paddingTop={"10%"}
|
||||
maxW="container.xl"
|
||||
textAlign={"left"}
|
||||
marginTop={"2rem"}
|
||||
paddingLeft={"3.5rem"}
|
||||
sx={{
|
||||
"@media (max-width: 996px)": {
|
||||
fontSize: "46px",
|
||||
},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "40px",
|
||||
marginBottom: "0rem",
|
||||
lineHeight: "54px",
|
||||
"@media (max-width: 500px)": {
|
||||
paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
|
||||
},
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
{BannerContent[0].head}
|
||||
</span>
|
||||
{BannerContent[0].heading1} <br />
|
||||
<span
|
||||
style={{
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
{BannerContent[0].heading2}
|
||||
</span>
|
||||
</Text>
|
||||
<Box marginTop={"10px"} width={"80%"}>
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontSize={"20px"}
|
||||
fontWeight={"400"}
|
||||
lineHeight={"37.5px"}
|
||||
fontFamily={"Poppins"}
|
||||
<Box
|
||||
width={"78%"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
fontSize: "22px",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "16px",
|
||||
lineHeight: "28px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{BannerContent[1].subheading}
|
||||
</Text>
|
||||
</Box>
|
||||
<Link
|
||||
to="https://learn.rubix.net/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button
|
||||
position={"relative"}
|
||||
backgroundColor={"transparent"}
|
||||
cursor={"pointer"}
|
||||
transition="0.3s ease-in-out"
|
||||
color={"#fff"}
|
||||
width={"216px"}
|
||||
marginTop={"2rem"}
|
||||
height={"56px"}
|
||||
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": {
|
||||
"@media (max-width: 435px)": {
|
||||
width: "100%",
|
||||
height: "120%",
|
||||
borderRadius: "0px",
|
||||
opacity: "1",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "14px",
|
||||
width: "230px",
|
||||
height: "44px",
|
||||
marginTop: "2rem",
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
color: "#000",
|
||||
fontWeight: "600",
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "1px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{BannerContent[2].btn}
|
||||
</Button>
|
||||
</Link>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontWeight={700}
|
||||
fontSize={"52px"}
|
||||
textTransform={"Capitalize"}
|
||||
color={"#DE858E"}
|
||||
lineHeight={"62px"}
|
||||
letterSpacing={"1px"}
|
||||
sx={{
|
||||
"@media (max-width: 996px)": {
|
||||
fontSize: "46px",
|
||||
},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "40px",
|
||||
marginBottom: "0rem",
|
||||
lineHeight: "54px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{item.Heading}
|
||||
</Text>
|
||||
<Box marginTop={"10px"} width={"80%"}>
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontSize={"20px"}
|
||||
fontWeight={"400"}
|
||||
lineHeight={"37.5px"}
|
||||
fontFamily={"Poppins"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
fontSize: "22px",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "16px",
|
||||
lineHeight: "28px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{item.sub_heading}
|
||||
</Text>
|
||||
</Box>
|
||||
<Link
|
||||
to={item.CTO_button_link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button
|
||||
position={"relative"}
|
||||
backgroundColor={"transparent"}
|
||||
cursor={"pointer"}
|
||||
transition="0.3s ease-in-out"
|
||||
color={"#fff"}
|
||||
width={"216px"}
|
||||
marginTop={"2rem"}
|
||||
height={"56px"}
|
||||
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",
|
||||
width: "230px",
|
||||
height: "44px",
|
||||
marginTop: "2rem",
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
color: "#000",
|
||||
fontWeight: "600",
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "1px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{item.CTO_button_title}
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -3,12 +3,15 @@ import { useInView } from "react-intersection-observer";
|
||||
import CountUp from "react-countup";
|
||||
import banner from "../../assets/images/Statsbanner.png";
|
||||
import { useMediaQuery } from "@chakra-ui/react";
|
||||
import { useGetStatsApiQuery } from "../../Redux/slice/statsSlice";
|
||||
|
||||
const StatsContent = {
|
||||
heading: `Key Statistics`,
|
||||
};
|
||||
|
||||
const Stats = () => {
|
||||
const { data, isLoading, error } = useGetStatsApiQuery();
|
||||
console.log(data);
|
||||
const [isSmallScreen] = useMediaQuery("(max-width: 435px)");
|
||||
const { ref, inView } = useInView({
|
||||
threshold: 0.5,
|
||||
|
||||
@@ -325,7 +325,6 @@ const NavBar = () => {
|
||||
</PopoverBody>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<Popover
|
||||
isOpen={isHoveredBuild}
|
||||
onClose={() => setIsHoveredBuild(false)}
|
||||
@@ -461,7 +460,6 @@ const NavBar = () => {
|
||||
</PopoverBody>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<Popover
|
||||
isOpen={isHoveredCases}
|
||||
onClose={() => setIsHoveredCases(false)}
|
||||
@@ -658,7 +656,6 @@ const NavBar = () => {
|
||||
</PopoverBody> */}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{/* <Link
|
||||
to="/community"
|
||||
className="link"
|
||||
@@ -814,6 +811,28 @@ const NavBar = () => {
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
|
||||
<PopoverBody>
|
||||
<Link
|
||||
to="/ecosystem"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/ecosystem"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={subnetsIcon} width={`${iconwidth}`} />
|
||||
EcoSystem
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
@@ -835,7 +854,6 @@ const NavBar = () => {
|
||||
style={location.pathname === "/" ? active : linkStyle}
|
||||
/>
|
||||
</Link> */}
|
||||
|
||||
<Link
|
||||
to="/Contact"
|
||||
className="link"
|
||||
|
||||
286
src/components/NewsInternal/NewsInternalPage.jsx
Normal file
286
src/components/NewsInternal/NewsInternalPage.jsx
Normal file
@@ -0,0 +1,286 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import React, { useEffect } from "react";
|
||||
import NotFound from "../../pages/NotFound";
|
||||
import { Avatar, Box, Image, Text, Textarea } from "@chakra-ui/react";
|
||||
import x from "../../assets/images/x.png";
|
||||
import linked from "../../assets/images/linked.png";
|
||||
import tele from "../../assets/images/tele.png";
|
||||
import fb from "../../assets/images/fb.png";
|
||||
import Chip from "../Chip/Chip";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import Loader from "../Loader/Loader";
|
||||
import { useGetNewsInternalQuery } from "../../Redux/slice/NewsInternalSlice";
|
||||
|
||||
const NewsInternalPage = () => {
|
||||
const { title_slug } = useParams();
|
||||
const { data, error, isLoading } = useGetNewsInternalQuery();
|
||||
const newsPosts = data?.data?.data?.rows;
|
||||
console.log(data?.data?.data?.rows);
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const matchingNewsPost = newsPosts
|
||||
? newsPosts.find((item) => item.title_slug === title_slug)
|
||||
: null;
|
||||
|
||||
console.log(matchingNewsPost);
|
||||
return (
|
||||
<>
|
||||
{matchingNewsPost ? (
|
||||
<Box
|
||||
bg="#000000"
|
||||
height={"auto"}
|
||||
display={"flex"}
|
||||
gap={7}
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
flexDirection={"column"}
|
||||
color="white"
|
||||
key={matchingNewsPost.id}
|
||||
sx={{}}
|
||||
>
|
||||
<Box
|
||||
bg="#000000"
|
||||
minHeight={"60vh"}
|
||||
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",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{matchingNewsPost.title}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
textAlign={"center"}
|
||||
className="rubix-text-xsmall rubix-fw-500"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "35px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(function () {
|
||||
const createdAtDate = new Date(matchingNewsPost.createdAt);
|
||||
const formattedDate = createdAtDate
|
||||
.toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "2-digit",
|
||||
})
|
||||
.replace(/\//g, "-");
|
||||
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/${matchingNewsPost.profile_image}`}
|
||||
/>
|
||||
|
||||
<Box
|
||||
textAlign={"start"}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
alignItems={"start"}
|
||||
justifyContent={"center"}
|
||||
className="rubix-text-xsmall rubix-fw-500"
|
||||
>
|
||||
<Text>{matchingNewsPost.author_name}</Text>
|
||||
<Text>{matchingNewsPost.author_designation}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
{/* ========[ Banner ]======= */}
|
||||
<Box
|
||||
height={"70vh"}
|
||||
width={"85vw"}
|
||||
backgroundImage={`url(https://rubix.betadelivery.com/${matchingNewsPost.banner_image})`}
|
||||
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"}
|
||||
paddingBottom={"5rem"}
|
||||
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
|
||||
pt={5}
|
||||
pb={5}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
marginBottom: "3rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
pb={5}
|
||||
className="rubix-text-small"
|
||||
dangerouslySetInnerHTML={{ __html: matchingNewsPost.content }}
|
||||
/>
|
||||
{/* <Text>{matchingNewsPost.content}</Text> */}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<NotFound />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsInternalPage;
|
||||
@@ -100,9 +100,9 @@ const NewsContent = () => {
|
||||
|
||||
const totalItems = data?.data?.totalItems;
|
||||
const totalPages = data?.data?.totalPages;
|
||||
const newsCard = data?.data?.rows;
|
||||
const newsCard = data?.data?.data?.rows;
|
||||
|
||||
console.log(data?.data?.totalPages);
|
||||
console.log(data?.data?.data?.rows);
|
||||
|
||||
if (!newsCard) {
|
||||
return (
|
||||
@@ -144,7 +144,7 @@ const NewsContent = () => {
|
||||
>
|
||||
{newsCard?.map((content) => (
|
||||
<>
|
||||
<Link>
|
||||
<Link to={`/news/${content.title_slug}`}>
|
||||
<Box
|
||||
key={content.id}
|
||||
width={"340px"}
|
||||
|
||||
@@ -4,7 +4,16 @@ import pic from "../../../assets/images/eventsPic.png";
|
||||
const TabsArticles = () => {
|
||||
return (
|
||||
<>
|
||||
<Box backgroundColor={"#151515"} padding={"2rem"} borderRadius={"5px"}>
|
||||
<Box
|
||||
backgroundColor={"#151515"}
|
||||
padding={"2rem"}
|
||||
borderRadius={"5px"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
padding: "2rem 1rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text paddingBottom={"1rem"}>Newest Post</Text>
|
||||
<Box
|
||||
display={"flex"}
|
||||
|
||||
@@ -1,54 +1,134 @@
|
||||
import { Badge, Box, Image, Text } from "@chakra-ui/react";
|
||||
import pic from "../../../assets/images/eventsPic.png";
|
||||
import pic1 from "../../../assets/images/eventsPic.png";
|
||||
import pic2 from "../../../assets/images/BuildBanner.webp";
|
||||
import pic3 from "../../../assets/images/learnBanner.webp";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
// Import Swiper styles
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/navigation";
|
||||
|
||||
import { Navigation, Pagination, Autoplay } from "swiper/modules";
|
||||
|
||||
const videoTab = [
|
||||
{
|
||||
id: 1,
|
||||
badge: `Video, 27 mins`,
|
||||
title: `The Proofchain Technical Whitepaper`,
|
||||
descript: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et
|
||||
massa mi. Aliquam in hendrerit urna. Pellentesque sit amet
|
||||
sapien fringilla, mattis ligula consectetur, ultrices mauris.
|
||||
Maecenas vitae,Aliquam in hendrerit urna. Pellentesque sit amet
|
||||
sapien fringilla, mattis ligula consectetur, ultrices mauris.
|
||||
Maecenas vitae,Aliquam in hendrerit urna. Pellentesque sit amet
|
||||
sapien fringilla, mattis ligula consectetur, ultrices mauris.
|
||||
Maecenas vitae`,
|
||||
thumbnail: pic1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
badge: `Video, 27 mins`,
|
||||
title: `The Proofchain Technical Whitepaper`,
|
||||
descript: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et
|
||||
massa mi. Aliquam in hendrerit urna. Pellentesque sit amet
|
||||
sapien fringilla, mattis ligula consectetur, ultrices mauris.
|
||||
Maecenas vitae,Aliquam in hendrerit urna. Pellentesque sit amet
|
||||
sapien fringilla, mattis ligula consectetur, ultrices mauris.
|
||||
Maecenas vitae,Aliquam in hendrerit urna. Pellentesque sit amet
|
||||
sapien fringilla, mattis ligula consectetur, ultrices mauris.
|
||||
Maecenas vitae`,
|
||||
thumbnail: pic2,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
badge: `Video, 27 mins`,
|
||||
title: `The Proofchain Technical Whitepaper`,
|
||||
descript: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et
|
||||
massa mi. Aliquam in hendrerit urna. Pellentesque sit amet
|
||||
sapien fringilla, mattis ligula consectetur, ultrices mauris.
|
||||
Maecenas vitae,Aliquam in hendrerit urna. Pellentesque sit amet
|
||||
sapien fringilla, mattis ligula consectetur, ultrices mauris.
|
||||
Maecenas vitae,Aliquam in hendrerit urna. Pellentesque sit amet
|
||||
sapien fringilla, mattis ligula consectetur, ultrices mauris.
|
||||
Maecenas vitae`,
|
||||
thumbnail: pic3,
|
||||
},
|
||||
];
|
||||
|
||||
const TabsVideo = () => {
|
||||
return (
|
||||
<Box backgroundColor={"#151515"} padding={"2rem"} borderRadius={"5px"}>
|
||||
<Box
|
||||
backgroundColor={"#151515"}
|
||||
padding={"2rem"}
|
||||
borderRadius={"5px"}
|
||||
className="tabspagination"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
padding: "2rem 1rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text paddingBottom={"1rem"}>Newest Post</Text>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"start"}
|
||||
gap={"2rem"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
flexDirection: "column",
|
||||
},
|
||||
<Swiper
|
||||
pagination={true}
|
||||
navigation={true}
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
autoplay={{
|
||||
delay: 10000,
|
||||
disableOnInteraction: true,
|
||||
}}
|
||||
loop={true}
|
||||
>
|
||||
<Box>
|
||||
<Image src={pic} />
|
||||
</Box>
|
||||
<Box flex={"1"}>
|
||||
<Badge
|
||||
backgroundColor={"transparent"}
|
||||
color={"#fff"}
|
||||
fontWeight={"500"}
|
||||
fontFamily={"Poppins"}
|
||||
fontSize={"14px"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
News & Article
|
||||
</Badge>
|
||||
<Text
|
||||
as={"h2"}
|
||||
className="rubix-text-subheading"
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
The Proofchain Technical Whitepaper
|
||||
</Text>
|
||||
<Text className="rubix-text-small">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa
|
||||
mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien
|
||||
fringilla, mattis ligula consectetur, ultrices mauris. Maecenas
|
||||
vitae,Aliquam in hendrerit urna. Pellentesque sit amet sapien
|
||||
fringilla, mattis ligula consectetur, ultrices mauris. Maecenas
|
||||
vitae,Aliquam in hendrerit urna. Pellentesque sit amet sapien
|
||||
fringilla, mattis ligula consectetur, ultrices mauris. Maecenas
|
||||
vitae
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
{videoTab.map((item) => (
|
||||
<SwiperSlide key={item.id}>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"start"}
|
||||
justifyContent={"start"}
|
||||
gap={"2rem"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
flexDirection: "column",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Image
|
||||
src={item.thumbnail}
|
||||
maxW={"418px"}
|
||||
minH={"280px"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
maxW: "100%",
|
||||
minH: "auto",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box flex={"1"}>
|
||||
<Badge
|
||||
backgroundColor={"transparent"}
|
||||
color={"#fff"}
|
||||
fontWeight={"500"}
|
||||
fontFamily={"Poppins"}
|
||||
fontSize={"14px"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
{item.badge}
|
||||
</Badge>
|
||||
<Text
|
||||
as={"h2"}
|
||||
className="rubix-text-subheading"
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text className="rubix-text-small">{item.descript}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -177,7 +177,33 @@ span.swiper-pagination-bullet {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tabspagination .swiper-pagination {
|
||||
top: 94% !important;
|
||||
}
|
||||
|
||||
.tabspagination .swiper-button-prev:after,
|
||||
.swiper-button-next:after {
|
||||
font-weight: bolder;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.tabspagination .swiper-button-next {
|
||||
left: 98%;
|
||||
}
|
||||
|
||||
.tabspagination .swiper-button-prev {
|
||||
right: 98%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.tabspagination .swiper-button-prev,
|
||||
.tabspagination .swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
.tabspagination .swiper-pagination {
|
||||
top: 98% !important;
|
||||
}
|
||||
|
||||
.swiper-button-prev:after,
|
||||
.swiper-button-next:after {
|
||||
font-size: 30px;
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
import EcoBanner from "../components/EcoPage/EcoBanner";
|
||||
import EnterPrises from "../components/EcoPage/EnterPrises";
|
||||
import LearnMore from "../components/Community/LearnMore";
|
||||
import LearnDev from "../components/LearnPage/LearnDev";
|
||||
|
||||
const Ecosystem = () => {
|
||||
return (
|
||||
<div>
|
||||
<EcoBanner />
|
||||
<EnterPrises />
|
||||
{/* <EnterPrises /> */}
|
||||
<LearnDev />
|
||||
<LearnMore />
|
||||
</div>
|
||||
);
|
||||
|
||||
11
src/pages/NewsInternal.jsx
Normal file
11
src/pages/NewsInternal.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import NewsInternalPage from "../components/NewsInternal/NewsInternalPage";
|
||||
|
||||
const NewsInternal = () => {
|
||||
return (
|
||||
<>
|
||||
<NewsInternalPage />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsInternal;
|
||||
@@ -20,12 +20,12 @@ import HomePage from "../pages/HomePage";
|
||||
import LearnPage from "../pages/LearnPage";
|
||||
import NotFound from "../pages/NotFound";
|
||||
import UseCases from "../pages/UseCases";
|
||||
import fintech from "../assets/images/usecase-bg.png";
|
||||
import adTech from "../assets/images/addtech.jpg";
|
||||
import martech from "../assets/images/martech.png";
|
||||
import security from "../assets/images/i&security-bg.png";
|
||||
import tele from "../assets/images/Telecom-bg.png";
|
||||
import healthTech from "../assets/images/health-tech.png";
|
||||
// import fintech from "../assets/images/usecase-bg.png";
|
||||
// import adTech from "../assets/images/addtech.jpg";
|
||||
// import martech from "../assets/images/martech.png";
|
||||
// import security from "../assets/images/i&security-bg.png";
|
||||
// import tele from "../assets/images/Telecom-bg.png";
|
||||
// import healthTech from "../assets/images/health-tech.png";
|
||||
import Form from "../components/Contact/Form";
|
||||
import ResourcesPage from "../pages/ResourcesPage";
|
||||
import VideoInternal from "../components/VideoInternal/VideoInternal";
|
||||
@@ -34,6 +34,7 @@ import Events from "../pages/Events";
|
||||
import NewsPage from "../pages/NewsPage";
|
||||
import EventsInternnal from "../pages/EventsInternnal";
|
||||
import BlogPost from "../components/BlogPost/BlogPost";
|
||||
import NewsInternal from "../pages/NewsInternal";
|
||||
|
||||
export const route = [
|
||||
{
|
||||
@@ -129,6 +130,10 @@ export const route = [
|
||||
path: "/:title_slug",
|
||||
element: <UseCases />,
|
||||
},
|
||||
{
|
||||
path: "news/:title_slug",
|
||||
element: <NewsInternal />,
|
||||
},
|
||||
|
||||
// {
|
||||
// path: "fin-tech",
|
||||
|
||||
Reference in New Issue
Block a user