[docs] Add Joy Frames X web blocks template (#37203)

mui · May 11, 2023 · 845f795 · 845f795
1 parent 62e0748
commit 845f795
Show file tree

Hide file tree

Showing 27 changed files with 942 additions and 7 deletions.
diff --git a/docs/data/joy/getting-started/templates/TemplateCollection.js b/docs/data/joy/getting-started/templates/TemplateCollection.js
@@ -55,6 +55,10 @@ const AUTHORS = {
     name: 'MUI',
     link: 'https://twitter.com/MUI_hq',
   },
+  'framesx-web-blocks': {
+    name: 'MUI',
+    link: 'https://twitter.com/MUI_hq',
+  },
 };
 const DESIGNS = {
   'order-dashboard': {
@@ -65,10 +69,18 @@ const DESIGNS = {
     name: 'Untitled UI',
     link: 'https://www.figma.com/community/file/1020079203222518115/%E2%9D%96-Untitled-UI-%E2%80%93-FREE-Figma-UI-kit-and-design-system',
   },
+  'framesx-web-blocks': {
+    name: 'Frames X',
+    link: 'https://framesxfigma.buninux.com/',
+  },
 };
 
 export default function TemplateCollection() {
-  const newTemplates = ['profile-dashboard', 'order-dashboard', 'sign-in-side']; // Stay at the top of the page with `new` badge
+  const newTemplates = [
+    'framesx-web-blocks',
+    'profile-dashboard',
+    'order-dashboard',
+  ]; // Stay at the top of the page with `new` badge
   const { names: templateNames, map: templateMap } = sourceJoyTemplates();
   const names = [
     ...newTemplates,

diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
+
+import Box from '@mui/joy/Box';
+import CssBaseline from '@mui/joy/CssBaseline';
+import IconButton from '@mui/joy/IconButton';
+
+// Icons import
+import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
+import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
+
+import framesxTheme from './theme';
+import HeroLeft01 from './blocks/HeroLeft01';
+import HeroLeft02 from './blocks/HeroLeft02';
+import HeroLeft03 from './blocks/HeroLeft03';
+import HeroLeft04 from './blocks/HeroLeft04';
+import HeroLeft05 from './blocks/HeroLeft05';
+import HeroLeft06 from './blocks/HeroLeft06';
+import HeroLeft07 from './blocks/HeroLeft07';
+import HeroLeft08 from './blocks/HeroLeft08';
+import HeroLeft09 from './blocks/HeroLeft09';
+import HeroLeft10 from './blocks/HeroLeft10';
+
+function ColorSchemeToggle() {
+  const { mode, setMode } = useColorScheme();
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
+  return (
+    <IconButton
+      id="toggle-mode"
+      size="lg"
+      variant="soft"
+      color="neutral"
+      onClick={() => {
+        if (mode === 'light') {
+          setMode('dark');
+        } else {
+          setMode('light');
+        }
+      }}
+      sx={{
+        position: 'fixed',
+        zIndex: 999,
+        top: '1rem',
+        right: '1rem',
+        borderRadius: '50%',
+        boxShadow: 'sm',
+      }}
+    >
+      {mode === 'light' ? <DarkModeRoundedIcon /> : <LightModeRoundedIcon />}
+    </IconButton>
+  );
+}
+
+export default function TeamExample() {
+  return (
+    <CssVarsProvider disableTransitionOnChange theme={framesxTheme}>
+      <CssBaseline />
+      <ColorSchemeToggle />
+      <Box
+        sx={{
+          height: '100vh',
+          overflowY: 'scroll',
+          scrollSnapType: 'y mandatory',
+          '& > div': {
+            scrollSnapAlign: 'start',
+          },
+        }}
+      >
+        <HeroLeft01 />
+        <HeroLeft02 />
+        <HeroLeft03 />
+        <HeroLeft04 />
+        <HeroLeft05 />
+        <HeroLeft06 />
+        <HeroLeft07 />
+        <HeroLeft08 />
+        <HeroLeft09 />
+        <HeroLeft10 />
+      </Box>
+    </CssVarsProvider>
+  );
+}
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft01.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft01.tsx
@@ -0,0 +1,46 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Link from '@mui/joy/Link';
+import Typography from '@mui/joy/Typography';
+import ArrowForward from '@mui/icons-material/ArrowForward';
+import TwoSidedLayout from '../components/TwoSidedLayout';
+
+export default function HeroLeft01() {
+  return (
+    <TwoSidedLayout>
+      <Typography color="primary" fontSize="lg" fontWeight="lg">
+        The power to do more
+      </Typography>
+      <Typography
+        level="h1"
+        fontWeight="xl"
+        fontSize="clamp(1.875rem, 1.3636rem + 2.1818vw, 3rem)"
+      >
+        A large headlinerer about our product features & services
+      </Typography>
+      <Typography fontSize="lg" textColor="text.secondary" lineHeight="lg">
+        A descriptive secondary text placeholder. Use it to explain your business
+        offer better.
+      </Typography>
+      <Button size="lg" endDecorator={<ArrowForward fontSize="xl" />}>
+        Get Started
+      </Button>
+      <Typography>
+        Already a member? <Link fontWeight="lg">Sign in</Link>
+      </Typography>
+
+      <Typography
+        level="body3"
+        sx={{
+          position: 'absolute',
+          top: '2rem',
+          left: '50%',
+          transform: 'translateX(-50%)',
+        }}
+      >
+        HeroLeft01
+      </Typography>
+    </TwoSidedLayout>
+  );
+}
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft02.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft02.tsx
@@ -0,0 +1,102 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Input from '@mui/joy/Input';
+import Typography from '@mui/joy/Typography';
+import ArrowForward from '@mui/icons-material/ArrowForward';
+import Star from '@mui/icons-material/Star';
+import TwoSidedLayout from '../components/TwoSidedLayout';
+
+export default function HeroLeft02() {
+  return (
+    <TwoSidedLayout>
+      <Typography color="primary" fontSize="lg" fontWeight="lg">
+        The power to do more
+      </Typography>
+      <Typography
+        level="h1"
+        fontWeight="xl"
+        fontSize="clamp(1.875rem, 1.3636rem + 2.1818vw, 3rem)"
+      >
+        A large headlinerer about our product features & services
+      </Typography>
+      <Typography fontSize="lg" textColor="text.secondary" lineHeight="lg">
+        A descriptive secondary text placeholder. Use it to explain your business
+        offer better.
+      </Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          gap: 2,
+          my: 2,
+          flexWrap: 'wrap',
+          '& > *': { flex: 'auto' },
+        }}
+      >
+        <Input size="lg" placeholder="Sign in with email" />
+        <Button size="lg" endDecorator={<ArrowForward fontSize="xl" />}>
+          Get Started
+        </Button>
+      </Box>
+      <Box
+        sx={(theme) => ({
+          display: 'flex',
+          textAlign: 'center',
+          alignSelf: 'stretch',
+          columnGap: 4.5,
+          '& > *': {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            flex: 1,
+          },
+          [theme.breakpoints.up(834)]: {
+            textAlign: 'left',
+            '& > *': {
+              flexDirection: 'row',
+              gap: 1.5,
+              justifyContent: 'initial',
+              flexWrap: 'nowrap',
+              flex: 'none',
+            },
+          },
+        })}
+      >
+        <Box>
+          <Typography
+            fontSize="xl4"
+            fontWeight="lg"
+            endDecorator={<Star fontSize="xl4" sx={{ color: 'warning.300' }} />}
+          >
+            4.9
+          </Typography>
+          <Typography textColor="text.secondary">
+            Over <b>5k</b> positive <br /> customer reviews.
+          </Typography>
+        </Box>
+        <Box>
+          <Typography fontSize="xl4" fontWeight="lg">
+            2M
+          </Typography>
+          <Typography textColor="text.secondary">
+            Global <br /> Transactions.
+          </Typography>
+        </Box>
+      </Box>
+
+      <Typography
+        level="body3"
+        sx={{
+          position: 'absolute',
+          top: '2rem',
+          left: '50%',
+          transform: 'translateX(-50%)',
+        }}
+      >
+        HeroLeft02
+      </Typography>
+    </TwoSidedLayout>
+  );
+}
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft03.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft03.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import AvatarGroup from '@mui/joy/AvatarGroup';
+import Avatar from '@mui/joy/Avatar';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Typography from '@mui/joy/Typography';
+import ArrowForward from '@mui/icons-material/ArrowForward';
+import TwoSidedLayout from '../components/TwoSidedLayout';
+
+export default function HeroLeft03() {
+  return (
+    <TwoSidedLayout>
+      <Typography color="primary" fontSize="lg" fontWeight="lg">
+        The power to do more
+      </Typography>
+      <Typography
+        level="h1"
+        fontWeight="xl"
+        fontSize="clamp(1.875rem, 1.3636rem + 2.1818vw, 3rem)"
+      >
+        A large headlinerer about our product features & services
+      </Typography>
+      <Typography fontSize="lg" textColor="text.secondary" lineHeight="lg">
+        A descriptive secondary text placeholder. Use it to explain your business
+        offer better.
+      </Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 2,
+          my: 2,
+          '& > *': { flex: 'auto' },
+        }}
+      >
+        <Button size="lg" variant="outlined" color="neutral">
+          Learn More
+        </Button>
+        <Button size="lg" endDecorator={<ArrowForward fontSize="xl" />}>
+          Get Started
+        </Button>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+          gap: 2,
+          textAlign: 'left',
+          '& > *': {
+            flexShrink: 0,
+          },
+        }}
+      >
+        <AvatarGroup size="lg">
+          <Avatar />
+          <Avatar />
+          <Avatar />
+        </AvatarGroup>
+        <Typography textColor="text.secondary">
+          Join a community of over <b>10K</b> <br />
+          designers and developers.
+        </Typography>
+      </Box>
+
+      <Typography
+        level="body3"
+        sx={{
+          position: 'absolute',
+          top: '2rem',
+          left: '50%',
+          transform: 'translateX(-50%)',
+        }}
+      >
+        HeroLeft03
+      </Typography>
+    </TwoSidedLayout>
+  );
+}