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

Build page banner api integration

Browse Source
This commit is contained in:
rockyeverlast
2024-05-07 18:01:50 +05:30
parent 9ec0de3c0a
commit 654b8c3066
6 changed files with 348 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/Redux/slice/bannerSlice.js Normal file
View File

@@ -0,0 +1,24 @@
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const learnPage = createApi({
reducerPath: 'LearnPage',
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
endpoints: (builder) => ({
getLearnPage: builder.query({
query: () => 'learn/active',
}),
}),
});
export const buildPage = createApi({
reducerPath: 'BuildPage',
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
endpoints: (builder) => ({
getBuildPage: builder.query({
query: () => 'build/active',
}),
}),
});
export const { useGetLearnPageQuery } = learnPage;
export const { useGetBuildPageQuery } = buildPage;

5
src/Redux/store/store.js
View File

@@ -7,6 +7,7 @@ import { resourcesApi } from '../slice/resources';
import { videoTableApi } from '../slice/videoTable';
import { newsLetterApi } from '../slice/newsLetter';
import { whitePaper } from '../slice/whitePaperSlice';
import { buildPage, learnPage } from '../slice/bannerSlice';
const store = configureStore({
reducer: {
@@ -18,6 +19,8 @@ const store = configureStore({
[videoTableApi.reducerPath]: videoTableApi.reducer,
[newsLetterApi.reducerPath]: newsLetterApi.reducer,
[whitePaper.reducerPath]: whitePaper.reducer,
[learnPage.reducerPath]: learnPage.reducer,
[buildPage.reducerPath]: buildPage.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(
@@ -29,6 +32,8 @@ const store = configureStore({
videoTableApi.middleware,
newsLetterApi.middleware,
whitePaper.middleware,
learnPage.middleware,
buildPage.middleware
), // Add blogApi.middleware here
});

305
src/components/BuildPage/BuildBanner.jsx
View File

@@ -1,3 +1,5 @@
/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
import { Box, Button, Container, Text } from "@chakra-ui/react";
import banner from "../../assets/images/BuildBanner.webp";
import { Link } from "react-router-dom";
@@ -16,172 +18,177 @@ const BannerContent = [
},
];
const BuildBanner = () => {
const BuildBanner = ({ data }) => {
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",
backgroundPositionX: "center",
},
}}
>
<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
},
}}
>
<>
{data.map((item) => (
<Box
width={"75%"}
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",
backgroundPositionX: "center",
},
}}
>
<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",
},
}}
>
{BannerContent[0].heading1} <br />
<span
style={{
color: "#fff",
}}
>
{BannerContent[0].heading2}
</span>
</Text>
<Box
marginTop={"1.5rem"}
width={"80%"}
<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)": {
width: "100%",
paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
},
}}
>
<Text
color={"#fff"}
fontSize={"20px"}
fontWeight={"400"}
lineHeight={"37.5px"}
fontFamily={"Poppins"}
width={"88%"}
<Box
width={"75%"}
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/node-setup/"
rel="noopener noreferrer"
target="_blank"
>
<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} <br />
{/* <span
style={{
color: "#fff",
}}
>
{BannerContent[0].heading2}
</span> */}
</Text>
<Box
marginTop={"1.5rem"}
width={"80%"}
sx={{
"@media (max-width: 500px)": {
width: "100%",
},
}}
>
<Text
color={"#fff"}
fontSize={"20px"}
fontWeight={"400"}
lineHeight={"37.5px"}
fontFamily={"Poppins"}
width={"88%"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "22px",
},
"@media (max-width: 500px)": {
fontSize: "16px",
lineHeight: "28px",
},
}}
>
{item.sub_heading}
</Text>
</Box>
<Link
to="https://learn.rubix.net/node-setup/"
rel="noopener noreferrer"
target="_blank"
>
<Button
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="0.3s ease-in-out"
color={"#fff"}
width={"auto"}
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>
))}
</>
);
};

287
src/components/LearnPage/LearnBanner.jsx
View File

@@ -1,3 +1,5 @@
/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
import { Box, Button, Container, Text } from "@chakra-ui/react";
import banner from "../../assets/images/learnBanner.webp";
import { Link } from "react-router-dom";
@@ -18,169 +20,160 @@ const BannerContent = [
},
];
const LearnBanner = () => {
const LearnBanner = ({ data }) => {
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
},
}}
>
<>
{data?.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="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={"auto"}
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>
))}
</>
);
};

7
src/pages/BuildPage.jsx
View File

@@ -8,8 +8,13 @@ import { useEffect, useState } from "react";
import LearnMore from "../components/BuildPage/LearnMore";
import ToolMobile from "../components/MobileComponent/ToolMobile";
import MobileSolve from "../components/MobileComponent/MobileSolve";
import { useGetBuildPageQuery } from "../Redux/slice/bannerSlice";
const BuildPage = () => {
const { data } = useGetBuildPageQuery();
const buildBanner = data?.data?.data;
console.log(buildBanner);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
useEffect(() => {
@@ -33,7 +38,7 @@ const BuildPage = () => {
return (
<>
<BuildBanner />
<BuildBanner data={buildBanner} />
<WhyBuild />
{!isMobile ? <Solve /> : <MobileSolve />}
{!isMobile ? <Tools /> : <ToolMobile />}

19
src/pages/LearnPage.jsx
View File

@@ -6,16 +6,31 @@ import GetStarted from "../components/LearnPage/GetStarted";
import LearnBanner from "../components/LearnPage/LearnBanner";
import LearnDev from "../components/LearnPage/LearnDev";
import WhyRubix from "../components/LearnPage/WhyRubix";
import { useGetLearnPageQuery } from "../Redux/slice/bannerSlice";
import Loader from "../components/Loader/Loader";
const LearnPage = () => {
const { data, isLoading, error } = useGetLearnPageQuery();
const learnData = data?.data?.data;
console.log(learnData);
useEffect(() => {
// Scroll to the top of the page when the component mounts
window.scrollTo(0, 0);
}, []);
if (isLoading) {
return (
<div>
<Loader />
</div>
);
}
return (
<>
<LearnBanner />
<LearnDev />
<LearnBanner data={learnData} />
<LearnDev />
<WhyRubix />
<GetStarted />
<Faq />