diff --git a/src/common/components/FeaturedSlider/flickity.css b/src/common/components/FeaturedSlider/flickity.css
deleted file mode 100644
index 75a8e620a8b..00000000000
--- a/src/common/components/FeaturedSlider/flickity.css
+++ /dev/null
@@ -1,156 +0,0 @@
-/*! Flickity v2.1.2
-https://flickity.metafizzy.co
----------------------------------------------- */
-
-.flickity-enabled {
-  position: relative;
-  background-color: var(--ifm-color-emphasis-0);
-  border-bottom: 1px solid var(--ifm-color-emphasis-200);
-  margin-bottom: 4rem;
-}
-
-:root[data-theme='dark'] .flickity-enabled {
-  background: linear-gradient(
-    rgba(41, 56, 88, 0.3),
-    rgba(19, 31, 55, 0.3)
-  ) !important;
-}
-
-.flickity-enabled:focus {
-  outline: none;
-}
-
-.flickity-viewport {
-  overflow: hidden;
-  position: relative;
-  height: 100%;
-}
-
-.flickity-slider {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
-/* draggable */
-
-.flickity-enabled.is-draggable {
-  -webkit-tap-highlight-color: transparent;
-  tap-highlight-color: transparent;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.flickity-enabled.is-draggable .flickity-viewport {
-  cursor: move;
-  cursor: -webkit-grab;
-  cursor: grab;
-}
-
-.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
-  cursor: -webkit-grabbing;
-  cursor: grabbing;
-}
-
-/* ---- flickity-button ---- */
-
-.flickity-button {
-  position: absolute;
-  background: hsla(0, 0%, 100%, 0.75);
-  border: none;
-  color: #333;
-}
-
-.flickity-button:hover {
-  background: white;
-  cursor: pointer;
-}
-
-.flickity-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 5px #19f;
-}
-
-.flickity-button:active {
-  opacity: 0.6;
-}
-
-.flickity-button:disabled {
-  opacity: 0.3;
-  cursor: auto;
-  /* prevent disabled button from capturing pointer up event. #716 */
-  pointer-events: none;
-}
-
-.flickity-button-icon {
-  fill: #333;
-}
-
-/* ---- previous/next buttons ---- */
-
-.flickity-prev-next-button {
-  top: 50%;
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  /* vertically center */
-  transform: translateY(-50%);
-}
-
-.flickity-prev-next-button.previous {
-  left: 10px;
-}
-.flickity-prev-next-button.next {
-  right: 10px;
-}
-/* right to left */
-.flickity-rtl .flickity-prev-next-button.previous {
-  left: auto;
-  right: 10px;
-}
-.flickity-rtl .flickity-prev-next-button.next {
-  right: auto;
-  left: 10px;
-}
-
-.flickity-prev-next-button .flickity-button-icon {
-  position: absolute;
-  left: 20%;
-  top: 20%;
-  width: 60%;
-  height: 60%;
-}
-
-/* ---- page dots ---- */
-
-.flickity-page-dots {
-  position: absolute;
-  width: 100%;
-  bottom: -25px;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  text-align: center;
-  line-height: 1;
-}
-
-.flickity-rtl .flickity-page-dots {
-  direction: rtl;
-}
-
-.flickity-page-dots .dot {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  margin: 0 8px;
-  background: var(--ifm-color-primary-lightest);
-  border-radius: 50%;
-  opacity: 0.25;
-  cursor: pointer;
-}
-
-.flickity-page-dots .dot.is-selected {
-  opacity: 1;
-}
diff --git a/src/common/components/FeaturedSlider/index.tsx b/src/common/components/FeaturedSlider/index.tsx
deleted file mode 100644
index 449ecd80021..00000000000
--- a/src/common/components/FeaturedSlider/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react';
-import Flickity from 'react-flickity-component';
-import Link from '@docusaurus/Link';
-import FeaturedSlides from './slides.json';
-import './flickity.css';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-
-const flickityOptions = {
-  initialIndex: 0,
-  autoPlay: true,
-  adaptiveHeight: true,
-  wrapAround: true,
-  groupCells: false,
-  fade: true,
-};
-
-export default function FeaturedSlider() {
-  const RenderSlides: () => void = () => {
-    return FeaturedSlides.map((slide) => (
-      <div key={slide.title} className={clsx(styles.slide__container)}>
-        <div
-          key={slide.title}
-          className={clsx(styles.slide)}
-          style={{
-            backgroundColor: 'transparent',
-            backgroundImage: ` url(${slide.imagePath})`,
-            backgroundSize: '45%',
-            backgroundRepeat: 'no-repeat',
-            backgroundPosition: 'bottom right',
-          }}
-        >
-          <div className={clsx(styles.slide__section)}>
-            <h1 className={clsx(styles.slide__header)}>{slide.title}</h1>
-            <p className={clsx(styles.slide__description)}>
-              {slide.description}
-            </p>
-            <div className={clsx(styles.slide__buttons)}>
-              {slide.outlinedButton && (
-                <Link
-                  to={slide.outlinedButton.url}
-                  className={clsx(
-                    styles.slide__button,
-                    'button',
-                    'button--outline',
-                    'button--primary',
-                  )}
-                >
-                  {slide.outlinedButton.buttonText}
-                </Link>
-              )}
-              {slide.solidButton && (
-                <Link
-                  to={slide.solidButton.url}
-                  className={clsx(
-                    styles.slide__button,
-                    'button',
-                    'button--primary',
-                  )}
-                >
-                  {slide.solidButton.buttonText}
-                </Link>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    ));
-  };
-
-  return (
-    <Flickity
-      options={flickityOptions} // takes flickity options {}
-    >
-      <RenderSlides />
-    </Flickity>
-  );
-}
diff --git a/src/common/components/FeaturedSlider/slides.json b/src/common/components/FeaturedSlider/slides.json
deleted file mode 100644
index 48a5b6c232b..00000000000
--- a/src/common/components/FeaturedSlider/slides.json
+++ /dev/null
@@ -1,24 +0,0 @@
-[
-  {
-    "title": "The complete reference for IOTA and Shimmer",
-    "description": "Build apps capable of taking millions of users on journeys they've never been on before. Simple. Scalable. Secure.",
-    "outlinedButton": {
-      "buttonText": "Introduction",
-      "url": "/get-started/introduction"
-    },
-    "solidButton": {
-      "buttonText": "Start building",
-      "url": "/iota-sdk/welcome"
-    },
-    "imagePath": "/img/homepage/header.svg"
-  },
-  {
-    "title": "Send IOTA Tokens with Javascript",
-    "description": "Learn how to create your seed, address, send IOTA Tokens and retrieve your balance in the Devnet.",
-    "imagePath": "/img/homepage/resources_bot.svg",
-    "solidButton": {
-      "buttonText": "Start tutorial",
-      "url": "/tutorials/send-iota-tokens-with-javascript"
-    }
-  }
-]
diff --git a/src/common/components/FeaturedSlider/styles.module.css b/src/common/components/FeaturedSlider/styles.module.css
deleted file mode 100644
index 77eadffa45f..00000000000
--- a/src/common/components/FeaturedSlider/styles.module.css
+++ /dev/null
@@ -1,60 +0,0 @@
-.slide__container {
-  width: 100%;
-  align-content: center;
-  justify-content: space-between;
-  row-gap: 1rem;
-  padding: 0 8rem;
-  display: flex;
-}
-
-.slide {
-  width: 100%;
-  max-width: var(--ifm-container-width);
-  margin: auto;
-}
-
-.slide {
-  background-color: var(--ifm-color-emphasis-0);
-}
-
-@media (max-width: 996px) {
-  .slide {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    width: 100%;
-    background-repeat: no-repeat;
-    background-position: right bottom;
-  }
-}
-@media (max-width: 720px) {
-  .slide {
-    background: none !important;
-  }
-}
-
-.slide__section {
-  max-width: 25rem;
-  margin: 6rem 0;
-}
-
-.slide__header {
-  font-size: 40px;
-}
-
-.slide__buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.slide__description {
-  /*height: 8rem;*/
-}
-
-.slide__button {
-  flex: 1 1 0;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  max-width: 12rem;
-}
diff --git a/src/components/HomeLayout/index.tsx b/src/components/HomeLayout/index.tsx
index d322554c0be..e9f3c6f7e63 100644
--- a/src/components/HomeLayout/index.tsx
+++ b/src/components/HomeLayout/index.tsx
@@ -22,7 +22,6 @@ import {
 } from '@site/src/common/icons';
 import CoreLibrariesSection from './CoreLibrariesSection';
 import AppLibrariesSection from './AppLibrariesSection';
-import FeaturedSlider from '@site/src/common/components/FeaturedSlider';
 
 interface HomepageSectionProps {
   header?: string;
@@ -63,7 +62,31 @@ export default function HomeLayout() {
   return (
     <Layout description={siteConfig.tagline}>
       <div className='homepage'>
-        <FeaturedSlider />
+        <HomepageSection className='homepage__section--intro'>
+          <div className='intro'>
+            <div className='intro__section'>
+              <h1 className='intro__header'>{siteConfig.tagline}</h1>
+              <p className='intro__description'>
+                Build apps capable of taking millions of users on journeys
+                they&apos;ve never been on before. Simple. Scalable. Secure.
+              </p>
+              <div className='intro__buttons'>
+                <Link
+                  to='/get-started/introduction'
+                  className='intro__button button button--outline button--primary'
+                >
+                  Introduction
+                </Link>
+                <Link
+                  to='/build/welcome'
+                  className='intro__button button button--primary'
+                >
+                  Start building
+                </Link>
+              </div>
+            </div>
+          </div>
+        </HomepageSection>
         <HomepageSection header='Use IOTA'>
           <div className='about__cards'>
             <Link