packages

package.json

@@ -10,8 +10,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.5",
+    "@mui/material": "^7.3.5",
+    "@mui/styled-engine-sc": "^7.3.5",
+    "@tailwindcss/vite": "^4.1.17",
+    "axios": "^1.13.2",
+    "lucide-react": "^0.553.0",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-lazy-load-image-component": "^1.6.3",
+    "react-router-dom": "^7.9.6",
+    "styled-components": "^6.1.19",
+    "swiper": "^12.0.3",
+    "tailwindcss": "^4.1.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

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];

vite.config.js

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-
+import tailwindcss from '@tailwindcss/vite'
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss(),],
 })