Added updated RTK query slice

src/Redux/slice/newsLetterSlice.js

@@ -0,0 +1,17 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const newsLetterApi = createApi({
+    reducerPath: 'newsLetter',
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
+    endpoints: (builder) => ({
+        subscribeToNewsletter: builder.mutation({
+            query: (email) => ({
+                url: `newsLetter/request`,
+                method: "POST",
+                body: { email },
+            }),
+        }),
+    }),
+});
+
+export const { useSubscribeToNewsletterMutation } = newsLetterApi;

src/Redux/store/store.js

@@ -15,6 +15,7 @@ import { ecoSystem } from '../slice/ecosystemSlice';
 import { statsApi } from '../slice/statsSlice';
 import { TermsPage } from '../slice/termsSlice';
 import { PrivacyPage } from '../slice/privacySlice';
+import { newsLetterApi } from '../slice/newsLetterSlice';
 
 const store = configureStore({
     reducer: {
@@ -34,6 +35,7 @@ const store = configureStore({
         [statsApi.reducerPath]: statsApi.reducer,
         [TermsPage.reducerPath]: TermsPage.reducer,
         [PrivacyPage.reducerPath]: PrivacyPage.reducer,
+        [newsLetterApi.reducerPath]: newsLetterApi.reducer,
     },
     middleware: (getDefaultMiddleware) =>
         getDefaultMiddleware().concat(
@@ -53,6 +55,7 @@ const store = configureStore({
             statsApi.middleware,
             TermsPage.middleware,
             PrivacyPage.middleware,
+            newsLetterApi.middleware,
         ), // Add blogApi.middleware here
 });
 

src/components/Footer/Footer.jsx

@@ -11,6 +11,7 @@ import {
   ListItem,
   Text,
   UnorderedList,
+  useToast,
 } from "@chakra-ui/react";
 import { useMediaQuery } from "@chakra-ui/react";
 import {
@@ -30,41 +31,44 @@ import discord from "../../assets/images/discord.png";
 import { Form, Link } from "react-router-dom";
 import { useEffect, useState } from "react";
 import MobileFooter from "./MobileFooter";
+import { useSubscribeToNewsletterMutation } from "../../Redux/slice/newsLetterSlice";
+import { useForm } from "react-hook-form";
 
 const Footer = () => {
-  const [email, setEmail] = useState("");
+  const [subscribeToNewsletter] = useSubscribeToNewsletterMutation();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm();
+  const toast = useToast();
   const [isSmallScreen] = useMediaQuery("(max-width: 996px)");
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
-  const handleSubmit = async (event) => {
-    event.preventDefault(); // Prevent the default form submission behavior
-
+  const onSubmit = async (data) => {
     try {
-      const response = await fetch(
-        "https://rubix.betadelivery.com/api/newsLetter/request",
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ email }),
-        }
-      );
-
-      if (!response.ok) {
-        throw new Error("Failed to submit form");
-      }
-      console.log(email);
-      setEmail("");
+      const response = await subscribeToNewsletter(data.email).unwrap();
+      toast({
+        title: "Success",
+        description: "You have been subscribed to the newsletter.",
+        status: "success",
+        duration: 5000,
+        isClosable: true,
+      });
+      reset();
     } catch (error) {
-      console.error("Error submitting form:", error);
+      console.error("Error subscribing to newsletter:", error);
+      toast({
+        title: "Error",
+        description: "Something went wrong. Please try again.",
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+      });
     }
   };
 
-  const handleEmailChange = (event) => {
-    setEmail(event.target.value);
-  };
-
   useEffect(() => {
     const handleResize = () => {
       setWindowWidth(window.innerWidth);
@@ -131,38 +135,45 @@ const Footer = () => {
                     Sign up for our newsletter and receive the{" "}
                     {isSmallScreen ? null : <br />} latest updates.
                   </Text>
-                  <Form onSubmit={handleSubmit}>
+                  <Form onSubmit={handleSubmit(onSubmit)}>
                     <Flex alignItems="center">
-                      <Input
-                        type="email"
-                        placeholder="Email"
-                        borderRadius={"0%"}
-                        border={"none"}
-                        background={"#444444"}
-                        padding={"1.5rem"}
-                        borderTopLeftRadius={"5px"}
-                        borderBottomLeftRadius={"5px"}
-                        color={"#fff"}
-                        onChange={handleEmailChange}
-                        value={email}
-                      />
-                      <Button
-                        type="submit"
-                        backgroundColor={"#DE858E"}
-                        fontFamily={"Poppins"}
-                        fontWeight={"400"}
-                        color={"#fff"}
-                        borderRadius={"0%"}
-                        padding={"1.5rem 1.5rem"}
-                        borderTopRightRadius={"5px"}
-                        borderBottomRightRadius={"5px"}
-                        width={"167px"}
-                        //   onClick={handleSubmit}
-                      >
-                        Submit
-                      </Button>
+                      <FormControl isInvalid={errors.email} display={"flex"}>
+                        <Input
+                          width={"90%"}
+                          type="email"
+                          placeholder="Email"
+                          borderRadius={"0%"}
+                          border={"none"}
+                          background={"#444444"}
+                          padding={"1.5rem"}
+                          borderTopLeftRadius={"5px"}
+                          borderBottomLeftRadius={"5px"}
+                          color={"#fff"}
+                          {...register("email", {
+                            required: "Email is required",
+                          })}
+                        />
+                        <Button
+                          type="submit"
+                          backgroundColor={"#DE858E"}
+                          fontFamily={"Poppins"}
+                          fontWeight={"400"}
+                          color={"#fff"}
+                          borderRadius={"0%"}
+                          padding={"1.5rem 1.5rem"}
+                          borderTopRightRadius={"5px"}
+                          borderBottomRightRadius={"5px"}
+                          width={"167px"}
+                          //   onClick={handleSubmit}
+                        >
+                          Submit
+                        </Button>
+                      </FormControl>
                     </Flex>
                   </Form>
+                  <FormErrorMessage>
+                    {errors.email && errors.email.message}
+                  </FormErrorMessage>
                 </Box>
                 <Box
                   display={"flex"}

src/components/LearnPage/Faq.jsx

@@ -186,7 +186,9 @@ const accordion = [
 
 export const Faq = () => {
   const { data, isLoading, error } = useGetLearnFaqQuery();
-  const faq = data?.data?.data?.rows;
+  const faq = data?.data?.data;
+
+  console.log(data);
 
   if (isLoading) {
     return (
@@ -198,47 +200,47 @@ export const Faq = () => {
 
   return (
     <>
-      {faq?.map((item) => (
-        <Box
-          key={item.id}
-          // backgroundImage={`url(${banner})`}
-          backgroundColor={"#101015"}
-          backgroundSize={"cover"}
-          backgroundRepeat={"no-repeat"}
-          // backgroundAttachment={"fixed"}
-          borderBottom={"1px solid #ffffff59"}
+      <Box
+        // backgroundImage={`url(${banner})`}
+        backgroundColor={"#101015"}
+        backgroundSize={"cover"}
+        backgroundRepeat={"no-repeat"}
+        // backgroundAttachment={"fixed"}
+        borderBottom={"1px solid #ffffff59"}
+      >
+        <Container
+          maxW={"container.xl"}
+          padding={"5rem 4rem"}
+          sx={{
+            "@media (max-width: 600px)": {
+              padding: "4rem 1rem",
+            },
+          }}
         >
-          <Container
-            maxW={"container.xl"}
-            padding={"5rem 4rem"}
+          <Text
+            as={"h2"}
+            // paddingTop={"3rem"}
+            paddingBottom={"2rem"}
+            fontWeight={700}
+            fontSize={"40px"}
+            textAlign={"center"}
+            textTransform={"capitalize"}
+            color={"#fff"}
             sx={{
               "@media (max-width: 600px)": {
-                padding: "4rem 1rem",
+                fontSize: "22px",
+                fontWeight: "500",
               },
             }}
           >
-            <Text
-              as={"h2"}
-              // paddingTop={"3rem"}
-              paddingBottom={"2rem"}
-              fontWeight={700}
-              fontSize={"40px"}
-              textAlign={"center"}
-              textTransform={"capitalize"}
-              color={"#fff"}
-              sx={{
-                "@media (max-width: 600px)": {
-                  fontSize: "22px",
-                  fontWeight: "500",
-                },
-              }}
-            >
-              Frequently Asked Questions
-            </Text>
+            Frequently Asked Questions
+          </Text>
 
-            <Box>
-              <Accordion allowToggle defaultIndex={[0]}>
+          <Box>
+            <Accordion allowToggle defaultIndex={[0]}>
+              {faq?.map((item) => (
                 <AccordionItem
+                  key={item.id}
                   borderTop={"none"}
                   borderBottom={"none"}
                   marginBottom={"1rem"}
@@ -309,7 +311,13 @@ export const Faq = () => {
                           },
                         }}
                       >
-                        <Text marginBottom={4}>{item.answer}</Text>
+                        <Text
+                          marginBottom={4}
+                          className="rubix-text-small"
+                          dangerouslySetInnerHTML={{
+                            __html: item.answer,
+                          }}
+                        />
                         {/* {bullet && (
                           <p>
                             <ChevronRightIcon fontSize={"3xl"} />
@@ -320,11 +328,11 @@ export const Faq = () => {
                     </>
                   )}
                 </AccordionItem>
-              </Accordion>
-            </Box>
-          </Container>
-        </Box>
-      ))}
+              ))}
+            </Accordion>
+          </Box>
+        </Container>
+      </Box>
     </>
   );
 };

src/components/LearnPage/LearnDev.jsx

@@ -115,7 +115,7 @@ const LearnDev = () => {
             },
           }}
         >
-          {/* {partnerCard?.map((item) => (
+          {partnerCard?.map((item) => (
             <LearnCard
               key={item.id}
               src={item.company_logo}
@@ -123,8 +123,8 @@ const LearnDev = () => {
               text={item.description}
               href={item.website_link}
             />
-          ))} */}
-          {content.map((item) => (
+          ))}
+          {/* {content.map((item) => (
             <DevCards
               key={item.id}
               src={item.src}
@@ -132,7 +132,7 @@ const LearnDev = () => {
               text={item.text}
               href={item.href}
             />
-          ))}
+          ))} */}
         </Box>
       </Box>
     </Box>

src/components/SubnetsComponent/Component1.jsx

@@ -24,6 +24,7 @@ export const Component1 = ({ id, title, content }) => {
           color={"#fff"}
           border={"1px solid #A5A5A5"}
           fontSize={"16px"}
+          cursor={"default"}
           // _after={{
           //   content: "''",
           //   position: "absolute",

src/components/SubnetsComponent/Component2.jsx

@@ -25,6 +25,7 @@ export const Component2 = ({ id, title, content }) => {
           color={"#fff"}
           border={"1px solid #A5A5A5"}
           fontSize={"16px"}
+          cursor={"default"}
           _after={{
             content: "''",
             position: "absolute",

src/components/SubnetsComponent/Component3.jsx

@@ -31,6 +31,7 @@ export const Component3 = ({ id, title, content }) => {
           color={"#fff"}
           border={"1px solid #A5A5A5"}
           fontSize={"16px"}
+          cursor={"default"}
           _before={{
             content: "''",
             position: "absolute",

src/components/SubnetsComponent/Component4.jsx

@@ -24,6 +24,7 @@ export const Component4 = ({ id, title, content }) => {
         <Button
           position={"relative"}
           background={"transparent"}
+          cursor={"default !important"}
           // width={"165px"}
           height={"57px"}
           borderRadius={"28.5px"}

src/pages/LearnPage.jsx

@@ -23,8 +23,8 @@ const LearnPage = () => {
       {/* <WhyRubix /> */}
       <WhyRubixStatic />
       <GetStarted />
-      {/* <Faq /> */}
-      <FaqStatic />
+      <Faq />
+      {/* <FaqStatic /> */}
     </>
   );
 };