Resource page task

package.json

@@ -18,6 +18,8 @@
     "react-router-dom": "^6.22.3",
     "react-scripts": "^5.0.1",
     "react-slick": "^0.30.2",
+    "react-spring": "^9.7.4",
+    "react-spring-3d-carousel": "^1.3.4",
     "slick-carousel": "^1.8.1",
     "web-vitals": "^2.1.4"
   },

src/Components/Button.js

@@ -0,0 +1,7 @@
+import Styles from "../Stylesheets/Button.module.css";
+
+function Button({ text }) {
+  return <button className={Styles.btn}>{text}</button>;
+}
+
+export default Button;

src/Components/MobileRtop.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import ResourceCarousel from './ResourceCarousel';
+import ResourceCard from './ResourceCard';
+import { v4 as uuidv4 } from "uuid";  
+function MobileRtop() {
+
+  let cards = [
+    {
+      key: uuidv4(),
+      content: (
+        <ResourceCard imagen="https://updates.theme-fusion.com/wp-content/uploads/2017/12/convertplus_thumbnail.jpg" />
+      ),
+    },
+    {
+      key: uuidv4(),
+      content: (
+        <ResourceCard imagen="https://updates.theme-fusion.com/wp-content/uploads/2017/12/acf_pro.png" />
+      ),
+    },
+    {
+      key: uuidv4(),
+      content: (
+        <ResourceCard imagen="https://updates.theme-fusion.com/wp-content/uploads/2017/12/layer_slider_plugin_thumb.png" />
+      ),
+    },
+    {
+      key: uuidv4(),
+      content: (
+        <ResourceCard imagen="https://updates.theme-fusion.com/wp-content/uploads/2016/08/slider_revolution-1.png" />
+      ),
+    },
+    {
+      key: uuidv4(),
+      content: (
+        <ResourceCard imagen="https://updates.theme-fusion.com/wp-content/uploads/2019/01/pwa_880_660.jpg" />
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <h2>Mobile Resource Carousel</h2>
+      <ResourceCarousel
+        cards={cards}  
+        height="500px"
+        width="30%"
+        margin="0 auto"
+        offset={2}
+        showArrows={false}  
+      />
+    </div>
+  );
+}
+
+export default MobileRtop;

src/Components/ResourceCard.js

@@ -0,0 +1,37 @@
+import Styles from "../Stylesheets/ResourceCard.module.css";
+import React, { useState } from "react";
+import { useSpring, animated } from "react-spring";
+// import Button from "../Components/Button";
+
+function ResourceCard({ imagen }) {
+  const [show, setShown] = useState(false);
+
+  const props3 = useSpring({
+    transform: show ? "scale(1.03)" : "scale(1)",
+    boxShadow: show
+      ? "0 20px 25px rgb(0 0 0 / 25%)"
+      : "0 2px 10px rgb(0 0 0 / 8%)"
+  });
+  return (
+    <animated.div
+      className={Styles.card}
+      style={props3}
+      onMouseEnter={() => setShown(true)}
+      onMouseLeave={() => setShown(false)}
+    >
+      <img src={imagen} alt="" />
+      <h2>Title</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
+        volutpat.
+      </p>
+      {/* <div className={Styles.btnn}>
+        <Button text="Demo" />
+        <Button text="Code" />
+      </div> */}
+    </animated.div>
+  );
+}
+
+export default ResourceCard;

src/Components/ResourceCarousel.js

@@ -0,0 +1,34 @@
+import Carousel from "react-spring-3d-carousel";
+import { useState, useEffect } from "react";
+import { config } from "react-spring";
+
+export default function ResourceCarousel(props) {
+  const cards = props.cards || []; // Ensure cards is defined
+
+  const table = cards.map((element, index) => {
+    return { ...element, onClick: () => setGoToSlide(index) };
+  });
+
+  const [offsetRadius, setOffsetRadius] = useState(2);
+  const [showArrows, setShowArrows] = useState(false);
+  const [goToSlide, setGoToSlide] = useState(null);
+
+  useEffect(() => {
+    setOffsetRadius(props.offset);
+    setShowArrows(props.showArrows);
+  }, [props.offset, props.showArrows]);
+
+  return (
+    <div
+      style={{ width: props.width, height: props.height, margin: props.margin }}
+    >
+      <Carousel
+        slides={table} // Use table for slides
+        goToSlide={goToSlide}
+        offsetRadius={offsetRadius}
+        showNavigation={showArrows}
+        animationConfig={config.gentle}
+      />
+    </div>
+  );
+}

src/Pages/Resources.js

@@ -1,14 +1,35 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Rbottom from "../Components/Rbottom";
 import Rtop from '../Components/Rrtop.js';
+import MobileRtop from "../Components/MobileRtop.js";
 
 function Resources() {
+  const [isMobile, setIsMobile] = useState(false);
+
+
+  const handleResize = () => {
+    if (window.innerWidth <= 1000) {
+      setIsMobile(true);
+    } else {
+      setIsMobile(false);
+    }
+  };
+
+
+  useEffect(() => {
+    handleResize(); 
+    window.addEventListener("resize", handleResize); 
+
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   return (
     <>
-      <Rtop />
+      {isMobile ? <MobileRtop /> : <Rtop />}
       <Rbottom />
     </>
   );
 }
 
-export default Resources;
+export default Resources;

src/Stylesheets/Button.module.css

@@ -0,0 +1,12 @@
+.btn {
+    background-color: #0094ff;
+    color: #fff;
+    border: none;
+    outline: none;
+    font-size: 1.2rem;
+    border-radius: 10px;
+    padding: 11px 1rem;
+    /* margin: 0 0.5rem ; */
+    width: 7.5rem;
+  }
+

src/Stylesheets/ResourceCard.module.css

@@ -0,0 +1,35 @@
+.card {
+    display: flex;
+    flex-direction: column;
+    /* align-items: center; */
+    justify-content: center;
+    background-color: slategray;
+    width: 16rem;
+    height: fit-content;
+    padding: 0 2rem 2rem 2rem;
+    border-radius: 10px;
+  }
+
+  .card img {
+    margin-top: -20%;
+    width: 100%;
+    border-radius: 20px;
+  }
+
+  .card h2 {
+    margin: 0;
+    margin-top: 1rem;
+  }
+
+  .card p {
+    margin: 0;
+    margin-top: 0.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .card .btnn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+