testimonials animation unidirectional

Author: ArunTeltia

src/views/pages/common/Recommendations.js

@@ -201,6 +201,64 @@ export default function Recommendations({ recommendationsImages }) {
               </GridListTile>
             );
           })}
+          {recommendations.slice(0, 4).map((recommendation, index) => {
+            return (
+              <GridListTile
+                className="recommendation_slide"
+                key={index}
+                style={{
+                  margin: '20px',
+                  borderRadius: '5px',
+                  height: 'auto',
+                  overflow: 'hidden',
+                  boxShadow: '0px 0px 14px rgba(0, 0, 0, 0.1)'
+                }}
+              >
+                <Card className={classes.card}>
+                  <CardContent className={classes.cardContent}>
+                    <img
+                      alt=""
+                      width="70px"
+                      src={
+                        index % 2 === 0
+                          ? '/static/reviews/high.png'
+                          : '/static/reviews/low.png'
+                      }
+                    />
+                  </CardContent>
+
+                  <CardContent className={classes.cardContent}>
+                    <Box display="flex" justifyContent="center">
+                      <Typography
+                        variant="body2"
+                        className={classes.recommenderDetail}
+                      >
+                        <Box m={1}>{recommendation.text}</Box>
+                      </Typography>
+                    </Box>
+                  </CardContent>
+
+                  <CardContent className={classes.cardContent}>
+                    <Box display="flex" alignItems="center">
+                      <img
+                        className={classes.avatarLarge}
+                        alt=""
+                        width="50px"
+                        src={recommendation['avatar']}
+                      />
+                      <Box display="flex" flexDirection="column">
+                        <Typography>
+                          <Box fontWeight="fontWeightBold">
+                            {recommendation.name}
+                          </Box>
+                        </Typography>
+                      </Box>
+                    </Box>
+                  </CardContent>
+                </Card>
+              </GridListTile>
+            );
+          })}
         </GridList>
       </Grid>
     </Grid>

src/views/pages/common/index.css

@@ -30,6 +30,6 @@
 }
 @keyframes slideshow {
     0%    { left: 0%; }
-    50%  { left: -150%; }
-    100%  { left: 0%; }
+    100%  { left: -250%; }
+    
   }