updated news api in new content section

This commit is contained in:
rockyeverlast
2024-04-30 15:11:01 +05:30
parent 438c7b5ac7
commit d63895800d
10 changed files with 266 additions and 189 deletions

43
package-lock.json generated
View File

@@ -23,6 +23,7 @@
"react-google-recaptcha": "^3.1.0",
"react-hook-form": "^7.51.2",
"react-intersection-observer": "^9.8.1",
"react-phone-input-2": "^2.15.1",
"react-redux": "^9.1.1",
"react-router-dom": "^6.22.3",
"swiper": "^11.1.0"
@@ -2854,6 +2855,11 @@
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4498,6 +4504,16 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
},
"node_modules/lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
"integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4509,6 +4525,16 @@
"resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
"integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ=="
},
"node_modules/lodash.reduce": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
"integrity": "sha512-6raRe2vxCYBhpBu+B+TtNGUzah+hQjVdu3E17wfusjyrXBka2nBS8OH/gjVZ5PvHOhWmIZTYri09Z6n/QfnNMw=="
},
"node_modules/lodash.startswith": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
"integrity": "sha512-XClYR1h4/fJ7H+mmCKppbiBmljN/nGs73iq2SjCT9SF4CBPoUHzLvWmH1GtZMhMBZSiRkHXfeA2RY1eIlJ75ww=="
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5040,6 +5066,23 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-phone-input-2": {
"version": "2.15.1",
"resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",
"integrity": "sha512-W03abwhXcwUoq+vUFvC6ch2+LJYMN8qSOiO889UH6S7SyMCQvox/LF3QWt+cZagZrRdi5z2ON3omnjoCUmlaYw==",
"dependencies": {
"classnames": "^2.2.6",
"lodash.debounce": "^4.0.8",
"lodash.memoize": "^4.1.2",
"lodash.reduce": "^4.6.0",
"lodash.startswith": "^4.2.1",
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
"react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
}
},
"node_modules/react-redux": {
"version": "9.1.1",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.1.tgz",

View File

@@ -25,6 +25,7 @@
"react-google-recaptcha": "^3.1.0",
"react-hook-form": "^7.51.2",
"react-intersection-observer": "^9.8.1",
"react-phone-input-2": "^2.15.1",
"react-redux": "^9.1.1",
"react-router-dom": "^6.22.3",
"swiper": "^11.1.0"

View File

@@ -15,7 +15,7 @@ import games from "../../assets/images/discot.png";
import { Link } from "react-router-dom";
const CommCard = ({ id, img, name, designation, description, link }) => {
console.log(img);
// console.log(img);
const imgHeight = {
minWidth: `214px`,
height: "240px",

View File

@@ -23,181 +23,181 @@ 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);
const filteredContent = content?.filter((item) => item.status === true);
console.log(filteredContent);
return (
<Box
height={"100vh"}
backgroundImage={`url(https://rubix.betadelivery.com/${content?.[1]?.banner_image})`}
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
},
}}
>
<>
{filteredContent?.map((item) => (
<Box
width={"100%"}
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: 500px)": {
width: "100%",
"@media (max-width: 1024px)": {
height: "70vh",
},
"@media (max-width: 600px)": {
height: "85vh",
},
}}
>
<Text
as={"h2"}
fontWeight={700}
fontSize={"52px"}
// textTransform={"upperCase"}
color={"#DE858E"}
lineHeight={"62px"}
letterSpacing={"1px"}
sx={{
"@media (max-width: 996px)": {
fontSize: "46px",
},
"@media (max-width: 600px)": {
fontSize: "40px",
marginBottom: "0rem",
lineHeight: "54px",
},
}}
>
<span
style={{
color: "#fff",
}}
>
{content?.[1]?.Heading}
</span>
<br
sx={{
display: "block", // Show by default, hide on screens less than 600px wide
"@media (max-width: 600px)": {
display: "none", // Hide on screens less than 600px wide
},
}}
/>
{/* {BannerContent[0].heading2} */}
</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"}
textTransform={"capitalize"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "22px",
},
"@media (max-width: 500px)": {
fontSize: "16px",
lineHeight: "28px",
},
}}
>
{content?.[1]?.sub_heading}
</Text>
</Box>
<Button
onClick={onClick}
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="0.3s ease-in-out"
color={"#fff"}
width={"280px"}
height={"54px"}
fontFamily={"Poppins"}
fontWeight={"400"}
border={"1px solid white"}
borderRadius={"10px"}
fontSize={"18px"}
zIndex={"1"}
overflow={"hidden"}
<Container
alignItems={"center"}
display={"flex"}
height={"100vh"}
alignContent={"center"}
paddingTop={"10%"}
maxW="container.xl"
textAlign={"left"}
marginTop={"2rem"}
paddingLeft={"3.5rem"}
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",
paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
},
}}
_hover={{
color: "#000",
border: "1px solid white",
zIndex: 1,
}}
>
{content?.[1]?.CTO_button_title}
</Button>
<Box
width={"100%"}
sx={{
"@media (max-width: 500px)": {
width: "100%",
},
}}
>
<Text
as={"h2"}
fontWeight={700}
fontSize={"52px"}
// textTransform={"upperCase"}
color={"#DE858E"}
lineHeight={"62px"}
letterSpacing={"1px"}
sx={{
"@media (max-width: 996px)": {
fontSize: "46px",
},
"@media (max-width: 600px)": {
fontSize: "40px",
marginBottom: "0rem",
lineHeight: "54px",
},
}}
>
<span
style={{
color: "#fff",
}}
>
{item.Heading}
</span>
<br
sx={{
display: "block",
"@media (max-width: 600px)": {
display: "none",
},
}}
/>
{/* {BannerContent[0].heading2} */}
</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"}
textTransform={"capitalize"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "22px",
},
"@media (max-width: 500px)": {
fontSize: "16px",
lineHeight: "28px",
},
}}
>
{item.sub_heading}
</Text>
</Box>
<Button
onClick={onClick}
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="0.3s ease-in-out"
color={"#fff"}
width={"280px"}
height={"54px"}
fontFamily={"Poppins"}
fontWeight={"400"}
border={"1px solid white"}
borderRadius={"10px"}
fontSize={"18px"}
zIndex={"1"}
overflow={"hidden"}
marginTop={"2rem"}
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>
</Box>
</Container>
</Box>
</Container>
</Box>
))}
</>
);
};

