diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 53503493..ebe87699 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -38,6 +38,7 @@ "react-ga4": "^2.1.0", "react-helmet-async": "^2.0.5", "react-hook-form": "^7.53.2", + "react-intersection-observer": "^9.15.1", "react-router-dom": "^7.0.1", "short-uuid": "^5.2.0", "utility-types": "^3.11.0", diff --git a/apps/frontend/src/assets/ai-agent.svg b/apps/frontend/src/assets/ai-agent.svg new file mode 100644 index 00000000..6c1b1b2c --- /dev/null +++ b/apps/frontend/src/assets/ai-agent.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/frontend/src/assets/brainstorm.svg b/apps/frontend/src/assets/brainstorm.svg new file mode 100644 index 00000000..2e39b7d4 --- /dev/null +++ b/apps/frontend/src/assets/brainstorm.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/frontend/src/assets/budget.svg b/apps/frontend/src/assets/budget.svg new file mode 100644 index 00000000..6611c404 --- /dev/null +++ b/apps/frontend/src/assets/budget.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/frontend/src/assets/calendar.svg b/apps/frontend/src/assets/calendar.svg new file mode 100644 index 00000000..7476d05d --- /dev/null +++ b/apps/frontend/src/assets/calendar.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/frontend/src/assets/decision.svg b/apps/frontend/src/assets/decision.svg new file mode 100644 index 00000000..42e11e71 --- /dev/null +++ b/apps/frontend/src/assets/decision.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/frontend/src/assets/delegate.svg b/apps/frontend/src/assets/delegate.svg new file mode 100644 index 00000000..2833b559 --- /dev/null +++ b/apps/frontend/src/assets/delegate.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/frontend/src/assets/election.svg b/apps/frontend/src/assets/election.svg new file mode 100644 index 00000000..877b1a51 --- /dev/null +++ b/apps/frontend/src/assets/election.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/frontend/src/assets/expenses.svg b/apps/frontend/src/assets/expenses.svg new file mode 100644 index 00000000..38d1c4a7 --- /dev/null +++ b/apps/frontend/src/assets/expenses.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/frontend/src/assets/moderation.svg b/apps/frontend/src/assets/moderation.svg new file mode 100644 index 00000000..37a7fae6 --- /dev/null +++ b/apps/frontend/src/assets/moderation.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/frontend/src/assets/permission.svg b/apps/frontend/src/assets/permission.svg new file mode 100644 index 00000000..c1624c86 --- /dev/null +++ b/apps/frontend/src/assets/permission.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/apps/frontend/src/assets/rainbow.svg b/apps/frontend/src/assets/rainbow.svg new file mode 100644 index 00000000..f08dd2c2 --- /dev/null +++ b/apps/frontend/src/assets/rainbow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/frontend/src/assets/roadmap.svg b/apps/frontend/src/assets/roadmap.svg new file mode 100644 index 00000000..9562a138 --- /dev/null +++ b/apps/frontend/src/assets/roadmap.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/frontend/src/pages/Home/ContactSection.tsx b/apps/frontend/src/pages/Home/ContactSection.tsx new file mode 100644 index 00000000..4b9c49a2 --- /dev/null +++ b/apps/frontend/src/pages/Home/ContactSection.tsx @@ -0,0 +1,71 @@ +import MailOutlineIcon from "@mui/icons-material/MailOutline"; +import { Box, Button, Fade, Paper, Typography } from "@mui/material"; +import { useInView } from "react-intersection-observer"; +export const ContactSection = () => { + const { ref, inView } = useInView({ + threshold: 0, + }); + + return ( + + + ({ + [theme.breakpoints.down("sm")]: { + width: "90%", + height: "90%", + flexDirection: "column", + }, + + display: "flex", + flexDirection: "row", + padding: "20px 8px", + gap: "12px", + height: "200px", + alignItems: "center", + justifyContent: "space-around", + border: "1px solid #EADDFF", + })} + > + ({ + width: "50%", + padding: "12px", + [theme.breakpoints.down("sm")]: { + width: "100%", + textAlign: "center", + }, + })} + > + {" "} + If you're a builder, researcher, investor, or member of an online team, we'd + love to hear from you.{" "} + + + + + + ); +}; diff --git a/apps/frontend/src/pages/Home/InfoBoxesSection.tsx b/apps/frontend/src/pages/Home/InfoBoxesSection.tsx index 9f256359..8538a436 100644 --- a/apps/frontend/src/pages/Home/InfoBoxesSection.tsx +++ b/apps/frontend/src/pages/Home/InfoBoxesSection.tsx @@ -1,8 +1,8 @@ import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; import { useEffect, useRef, useState } from "react"; +import aiAgentUrl from "@/assets/ai-agent.svg"; import discordUrl from "@/assets/discord-logo-blue.svg"; -import emailUrl from "@/assets/email.svg"; import myceliumUrl from "@/assets/mycelium.svg"; import processUrl from "@/assets/process.svg"; import slackUrl from "@/assets/slack-logo.svg"; @@ -12,7 +12,7 @@ const infoBoxes = [ { title: "The Ize process language", description: - "Ize can represent any kind of online collective process. This can range from simple decisions to multi-step AI-assisted sensemaking to collective management of shared resources. These processes can span across web2/web3 idenities and tools.", + "Ize can represent any kind of online collective process. This can include decisions, synthesizing opinions, and controlling access to shared resources. These processes span the boundaries of teams, tools, and web2/web3 identities.", reverse: false, visual: ( ), }, { - title: "Native chat integrations", + title: "Bottoms-up collaboration", description: - "Your team can participate in Ize processes wherever your team works - Slack, Telegram, Discord, SMS, etc", + "In Ize, everything is a collective process. There is no concept of an admin in Ize. Even a evolving process itself happens through a collective process.", reverse: true, visual: ( - - - - - + /> ), }, { - title: "Bottoms-up collaboration", + title: "The AI agent <> team interface", description: - "In Ize, everything is collective process. There is no concept of an admin in Ize. Even evolving process, itself, happens through collective process. ", + "With Ize, teams can both govern AI agents and integrate AI agents into their collective processes.", reverse: false, visual: ( ), }, + { + title: "Native chat integrations", + description: + "Your team can participate in Ize processes wherever your team works - Slack, Telegram, Discord, SMS, etc", + reverse: true, + visual: ( + + + + + {/* */} + + ), + }, ]; const InfoBox = ({ @@ -117,9 +123,11 @@ const InfoBox = ({ maxWidth: 800, // Flex child will take equal space on larger screens. flex: 1, + gap: 5, display: "flex", flexDirection: reverse ? "row-reverse" : "reverse", justifyContent: "space-between", + alignItems: "center", transition: "opacity 0.2s linear, transform 0.2s linear", })} style={{ @@ -134,7 +142,7 @@ const InfoBox = ({ display: "flex", flexDirection: "column", gap: "14px", - width: "70%", + // width: "100%", [theme.breakpoints.down("sm")]: { width: "100%", }, @@ -176,7 +184,7 @@ export const InfoBoxesSection: React.FC = () => { // Each box is assigned a segment of progress (1/3 each). const getOpacityForBox = (index: number) => { - const segment = 1 / 3; + const segment = 1 / 4; const start = index * segment; const normalized = (progress - start) / segment; return Math.max(0, Math.min(1, normalized)); @@ -193,15 +201,16 @@ export const InfoBoxesSection: React.FC = () => { display: "flex", alignItems: "center", justifyContent: "center", - gap: 4, + gap: 3, px: 4, paddingTop: 8, paddingBottom: 8, + // height: "100vh", }} > {infoBoxes.map((content, index) => ( { const theme = useTheme(); const navigate = useNavigate(); const isSmallScreenSize = useMediaQuery(theme.breakpoints.down("sm")); return ( -
+ ({ height: "25vh", @@ -109,65 +110,9 @@ const UnauthenticatedHome: React.FC = () => { - - - ({ - [theme.breakpoints.down("sm")]: { - width: "90%", - height: "90%", - flexDirection: "column", - }, - - display: "flex", - flexDirection: "row", - padding: "20px 8px", - gap: "12px", - height: "200px", - alignItems: "center", - justifyContent: "space-around", - border: "1px solid #EADDFF", - })} - > - ({ - width: "50%", - padding: "12px", - [theme.breakpoints.down("sm")]: { - width: "100%", - textAlign: "center", - }, - })} - > - {" "} - If you're a builder, investor, or member of a distributed online team, we'd - love to hear from you.{" "} - - - - -
+ + + ); }; diff --git a/apps/frontend/src/pages/Home/UseCasesSection.tsx b/apps/frontend/src/pages/Home/UseCasesSection.tsx new file mode 100644 index 00000000..d63dee03 --- /dev/null +++ b/apps/frontend/src/pages/Home/UseCasesSection.tsx @@ -0,0 +1,114 @@ +import { Box, Fade, Typography } from "@mui/material"; +import { useInView } from "react-intersection-observer"; + +import aiAgentUrl from "@/assets/ai-agent.svg"; +import brainstormUrl from "@/assets/brainstorm.svg"; +import budgetUrl from "@/assets/budget.svg"; +import calendarUrl from "@/assets/calendar.svg"; +import decisionUrl from "@/assets/decision.svg"; +import delegateUrl from "@/assets/delegate.svg"; +import electionUrl from "@/assets/election.svg"; +import expensesUrl from "@/assets/expenses.svg"; +import moderationUrl from "@/assets/moderation.svg"; +import permissionUrl from "@/assets/permission.svg"; +import rainbowUrl from "@/assets/rainbow.svg"; +import roadmapUrl from "@/assets/roadmap.svg"; + +interface UseCase { + title: string; + imgUrl: string; +} + +const useCases: UseCase[] = [ + { title: "Synthesize opinions", imgUrl: brainstormUrl }, + { title: "Decide on proposals", imgUrl: decisionUrl }, + { title: "Manage shared calendars", imgUrl: calendarUrl }, + { title: "Govern AI agents", imgUrl: aiAgentUrl }, + { title: "Distribute communal funds", imgUrl: expensesUrl }, + { title: "Prioritize roadmaps", imgUrl: roadmapUrl }, + { title: "Cross-org coordination", imgUrl: budgetUrl }, + { title: "Moderate community tools", imgUrl: moderationUrl }, + { title: "Elect leaders", imgUrl: electionUrl }, + { title: "Delegate authority", imgUrl: delegateUrl }, + { title: "Grant access", imgUrl: permissionUrl }, + /// TODO Cross-organizational collaboration + { title: "Endless possibilities...", imgUrl: rainbowUrl }, +]; + +export const UseCase = ({ title, imgUrl }: UseCase) => { + return ( + + + + {title} + + + ); +}; + +export const UseCasesSection = () => { + const { ref, inView } = useInView({ + threshold: 0, + }); + console.log("inView", inView); + + return ( + + + + Build any kind of collective process.... + + + {useCases.map((useCase, index) => ( + + ))} + + + + ); +}; diff --git a/package-lock.json b/package-lock.json index 40f15d6a..05f52dcd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -324,6 +324,7 @@ "react-ga4": "^2.1.0", "react-helmet-async": "^2.0.5", "react-hook-form": "^7.53.2", + "react-intersection-observer": "^9.15.1", "react-router-dom": "^7.0.1", "short-uuid": "^5.2.0", "utility-types": "^3.11.0", @@ -14563,6 +14564,20 @@ "react": "^16.8.0 || ^17 || ^18 || ^19" } }, + "node_modules/react-intersection-observer": { + "version": "9.15.1", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz", + "integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==", + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",