Update: Next Prev button added

src/components/Carousel/DynamicSlides/SplideButtons/index.tsx

@@ -0,0 +1,31 @@
+import IconButton from '@components/Button/IconButton';
+import ArrowMoveIcon from '@icons/utility/ArrowMoveIcon';
+import { alpha, styled } from '@mui/material';
+import React from 'react';
+
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+
+  [theme.breakpoints.down('md')]: {
+    display: 'none' + ' !important',
+  },
+}));
+
+const StyledMoveIcon = styled(ArrowMoveIcon)(({ theme }) => ({
+  height: '1.25rem' + ' !important',
+  width: '1.25rem' + ' !important',
+}));
+
+const SplideButtons = () => {
+  return (
+    <div className="splide__arrows">
+      <StyledIconButton className="splide__arrow splide__arrow--prev">
+        <StyledMoveIcon />
+      </StyledIconButton>
+      <StyledIconButton className="splide__arrow splide__arrow--next">
+        <StyledMoveIcon />
+      </StyledIconButton>
+    </div>
+  )
+};
+
+export default SplideButtons;

src/components/Carousel/DynamicSlides/UnitSlide/CarouselDataCard/index.tsx

@@ -1,5 +1,4 @@
-import { CarouselData } from "@components/Carousel/carouselData";
-import { CarouselCardProps, CarouselDataCardProps } from "@interfaces/CardProps";
+import { CarouselDataCardProps } from "@interfaces/CardProps";
 import { Card, Typography, alpha, styled } from "@mui/material";
 import { navbar } from "@theme/constants";
 import React from "react";
