Merge branch 'main' of github.com:thejumba/oss

package.json

@@ -29,6 +29,8 @@
   "dependencies": {
     "@faker-js/faker": "^8.2.0",
     "node-fetch": "^3.3.2",
+    "react-device-detect": "^2.2.3",
+    "react-multi-carousel": "^2.8.4",
     "zod": "^3.22.4"
   }
 }

www/package.json

@@ -12,6 +12,7 @@
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-slot": "^1.0.2",
     "@tabler/icons-react": "^2.40.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

www/src/app/globals.css

@@ -73,4 +73,8 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+.react-multi-carousel-dot--active > button {
+  background: white !important;
 }

www/src/app/page.tsx

@@ -5,7 +5,15 @@ import { OpenPositions } from "./positions";
 import { JumbaTeam } from "./team";
 import { TextReveal } from "./text-reveal";
 
+import { headers } from "next/headers";
+import { getSelectorsByUserAgent } from "react-device-detect";
+
 export default function Home() {
+  const { isMobile } = getSelectorsByUserAgent(
+    headers().get("user-agent") ?? ""
+  );
+  const deviceType = isMobile ? "mobile" : "desktop";
+
   const textToReveal =
     "Our mission is to advance the construction industry by leveraging technology to simplify processes, enhance transparency, and increase reliability and efficiency in order to make construction materials more accessible to people across Africa.";
 
@@ -14,7 +22,7 @@ export default function Home() {
       <Hero />
       <TextReveal block={textToReveal} />
       <JumbaOpenSource />
-      <JumbaTeam />
+      <JumbaTeam deviceType={deviceType} />
       <JumbaBenefits />
       <OpenPositions />