packages

src/App.jsx

@@ -28,6 +28,10 @@ function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
+
+       <h1 class="text-3xl font-bold underline">
+    Hello world!
+  </h1>
     </>
   )
 }

src/components/common/LazyImage.jsx

@@ -0,0 +1,13 @@
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import "react-lazy-load-image-component/src/effects/blur.css";
+
+export default function LazyImage({ src, alt, className }) {
+  return (
+    <LazyLoadImage
+      src={src}
+      alt={alt}
+      effect="blur"
+      className={className}
+    />
+  );
+}

src/index.css

@@ -1,3 +1,6 @@
+@import "tailwindcss";
+
+
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

src/lib/icons.js

@@ -0,0 +1,10 @@
+import * as MuiIcons from "@mui/icons-material";
+
+const Icons = {};
+
+// Loop through all MUI icons and store them in an object
+Object.keys(MuiIcons).forEach((key) => {
+  Icons[key] = MuiIcons[key];
+});
+
+export default Icons;

src/lib/swiperSetup.js

@@ -0,0 +1,7 @@
+// Common Swiper setup
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
+
+export const swiperModules = [Navigation, Pagination, Autoplay];