View File

@@ -101,7 +101,7 @@ export default function Partner() {
navigation={false}
modules={[Navigation, Pagination, Autoplay]}
autoplay={{
delay: 5000,
delay: 10000,
disableOnInteraction: false,
}}
loop={true}

View File

@@ -16,14 +16,15 @@ const MobileSubnet = () => {
return (
<>
<Swiper
className="subnet-mobile"
pagination={true}
navigation={false}
navigation={true}
modules={[Navigation, Pagination, Autoplay]}
loop={true}
// autoplay={{
// delay: 2500,
// disableOnInteraction: false,
// }}
autoplay={{
delay: 10000,
disableOnInteraction: false,
}}
style={{
backgroundColor: "#000",
paddingBottom: "6rem",
@@ -63,7 +64,7 @@ const MobileSubnet = () => {
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 375px)": {
fontSize: "18px",
fontSize: "22px",
},
}}
>

View File

@@ -28,7 +28,7 @@ const MobileSubnet2 = ({ font }) => {
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 375px)": {
fontSize: "18px",
fontSize: "22px",
},
}}
>

View File

@@ -30,7 +30,7 @@ const MobileSubnet3 = ({ font }) => {
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 375px)": {
fontSize: "18px",
fontSize: "22px",
},
}}
>

View File

@@ -76,24 +76,32 @@ const contents = [
const NewsContent = () => {
const { data } = useGetNewsQuery();
const newsCard = data?.data;
const newsCard = data?.data?.rows;
console.log(newsCard);
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 9;
const totalPages = Math.ceil(contents.length / itemsPerPage);
// const [currentPage, setCurrentPage] = useState(1);
// const itemsPerPage = 9;
// const totalPages = Math.ceil(newsCard.length / itemsPerPage);
const handlePageChange = (newPage) => {
setCurrentPage(newPage);
window.scrollTo({ top: 0, behavior: "smooth" });
};
// const handlePageChange = (newPage) => {
// setCurrentPage(newPage);
// window.scrollTo({ top: 0, behavior: "smooth" });
// };
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = Math.min(startIndex + itemsPerPage, contents.length);
const currentPageContents = contents.slice(startIndex, endIndex);
// const startIndex = (currentPage - 1) * itemsPerPage;
// const endIndex = Math.min(startIndex + itemsPerPage, contents.length);
// const currentPageContents = contents.slice(startIndex, endIndex);
return (
<>
<Container maxW="container.xl" padding={"0 5rem"}>
<Container
maxW="container.xl"
padding={"0 5rem"}
sx={{
"@media (max-width: 600px)": {
padding: "0 1rem",
},
}}
>
<Box
margin={"4rem 0"}
display={"flex"}
@@ -101,14 +109,18 @@ const NewsContent = () => {
rowGap={"3rem"}
justifyContent={"space-between"}
alignItems={"center"}
sx={{
"@media (max-width: 1024px)": {
justifyContent: "space-around",
},
}}
>
{currentPageContents.map((content) => (
{newsCard?.map((content) => (
<>
<Box
width={"340px"}
background={"#15181E"}
borderRadius={"10px"}
minHeight={"340px"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
@@ -116,7 +128,20 @@ const NewsContent = () => {
},
}}
>
<Image src={cardimg} />
<Image
src={`https://rubix.betadelivery.com/${content.banner_image}`}
height={"240px"}
width={"100%"}
objectFit={"cover"}
borderTopLeftRadius={"10px"}
borderTopRightRadius={"10px"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
minHeight: "0",
},
}}
/>
<Box padding={"1rem"}>
<Text
color={"#fff"}
@@ -136,7 +161,7 @@ const NewsContent = () => {
minHeight={"40px"}
maxWidth={"420px"}
>
{content.contetn}
{content.content}
</Text>
</Box>
{/* <Box
@@ -182,11 +207,11 @@ const NewsContent = () => {
))}
</Box>
</Container>
<Pagination
{/* <Pagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={handlePageChange}
/>
/> */}
</>
);
};

View File

@@ -228,6 +228,13 @@ span.swiper-pagination-bullet {
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
}
.subnet-mobile .swiper-button-prev {
left: 0;
}
.subnet-mobile .swiper-button-next {
right: 0;
}
}
@media only screen and (max-width: 375px) {