@@ -43,9 +42,9 @@ const CarouselDataCard: React.FC<CarouselDataCardProps> = ({
       component={link ? 'a' : 'div'}
       href={link}
     >
-      <Tagline variant="body2">{tagline}</Tagline>
+      <Tagline variant="body1">{tagline}</Tagline>
       <Title variant="h2">{title}</Title>
-      <Description variant="body1">{description}</Description>
+      <Description variant="body2">{description}</Description>
       <ProgressBar />
     </Card>
   )
@@ -59,6 +58,7 @@ export default styled(CarouselDataCard)<CarouselDataCardProps>(({ theme }) => ({
   height: 'max-content',
   width: 'max-content',
   minWidth: '25rem',
+  maxWidth: '30rem',
   padding: theme.Spaces.md,
   backgroundColor: alpha(theme.palette.background.default, 0.65),
   backdropFilter: 'blur(0.125rem)',
@@ -70,4 +70,9 @@ export default styled(CarouselDataCard)<CarouselDataCardProps>(({ theme }) => ({
     duration: 'shortest',
   }),
   transform: 'translateY(200%)',
+
+  [theme.breakpoints.down('md')]: {
+    left: '50%',
+    transform: 'translate(-50%, 200%)',
+  },
 }));

src/components/Carousel/DynamicSlides/UnitSlide/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import Image from 'next/image';
-import { CarouselData } from '../../carouselData';
 import { styled } from '@mui/material';
 import { SplideSlide } from '@splidejs/react-splide';
 import CarouselDataCard from './CarouselDataCard';
@@ -53,8 +52,12 @@ const UnitSlide: React.FC<UnitSlideProps> = ({
   );
 };
 
-export default styled(UnitSlide)(() => ({
+export default styled(UnitSlide)(({ theme }) => ({
   '&.is-active.is-visible .carousel-data-card': {
     transform: 'translateY(0%)',
+
+    [theme.breakpoints.down('md')]: {
+      transform: 'translate(-50%, 0%)',
+    },
   },
 }));

src/components/Carousel/DynamicSlides/index.tsx

@@ -6,6 +6,7 @@ import '@splidejs/splide/dist/css/themes/splide-default.min.css';
 import ProgressBarPlaceholder from './ProgressBarPlaceholder';
 import theme from '@theme/index';
 import { SplideInstance } from '@interfaces/SplideInterface';
+import SplideButtons from './SplideButtons';
 
 const options: SplideProps["options"] = {
   type: 'loop',
@@ -15,11 +16,17 @@ const options: SplideProps["options"] = {
   drag: 'free',
   snap: true,
   pagination: false,
-  autoplay: true,
+  autoplay: false,
   resetProgress: false,
   pauseOnHover: false,
   gap: theme.Spaces.md,
-  padding: '9.5rem',
+  padding: theme.Spaces.mega,
+
+  breakpoints: {
+    1024: {
+      padding: '0',
+    },
+  },
 };
 
 
@@ -49,6 +56,7 @@ const DynamicSlides: React.FC = () => {
           </React.Fragment>
         ))}
       </SplideTrack>
+      <SplideButtons />
       <ProgressBarPlaceholder />
     </Splide>
   );

src/components/Carousel/carouselData.ts

@@ -13,7 +13,7 @@ const carouselData : CarouselData[] = [
     id: 1,
     tagline: "FOR INDIA",
     title: "Discover Bharat",
-    description: "This is the first slide",
+    description: "This is an Indian family of informational, educational and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by Global Societies.",
     image: "/images/home/container-1/slide-1.jpg",
     pauseTime: 5000,
     link: "/",
@@ -22,7 +22,7 @@ const carouselData : CarouselData[] = [
     id: 2,
     tagline: "FOR INDIA",
     title: "Discover Bharat",
-    description: "This is the second slide",
+    description: "This is an Indian family of informational, educational and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by Global Societies.",
     image: "/images/home/container-1/slide-2.jpg",
     pauseTime: 10000,
     link: "/",
@@ -31,7 +31,7 @@ const carouselData : CarouselData[] = [
     id: 3,
     tagline: "FOR INDIA",
     title: "Discover Bharat",
-    description: "This is the third slide",
+    description: "This is an Indian family of informational, educational and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by Global Societies.",
     image: "/images/home/container-1/slide-3.jpg",
     pauseTime: 5000,
     link: "/",
@@ -40,7 +40,7 @@ const carouselData : CarouselData[] = [
     id: 4,
     tagline: "FOR INDIA",
     title: "Discover Bharat",
-    description: "This is the fourth slide",
+    description: "This is an Indian family of informational, educational and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by Global Societies.",
     image: "/images/home/container-1/slide-4.jpg",
     pauseTime: 8000,
     link: "/",
@@ -49,7 +49,7 @@ const carouselData : CarouselData[] = [
     id: 5,
     tagline: "FOR INDIA",
     title: "Discover Bharat",
-    description: "This is the fifth slide",
+    description: "This is an Indian family of informational, educational and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by Global Societies.",
     image: "/images/home/container-1/slide-5.jpg",
     pauseTime: 4000,
     link: "/",
@@ -58,7 +58,7 @@ const carouselData : CarouselData[] = [
     id: 6,
     tagline: "FOR INDIA",
     title: "Discover Bharat",
-    description: "This is the sixth slide",
+    description: "This is an Indian family of informational, educational and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by Global Societies.",
     image: "/images/home/container-1/slide-6.jpg",
     pauseTime: 7000,
     link: "/",

src/icons/utility/ArrowIcon.tsx

@@ -34,4 +34,4 @@ const ArrowIcon = ({ hovered, ...props }: UtilityIconProps) => {
   )
 }
 
-export default ArrowIcon
+export default ArrowIcon;

src/icons/utility/ArrowMoveIcon.tsx

@@ -0,0 +1,20 @@
+import { UtilityIconProps } from '@interfaces/SVGProps';
+import svgCommonProps from '@utils/svgCommonProps';
+import React from 'react';
+
+const ArrowMoveIcon = ({ hovered, ...props }: UtilityIconProps) => {
+  return (
+    <svg
+      {...svgCommonProps}
+      data-name="Arrow Move Icon"
+      width="50"
+      height="50"
+      viewBox="0 0 50 50"
+      {...props}
+    >
+      <path d="M13.6576,40.40458H7.98276a.96039.96039,0,0,1-1.0356-.86075V11.17955a.96039.96039,0,0,1,1.0356-.86075H13.6576a.96039.96039,0,0,1,1.0356.86075V39.54383A.96039.96039,0,0,1,13.6576,40.40458ZM48.93976,25.36167,32.83049,41.47094,30.661,39.30141,43.06667,26.89576H20.49136V23.82759H43.06667L30.661,11.422l2.16953-2.16953Z" />
+    </svg>
+  )
+};
+
+export default ArrowMoveIcon;

src/theme/Breakpoints/index.tsx

@@ -1,5 +1,3 @@
-import { Breakpoints as MuiBreakpoints } from '@mui/material';
-
 interface Values {
   xs: number;
   sm: number;

src/theme/Spaces/index.tsx

@@ -6,6 +6,7 @@ export interface Spaces {
   lg: string;
   xl: string;
   xxl: string;
+  mega: string;
 };
 
 export const spaces: Spaces = {
@@ -16,4 +17,5 @@ export const spaces: Spaces = {
   lg: '1.5rem',
   xl: '2rem',
   xxl: '2.5rem',
+  mega: '9.5rem',
 };