space for more testimonials

mui · Sep 21, 2023 · a147034 · a147034
1 parent be0c265
commit a147034
Showing 1 changed file with 83 additions and 14 deletions.
diff --git a/docs/src/components/productJoyUI/JoyUITestimonial.tsx b/docs/src/components/productJoyUI/JoyUITestimonial.tsx
@@ -1,17 +1,75 @@
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/Unstable_Grid2';
 import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
 import ArrowForward from '@mui/icons-material/ArrowForward';
 import Section from 'docs/src/layouts/Section';
 import Link from 'docs/src/modules/components/Link';
 
+const additionalTestimonials = [
+  {
+    testimonial: `“Joy UI played a pivotal role in shaping the success of big-AGI. It turns heads with its stunning looks and makes other devs envious with its responsiveness, lightweight
+    footprint, comprehensive documentation, and polished API. Using Joy UI is a delight,
+    and the optimal React frontend choice.”`,
+    author: 'Enrico Ros',
+    role: 'Product Management',
+    avatar: '/static/branding/joy-ui/enricoros.png',
+    companyLogo: '/static/branding/joy-ui/big-agi-logo.svg',
+  },
+  {
+    testimonial: `“Joy UI played a pivotal role in shaping the success of big-AGI. It turns heads with its stunning looks and makes other devs envious with its responsiveness, lightweight
+    footprint, comprehensive documentation, and polished API. Using Joy UI is a delight,
+    and the optimal React frontend choice.”`,
+    author: 'Enrico Ros',
+    role: 'Product Management',
+    avatar: '/static/branding/joy-ui/enricoros.png',
+    companyLogo: '/static/branding/joy-ui/big-agi-logo.svg',
+  },
+  {
+    testimonial: `“Joy UI played a pivotal role in shaping the success of big-AGI. It turns heads with its stunning looks and makes other devs envious with its responsiveness, lightweight
+    footprint, comprehensive documentation, and polished API. Using Joy UI is a delight,
+    and the optimal React frontend choice.”`,
+    author: 'Enrico Ros',
+    role: 'Product Management',
+    avatar: '/static/branding/joy-ui/enricoros.png',
+    companyLogo: '/static/branding/joy-ui/big-agi-logo.svg',
+  },
+];
+
+interface TestimonialAuthorProps {
+  avatar: string;
+  author: string;
+  role: string;
+  companyLogo: string;
+}
+
+export function TestimonialAuthor({ avatar, author, role, companyLogo }: TestimonialAuthorProps) {
+  return (
+    <React.Fragment>
+      <Divider />
+      <Box sx={{ display: 'flex', gap: 1.5 }}>
+        <Avatar alt="" src={avatar} />
+        <div>
+          <Typography variant="body2" fontWeight="semiBold" color="text.primary">
+            {author}
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {role}
+          </Typography>
+        </div>
+        <Box component="img" src={companyLogo} alt="" sx={{ ml: 'auto' }} />
+      </Box>
+    </React.Fragment>
+  );
+}
+
 export default function BaseUITestimonial() {
   return (
     <Section>
-      <Grid container spacing={{ xs: 6, sm: 10 }} alignItems="center">
+      <Grid container alignItems="center" spacing={{ xs: 6, sm: 10 }} mb={6}>
         <Grid xs={12} sm={6}>
           <Box
             sx={(theme) => ({
@@ -63,21 +121,32 @@ export default function BaseUITestimonial() {
             footprint, comprehensive documentation, and polished API. Using Joy UI is a delight, and
             the optimal React frontend choice.”
           </Typography>
-          <Divider />
-          <Box sx={{ display: 'flex', gap: 1 }}>
-            <Avatar alt="" src="/static/branding/joy-ui/enricoros.png" />
-            <Box sx={{ flex: 1 }}>
-              <Typography variant="body2" fontWeight="semiBold" color="text.primary">
-                Enrico Ros
-              </Typography>
-              <Typography variant="body2" color="text.secondary">
-                Director of Product Management
-              </Typography>
-            </Box>
-            <Box component="img" src="/static/branding/joy-ui/big-agi-logo.svg" alt="" />
-          </Box>
+          <TestimonialAuthor
+            author="Enrico Ros"
+            role="Director of Product Management"
+            avatar="/static/branding/joy-ui/enricoros.png"
+            companyLogo="/static/branding/joy-ui/big-agi-logo.svg"
+          />
         </Grid>
       </Grid>
+      <Grid container spacing={3}>
+        {additionalTestimonials.map(({ testimonial, author, role, avatar, companyLogo }) => (
+          <Grid key={author} xs={12} md={4}>
+            <Paper
+              variant="outlined"
+              sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 3 }}
+            >
+              <Typography color="text.secondary">{testimonial}</Typography>
+              <TestimonialAuthor
+                author={author}
+                role={role}
+                avatar={avatar}
+                companyLogo={companyLogo}
+              />
+            </Paper>
+          </Grid>
+        ))}
+      </Grid>
     </Section>
   );
 }