mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 21:55:50 +00:00
Updated UseCases, routes, slice
This commit is contained in:
rockyeverlast
13
src/Redux/slice/termsSlice.js
Normal file
13
src/Redux/slice/termsSlice.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
|
||||
|
||||
export const TermsPage = createApi({
|
||||
reducerPath: 'Terms',
|
||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
|
||||
endpoints: (builder) => ({
|
||||
getTermsPage: builder.query({
|
||||
query: () => 'term-condition/active',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useGetTermsPageQuery } = TermsPage;
|
||||
@@ -13,6 +13,7 @@ import { useCaseApi } from '../slice/useCaseSlice';
|
||||
import { newsInternalApi } from '../slice/NewsInternalSlice';
|
||||
import { ecoSystem } from '../slice/ecosystemSlice';
|
||||
import { statsApi } from '../slice/statsSlice';
|
||||
import { TermsPage } from '../slice/termsSlice';
|
||||
|
||||
const store = configureStore({
|
||||
reducer: {
|
||||
@@ -30,6 +31,7 @@ const store = configureStore({
|
||||
[newsInternalApi.reducerPath]: newsInternalApi.reducer,
|
||||
[ecoSystem.reducerPath]: ecoSystem.reducer,
|
||||
[statsApi.reducerPath]: statsApi.reducer,
|
||||
[TermsPage.reducerPath]: TermsPage.reducer,
|
||||
},
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware().concat(
|
||||
@@ -47,6 +49,7 @@ const store = configureStore({
|
||||
newsInternalApi.middleware,
|
||||
ecoSystem.middleware,
|
||||
statsApi.middleware,
|
||||
TermsPage.middleware,
|
||||
), // Add blogApi.middleware here
|
||||
});
|
||||
|
||||
|
||||
@@ -126,7 +126,7 @@ const EcoBanner = () => {
|
||||
cursor={"pointer"}
|
||||
transition="0.3s ease-in-out"
|
||||
color={"#fff"}
|
||||
width={"216px"}
|
||||
width={"auto"}
|
||||
marginTop={"2rem"}
|
||||
height={"56px"}
|
||||
fontFamily={"Poppins"}
|
||||
|
||||
@@ -382,18 +382,16 @@ const Footer = () => {
|
||||
>
|
||||
<Image src={logo} width={"100px"} paddingBottom={"5px"} />
|
||||
|
||||
<Link>
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontFamily={"Poppins"}
|
||||
fontSize={"15px"}
|
||||
fontWeight={"400"}
|
||||
>
|
||||
All rights reserved.
|
||||
</Text>
|
||||
</Link>
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontFamily={"Poppins"}
|
||||
fontSize={"15px"}
|
||||
fontWeight={"400"}
|
||||
>
|
||||
All rights reserved.
|
||||
</Text>
|
||||
|
||||
<Link>
|
||||
<Link to="/policy">
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontFamily={"Poppins"}
|
||||
@@ -404,7 +402,7 @@ const Footer = () => {
|
||||
</Text>
|
||||
</Link>
|
||||
|
||||
<Link>
|
||||
<Link to="/terms">
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontFamily={"Poppins"}
|
||||
|
||||
@@ -480,16 +480,13 @@ const NavBar = () => {
|
||||
onMouseLeave={() => setIsHoveredCases(false)}
|
||||
>
|
||||
USE CASES
|
||||
<span
|
||||
style={
|
||||
location.pathname === "/fin-tech" ||
|
||||
location.pathname === "/ad-tech" ||
|
||||
location.pathname === "/mar-tech" ||
|
||||
location.pathname === "/health-tech"
|
||||
{/* <span
|
||||
style={useCase.map((item) => {
|
||||
location.pathname === `${item.title_slug}`
|
||||
? active
|
||||
: linkStyle
|
||||
}
|
||||
/>
|
||||
: linkStyle;
|
||||
})}
|
||||
/> */}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
@@ -497,7 +494,7 @@ const NavBar = () => {
|
||||
borderRadius={"10px"}
|
||||
border={"none"}
|
||||
padding={"1rem"}
|
||||
width={useCase?.length > 1 ? "50%" : "auto"}
|
||||
width={useCase?.length > 1 ? "65%" : "auto"}
|
||||
margin={"0 auto"}
|
||||
_focus={{
|
||||
boxShadow: "none",
|
||||
@@ -506,34 +503,12 @@ const NavBar = () => {
|
||||
onMouseLeave={() => setIsHoveredCases(false)}
|
||||
>
|
||||
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
|
||||
|
||||
{/* <PopoverBody width={"45%"}>
|
||||
<Link
|
||||
to="/fin-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/fin-tech"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={fintechIcon} width={`${iconwidth}`} />
|
||||
FinTech
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody> */}
|
||||
|
||||
<PopoverBody
|
||||
width={"100%"}
|
||||
display={"flex"}
|
||||
flexWrap={"wrap"}
|
||||
justifyContent={"space-between"}
|
||||
paddingInline={"0px"}
|
||||
>
|
||||
{useCase?.map((slug) => (
|
||||
<Box
|
||||
@@ -552,7 +527,7 @@ const NavBar = () => {
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"center"}
|
||||
justifyContent={"start"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
@@ -568,94 +543,6 @@ const NavBar = () => {
|
||||
</Box>
|
||||
))}
|
||||
</PopoverBody>
|
||||
|
||||
{/* <PopoverBody width={"45%"}>
|
||||
<Link
|
||||
to="/mar-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/mar-tech"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={marTech} width={`${iconwidth}`} />
|
||||
MarTech
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
|
||||
<PopoverBody width={"45%"}>
|
||||
<Link
|
||||
to="/health-tech"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/health-tech"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={healthTech} width={`${iconwidth}`} />
|
||||
HealthTech
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
|
||||
<PopoverBody width={"45%"}>
|
||||
<Link
|
||||
to="/identity-security"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/identity-security"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={security} width={`${iconwidth}`} />
|
||||
Identity and Security
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody>
|
||||
|
||||
<PopoverBody width={"45%"}>
|
||||
<Link
|
||||
to="/Telecom"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/Telecom"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"1rem"}
|
||||
marginBottom={"1rem"}
|
||||
>
|
||||
<Image src={telecom} width={`${iconwidth}`} />
|
||||
Telecom
|
||||
</Box>
|
||||
</Link>
|
||||
</PopoverBody> */}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
{/* <Link
|
||||
|
||||
@@ -5,11 +5,8 @@ import TabsVideo from "./tabInsideContent/TabsVideo";
|
||||
import WhitepaperDocs from "./tabInsideContent/WhitepaperDocs";
|
||||
import ArticlesTable from "./tableContent/ArticlesTable";
|
||||
import VideoTable from "./tableContent/VideoTable";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
const Content = ({ tab }) => {
|
||||
const { tabs } = useParams();
|
||||
|
||||
switch (tab) {
|
||||
case "The Rubix whitepapers":
|
||||
return (
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
Tabs,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import Content from "./Content";
|
||||
import ArticlesTable from "./tableContent/ArticlesTable";
|
||||
|
||||
@@ -32,9 +32,17 @@ const tabsBtn = [
|
||||
|
||||
const NewestEvents = () => {
|
||||
const [selectedTab, setSelectedTab] = useState(tabsBtn[0].btn);
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
useEffect(() => {
|
||||
const storedIndex = sessionStorage.getItem("selectedTabIndex");
|
||||
if (storedIndex) {
|
||||
setSelectedIndex(parseInt(storedIndex, 10));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleTabChange = (tab) => {
|
||||
setSelectedTab(tab);
|
||||
setSelectedIndex(tab);
|
||||
setSelectedTab("setSelectedIndex", tab);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -170,7 +170,9 @@ const NewUseCase = ({
|
||||
<Text
|
||||
pb={5}
|
||||
className="rubix-text-small"
|
||||
dangerouslySetInnerHTML={{ __html: matchingUseCase.content }}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: matchingUseCase.content,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -208,12 +210,12 @@ const NewUseCase = ({
|
||||
</Text> */}
|
||||
</Box>
|
||||
</Box>
|
||||
{matchingUseCase ? (
|
||||
{matchingUseCase.attachments.length >= 1 ? (
|
||||
<Text
|
||||
className="rubix-fw-500"
|
||||
fontSize="3xl"
|
||||
textColor={"#ffffff"}
|
||||
marginBottom={"3rem"}
|
||||
marginBottom={"1rem"}
|
||||
marginInline={"3rem"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
@@ -232,7 +234,7 @@ const NewUseCase = ({
|
||||
marginBottom={"2rem"}
|
||||
display={"flex"}
|
||||
justifyContent={"start"}
|
||||
gap={"2rem"}
|
||||
gap={"3rem"}
|
||||
flexWrap={"wrap"}
|
||||
>
|
||||
{matchingUseCase.attachments.map((item) => (
|
||||
|
||||
131
src/pages/Policy.jsx
Normal file
131
src/pages/Policy.jsx
Normal file
@@ -0,0 +1,131 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import { Avatar, Box, Image, Text } from "@chakra-ui/react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useGetTermsPageQuery } from "../Redux/slice/termsSlice";
|
||||
import { useEffect } from "react";
|
||||
import Loader from "../components/Loader/Loader";
|
||||
|
||||
const Policy = () => {
|
||||
const { data, isLoading } = useGetTermsPageQuery();
|
||||
console.log(data?.data);
|
||||
const terms = data?.data;
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{terms?.map((item) => (
|
||||
<>
|
||||
<Box
|
||||
key={item.id}
|
||||
height={"75vh"}
|
||||
width={"100%"}
|
||||
backgroundImage={`url(https://rubix.betadelivery.com/${item.banner_image})`}
|
||||
backgroundRepeat={"no-repeat"}
|
||||
backgroundSize={"cover"}
|
||||
position="relative"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
height: "400px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
width="100%"
|
||||
height="100%"
|
||||
backgroundColor="rgba(0, 0, 0, 0.8)"
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
flexDirection={"column"}
|
||||
>
|
||||
<Box
|
||||
w={"50vw"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100vw",
|
||||
padding: "2rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
textAlign={"center"}
|
||||
className="rubix-fw-700"
|
||||
fontSize={"40px"}
|
||||
fontFamily={"Mona Sans"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "30px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
p={5}
|
||||
pb={14}
|
||||
backgroundColor={"#000000"}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
flexDirection={"column"}
|
||||
alignItems={"center"}
|
||||
gap={16}
|
||||
w={"100%"}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
flexDirection={"column"}
|
||||
alignItems={"start"}
|
||||
gap={7}
|
||||
pt={5}
|
||||
width={"85vw"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* ========[ Head-Para ]====== */}
|
||||
<Box
|
||||
width={"65vw"}
|
||||
className="usecases"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
pb={5}
|
||||
className="rubix-text-small"
|
||||
dangerouslySetInnerHTML={{ __html: item.content }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Policy;
|
||||
131
src/pages/Terms.jsx
Normal file
131
src/pages/Terms.jsx
Normal file
@@ -0,0 +1,131 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import { Avatar, Box, Image, Text } from "@chakra-ui/react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useGetTermsPageQuery } from "../Redux/slice/termsSlice";
|
||||
import { useEffect } from "react";
|
||||
import Loader from "../components/Loader/Loader";
|
||||
|
||||
const Terms = () => {
|
||||
const { data, isLoading } = useGetTermsPageQuery();
|
||||
console.log(data?.data);
|
||||
const terms = data?.data;
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{terms?.map((item) => (
|
||||
<>
|
||||
<Box
|
||||
key={item.id}
|
||||
height={"75vh"}
|
||||
width={"100%"}
|
||||
backgroundImage={`url(https://rubix.betadelivery.com/${item.banner_image})`}
|
||||
backgroundRepeat={"no-repeat"}
|
||||
backgroundSize={"cover"}
|
||||
position="relative"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
height: "400px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
width="100%"
|
||||
height="100%"
|
||||
backgroundColor="rgba(0, 0, 0, 0.8)"
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
flexDirection={"column"}
|
||||
>
|
||||
<Box
|
||||
w={"50vw"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100vw",
|
||||
padding: "2rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
textAlign={"center"}
|
||||
className="rubix-fw-700"
|
||||
fontSize={"40px"}
|
||||
fontFamily={"Mona Sans"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "30px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
p={5}
|
||||
pb={14}
|
||||
backgroundColor={"#000000"}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
flexDirection={"column"}
|
||||
alignItems={"center"}
|
||||
gap={16}
|
||||
w={"100%"}
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
flexDirection={"column"}
|
||||
alignItems={"start"}
|
||||
gap={7}
|
||||
pt={5}
|
||||
width={"85vw"}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* ========[ Head-Para ]====== */}
|
||||
<Box
|
||||
width={"65vw"}
|
||||
className="usecases"
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
pb={5}
|
||||
className="rubix-text-small"
|
||||
dangerouslySetInnerHTML={{ __html: item.content }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Terms;
|
||||
@@ -35,6 +35,8 @@ import NewsPage from "../pages/NewsPage";
|
||||
import EventsInternnal from "../pages/EventsInternnal";
|
||||
import BlogPost from "../components/BlogPost/BlogPost";
|
||||
import NewsInternal from "../pages/NewsInternal";
|
||||
import Terms from "../pages/Terms";
|
||||
import Policy from "../pages/Policy";
|
||||
|
||||
export const route = [
|
||||
{
|
||||
@@ -134,6 +136,14 @@ export const route = [
|
||||
path: "news/:title_slug",
|
||||
element: <NewsInternal />,
|
||||
},
|
||||
{
|
||||
path: "terms",
|
||||
element: <Terms />,
|
||||
},
|
||||
{
|
||||
path: "policy",
|
||||
element: <Policy />,
|
||||
},
|
||||
|
||||
// {
|
||||
// path: "fin-tech",
|
||||
|
||||
Reference in New Issue
Block a user